HTML5 mobile web Application Development-SAP UI5 (7)

HTML5 mobile web Application Development-SAP UI5 (7)

In SAPUI5, components can be encapsulated using Component. To encapsulate a Component, the basic code of Component is as follows:

sap.ui.define([   "sap/ui/core/UIComponent"], function (UIComponent) {   "use strict";   return UIComponent.extend("", {      init : function () {         // call the init function of the parent         UIComponent.prototype.init.apply(this, arguments);}   });});

Analyze the code meaning of the Component framework and reference the UIComponent basic space in core. Compile the Component in UIComponent. extend to perform the extension.

We try to encapsulate the previous application into a Component and create a Component. js file. The Code is as follows:

sap.ui.define([   "sap/ui/core/UIComponent",   "sap/ui/model/json/JSONModel",   "sap/ui/model/resource/ResourceModel"], function (UIComponent, JSONModel, ResourceModel) {   "use strict";   return UIComponent.extend("sap.ui.demo.wt.Component", {            metadata : {rootView: "sap.ui.demo.wt.view.App"},    init : function () {         UIComponent.prototype.init.apply(this, arguments);         var oData = {            recipient : {               name : "World"            }         };         var oModel = new JSONModel(oData);         this.setModel(oModel);         var i18nModel = new ResourceModel({            bundleName : "sap.ui.demo.wt.i18n.i18n"         });         this.setModel(i18nModel, "i18n");      }   });});

We put the initialization functions and data model binding configurations in the original Controller. js file into Component. js and modify the Controller. js file accordingly:

 

 

sap.ui.define([   "sap/ui/core/mvc/Controller",   "sap/m/MessageToast"], function (Controller, MessageToast) {   "use strict";   return Controller.extend("sap.ui.demo.wt.controller.App", {      onShowHello : function () {         var oBundle = this.getView().getModel("i18n").getResourceBundle();         var sRecipient = this.getView().getModel().getProperty("/recipient/name");         var sMsg = oBundle.getText("helloMsg", [sRecipient]);         MessageToast.show(sMsg);      }   });});

In the Controller. js file, only the functions to be used in the project are retained, which makes the logic of each file in the project clearer.

 

In index.html, we can directly call Component:

 

<script>         sap.ui.getCore().attachInit(function () {            new sap.ui.core.ComponentContainer(               name : "sap.ui.demo.wt"            }).placeAt("content");         });      </script>

In the SAP Fiori application, each application has a configuration file named manifest. json, which defines the project configuration information of some columns. In this example, the manifest file is as follows:

 

 

{"_ Version": "1.1.0", "sap. app ": {" _ version ":" 1.1.0 "," id ":" sap. ui. demo. wt ", // define the namespace" type ":" application "," i18n ":" i18n/i18n. properties "," title ":" {appTitle} "," description ":" {appDescription} "," applicationVersion ": {" version ": "1.0.0"}, "ach": "CA-UI5-DOC"}, "sap. ui ": {" _ version ":" 1.1.0 "," technology ":" UI5 "," deviceTypes ": {" desktop ": true," tablet ": true, "phone": true}, "supportedThemes": ["sap_bluecrystal"]}, "sap. ui5 ": {" _ version ":" 1.1.0 "," rootView ":" sap. ui. demo. wt. view. app "," dependencies ": {" minUI5Version ":" 1.30 "," libs ": {" sap. m ":{}}," models ": {" i18n ": {" type ":" sap. ui. model. resource. resourceModel "," settings ": {" bundleName ":" sap. ui. demo. wt. i18n. i18n "}}}}}

As you can see, the manifest. json file defines a series of basic information including the ui5 version and data model. This configuration file will be continuously improved in the future development process.