首页 > SAP > HANA > Develop Hello world SAPUI5 application in SAP WebIDE
2019
08-27

Develop Hello world SAPUI5 application in SAP WebIDE

Hello everyone, in this SAP Web IDE tutorials, we will explain you on How to develop Hello World SAPUI5 application in SAP WebIDE.

1.Prerequisites

You should have access to the SAP HANA Cloud version of SAP Web IDE. Please click here to get your free developer account for SAP Web IDE.

2.Step-by-Step Procedure

1. Log on to your SAP Web IDE.

Develop Hello world SAPUI5 application in SAP WebIDE - 第1张  | 优通SAP
SAP WebIDE

2. Navigate to File → New → Project from Template to create SAPUI5 application.

Develop Hello world SAPUI5 application in SAP WebIDE - 第2张  | 优通SAP
Create a SAPUI5 Project from Template

3. There are many template available in SAP WebIDE. Go head and click on each template to know more about each and every template. After that select SAPUI5 Application Project template and hit Next.

Develop Hello world SAPUI5 application in SAP WebIDE - 第3张  | 优通SAP
SAPUI5 Application Project

4. In the next screen enter project name and hit Next.

Develop Hello world SAPUI5 application in SAP WebIDE - 第4张  | 优通SAP
SAPUI5 Project Information

5. In the template customization step, choose View Type as “XML”, enter Namespace and hit Next.

Develop Hello world SAPUI5 application in SAP WebIDE - 第5张  | 优通SAP
SAPUI5 Project Customization

6. In the Confirm-确认事务的一种行为方式,如采购为使材料能够准确满足生产需求,必须confirm厂商的交期.ation step click on Finish.

Develop Hello world SAPUI5 application in SAP WebIDE - 第6张  | 优通SAP
SAPUI5 Project Confirm-确认事务的一种行为方式,如采购为使材料能够准确满足生产需求,必须confirm厂商的交期.ation

7. A new SAPUI5 project will be created.Expand the project to see the different components of the project.

Develop Hello world SAPUI5 application in SAP WebIDE - 第7张  | 优通SAP
SAPUI5 Project

8. Lets see what are those different components.

Under “view” folder we have View1 and its controller.If you want to create a new view you should be creating under this folder only.
Under “helloworld” folder, we have 3 files. index.html is the root file of the whole project.We are going to access any application by calling this index.html file only. neo-app.json and .project.json are the supporting files for the project at this point they are not important to discuss.

[adsenseyu1]

9. Lets see the output of our SAPUI5 application at this moment. Select index.html and hit Run.

Develop Hello world SAPUI5 application in SAP WebIDE - 第8张  | 优通SAP
Run SAPUI5 Project

10. A new Application Preview window will open and you should see below output. As we have created one view in the project.

Develop Hello world SAPUI5 application in SAP WebIDE - 第9张  | 优通SAP
SAPUI5 Application Preview

11. Lets go back to WebIDE, add below changes to the application

Add a button to the View1.
Implement “onPress” event of the button and call a simple Hello World message.
Change the title of the View1.

12. Double click on the “View1.xml”. A view editor will be open beside to the project explorer. Adjust the existing code by adding button to the view.

13. Now double click on the “View1.controller.js” to add the code for handling “onPress” event of the button. There are 4 default hook methods available in any controller. onInit( ), onBeforeRendering( ), onAfterRendering( ) and onExit( ) at this point we are not going to discuss those, just add the below code to the controller.

14. Save the all changes to the project and select index.html file and hit Run. You should see the below output of the application.

Develop Hello world SAPUI5 application in SAP WebIDE - 第10张  | 优通SAP

15. Hit on the button, you should see a Hello World message like below.

Develop Hello world SAPUI5 application in SAP WebIDE - 第11张  | 优通SAP

Congrats, you have successfully created your Hello world SAPUI5 application in SAP WebIDE.

Please stay tuned to us for more SAP WebIDE tutorials.Please feel free to comment and let us know your feedback. You feedback will keep us alive.

最后编辑:
作者:yangsen
有需要可在文章留言或者邮件yan252@163.com给我。