Hello World – first SAPUI5 Application

After learning about MVC Architecture, you are ready to design first SAPUI5 Application – Hello World. Note that each SAPUI5 project contains at least each of an index, view, controller and Component files arranged in the proper folder structure. Follow tutorial MVC Architecture to maintain required Project Structure.


SAPUI5  libraries primarily divided into two categories:

  1. sap.m (for Mobile and Desktop Applications)
  2. sap.ui.commons (for Desktop Applications only), now deprecated (no more used)

Index.html file is the welcome page for your project. It will be loaded before all files. Let’s have a walkthrough to default code, so generated–

Following are key points to be noted –

  1. ‘data-sap-ui-libs’ loads ‘sap.m’ a library which is required for the application.
  2. ‘sap-ui-core.js’ is the most important core library which will be always used in our applications.
  3. sap_bluecrystal is the default background theme, which is most widely used. You will get look & feel of it in output.
  4. Each application is assigned with some namespace (or alias). Here it is ‘ns’ (you can take anything). Namespace represents your project and it is useful in case of the Multi-projects environment. All files present in ‘WebContent’ can be referenced using a namespace, for example, to refer controller you will use the path as ‘ns.controller.Main’.
  5. Index file routes towards Component file, which contains metadata information of the application.

Let’s have a look at the content of Compoenent.js

Component.js

This file encapsulates your whole project as a Component, which also contains metadata of project.

‘sap.ui.define’ declares this file as Component by invoking Component library – ‘sap/ui/core/UIComponent’. This nomenclature will be used in all JavaScript Files in our project. However, library names will be changed accordingly. In 2nd line of code, a ‘UIComponent’ represents library mentioned above. Then, this ‘UIComponent’ is extended using ‘<namespace>.Component’. You will become more comfortable with this syntax in subsequent tutorials.

Note that metadata is maintained in JSON Format. Initialization of Component remains same in all applications.

View

 

This is the default code generated for View. In upcoming tutorials, we will add our code to this. Please note that it is in XML.

No need to make changes in default code unless Controller name is incorrect. To mention controller path, use a namespace, as discussed above.

Controller

It is used to handle events occurring in Views. It is always coded in JavaScript. We can add multiple functions to the same Controller, which will be covered in upcoming tutorials. Let’s have a look at the content of Controller-

Like Component.js, we have ‘sap.ui. define’ having library for controller – ‘sap/ui/core/mvc/Controller’. In next line, ‘Controller’ represents this library, which is extended in return statement.

Init function is mandatory in a Controller. If nothing to be performed by this function, keep it blank. The purpose of this function is discussed in next tutorial.

To Check the output of this project –

Right Click on Project – > Run As- Web App Preview.

A new tab will open within eclipse having the address as http://localhost:<port>/App/index.html

To see this in a Browser, Copy and paste this URL in Browser. This is the output of your Hello World project.

You have achieved the first milestone in this SAPUI5 Learning. Congratulations!

You can get Source Code of this project from GitHub – https://github.com/iankitgarg/SAPUI5

Drop your queries below and share this Tutorial with your colleagues using following Social Platforms and Stay tuned for next tutorials.

 

<<Previous Tutorial                                                                                                          Next Tutorial>>

2 Comments

Leave a Reply

Your email address will not be published. Required fields are marked *