How to install SAPUI5 in Eclipse

SAPUI5 is a new user interface technology from SAP that is based on the open standards HTML5 and CSS3, the JavaScript scripting language, and the jQuery library.

This blog talks about how to install SAPUI5 in Eclipse IDE. SAP has provided SAPUI5 Tools for Eclipse which can be downloaded and installed as Eclipse plugins.

Step 1 – Install Java Development Kit

Install JDK from Oracle’s website http://www.oracle.com/technetwork/java/javase/downloads/index.html

Step 2 – Install Eclipse

As a first step, download Eclipse Mars from http://www.eclipse.org/downloads/packages/release/Mars/2.

Select the package solution called Eclipse IDE for Java EE Developers. Make sure to select the installer according to your platform (32/64 bit of Windows/Linux/Mac). For this post, I’m using 64-bit Windows 7 OS.

After downloading the Eclipse installer, simply unzip it and click on the eclipse.exe file to run Eclipse.

Provide a workspace folder where you can create all your SAPUI5 related projects.

Step 3 – Install an application server

Although a web container like Tomcat might be enough to deploy basic SAPUI5 applications in the initial phase, I would recommend installing an application server like Widlfly (formerly known as JBoss). Please refer to my blog How to install Wildfly in Eclipse for the detailed steps.

Step 4 – Install SAPUI5 plugin in Eclipse

Open the web page https://tools.hana.ondemand.com/ and copy the update site URL https://tools.hana.ondemand.com/mars for SAPUI5 Tools.

In Eclipse, go to the menu option Help -> Install New Software… In the Available Software window, click on the link, Available Software Sites. In the window, click on Add button. In the pop-up window, provide any name to the site and paste the SAPUI5 update site URL copied from the above step and click on OK.

Now that the SAPUI5 Tools update site has been added, in the Available Software window, select the newly created site from the drop down and wait. Eclipse will fetch the list of plugins available for installation.

Note
While updating Eclipse in a corporate network, a proxy authentication error might be thrown in case the proxy settings are not maintained in Eclipse. Please refer to my blog How to add proxy settings in Eclipse for solving proxy issues in Eclipse.

Select the package named, UI Development Toolkit for HTML5 and click Next. Accept the license agreement and click Finish to begin the installation of plugin.

Restart Eclipse after the installation is finished.

To validate the installation of SAPUI5 Tools, go to the menu option File -> New -> Other.. There should be an option for SAPUI5 Application Development as shown below.

This completes the installation of SAPUI5 Tools. In the next blog I’ll talk about creating the first SAPUI5 project.