The Swiss Knife for UI5 Developers Blog node.js LESS PhoneGap IDE About MeIDE

eclipse LUNA splash screen

A comfortable way of developing UI5 is using the Eclipse IDE for Java EE Developersand adding SAP Development Tools for Eclipse.

The current versions of SAP development tools are running on Luna and Kepler, but Luna is more up-to-date. 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 IDEwhich 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 latestJava Development Kit 7.x (JDK) that contains additional development tools.

Download and install theEclipse IDE for Java EE Developers(64 Bit prefered).

Install the UI Development Toolkit for HTML5.

Menu: Help / Install New Software...

UI Development Toolkt for HTML5https://tools.hana.ondemand.com/lunahttps://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 RuntimeCurrently 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 browserTo 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 SupportIf 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 runtimenpm install -g less

Now you can add the plugin to eclipse

LESS pluginhttp://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 menuRun, selectRun Configurations... SelectLESS Compilerin 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 theLESS commandiflesscis not in your system path) and check the optionUse this launch configuration as default.

Node.js DevelopmentIf you want to develop node.js based UI5 application, you should add thenodeclipseplugin for eclipse.

Nodeclipsehttp://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 ToolsIf you want to develop Android HTML5 apps using PhoneGap/Apache Cordova you have to add the ADT plugin for eclipse:

Android Development Toolshttps://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 AMHi,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 traininghas 8+ years of experience in online training.they provides server access for practiceReply2. clodDecember 17, 2014 at 5:53 PMI use Codelobster for jQuery developmentReply3. Holger SchferDecember 22, 2014 at 10:50 AMHi 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