SAP UI5 Overview and creating sample application

[Former Member]

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..”.

  

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

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

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.

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

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

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

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

Step 7: the output screen is shown in below: