Skip to Content

This blog demonstrates how you can speed up your UI5 web development in Eclipse when using local HANA Cloud Platform (HCP) runtime.

1. UI5 Web Development as most HCP developers do it

As a UI5 example web application you could take the simple PersonsList Web Example described in another blog.

I used here the PersonsList sample for explaining the faster UI5 development steps by means of screenshots so that you can adapt this easily to your project.

Most HCP developers develop their UI5 web application as follows:

1. Existing UI5 web application (here the PersonsList sample) runs already on local HANA Cloud Platform (HCP) runtime


Eclipse view:

/wp-content/uploads/2014/02/1_382466.png

Running application in web browser:

/wp-content/uploads/2014/02/2_382467.png

2. You want to change s.th. on the UI5 view: e.g. add a UI5 ‘Hello’ button

Eclipse view:

a) UI5 code change:

/wp-content/uploads/2014/02/3_382468.png

b) Save editor

c) Publish changes to server

/wp-content/uploads/2014/02/4_382490.png

now WAIT, WAIT, WAIT, ... 😥

This 10-20 seconds is really not what you want to have to wait for till you see your changes:

Running application in web browser with the changed code

/wp-content/uploads/2014/02/5_382491.png

But now see next section 2. how the changed and saved UI5 code is immediately visible in the web browser.

2. What you could do for faster UI5 Web Development in Eclipse?

1. Install FileSync plugin from Eclipse Marketplace

Note: I want to mention here clearly that the below used Eclipse Marketplace ‘FileSync’ plugin is not an SAP offering and it is in your own responsibility if you want to use it as I described it below.

/wp-content/uploads/2014/02/6_382492.png


a) In Eclipse menu: Help > Eclipse Marketplace…

b) Find: ‘FileSync‘ Eclipse PlugIn

c) Choose Install

2. Configure FileSync

Prerequisite here is that your UI5 web application is already running on the local HANA Cloud Platform runtime.

I assume further that you are using an Eclipse workspace located at C:/<local_eclipse_path>/workspace (e.g. C:/dev/eclipse/workspace when the eclipse.exe file is located in C:/dev/eclipse).

Then the local ‘HANA Cloud Platform runtime’ Server is located at C:/<local_eclipse_path>/workspace/Servers/SAP HANA Cloud Platform local runtime-config.

Based on these paths the following screenshots were made (adapt to your paths if necessary)

Steps to configure ‘File synchronization’ properties for web project


a) Select the UI5 web project (here personslist-repo-web) and open context menu

b) Choose Properties to open properties for the selected project

c) Select ‘File synchronization

/wp-content/uploads/2014/02/7_382511.png

d) Select option ‘Enable FileSync builder for project

e) Choose Add Folder… and select the ‘webapp‘ folder which contents should be synced on local runtime server if web project changes are saved

f) Choose OK.

/wp-content/uploads/2014/02/8_382512.png

Then speficy the default target folder

/wp-content/uploads/2014/02/9_382521.png

g) Choose Browse...

h) Navigate in the file system browser to C:/<local_eclipse_path>/workspace/Servers/SAP HANA Cloud Platform local runtime-config/webapps/personslist-repo-web

i) Choose OK

/wp-content/uploads/2014/02/91_382535.png


2. Now change again s.th. on the UI5 view: e.g. change the text of UI5 ‘Hello’ button

Eclipse view:

a) UI5 code change:

/wp-content/uploads/2014/02/92_382541.png

b) Save editor

c) Switch to the web browser and refresh the page

/wp-content/uploads/2014/02/93_382543.png

The UI5 development changes are immediately visible in the web browser, WITHOUT RESTARTING THE SERVER 😎

Enjoy developing HCP UI5 web applications!

To report this post you need to login first.

3 Comments

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

  1. Jason Scott

    Nice tip. You can of course develop using any other web server like a locally installed Apache (comes pre-installed on macs), tomcat or Node.js for example.

    If you’re using other editors than eclipse, like sublime, textpad, notepad++, etc you can also have live-reloading of the browser using simple tools for web development like Grunt. (in fact you can probably do this with eclipse as well, I just don’t use eclipse)

    (0) 

Leave a Reply