UI5 Javascript Online Editor

[pinakipatra]

Hi Folks,
There has always been a need to have a lightweight editor where we can see the layouts using UI5 JavaScript Controls.
The below mentioned editor acts like a lightweight tool where we can create and view the affects of JavaScript  UI5 Controls.

http://valeurhrbem.netne.net/

 

UI5 Will never cease to amaze you !!



 

 

There are basically four segments in the tool

• Editor                 : Here we can write the UI5 Controls in JavaScript.


• Error Logs         : Any error in the Editor will be displayed over here real time.  


• Result Section  : Live results can be viewed in the result area real time.


• Settings             :Here you can toggle the theme and the compact density and have a                                       comparative view of hoe the controls will appear via different themes and .

 

Lets get started with examples . . .

 

1. Simple Use  :  Creating a simple Button

new sap.m.Button({

text : 'Hello Ui5',

icon : 'sap-icon://feed',

type : 'Emphasized'

})

Results :



 

2.Complex Controls :  Create a custom list item

 

new sap.m.CustomListItem({

type : 'Navigation',

content : [

new sap.m.HBox({

items : [

new sap.ui.core.Icon({src:'sap-icon://video',size:'2rem'}).addStyleClass('sapUiTinyMarginBegin'),

new sap.m.VBox({

width : '50%',

items : [

new sap.m.Label({

text : 'Demo Topic',design: 'Bold'

}),

new sap.m.Text({

text : 'Demo Topic Description.Demo Topic Description.Demo Topic Description.Demo Description.Demo Topic Description.',design: 'Bold'

}).addStyleClass('sapUiSmallMarginTop'),

]

}).addStyleClass('sapUiSmallMarginBegin'),



new sap.m.ProgressIndicator({



percentValue:30,

				displayValue:"30%",

				showValue:true,

				state:"None" 

}).addStyleClass('sapUiSmallMarginBegin').addStyleClass('sapUiSmallMarginTop'),



]



})



]

})

 

Results :  

 

 

And yes you can apply different themes and compact modes on the fly.

 



 

 

*Note  the log will show error once you start typing but but  on completion it will be removed automatically

 



 

 

Request you folks to please use it and let me know if it helps in the development. Also please drop your valuable suggestions and feedback by clicking the mail icon on the right bottom.