Hi Folks. Eclipse IDE may be a stable and powerful tool to develop UI5 applications. But there are many other powerful tools like Jetbrains Webstorm, aptana, komodo etc. Webstorm is a powerful IDE which understands web technologies and it provides easy to use user interface. It has a powerful prediction feature which accelerates web developments. Also comes in handy when working with nodeJS.

I had always been a big fan of webstorm IDE for web development. So I was looking for a way to make webstorm compatible with UI5. I found a blog “Configuring JetBrains WebStorm for UI5 development” by Robin van het hof. He has provided a sequence of steps to integrate UI5 with webstorm. It was very helpful for code completions. Now there is a plugin available for UI5 which can be used to create new ui5 project, ui5 templates and ui5 api search. This means, now you can directly install the plugin and kick start your UI5 development hassle free. Thanks to the author “Sebak” for providing this plugin.


So I thought of sharing this here. I will be providing steps to install this plugin in Webstorm. Also I will be using UI5SplitApp-Boilerplate by 6of5 which is readily available for download in github as initial skeleton. UI5 Boilerplate is a skeleton for building Apps based on OpenUI5. This will also save time in building the skeleton of UI5 mobile applications.

Pre Requisites:

1) Jetbrains Webstorm 9 IDE

2) UI5 Boilerplate

Steps:

1) Open webstorm IDE. File->Settings

2)  Navigate to Plugins->Browse Repositories

1st.JPG

3) Search for OpenUI5 and install the plugin.

2nd.JPG

4) Restart Webstorm for the changes to take effect.

3rd.JPG

Now that you have successfully added UI5 plugin to webstorm, We can import the boilerplate to Webstorm and kick start with UI5 mobile development.

Steps:

1) Files->Open->Navigate to the boilerplate extracted folder->Open.

Download Links:

BoilerPlate: https://github.com/6of5/UI5SplitApp-Boilerplate/archive/master.zip

After installing the plugin, you can find these features included in webstorm.

/wp-content/uploads/2015/03/111_658169.png

/wp-content/uploads/2015/03/123_658170.png

/wp-content/uploads/2015/03/1234_658171.png

12345.JPG

Hope this post was useful.

Regards,

Safiyu

To report this post you need to login first.

8 Comments

You must be Logged on to comment or reply to a post.

  1. Tylr Wu

    Thanks safiyudeen for sharing 🙂 Do you mind me asking what exactly this plugin brings? code completion? I had it installed but didn’t notice there’s code completion.

    (0) 
    1. Robin van het Hof

      Great to see community effort regarding 3rd party editors and plugins for UI5 development!

      However…

      1. UI5-specific code completion doesn’t work for me as well, for both JavaScript files as well as XMLViews.
      2. I did notice there are some UI5 file options in the New… dialog to add UI5 views, but it just creates a new file without any boilerplate code, or a matching controller file — you could just select New Javascript File which gives you the exact same result

      safiyudeen Vattaparambil, could you elaborate a bit more on what this plugin is supposed to to or how we should use it? Or is this plugin still a work in progress?

      (0) 
      1. safiyudeen Vattaparambil Post author

        Hi Tylr Wu and Robin

        I have added few more screenshots. Like adding new ui5 projects, ui5 file templates and api search. I forgot to mention this doesnt help in code completion. Hope i had answered your questions.

        Regards,

        Safiyu

        (0) 
        1. Robin van het Hof

          Ok, so unfortunately at this stage you still need to manually add the UI5 libraries as described in my blog..

          Nevertheless, I really appreciate the plugin author’s effort, and hopefully he can make it into a truly useful plugin of which the greater UI5 community can only benefit from!

          (0) 
    1. Robin van het Hof

      Hi Anton,

      In my experiece, this particular plugin does nothing more than create boilerplate files for you, and you could achieve the same with the out-of-the-box available File Templates.

      If you follow the configuration in my blog you mentioned, yuo will indeed have intelligent SAPUI5 code completion in both Javascript files as well as XMLView files

      (0) 

Leave a Reply