OPEN (SAP) UI5 Learning Starter Series IV: A Better Primer series-Official walkthrough

Long time no update, I really do not know what to write, because as the entry series, in fact, should be more operations than theory, and in the UI5 SDK in the Explorer has a variety of control usage, so there is no need to do it again, or to see the official usage more authentic.

Take a look at the proposed project structure based on the latest library.

In addition, I think for beginners is a very good news, that is, UI5 version from 1.28 to 1.30 and later, the tutorial series has a major update, before the Get started->tutorials->application Best practice now to Tutorial->walkthrough, with walkthrough all the steps to finish, basically UI5 even if you can get started, each step in explored can see the effect, and can be downloaded to the full code, so for this reason, I think I wrote the introductory series can basically no longer look, follow this walkthrough walk is enough.

Links posted here: https://openui5.hana.ondemand.com/#docs/guide/3da5f4be63264db99f2e5b04c5e853db.html

In addition to the walkthrough, 1.30 and later update also added a lot of other changes, here I think the more important part of this content in the process of walkthrough should also be felt.

Project directory Structure

In previous versions, the official best practices or sample code typically put view files and controller files in a directory, and it's clear that this kind of organization of code would be confusing for managing a slightly larger application, but the authorities did not give a clear way of how to organize the code. After the 1.30 update, there is a special article in the documentation that describes the directory structure. Here I have a general introduction.

The three main directories are the root, WebApp, and test directories.

• Root Directory
  As the name implies, is the root directory of the entire project, the directory name can be any project name, in this directory contains the file should be the code of the app you write some other than the auxiliary files, such as engineering files or some descriptive files, if these files are more, you can also create a directory to manage. For example, you can put all the document files in the Doc directory and so on.
• WebApp Directory
  This directory contains all of the application's code files, such as view files, JS files for processing logic, localized resource files i18n files, model files (optional), and test-related files (placed in a separate test directory).
• Test Directory
  This directory should be used to store test-related files.

Specific details or to see the official introduction: https://openui5.hana.ondemand.com/#docs/guide/003f755d46d34dd1bbce9ffe08c8d46a.html

Apply Descriptor File

In the 1.28 and before, a single application can be wrapped into component, can be used to describe some of the application information through the component metadata, such as dependent libraries, resource files (CSS, i18n), etc., or the application of some common configuration information, Put them in the component.js. Starting with 1.30, UI5 introduced the application descriptor file Manifest.json, which is what the authorities say:

The descriptor for applications, components, and libraries are inspired by the Web application Manifest concept introduced by the website. The descriptor provides a central, machine-readable and easy-to-access location for storing metadata associated with an AP Plication, an application component, or a library.

We can put some configuration information of the application into this Manifest.json, UI5 provides the API to retrieve the corresponding configuration information, and when we need to put this app in Fiori Launchpad, some corresponding configuration information will be Fiori The launchpad read.

Summarize

UI5 's developer Guide is more readable, so it is recommended that if you want to really master UI5 or to take a moment to take the time to guide the guide, but I am ashamed of myself have not finished the whole look, are encountered where do not understand and then go to find, Fortunately, after 1.30, the search function is added, which allows you to quickly locate the part you are interested in.

As for this UI5 Learning Primer series, as I said at the beginning, I feel that the official guide is now strong enough to make no more wheels on its own. If further in-depth study, javsscript in-depth understanding is essential, at the same time to see that SAP is also actively embracing open source, in the UI5 library to use a lot of open source libraries, so for these libraries we also need to do in-depth understanding, Then, on this basis, we can understand the architecture of UI5, then we will be able to juchongruoqing.

OPEN (SAP) UI5 Learning Starter Series IV: A Better Primer series-Official walkthrough