Getting Started with SAPUI5/OpenUI5

←SAPUI5 and FIORI redefining enterprise user experience

In this blog post you will learn how to get started with SAPUI5/OpenUI5 development and create an simple sapui5 application.

I have seen most of the people when start learning UI5, they run behind setting up IDE's, though IDE's are good for rapid development, its not a good idea for learning a technology be it may SAPUI5 or any other technology. IDE's ideally abstract few of the repetitive jobs from the devlopers hence helping in rapid development but being a developer it is essential to understand what is happening behind the scenes. So without wasting much time, fire up your favourite text editor, I personally use sublime text, but you can use simple notepad to get started with SAPUI5, no need of Eclipse or webIde.

Before getting into code, lets understand what is SAPUI5. SAPUI5/OpenUI5 is a javascript library built on top of HTML5, CSS3 to provide data rich UI elements suitable for enterprise scenarios. UI5 library provides beutiful UI elements to build enterprise grade apps and concentartes on enhancing the user experience.

Let's create a workspace folder in your system hardrive, called SAPUI5_Workspace
Folder

And create a application folder called myApp in SAPUI5_Workspace folder
App Folder

Let's create an index.html file in myApp folder. To do that, go to command prompt, navigate to the myApp folder in command prompt, and execute "notepad index.html" command and hit enter.
index.html

You will see a confirmation message in notepad, as shown below, click on "Yes" to create a "index.html" file.

confirmation

Now you have basic html file, lets add some code to make this html5 file. Copy code from below gist to your index.html file and save.

The ablove code is pretty basic, we are creating a HTML5 file with title "SAPUI5 tutorial" and have a body which contains a div with id as "content".
Right click on the file "index.html" and select "open with" chrome, if you don't have chrome installed, use internet explorer. As we have not added any code to the page, page will be empty, but if you see the tab, you would be able to see the "SAPUI5 tutorial" title. So our html5 file is working fine.
title

So to make use of SAPUI5 in this HTML5 file, we have to bootstrap SAPUI5. Bootstraping of ui5 is nothing but initializing the UI5 core modules with few configuraions. Add following script to the index.html file in "header" tag just below "title" tag.

Above script tag initializes UI5 core libraries with the following configurations.

  1. We are loading SAPUI5 library/resources from the server, alternatively you can download the files from this link and keep "resources" folder in "myApp" folder. In that case just change the src to " src='resources/sap-ui-core.js' "
  2. We specify the required UI5 library “sap.m”, we are using sap.m as these controls are more user friendly, responsive and optimised for mobile usage.
  3. The UI5 controls support different themes, we choose “sap_bluecrystal” as our default theme.
  4. To make use of the most recent functionality of OpenUI5 we define the compatibility version as “edge”
  5. We configure the process of “bootstrapping” to run asynchronously.

    Also create one more "script" tag just below the bootstrapping code, which listens to the ui5 core library init event. The code looks as follows.

    Above code listens to sap core library init event, and creates an instance of sap.m.Button and adds this button to the "content" div. Run index.html in chrome, you should see the following button in the web page.

button_page

Congratulations!!! If you are able to see "click me" button in the web page, your app can now use sapui5/openUI5 controls and you are ready to build UI5 apps.
Your final index.html should look like this :

In my next blog post we will create an UI5 App, explain about MVC pattern, list down the availbale IDE's UI5 for development, also I will explain the ways to structure the code.

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