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! 🙂

 

 

Let’s start creating a simple UI5 app, based on the below mockup design:

Step 1. Open the existing project(myFirstApp) in eclipse. Goto demo.view.js, for the title property we have written as Hello World! before(blog link here), let’s change it to “Simple App” which is the title of our mock up design.

Step 2. Now we need to add an input text bar and a button, for doing so we need to go to the Open UI5 online library.Open the URL from here. Click on explored, now we can see all the components and elements of the application which we need to use.

Step 3. Now search for input keyword, then again drag down for the same(input) keyword,we need an input with a placeholder( i.e. inside the text field we should be able to see the name).Let’s check the first example(Input-Assisted).

Step 4. Now click on it–>goto the top right corner–>click on it to show the source code for this sample. Now it will show the code what we required as per the mockup design for the text field.

Step 5. Now let’s go to IDE ,eclipse and we will be doing bit correction inside the code,we will be creating an object of sap.m.Input. Here ‘o’ prefix to our variable refers to that it contains an object (similarly, we will be using ‘a’ if we were creating an array).Now we can pass the parameters inside it with syntax :

placeholder:"Enter Name",

Let’s add the submit button to the page.In our code just create a button object and include the text property(Submit) too.

Step 6. Yes ! Just refresh the index.html page to see the updated output.

We have created our first application as per the Mockup diagram.We will learn more in our next post. Stay tuned,Thanks ! 🙂

Stay tuned and thanks for subscribing to our youtube channel ! 🙂

 
 

 

In below steps we are going to cover, how to create your first hello world application with SAPUI5:

Step 1.Open the eclipse IDE–> click on File–>New–>other

 

 

Step 2.Now select SAPUI5 Application Development,under that select Application Project.

 

Step 3.Click on Next –> Enter the Project Name,which will be stored inside workspace folder.Workspace is the place where all the files,components related to the working project will be stored.Now select the library as sap.m .Next moving to the options section, we can see that Create an initial view is checked by default,which means that eclipse will automatically generate some controller & view for us.If we do not want the automated views & controllers then we can uncheck it.

 

Step 4.Click on next,Select Javascript, because it’s quite flexible to work on.Click on next, it will be showing all the list of libraries which will be added to the application.Next, click on finish to create the application.

 

Step 5.Great we have created a simple project structure !

Now we can see the three files(index.html,demo.controller.js & demo.view.js) which are by default opened, that are present in a folder named my first app(the name of our project).Under the folder web content, there is an index file(index.html) where all the action is happening, to run our application we will be running the index.html file.

 

Now we will edit the title inside the demo.view.js, by default it will be “title” we will change it to “Hello World!!”.Save the file by pressing ctrl+s.
Step 6.Finally, we will be running the index.html page to see the output of our first Hello World!! application.Right click on index.html–>Run As–>Select Web App Preview.As we are only related to HTML5,CSS related artifacts so its good to choose Web App Preview.

 

Step 7.Yay !

Here comes the output !

You can see that a new tab called index.html is opened with the text as Hello World!

 

Step 8.We can copy the URL & open it in chrome browser, we can see the same output on chrome as we have seen in eclipse.

 

 

You have successfully created your first UI5 application.

Thank You ! Stay tuned for more 🙂

 

 

In this blog, we will look at how to set-up the development environment before starting development of your applications.

 

• We will be requiring eclipse luna IDE(Integrated Development Environment) which can be downloaded from here, you have to select the flavor(32/64bit) of the IDE as per your system configuration which can be found out by right clicking the My Computer and going to properties.You may also use sublime-text(free) and cloud9 ide(quick app development).
• Make sure that Java is already installed on your machine because eclipse required Java to run.If it is not installed just install it from here.
• Now we will see the UI5 tools repository URL which will be required to enter in eclipse as the steps given below to install all the required libraries to make available within eclipse.
• Now click on Help –>Install New Software. As per the eclipse version(Mars/Luna) you have installed,choose the URL to be copied from here .Then paste it inside Install New Software.
• After this, you will see a list of components asking for installation,but as we are focussing on UI5 so select the same from the last down(UI Development Toolkit for HTML5).Go ahead and press Next, accept all the license agreements.Then finally it will install the software within few minutes.

Now you have successfully setup your development environment …Yepi !

Stay tuned for more posts ahead !

 
 

 

What is SAPUI5?

SAPUI5 (SAP user interface for HTML5) is a JavaScript library created by SAP. This library will be using to create HTML5 based applications, which will also be using CSS3 & AJAX too. The most interesting part of developing these type of application is, they will take its own visibility or appearances, when opened either on a desktop, mobile devices,tablets,web browsers etc. so the look and feel will not be hampered due to the responsiveness of the UI5 components.

What is the difference between OpenUI5 and SAPUI5 ?

OpenUI5(the Open-Source-licensed version of SAPUI5) comes with an APACHE2 license and SAPUI5 comes with an SAP license. OpenUI5 library does not require any permission to use it.We can get more details about the library on here.

What are the prerequisites technology to get started to learn UI5,or how many levels of knowledge one should have to get started with SAPUI5?

The prerequisites technology are

• HTML5
• CSS3
• JavaScript
• jQuery
• oData

The level of knowledge required to get started with SAPUI5:-

HTML5 : You need not required to be an expertise with it, but yes you need to know the basic knowledge/syntax’s i.e. the tags of HTML at least and when to use them.

CSS3  : Yes, you need to have a pretty good knowledge of CSS, because in the project you will be working in will demand an in-depth knowledge of CSS.

JavaScript : We will be using in JavaScript to build our applications. So having a good sound knowledge in the same will help you to go ahead with it.

jQuery : If you do not have knowledge of jQuery,it may be managed, but we will be using it while integrating some third party libraries as and when required while developing the application.

oData : It deals with the JSON(JavaScript Object Notation)objects which will be acting as the data that will be coming from the back-end server.

 

So these are some pretty basic questions which, stay tuned for more !