SAPUI5 using Shell

[Former Member]

Backround

SAPUI5 is a latest User Interface(UI) technology by SAP based on HTML5, which is used to build lightweight client applications. The important factor in the success of SAPUI5 is, it uses and supports open source such as CSS, jQuery, Javascript etc. Unlike WebdynPro's(Java/ABAP) which are server dependent, SAPUI5 runtime is a client side HTML5 rendering library, in which we can create applications for both Desktops and Mobiles. Going forward, SAP will recomend the use of SAPUI5 in all of its UI development.

Installation

We can develop and publish the SAPUI5 applications in Eclipse. Installation aand Configuration on SAPUI5 is very easy. Just follow the steps mentioned in this link.

Prerequisites

To be able to use this blog, you need to complete the installation steps and have a basic knowledge of Java, HTML, Javascript, and Eclipse.

Development

Step 1

Open Eclipse and create an SAPUI5 application project.

We will create a desktop application, so select ui.commons.

Select create initial view check box and give name to the the view.

When we create a view, along with it the controller file also gets created.

xxxx.controller.js is the controller file

xxx.view.js is the view file.

Also an index.html file is created with the first view. This file is used to initialize the application.

Step 2

Create a destination view (Right click the project folder -> New -> Others -> View)

Give name to the file. Select finish.

Step 3

Now we need to initialize the view inside index.html and add the required libraries.

Step 4

To navigate, we will use Shell control. Shell is an application frame with an navigation capability. We will add shell to the index.html file.

Add the desired view to the shell.

Step 5

We will define a model which will hold values at run time in  index.html

This is all we have to do in order to get everything in place. Important point to note here in this example is, the source view needs to be instantiated in the target view. Always!

Next step is simple. Add UI elements in the view, bind the model to the UI elements and navigate.

For complete solution, please follow the link

index.html 

https://drive.google.com/file/d/0B_is7beaY2bIOV9JMUxiSmFOSnc/edit?usp=sharing

First View

https://drive.google.com/file/d/0B_is7beaY2bIcFQxb1FXdmZfMjA/edit?usp=sharing

Result View

https://drive.google.com/file/d/0B_is7beaY2bIdFhZb3JkNFlNWnc/edit?usp=sharing

Output

Right click index.html and run as web preview.