The Swiss Knife for UI5 Developers

Blog

node.js

LESS

PhoneGap

IDE

About Me

IDE

eclipse LUNA splash screen

A comfortable way of developing UI5 is using the Eclipse IDE for Java EE Developers and adding SAP
Development Tools for Eclipse.
The current versions of SAP development tools are running on Luna and Kepler, but Luna is more up-todate. Both versions are the perfect match for OpenUI5 development.
If your need to use SAP NetWeaver Gateway Productivity Accelerator, you currently have to use JUNO
(only a matter of time).
You can also use the SAP HANA Studio Developer Edition if you develop for SAP HANA.
Under some circumstances, eclipse crashes and is not able to restart. To avoid deleting .metadata/plugins try
the following cmd line option inside eclipse folder:
eclipse -clean -clearPersistedState

Another option (bot not supported by SAP) is to use the JetBrains WebStorm IDE which highly supports
modern web technologies. Read the SCN blog from Robin van het Hof "How to configure JetBrains
WebStorm for UI5 Development" to get a quickstart. Especially in conjunction with node.js and grunt build
tools, this is a powerful approach.

UI5 Development
Eclipse requires a Java runtime environment (JRE) in order to run. For fully fledged development you
should use the latest Java Development Kit 7.x (JDK) that contains additional development tools.

Download and install the Eclipse IDE for Java EE Developers (64 Bit prefered).
Install the UI Development Toolkit for HTML5.

Menu: Help / Install New Software...

UI Development Toolkt for HTML5

https://tools.hana.ondemand.com/luna

https://tools.hana.ondemand.com/luna.

Check needed components and start installation

If you do not need to deploy your UI5 app to an SAP application server ABAP (AS ABAP), you can leave
the ABAP Development Tools (ADT) unchecked.

Use Tomcat 7.0 Server Runtime

Currently the internal web browser will lock files on windows (maybe Kepler only).
To avoid this, I added a local Apache Tomcat v7.0 server runtime to eclipse.

Add new server runtime environment

Add Tomcat v7.0 server runtime

Now you are able to run UI5 apps on tomcat without issues in locked files inside eclipse. The server will
always use the same local port and changes will automatically be monitored/deployed (just reload the
browser to reflect changes).

Use Chrome as external web browser

To allow comfortable preview and debugging functionality you can use an external browser instead of the
eclipse built-in browser.

Add new external browser and use chrome as external web browser

Add local chrome browser

LESS Support
If you want to do changes on existing themes, or easily generate custom css, you have to install the Eclipse
plugin for LESS.
First you need to install the LESS runtime
npm install -g less

Now you can add the plugin to eclipse

LESS plugin
http://www.normalesup.org/~simonet/soft/ow/update/
In order to launch the LESS compiler from Eclipse, you need to create a launch configuration:

In the menu Run, select Run Configurations...

Select LESS Compiler in the list on the left hand side of the dialog, then click on the icon to create a new launch
configuration at the top of this list,

Configure the options to run the LESS compiler (in particular the LESS command if lessc is not in your system path)
and check the option Use this launch configuration as default.

Node.js Development
If you want to develop node.js based UI5 application, you should add the nodeclipse plugin for eclipse.

Nodeclipse
http://www.nodeclipse.org/updates/

Check needed components and start installation

There are also other commercial IDEs like WebStorm by JetBrains but they do not fit into eclipse (no ANT
support, based on IntelliJ IDEA and not eclipse).

Android Development Tools

If you want to develop Android HTML5 apps using PhoneGap / Apache Cordova you have to add the ADT
plugin for eclipse:

Android Development Tools

https://dl-ssl.google.com/android/eclipse/

Check needed components and start installation

Configure the required Android SDK inside Windows/Preferences. If you do not already have a formerly
installed SDK, you can download a fresh SDK from here.

Install Android SDK

Add Android toolbar buttons to quickly launch SDK and AVD Manager

Add toolbar buttons using Windows(Customize Perspective...

Configure required packages using Android SDK Manager

Android SDK Manager

If you are using a Google Device (ie. Google Nexus) make sure you are using the Google USB Driver
delivered with Extras! You have to use the Windows Device Manager to remove an existing Windows USB
driver for the Android USB device and then manually search for the downloaded Extras/Google USB Driver
to install the right driver. If you are not able to deploy to your real device, it is mostly due to USB driver
issues! More Information...

Using Android Virtual Devices the default simulator will be very poor! To avoid this, download the
Extras/Intel x86 Emulator Accelarator (HAXM) and start the installation manually from the folder. Make
sure that your virtual device will use Intel instead of ARM architecture.
To be able to launch applications on the android simulator, you will need at least one virtual device such as
this:

Android Virtual Device Manager

3 comments:
1.

SWATHI BOPPUDIDecember 5, 2014 at 7:21 AM

Hi,
excellent information shares here about sap hana and experts of sap hana online training provide in
easy way to learn training as real time on
sap hana online training
has 8+ years of experience in online training.they provides server access for practice
Reply
2.

clodDecember 17, 2014 at 5:53 PM

I use Codelobster for jQuery development
Reply
3.
Holger SchferDecember 22, 2014 at 10:50 AM
Hi Clod, normally everyone can choose his prefered IDE but SAP delivers some addtional tools on
top of it that makes it easy to quickstart into UI5.

All other have to do some things on top of it (see Robin's WebStorm post).
Reply