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.

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 –

‘data-sap-ui-libs’ loads ‘sap.m’ a library which is required for the application.

‘sap-ui-core.js’ is the most important core library which will be always used in our applications.

sap_bluecrystal is the default background theme, which is most widely used. You will get look & feel of it in output.

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’.

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.