Understanding SAPUI5 app architecture, Views, Pages and Navigation between pages

← Getting Started with SAPUI5/OpenUI5

In my previous blog, I explained what is UI5, how we can add UI5 libraries to HTML5 page, how we can instanciate simple controls in SAPUI5. In this blog I am going to explain about Views, Pages and basic architecture of SAPUI5 app.
You can find the demo of the app we are going to do in this blog here .

SAPUI5 app architecture

Below diagram explains the SAPUI5 front end app architecture, it follows MVC pattern.

architecture_diagram

MVC stands for Model, View and Controller.

Model: Model is a file which holds the code to connect to the back end oData services, provides a means to manipulate the data and enables views to display the data.

View: View is a file which holds the code to UI controls and is responsible for all the visual represntation on the controls.

Controller: Controller is a file in MVC concept which helps in seperating model from view. Controllers usually provide the means to translate the user interaction on the view to perform some action. For example, On click of a "submit" button in the form, controller gets the data from the form elements and manipulates the data in the model or through model fires a request to manipulate the data in the back end. Vice versa is also true,if model gets some information, controllers delegate that new information to views, and intern views are updated.

Page: Page is a grouping of set of controls whcih helps in achieving an activity or activities.For example, login page, has Header, Username,Password, and login button and this page helps to carry out login activity. Page gives a look and feel of modern mobile apps.

Relationship between view and page is, one view can have multiple pages in it and one view is associated with one controller. To manage modularity of the code, it is recommended to use one page per one view.

App: App binds views, model and controllers together.

We will continue with the index.html we have created in previous blog, just for reference I will put the code, you can copy the file to idex.html and get started with SAPUI5 in your favourite text editor.

Let's create an instance of the App, page and add page to the app, as shown in below code.

Above code creates instance of the app with id "myApp" and initial page as "page". We are also creating Page with id "page" and its title as "SAPUI5 Page" and without any content. Add above code to init method in index.html.

Also add the button to page and page to the app, place app at the content div. Remove earlier placement of the button at "content". The updated index.html should look like this.

Run this app in chrome browser, you should see nice looking sapui5 app with title "SAPUI5 Page" and content as "click me" button. That looks pretty good.

page

Lets create one more page in init function with id as "page2" and title as "SAPUI5 page2" and also switch on the back navigation button on the page. Add following code,

In above code, "navButtonPress" function is called on click of a back button in Page 2, Also we have to add page 2 to app as we did before with page. Add this code to index.html

   app.addPage(page).addPage(page2);

We have to also write a code to navigate to page 2 as Page1 is set as default page. Lets change the name of "button" button to "Next page" and add on press event listner as shown below. Here on click of a button we are navigating to "Page2", using the code app.to("page2");

            var button=new sap.m.Button({text:"NextPage",
                                       press:function(){
                                           app.to("page2");

                                          }
        });

The final index.html should look like this

Run this index.html in chrome you should see the app as below.

app_navigation

Click on "Next page" button to navigate to "page 2"

app_navigation

Now you can click on back arrow to go back to the main page i.e., page1.

Also you can try resizing the browser and UI will adopt itself to the form factor, hence this app is mobile ready. This is one of the power full feature of sap.m library.

mobile_view

As you can see with 2 pages and one simple control (button) code is starting to get messed up, it is essential to modularize the code. In my next blog I will explain how we can structure the code in views, model and controller

You can paly around with the app here http://vijayk036.github.io/SAPUI5/