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 Hello World - My First SAPUI5 Application

In previous articles, we learnt what is SAPUI5 and OpenUI5. We also learnt how to install SAPUI5 Development Tools in Eclipse.

Now this is the time to get our hands dirty. Let us create our first Hello World SAPUI5 application.

Prerequisites:

  1. You have installed SAPUI5 Development Tools in Eclipse.
  2. You have installed Apache Tomcat Server. Refer to this article to know how to install Apache Tomcat Server.


Follow below steps to create your first SAPUI5 Hello World application

1.    Open Eclipse and go to the menu option, File -> New -> Other. In the New window, open the node SAPUI5 Application Development and select the option Application Project. Click on the Next button.

What is SAPUI5
  1. Enter a project name. For example “HelloWorld”. Select library as sap.m and check the option “Create an Initial View”. Click on Next.

What is SAPUI5

  1. Enter view name as “MyHelloWorld”. Select “XML” as Development Paradigm and click on Finish.

What is SAPUI5

  1. You will see the WebContent folder structure in the Project pane on left side.

What is SAPUI5
  1. Open MyHelloWorld.view.xml file. Change the UI Page Title to “My First SAPUI5 Application”. Enter the below code.
<core:View xmlns:core="sap.ui.core" xmlns:mvc="sap.ui.core.mvc" xmlns="sap.m"
      controllerName="helloworld.MyHelloWorld" xmlns:html="http://www.w3.org/1999/xhtml">
        <Page title="My First SAPUI5 Application">
                        <content>
                        <Button text="Hello World" press="onPress" />
                        </content>
        </Page>
</core:View>


What is SAPUI5
  1. Open MyHelloWorld.controller.js and enter below code.
sap.ui.controller("helloworld.MyHelloWorld", {
                onPress: function(Event){
                                alert("My First SAPUI5 Application");
                }
});


What is SAPUI5
Note: Do not worry if you have not understand the code mentioned above. We will explain them in detail later.

  1. Open index.html file. Right click and select “Run As” -> “Run on Server”.

What is SAPUI5
  1. This will launch the SAPUI5 application. The page will look like below.

What is SAPUI5
  1. Click on Hello World button and this will show the alert message as below.

What is SAPUI5

Congratulation! You have successfully implemented your first SAPUI5 application.


Support us by sharing this article.



Explore More
Close X
Close X

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