SAP UI5 is also known as “UI development tool kit for HTML5”.SAP UI5 is powerful JavaScript framework. It contains large number of standard libraries for HTML4, is useful to create the applications (mobile and desktop applications) which don’t have compatibility issues. Before SAP UI5, the developers are using t SAP Web Dynpro for developing the web applications.


Difference between SAP UI5 and SAP web Dynpro:-

1.      By using SAP UI5, we can develop web applications and mobile applications. By using Web Dynpro, we can develop only web applications.

2.      Web Dynpro applications are heavy weight applications and SAP UI5 applications are light weight applications.

3.      All validations are done in server side in Web Dynpro and validations are done in browser side in SAP UI5.

4.      In Web Dynpro, it is not supporting to all modern browsers and in SAP UI5, it is supporting all modern browsers.

5.      Web Dynpro has limited UI features and SAP UI5 has more UI features.


Configuration for SAP UI5 in eclipse:-

Step 1: open eclipse IDE, in menu select help click on “Install New Software..”.

/wp-content/uploads/2015/10/1_802355.jpg  

Step 2 : in available software, please add repository details(name and URL: https://tools.hana.ondemand.com/luna) and click on OK.


/wp-content/uploads/2015/10/2_802356.jpg

 

Step 3:Select “UI development toolkit for HTML5” entry and click on next button.

 

/wp-content/uploads/2015/10/3_802357.jpg

Step 4: after that accept the agreement and finally click on the finish button.


Step 5: restart the Eclipse IDE.


Creating the sample application:-

Step 1: in File menu –>new –>click on “Other…”. In select Wizard, search for “SAP” and select “Application Project “under SAP UI5 application development.

/wp-content/uploads/2015/10/4_802358.png

 

Step 2: please enter project name and select library “sap.ui.commons” and click on “Next”.

 

/wp-content/uploads/2015/10/5_802359.jpg

Step 3: please provide view name, select development paradigm as “JavaScript” and click on finish.

/wp-content/uploads/2015/10/6_802360.jpg

 

Step 5: please find the  application structure of the application in Eclipse IDE.

/wp-content/uploads/2015/10/7_802361.jpg

 

Step 6: right click on the application and select “Run as” and click on “Web App Preview”.


/wp-content/uploads/2015/10/8_802362.png

 

Step 7: the output screen is shown in below:

 

/wp-content/uploads/2015/10/9_802363.jpg

To report this post you need to login first.

Be the first to leave a comment

You must be Logged on to comment or reply to a post.

Leave a Reply