Download location of SAPUI5 SDK

The SAPUI5 SDK can be downloaded and installed on your local httpd server for offline development.

2018-02-04 16_52_10-SAP Development Tools

  • Click on Download Link to start the download. Always choose the latest version for development.
  • Extract the zip file into the htdocs folder of the Apache server.
Advertisements

Create an SAPUI5 project in Eclipse and run with Tomcat server and local SAPUI5 SDK

Below are the steps to create a local SAPUI5 project in Eclipse, Tomcat server and local SAPUI5 SDK.

Ensure that you have configured Eclipse, Tomcat and the SAPUI5 as per the instruction given on the given link.

  • In Eclipse, create a new project. Choose SAPUI5 Application Project.3.png
  • Give a project name and choose finish. 4.png
  • Code an index.html file as follows.
    5 index file.png
  • Right-click on the project and choose Run As -> Run on Server.7 run as.png
  • 8 run as dialog box.png9.png
  • Click on Finish. The app will open in the browser.10.png

Setup Eclipse and Tomcat for local development of SAPUI5

JAVA Configuration

  • Install the JDK.
  • Set the system variables for Java in Windows. Create a system variable JAVA_HOME, which would point to the root of the JDK. Then, add the JAVA_HOME variable to the system variable PATH.
  • Check on the command line if java – version gives you the correct output.

Eclipse Configuration

  • Install Eclipse, if not already done.
  • Ensure that Eclipse is pointing to the correct JRE or JDK.
  • Install the plugins below in Eclipse.
    • UI development toolkit for HTML5
    • ABAP Development Tools for SAP NetWeaver
  • Restart Eclipse.

Tomcat Configuration

  • Download Tomcat in the zip format. We don’t want to install Tomcat as a service. As it will later give errors while starting from Eclipse.
  • Extract it to a local folder, e.g. c:\apache_tomcat.
  • Open Eclipse. If Servers View is not visible, click on Window->Show View->Others and select the Servers View.
  • Click on New Server Wizard hyperlink to start the configuration.
  • In the dialog box, select Apache and the version of Tomcat you have downloaded.
  • Select Next.
  • Set the Tomcat installation directory and the JRE.
  • Click on Finish.
  • Right-click on the server and choose properties.
  • Click on Switch Location. Apply and save the change.
  • A Servers node will appear in the Project Explorer pane.
  • Expand the node and double-click on the Tomcat Server (not the config).2 servers node.png
  • A file will open in the work area of Eclipse.
  • Change the port number for HTTP to 8080.
  • In the Server Locations section, choose Use Tomcat installation.

2.png

  • Save the file.
  • In the Servers view pane, right-click on the server and choose Start.
  • If everything is ok, the Console view will show messages that Tomcat has started.
  • Open the link http://localhost:8080 and you will see the Tomcat homepage.

2 tomcat homepage.png

How to access SAPUI5 Resources locally from Tomcat server

  • Download the version of SAPUI5 from https://tools.hana.ondemand.com/#sapui5.
  • Extract the contents of the SDK on a local directory.
    • On my dev box, I was already using apache web server. So, I have extracted it over there. (C:\wamp64\www\resources)
  • In Eclipse, open the server’s node in the Project Explorer. Double-click on server leaf node (not the config one).
  • Select the modules tab.
  • Click on Add External Web Module.

1.png

This will ensure that you can use /resources/sap-ui-core.js as the resource path.

  • Click on OK and save.

external web module.png