IDE

eclipse neon 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 Neon (4.6) and Mars (4.5), but Neon is more up-to-date. Both versions are the perfect match for local OpenUI5 development.

If your need to use SAP NetWeaver Gateway Productivity Accelerator, you currently have to use Mars (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.

SAP Web IDE


SAP strategy is to use a browser based development tool called SAP Web IDE. You can get a free trial account, and there is a getting started guide that instructs you how to use it. The Web IDE is the only tool that currently has a UI layout editor to easily design user interfaces.

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


SAP Development Tools
https://tools.hana.ondemand.com/neon


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

1 comment:

  1. 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).

    ReplyDelete

Thank you for your comment!

The comment area is not intended to be used for promoting sites!
Please do not use such links or your comment will be deleted.

Holger

Note: Only a member of this blog may post a comment.