UI5 File Templates for WebStorm

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):

Via + (Plus sign) you can create a new Template. Specifiy a name and a extension and use placeholders with ${} syntax. As placeholder we will use ${UI5_Namespace} for the UI5 component namespace and ${NAME} for file name.

The first parameter of sap.ui.define is an array of strings. Each string represents a dependency. In the example we need sap.ui.core.mvc.Controller class to define our own controller by extending this class. We have to replace all dots with forward slashes. So instead of sap.ui.core.mvc.Controller you need to use „sap/ui/core/mvc/Controller“.

Second parameter is the factory function, which get each dependency as parameter (here Controller) . This parameter can then be used within the factory function.

This is an example how to use sap.ui.require and load necessary dependencies. The structure is somehow identically to the sap.ui.require usage. In the first parameter (array of strings) the necessary dependencies are listed, which are passed as parameters to the callback function.

And Action – Create App with Templates

Now we want to use the new file templates within WebStorm (of course you can use these templates also without WebStorm)

Create an empty project and two folders (the given templates assume this kind of directory structure):

controller – for controller files

view – for view files

We want to create a master view and a detail view.

Therefore select the view folder and right-click and select New and select the UI5 XML View template:

Enter as File name „Master“ and as UI5 namespace „ui5v128“ (you can also use your own namespace):

For the controller select controller folder and and right-click and select New and select the UI5 Controller template. Enter again as File name „Master“ and as UI5 namespace „ui5v128“:

repeat this for the Detail view/controller (File Name „Detail“,UI5 namespace „ui5v128“).

Additionally we will need the SplitApp View. Please name it „App“ and select the „UI5 SplitApp“ Template (again UI5 namespace „ui5v128“).

If you follow this convention the given UI5 Component template will fit, this is is our last step.

Create a UI5 Component (file name: Component) and index.html file (file name index) in the project root folder, both with the same UI5 namespace „ui5v128“. The result should look like this:

Within WebStorm you can directly run the App via the index.html file. Right-click the index.html and select Run ‚index.html‘:

The working app is more or less empty, but uses the new module structure. So you prepared for the future (v1.30) and now it is up to you to fill it with more content.