Practical Guide to SAP OpenUI5

2.3 Eclipse installation

An easier way of developing UI5 is by using Eclipse IDE (http://www.eclipse.org/downloads/) in addition to the SAP development toolkit (https://tools.hana.ondemand.com/) and Apache Server. Before Installing Eclipse, we need to install the latest Java JDK version. Eclipse Luna and Kepler are the versions currently supported for SAP tools, with Luna being the well-revised version.

For Eclipse installation, follow the steps below:

• Download Eclipse IDE for java developers—Luna version. Extract all the files from the zip folder and run the eclipse.exe file. A window pops up, asking you to provide your workspace folder path. Workspace is where all your programs, servers and metadata are stored.
• After Eclipse, we need to install the SAPUI5 toolkit. On the Eclipse main window (menu bar) click on Help followed by Install New Software, as can be seen in Figure 2.4. This opens a pop-up window where you create a repository for storing SAPUI5 toolkit contents and provide appropriate Name and Location (provide URL https://tools.hana.ondemand.com/luna/ in the location field).

Figure 2.4: Install new software

• A list of items appears that are available under that URL. To develop SAPUI5 applications we only require ABAP Development Tools and the UI5 development toolkit for HTML5. If you wish to use UI5 with HANA, you can select SAP HANA tools and the HANA cloud platform. Click on Next and accept the terms. This initiates installation—ignore all the warnings you get.
• Figure 2.5 shows how available software can be selected.

Figure 2.5: Select available software

• Now we will use the Eclipse wizard to create the application. On the Eclipse main window (menu bar) select File • New • Other. Scroll down and look for SAPUI5 Application Development; underneath that, select Application Project and click on Next (See Figure 2.6). Provide any Project Name and select a Library you would like to use (it is recommended to start your program name with a Z if you wish to upload in the ABAP server). If you prefer to have a view, check Create an Initial View.

Figure 2.6: Application project selection wizard

• As seen in Figure 2.7, you need to provide a name for your view and the type of development paradigm. Then, select JavaScript and click on Finish.

Figure 2.7: Create a new view—application project

• You will be presented with all your resources and contents which include view.js, controller.js and html files. Under these files, we have to write code to build the application.
• In later chapters, we will learn more about views, controllers and models, and their respective types. The example above is created using a view based on the MVC (Model-View-Controller) concept. We can also create an application without a view, but it is not recommended because it makes code management difficult and messy.
• A server is required to deploy or run your application. There are various options for this such as the SAP NetWeaver Application Server (if you have access to SAP), which is recommended. In addition, local servers such as Apache can be used. For this example, let’s use a local server on Eclipse.
• See Figure 2.8 for the working syntax of Eclipse.

Figure 2.8: Working syntax of Eclipse

• It is very easy to configure a server on Eclipse. In the menu bar click on Windows • Show View • Servers. In the bottom window click on the No servers are available link. A window pops up which consists of a list of servers. Next, select Apache and then select the Tomcat v7.0 server and click on Next. Provide the directory path and click on Download and Install. This creates a new folder under the Project Explorer tab, named Servers.

• With this, we have completed our installation. Now it’s time to run the application. Under Project Explorer, right-click on Program Name and select Run As • Run on Server. (OR) Click on the Run icon () shown on the menu bar. Finally select Run on Server.
• Figure 2.9 shows the output in Eclipse.

Figure 2.9 : Eclipse working output