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.
- You have installed SAPUI5 Development Tools in Eclipse.
- 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
In the New
window, open the node SAPUI5 Application Development
and select the option Application Project
. Click on the Next
- Enter a project name. For example “HelloWorld”. Select library as sap.m and check the option “Create an Initial View”. Click on Next.
- Enter view name as “MyHelloWorld”. Select “XML” as Development Paradigm and click on Finish.
- You will see the WebContent folder structure in the Project pane on left side.
- 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"
<Page title="My First SAPUI5 Application">
<Button text="Hello World" press="onPress" />
- Open MyHelloWorld.controller.js and enter below code.
alert("My First SAPUI5 Application");
Do not worry if you have not understand the code mentioned above. We will explain them in detail later.
- Open index.html file. Right click and select “Run As” -> “Run on Server”.
- This will launch the SAPUI5 application. The page will look like below.
- Click on Hello World button and this will show the alert message as below.
Congratulation! You have successfully implemented your first SAPUI5 application.