SapHanaTutorial.Com HOME     Learning-Materials Interview-Q&A Certifications Quiz Online-Courses Forum Jobs Trendz FAQs  
     Explore The World of Hana With Us     
About Us
Contact Us
 Apps
X
HANA App
>>>
Hadoop App
>>>
Tutorial App on SAP HANA
This app is an All-In-One package to provide everything to HANA Lovers.

It contains
1. Courses on SAP HANA - Basics, Modeling and Administration
2. Multiple Quizzes on Overview, Modelling, Architeture, and Administration
3. Most popular articles on SAP HANA
4. Series of Interview questions to brushup your HANA skills
Tutorial App on Hadoop
This app is an All-In-One package to provide everything to Hadoop Lovers.

It contains
1. Courses on Hadoop - Basics and Advanced
2. Multiple Quizzes on Basics, MapReduce and HDFS
3. Most popular articles on Hadoop
4. Series of Interview questions to brushup your skills
Apps
HANA App
Hadoop App
';
Search
Stay Connected
Search Topics
Topic Index
+
-
SAPUI5 Overview
+
-
SAP Fiori Overview
+
-
SAP Web IDE
+
-
SAPUI5 Basic Concepts
+
-
Data Binding and Model

SAPUI5 Hello World using Web IDE

In previous articles Prerequisite for SAPUI5 and Fiori, What is SAPUI5? and What is Fiori?_, we explained the basics of SAPUI5 and Fiori.

In this article, we will create our first Hello World SAPUI5 application using SAP Web IDE.

Step 1: Open SAP Web IDE

Go to https://account.hanatrial.ondemand.com and log in to your SAP Cloud Platform cockpit. If you first time user, you need to register.

SAPUI5 Hello World using Web IDE

In the SAP Cloud Platform Cockpit, as shown below. Click on the Services menu item on the left. Click on the SAP Web IDE box. You may need to scroll down to find this box.

SAPUI5 Hello World using Web IDE

Finally, you should have Web IDE open which would look like below.

SAPUI5 Hello World using Web IDE

Note: If you do not have access to SAP Cloud Platform or you do not find SAP Web IDE in your Cloud Platform Cockpit, refer to the article SAP Web IDE Overview.

Step 2: Create Project

1. Right click on "Workspace" and select "New" --> "Folder".

SAPUI5 Hello World using Web IDE

2. Enter "HelloWorld" as folder name and click on OK.
3. Right click on the folder "HelloWorld" and select "New" --> "SAPUI5 View"

SAPUI5 Hello World using Web IDE

4. In next window, enter namespace name as "saphanatutorial" and View Name as "HelloWorld".

SAPUI5 Hello World using Web IDE

5. Click on Next and Finish. You should a view file (HelloWorld.view.xml) and controller file (HelloWorld.controller.xml) created as shown below.

SAPUI5 Hello World using Web IDE

6. Open HelloWorld.view.xml and paste below code.
  <mvc:View
    xmlns="sap.m"
    xmlns:mvc="sap.ui.core.mvc"
    controllerName="saphanatutorial.controller.HelloWorld" >
    <Button
        text="Say Hello"
        press="onPress"/>
  </mvc:View>

7. Open HelloWorld.controller.js file and paste below code.
  sap.ui.define([
   "sap/ui/core/mvc/Controller"
  ], function(Controller) {

   return Controller.extend("saphanatutorial.controller.HelloWorld", {
    onPress: function(Event) {
    alert("Hello! Button clicked");
   }

   });
  });

8. Right click on the "HelloWorld" folder again and select "New" --> "File".

SAPUI5 Hello World using Web IDE

9. Enter the file name as "index.html".

SAPUI5 Hello World using Web IDE

10. Open index.html file and paste below code.
  <!DOCTYPE html>
  <html>
  <head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <meta charset="UTF-8">
    <title>SAPUI5 HelloWorld</title>
    <script
      id="sap-ui-bootstrap"
      src='https://sapui5.hana.ondemand.com/resources/sap-ui-core.js'
      data-sap-ui-theme="sap_belize"
      data-sap-ui-libs="sap.m"
      data-sap-ui-resourceroots='{
          "saphanatutorial": "./"
        }'>
    </script>
    <script>
      sap.ui.getCore().attachInit(function () {
        var oView = sap.ui.view({
          viewName: "saphanatutorial.view.HelloWorld",
          type:sap.ui.core.mvc.ViewType.XML,
        });
        oView.placeAt("content");
      });
    </script>
  </head>
  <body class="sapUiBody" id="content">
  </body>
  </html>

Completed! Now right click on "HelloWorld" folder and select Run --> Run index.html.

SAPUI5 Hello World using Web IDE

It will open the project and SAPUI5 page with a Button will appear. Click on the button to check alert.

SAPUI5 Hello World using Web IDE

Note: You can download the complete project from here.
You may also Run the project from here. Note that this link may not work in IE browser.

Let's understand View and Controller

In the above project, we created an SAPUI5 view and controller. Let's understand what is View and Controller.

SAPUI5 application has 2 major part View and Controller.

SAPUI5 Hello World using Web IDE

View: View is the place where we define UI. For example, in view we decide how a Button should look like.
Controller: Controller is the place where we write all logics. For example, in controller we decide what happens when a Button is clicked.

Please note that in HelloWorld project
  • Button is designed in View
  • Button Click functionalities is specified in Controller


SAPUI5 Hello World using Web IDE

Note 1: There is also another very important component called Model. To know more about View, Controller and Model, refer to the article SAPUI5 Overview.

Note 2: To know more about View and Controller, refer to the article Deep dive into SAPUI5 View and Controller_

What's Next?

Below articles might help you to know more about SAPUI5.

If you have any question, please post in the comment or contact us.



Support us by sharing this article.



Explore More
Close X
Close X

SAPUI5 Hello World using Web IDE

Leave a Reply

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

Current day month ye@r *

 © 2017 : saphanatutorial.com, All rights reserved.  Privacy Policy