Hello World

Create Your First SAPUI5 Application From Scratch.

     SAPUI5 is a client side web ui library implemented in javascript.What we are going to do is simple.Everything starts with hello world .So let it be.We are going to create a html file and load SAPUI5 bootsrap .The we will add a page and display a text saying hello world.Then we will try it running in a browser and see how it looks.So lets start.


1.Right click from your desktop and select New->Text Document.Press Enter.A new file should be created in the name New Text Document.Double click and open it.

2.In the notepad select File->Save As.. .Give option save as type to All.Give Filename 'MyFirstSAPUI5App.html' and save it.Now a new file MyFirstSAPUI5App.html will be created in your desktop.

3.Right click MyFirstSAPUI5App.html and select open with->Notepad.

4.This is the tricky part.Add SAPUI5 bootstrap inside html file.Copy the code and
Paste it inside your html file.

<!DOCTYPE html> tells the browser that this is written in HTML5 do what is needed.
<script> tag loads and initialise SAPUI5.ie it tells where to find the resources which libraries should be used and which theme to load.Here we use bluecryatal theme and sap.m library.We can load resources from cdn or from local or from your server.Use 
src ="https://sapui5.hana.ondemand.com/resources/sap-ui-core.js".
<body> this is where our content will be shown.
5.Now add some code to initialise the app.

What we are doing is attach a function call to the global attachInit event.By doing this as soon as SAPUI5 is loaded our function will be called.If it is not called then be sure that SAPUI5 is not loaded.Check your resource src and make sure it is accessible.Inside this function we create an App control and attach pages to it.If we add pages without adding it to an app control the page content may not be seen.This is a common mistake new SAPUI5 developers making.So ever you make a page control dont forget to add it to App control.

6.Add some Controls.We are creating  two page controls and add a button to first page.On clicking it will go to next page.add the app control to html body.
// create the first page
var page1 = new sap.m.Page("page1", {
    title: "Hello World",
    content: new sap.m.Button({
        text: "Next Page",
        press: function() {
            // navigate to page2
// create the second page with a back button
var page2 = new sap.m.Page("page2", {
    title: "Welcome To SAPUI5 World",
    showNavButton: true,
    navButtonPress: function() {
        // go back to the previous page
// add both pages to the app
// place the app into the HTML document

7.See it in Action....Boom...

My First UI5 Application
8.Dont forget to play around with it.Add some more controls and enjoy..

If you enjoyed this post, Please Share!!


Post a Comment

Powered by Blogger.