eclipse neon splash screen |
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
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:
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 |
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.
ReplyDeleteAll other have to do some things on top of it (see Robin's WebStorm post).