Fiori 代码规范2---代码结构详解1

2    Details for structure

2.1    index.html

The entryof app. It has two script tags.

The first script tag is to load and initialize the core modules with the followingconfiguration options:

• The src attribute tells the browser where to find the SAPUI5 core library – it initializes the SAPUI5 runtime and loads additional resources, such as the libraries specified in the data-sap-ui-libs attribute. The default version( configure as above) depends the server environment version. If you want to use the specified version, you should set the src with the specified version, as below:

             https://sapui5.netweaver.ondemand.com/1.28.22/resources/sap-ui-core.js

            The sap-ui-core.js file contains a copy of jQuery,this means that you can use all jQuery features.

• We specify the required UI library sap.m containing the UI controls we need for app. We can add other libraries here and separate libraries by comma.
• The SAPUI5 controls support different themes, we usually choose sap_belize as our default theme.
• To make use of the most recent functionality of SAPUI5 we define the compatibility version as edge.
• We tell SAPUI5 core that resources in the demo.md namespace are located in the same folder as index.html. This is, for example, necessary for apps that run in the SAP Fiori launchpad.
• data-sap-ui-xx-bindingsyntax="complex", we need the bindingsyntax when we need to format our value in the view.
  

2.2    Component.js & manifest.json

The configuration of the app.

In the index.html second script tag, we instantiate the component by the method sap.ui.core.ComponentContainer , it instantiates the component by searching for a Component.js file in the namespace that is passed in as an argument.

In the component.js , itmust have two parts at leaset as below:

 

The initmethod will run when the app starts, and we can define global variables here,which can be used in the whole application.

 

metadata is the configuration of the app,such as the app name and description, the router  and so on. We can put allthe configuration in the metadata as key-value(figure 2), also can configurethe app in a json file : manifest.json .

In the manifest.json , there are three partsas following:

• sap.app

The sap.app namespace contains thefollowing application-specific attributes:

•     id (mandatory): The namespace ofour application component

                The ID must not exceed 70 characters.It must be unique and must correspond to the component ID/namespace.

•     type: Defines what we want to configure,here: an application
•     i18n: Defines the path to the resourcebundle file
•     title: Title of the application inhandlebars syntax referenced from the app's resource bundle
•     description: Short description text what the application does in handlebars syntax referenced from the app's resource bundle
•     applicationVersion: The version of the application tobe able to easily update the application later on
•     dataSources: The service url of the app.

• sap.ui

The sap.ui namespace contributes the followingUI-specific attributes:

•     technology: This value specifies the UItechnology; in our case we use SAPUI5
•     deviceTypes: Tells what devices are supported bythe app: desktop, tablet, phone (all true by default)
•     supportedThemes: An array containing a list of SAPthemes supported by the app, for example sap_belize

• sap.ui5

The sap.ui5 namespaceadds SAPUI5-specific configuration parameters that are automaticallyprocessed by SAPUI5. The most important parameters are:

•     rootView: If you specify this parameter, thecomponent will automatically instantiate the view and use it as the root forthis component
•     dependencies: Here we declare the UI librariesused in the application
•     models: In this section of the descriptorwe can define models that will be automatically instantiatedby SAPUI5 when the app starts. Here we can now define the       localresource bundle. We define the name of the model "i18n" as key andspecify the bundle file by namespace.
•     routing: Here we define the routes of the app for different views.
•     resources: We usually specify thestyle file of the app.

Conventions

• The component is named Component.js.
  
• Together with all UI assets of the app, the component is located in the webapp folder.
• The index.html file is located in the webapp folder if it is used productively.
• The descriptor file is named manifest.json and located in the webapp folder.
• Use translatable strings for the title and the description of the app.