头图

A set of step-by-step learning tutorials for SAP UI5 beginners

Tutorial Directory

illustrate

Jerry has been in contact with SAP UI5 since joining 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 the WeChat public account "Wang Zixi".

In Jerry's article , what are the best materials for beginners who know nothing about SAP UI5? once mentioned that Jerry has come all the way from SAP UI5 rookie. He knows that it is not easy for developers with only ABAP development background to transform to SAP UI5 development field, so I designed this study for SAP UI5 beginners in my spare time. The tutorial divides 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 articles, but strive to be easy to understand and easy for SAP UI5 beginners to understand.

The source code of each step of this tutorial is stored on my Github , identified by folders 01, 02, 03 and so on.

Each step builds on the previous step with several new features added. It is recommended that beginners with zero foundation or little knowledge of SAP UI5 learn step by step from the first step in order, download these codes to the local, cooperate with the text explanation of the tutorial, and do it yourself to deepen the understanding.

If you have any questions about each step of the tutorial, you are welcome to comment and leave a message in the article corresponding to the steps of the tutorial.

The so-called responsive design means that through various front-end technologies, the page elements are given the ability to automatically adjust the display behavior according to the change of the screen resolution to achieve the best display effect.

Many standard controls of SAP UI5, especially the controls under the namespace sap.m , provide out-of-the-box responsive layout features (Responsiveness). This article will learn through the typical sap.m.Table .

Go to folder 33, execute the command lines npm install and ui5 serve in sequence, and then access the url:

http://localhost:8080/webapp/test/mockServer.html

You can see the following page:

You can see that the invoice list contains five columns by default, which are displayed from left to right.

Open the Chrome developer tools, switch to the Elements panel, click the switch device button, and then select iPhone 12 Pro , you can find that the 5 columns displayed in sequence from left to right on the PC side by default have become 4 columns, and the data in the Supplier field has disappeared. The remaining three fields are also combined into one column to fit the relatively narrow screen size of iPhone 12 Pro .

below is the full implementation of this example.


注销
1k 声望1.6k 粉丝

invalid