In this post let’s look into a simple UI5 application control flow.

In an UI5 app the program execution starts from the index.html file. The very first action which is going to be performed here is the loading of the mentioned UI5 core library from the code

src="resources/sap-ui-core.js"

Similarly, in the line

 data-sap-ui-libs="sap.m" 

we  are mentioning what are the library file we need for our application.

Lastly in

 data-sap-ui-theme="sap_bluecrystal" 

we are mentioning what is the theme we require for our application.

Now let’s see the objects we have created for our application.

Here in the screenshot marked in line 1,2 refers to the two objects we have created for our application and for our View-Controller respectively.Then to add that view into the app(3) and then place the app into the content div(4).

 

Content is the id of the div element which is mentioned in the index page i.e

 

<div id="content"></div>

 

and our entire application will be placed inside this div element.

Let’s go to the view & controller and see what are the objects present and how the control will pass through them.If we see in the view.demo.js we will notice that the first step here is the execution of the

 

getControllerName : function() 

Once this function is executed then the program will get the name of the controller. After that it will execute the

createContent : function(oController)

At the end of this function, the page object will be returned which will contain all components like textbox,input box,submit button etc.Now before creating the content of the page there are few more functions which will be called from demo.controller.js which are

 

onInit: function()

followed by

 

onBeforeRendering: function()

i.e before the page is loaded. After that

 

onAfterRendering: function()

is called until you exit from the application.And on closing or exiting the app

onExit: function()

is called.

That’s all about simple code level control flow.

Stay tuned for more! 🙂