UI5 File Templates for WebStorm

ui5_144
WebStorm is one of the best IDE for web development (at least JetBRAINS is able to charge for it).

With some dedicated UI5 file templates it is quite handy to start with UI5 development. I will also introduce AMD module definition concept which has found his way in OpenUI5/SAPUI5.

AMD concept in UI5

With version 1.28 of OpenUI5 a new module concept is propagated. In the core classes of UI5 it is already used much longer. The code templates which will be introduced below will already be based in this concept.

AMD stands for Asynchronous Module Definition and is designed to allow asynchronous loading of JavaScript modules (not very surprisingly). It is also the API which is supported by RequireJS. So SAP is following a well-established and accepted standard in the web, good!

In UI5 this is realised with sap.ui.define to define new modules and with sap.ui.require to resolve module dependencies. To understand usage, let’s have a look at some file template examples:

WebStorm UI5 File Template

File templates can be created in WebStorm via Preferences->Editor->File and Code Templates (in WebStorm 10 with a open project):

UI5FileTemplate1

Grunt Support for UI5 Boilerplate

GruntWith the last submit of UI5 Mobile Boilerplate Grunt Support was added to the Boilerplate. It is now possible to start a dev server from command line. Grunt is a Java Script Task Runner, which can be used to automate recurring tasks, like unit test, minification or packaging the web app. Probably Grunt will also be used as build infrastructure for OpenUI5.

Run UI5 Apps on Apache Tomcat

tomcatLet’s use Apache Tomcat to run UI5 Apps! Tomcat is a very light-weight, but a full blown Java based app and web server. It can be well integrated into Eclipse IDE and therefore a perfect counterpart in development. It is much more light-weight and faster in startup than any SAP Java Server. It also enables you to write server-side components (like servlet’s, JSP’s,…), which then can be consumed by our UI5 App. And like OpenUI5 it is Open Source and free!

UI5 Mobile SplitApp Boilerplate

ui5
There are different approaches to start a new project with SAP UI5 or OpenUI5 (let’s call it simply UI5). One way is to use the SAP UI5 Eclipse Tools described in the blog post „SAP UI5 – Quickstart“.  The generated UI5 Application Project is very, very basic and you are bound to Eclipse to do your development, which is not everybody’s favorite IDE of course.

On the other hand there are already some really nice UI5 Tools, which can help you. For example the Yeoman generator for OpenUI5, which is based on node.js and can generate a nice application structure or only single components. Another example is the Sublime Text 2 Package for UI5/OpenUI5, which contains Snippets and Templates and is very useful.

So whatever your favorite IDE is, either Eclipse, Sublime Text, WebStorm, IntelliJ, Xcode, Visual Studio, emacs, notepad or vi, you should be able to use Git and clone the UI5 Mobile SplitApp Boilerplate from GitHub (if not, you should try hard) resulting in a nice app structure with base feature, which can be used as starting point for development:

SAP UI5 – Quickstart

sapui5

Quickstart – Entwickeln mit SAP UI5

SAP UI5 ist die Kurzbezeichnung für „SAP UI Development Toolkit for HTML5„. Es handelt sich hierbei um ein JavaScript Framework für die Entwicklung von HTML5 Apps für den Desktop und/oder Mobile Einsatz. Das Framework basiert auf dem etablierten Framework jQuery (inklusive jQuery UI), eine SAP untypische, aber sehr, sehr gute Entscheidung der SAP.

UI5 bietet neben einer Vielzahl toller UI Elementen (Controls) auch ein ausgefeiltes MVC (Model-View-Controller) Konzept und bringt auch noch so einige Enterprise Features mit (z.B. I18N). Mit UI5 ist der SAP ein großer Wurf gelungen und es wird die UI Entwicklung im SAP Umfeld noch auf Jahre hin prägen.

Soweit so gut, aber jetzt wollen wir schnell „produktiv“ werden.

Einrichtung der Entwicklungsumgebung für SAP UI5

Als Entwicklungs- und Laufzeitumgebung verwendet man idealerweise einen Java basierten Ansatz. Auch wenn dies keine zwingende Voraussetzung ist, hat dies einige Vorteile, so basiert die SAP eigene Entwicklungsumgebung auf Eclipse. Die weiteren Ausführungen gehen von einem solchen Ansatz aus.