SAP UI5 Development Kit - SAP UI5

What is SAP UI5 - Development Kit?

SAP UI5 development kit for HTML5 creates an environment for the development of web-based applications and it provides an application with one consistent user experience. Web apps that you develop with SAP UI5 are responsive across browsers and devices, and they can run on smartphones, tablets, and desktops.

The UI controls immediately automatically adjust themselves to the capabilities of each device.
You can use SAP UI5 on the following platforms −
  • SAP HANA
  • SAP HANA Cloud Platform
  • SAP NetWeaver for SAP NetWeaver 7.4 or higher
  • User interface add-on for SAP NetWeaver for SAP NetWeaver Application Server 7.3x
Here you can install application on the server which includes storing the libraries and getting data from the database. You can use the NetWeaver Application server or HANA Cloud platform for application deployment, and data can be accessed by a business application using the OData model using Gateway. Here’s the illustration.
development_kit
A client request from his mobile/laptop, a request is sent to the server to load the application in a browser, and data is accessed via database and the relevant libraries are accessed.
Download the SAP UI5 developer’s tools of Eclipse to build a UI5 application. Once you download, you can unzip the file and deploy on the web server. You can install a UI Add-On for SAP NetWeaver and this also includes UI5 Theme Designer in ABAP.

Prerequisites for SAP UI5

To install and update UI5 development toolkit for HTML5, you should meet the following prerequisites −
Eclipse Platform Mars (4.5)
Operating System Windows OS (XP, Vista, 7 or 8/8.1)
Java Runtime JRE Version 1.6 or higher, 32-Bit or 64-Bit
SAP GUI
Only relevant when installing the SAP UI5 ABAP Repository Team Provider
  • For Windows OS: SAP GUI for Windows 7.30/7.40
Microsoft
Only relevant when installing the SAP UI5 ABAP Repository Team Provider
For Windows OS: DLLs VS2010 for communication with the back-end system is required
Note: Install either the x86 or the x64 variant,
Note: Install either the x86 or the x64 variant, accordingly to your 32 or 64-Bit Eclipse installation
Here’s the process explains how you can install the SAP UI5 Development Kit in your system.
Step 1 − To install JDK, go to Oracle.com and search for the required JDK version.
java_se_development_kit
Step 2 − Download and run the setup. You will get a message as shown in the following screenshot.
java_se
Step 3 − To install Eclipse, go to www.Eclipse.org/downloads
eclipse_ide
Step 4 − Extract the file as shown in the following screenshot.
extra_compressed
Step 5 − To run the installation, go to the extracted folder and run the application file as shown in the following screenshot.
eclipse_data_created
Step 6 − To install SAPUI5 tools, go to Eclipse → Help → Install New software.
You can install directly using the URL or by entering the path of UI5 demo kit.
Step 7 − Next, enter the URL in install dialog https://tools.hana.ondemand.com/mars
ondemand
Step 8 − To see the available features. Press the ENTER key. You can select the features and click on Next. It will display the list of features to be installed → Click Next.
Step 9 − Accept the license agreement and click Finish to start the installation.
license_agreement
sap_development_tools
Step 10 − Download UI Development Kit for HTML 5 from the following link −
http://scn.sap.com/community/developer-center/front-end and extract the content in the same folder.
sap_ui5_developer
Step 11 − Start the Eclipse environment. Go to Help → Install New Software.
ide_web
Step 12 − Click Add → Local.
Step 13 − Next, navigate to the local update site location and select the tool-update site folder with the folder where you extracted the HTML5 Development toolkit as the update source.
Step 14 − Select all plugins and features for installation.
features
Step 15 − Select the dialog to “Contact all update sites” during the installation to find the required software.
contact_updates
Step 16 − Click the Finish button to complete the setup. Restart Eclipse.
java_ee
Step 17 − You can verify the installation by creating a new SAPUI5 Application Project via Eclipse menu File → New → Other at the bottom. Select SAP UI5 Application Development folder and expand to create a new project.
overview
Step 18 − Enter the project name, select library and you can check the box to create an initial view.
project_name
Step 19 − Create a view using some sample code in the project. Enter the name of the view and click the Next button.
create_new_view

Step 20 − Select the development paradigm and click on Finish. You will see a new SAPUI5 development project in a new window as shown in the following screenshot.
development_paradigm
Now, to present your application or run it in production, you can deploy your SAPUI5 application on the tomcat server. If you don’t have a tool like MAVEN, in that you can use the export option to export the project manually. Right-click on Project → Export.
Step 21 − Enter the destination path where you want to place the war file.
war_export
Next, copy the war-File to webapps directory of your apache tomcat. You can access your application by going to this path - http://localhost:8080/<your_app>/
Note − In a normal scenario, many SAP projects run in Internet Explorer but for SAPUI5 development it is recommended to use Google Chrome or Firefox with firebug plugin as both systems allow the use of tools and plugins to debug JavaScript, as well as use HTML and CSS.

All rights reserved © 2018 Wisdom IT Services India Pvt. Ltd DMCA.com Protection Status

SAP UI5 Topics