Jerry has been in contact with SAP UI5 since he joined the CRM Fiori development team of SAP Chengdu Research Institute in 2014. He has published many articles on the working principle and source code analysis of SAP UI5 in the SAP community and on the WeChat public account of "Wang Zixi".
In Jerry’s article for newbies who don’t know anything about SAP UI5, what materials should they learn from? He knows that it is not easy for a developer with an ABAP development background to transform to the SAP UI5 development field. Therefore, I designed this learning for SAP UI5 beginners in my spare time. The tutorial splits the process of developing a complete SAP UI5 application into several steps, and strives to cover all the knowledge points involved in each step. These knowledge points may not be as in-depth as my UI5 source code analysis series of articles, but I strive to be simple and easy to understand, so that SAP UI5 beginners can understand.
The source code of each step of this tutorial is stored on my Github , which is identified by folders 01, 02, 03, etc.
Each step is based on the previous step, adding several new features. It is recommended that beginners with zero foundation or little knowledge of SAP UI5, follow the order from the first step to learn step by step, download these codes to the local, cooperate with the text of the tutorial, and do it yourself to deepen understanding.
If you have any questions about each step of the tutorial, please leave a comment and leave a message in the corresponding step article of the tutorial.
As the first step of the tutorial, we need to understand the most basic HTML knowledge.
Please create a new folder on your computer and name it. For example, I named it Walkthrough. Enter the Walkthrough folder, and then create a new folder called 01, which represents the first step of this tutorial.
Enter the 01 folder and create a new webapp folder. This name is used by web application conventions. Everyone tends to use this name. Of course, if you want to use other names, there is no problem.
Enter webapp, create a new index.html file, and paste the following code into it:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>SAPUI5 Walkthrough</title> </head> <body> <div>Hello World</div> </body> </html>
Save, open with Chrome browser, you can see the following page:
Then the first step of this tutorial is successfully completed.
This simple HTML page has the following four key points:
For a detailed introduction to these keywords, please continue reading in this article: SAP UI5 Beginner's Tutorial: Hello World