Configuring JetBrains WebStorm for UI5 development

Why use WebStorm? Some background

Today, Eclipse has grown to quite a robust and widely used Java IDE, however it lacks severely in the Web / Javascript department. For web development -- not only SAPUI5 / OpenUI5, but in my opinion any webdevelopment -- I strongly feel we should look further than Eclipse.

The same is true for text editors like Sublime Text and Atom, which -- although they have plugins that allow for rudimentary syntax highlighting and code checking -- don't have the context knowledge of the Javascript code you are writing, let alone check for syntax errors, unused variables/functions, type checking, and function signature mismatches, to name just a few.

JetBrains WebStorm actually does all that: it is aware of your code, it does a good job at inspecting and analyzing your code, and has terrific support for other HTML5/CSS related stuff (for instance, it does refactoring across multiple file types such as *.js and *.css). And if you add JsDoc comments to your code, you even benefit from proper type checking! You really have to try it to believe it.

And once you complete the steps described in this blog, you will benefit from excellent UI5 coding support as well!

WebStorm isn't Open Source like Eclipse, but a personal license costs a mere 44 EUR and as such is worth it every penny.

Unfortunately, it currently has no support yet from SAP or the Open Source community for UI5, but according to some of the topics on SCN and Stackoverflow regarding UI5 development with WebStorm, it seems quite in demand. This blog tries to fill the gap and help you set up WebStorm for use with UI5 development.

Prerequisites

In order to use XML validation and code completion when using XML Views, we need the XML definition for the UI5 libraries. For reasons unknown, these definitions aren’t included in the OpenUI5 download, but they are included in the UI5 plugin for Eclipse. So we need to have Eclipse installed with the UI5 plugin.

And of course, you need to have WebStorm installed

Step 1 : Include UI5 libraries

After you have installed WebStorm, we need to make it OpenUI5-aware. First, we include the UI5 libraries. Since I mainly use the sap.ui.core and sap.m libraries, I will use these now as well. If you need other libraries, you can include these in the same way.

1. Open WebStorm, and from the ‘Welcome to WebStorm’ screen, select ‘Configure > Preferences’.
   
   
2. From the ‘Template Project Settings’, select ‘JavaScript > Libraries’ and click the ‘Add...’ button.
3. In the dialog, specify a name and version, and set ‘Visibility’ to ‘Global’.
   
4. Click the ‘+’ sign, and choose ‘Attach Files...’
5. Navigate to the folder you have downloaded and extracted the OpenUI5 SDK, and select the “./resources/sap-ui-core-all-dbg.js” file:
   
   and click ‘OK’
6. Repeat steps 4. and 5. for file “./resources/sap/m/library-all-dbg.js”.
7. Both files are now listed in the ‘New Library’ list, and you can click ‘OK’ to save our just configured 'OpenUI5' library.

Step 2 - Add XML definitions

Now, we need to add the XML definitions for use with XML Views.

1. First, we need to copy the XML definitions from our Eclipse UI5 plugin. Navigate to your Eclipse ./plugins folder.
2. Locate both ‘com.sap.ui5.core_n.nn.n.jar’ and ‘com.sap.ui5.mobile_n.nn.n.jar’ files, and extract their content.
3. From the extracted content, navigate to the ./libraries folder and copy the *.xsd file to a different directory on your computer. Do this for both the core and mobile libraries.

   
   
4. In WebStorm, from the ‘Template Project Settings’, select ‘Schema’s and DTDs’.
5. Under ‘External Schemas and DTDs’ click the ‘+’ button.
6. Switch to the 'Explorer' tab, and navigate to the location where you copied the sap.ui.core.xsd file, and provide an URI ‘sap.ui.core’
   
   
7. Do the same for sap.m.xsd, with URI ‘sap.m’.
8. Both XSD’s are now listed under ‘External Schemas and DTDs’.
   
   
   IMPORTANT: Make sure you deselect both checkboxes next to these files! It’s not clear at first sight, but by deselecting the checkboxes you define the definitions as ‘Globally Available’ for every project. Having them checked makes them available to the current project only, which isn't what we want:
   
9. Click ‘OK’ to apply the changes to the preferences, and you’re back at the Welcome screen.

Step 3 - Test our new configuration

Now it's time to see if what we have configured is actually working and useful.

1. In the Welcome screen, click the ‘Back’ button next to the ‘Configuration’ header, and select ‘Create New Project’. Choose a project name, a project location, and set 'Project Type' to 'Empty project'
   
   
2. Let’s create a basic UI5 project directory structure: add a WebContent folder with an index.html file, and a subfolder ui5test with a controller file MyView.controller.js and XML view file MyView.view.xml
   As you can see in the above screenshot, our globally defined library 'OpenUI5' is linked as well.
   
   
3. In the controller, lets write some UI5 specific code and see if code completion works:

   
   
4. Cool! As you see, all methods and properties come instantly available for code completion:
   
   
   Also, as you can see from the previous image, variable ‘oModel’ is shown strikethrough, indicating the variable is never used and therefor redundant. This is just one of the benefits WebStorm has over Eclipse: identifying unused Javascript variables and functions!
5. Now, lets create an XML view and see if code completion / XML validation works too:

   
6. Awesome! And even here, as shown in the image you see the references to the unused namespace declarations ‘mvc’ and ‘html’ shown strikethrough.

Additional step: Create UI5 file templates

Now, if you use the Eclipse with the UI5 plugin, the initial content for the controller and view files are generated, but in WebStorm we have to write it ourselves. Luckily, WebStorm provides a mechanism called 'File and Code templates'. In here, I have defined placeholder templates for UI5 index.html file, and controller / view files. Using 'File Template Variables' I have used predefined variables ( ‘${NAME}’ for getting the filename without extension) as well as custom defined variables (‘${UI5_Namespace}’ in which I specify the namespace for the current file):

If you have defined such templates yourself, you can now right-click a project web folder and you’ll see the file templates listed in the context menu:

If I now choose my custom ‘UI5 Controller’, after you specify the File name and UI5 Namespace:

...the new file is created using the specified properties:

Summary

This is just the basics of making WebStorm UI5 aware, and I’m all ears for any other methods or additional configuration to make UI5 development as easy and streamlined as possible!