UI5-文檔-4.9-Component Configuration

時間 2019-11-12

標籤 ui5 文檔 4.9 component configuration 简体版

原文原文鏈接

在咱們介紹了模型-視圖-控制器(MVC)概念的全部三個部分以後，如今咱們將討論SAPUI5的另外一個重要的結構方面。html

在這一步中，咱們將把全部UI資產封裝在一個獨立於索引的組件中。html文件。組件是SAPUI5應用程序中使用的獨立且可重用的部件。不管什麼時候訪問資源，咱們都將相對於組件(而不是相對於index.html)執行此操做。這種架構上的變化容許咱們的應用程序在比靜態索引更靈活的環境中使用。html頁面，如在周圍的容器中，如SAP Fiori launchpad。web

Previewjson

An input field and a description displaying the value of the input field (No visual changes to last step)bootstrap

Codingapi

You can view and download all files at Walkthrough - Step 9.架構

Folder Structure for this Stepmvc

在此步驟以後，您的項目結構將如圖所示。咱們將建立Component.js文件並修改app中的相關文件。app

webapp/Component.js (New)webapp

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);

      }

   });

});

咱們建立一個初始組件。在webapp文件夾中的js文件將保存咱們的應用程序設置。組件的init函數由SAPUI5在實例化組件時自動調用。咱們的組件繼承自基本類sap.ui.core.UIComponent，必須在重寫的init方法中對基類的init函數進行超調用。async

webapp/Component.js

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.walkthrough.Component", {

      metadata : {

         rootView: {

            "viewName": "sap.ui.demo.walkthrough.view.App",

            "type": "XML",

            "async": true,

            "id": "app"

         }

      },

      init : function () {

         // call the init function of the parent

         UIComponent.prototype.init.apply(this, arguments);

         // set data model

         var oData = {

            recipient : {

               name : "World"

            }

         };

         var oModel = new JSONModel(oData);

         this.setModel(oModel);

 

         // set i18n model

         var i18nModel = new ResourceModel({

            bundleName : "sap.ui.demo.walkthrough.i18n.i18n"

         });

         this.setModel(i18nModel, "i18n");

      }

   });

});

在init函數中，咱們實例化了數據模型和i18n模型，就像之前在app控制器中所作的那樣。請注意，模型是直接在組件上設置的，而不是在組件的根視圖上設置的。可是，因爲嵌套控件會自動從其父控件繼承模型，所以模型也能夠在視圖中使用。該Component.js文件如今由兩部分組成:新的元數據部分定義了對根視圖的引用，以及前面介紹的初始化組件時調用的init函數。正如咱們以前所作的，而不是直接在index.html中顯示根視圖。組件如今將管理app視圖的顯示。

webapp/controller/App.controller.js

sap.ui.define([

   "sap/ui/core/mvc/Controller",

   "sap/m/MessageToast"

], function (Controller, MessageToast) {

   "use strict";

   return Controller.extend("sap.ui.demo.walkthrough.controller.App", {

      onShowHello : function () {

         // read msg from i18n model

         var oBundle = this.getView().getModel("i18n").getResourceBundle();

         var sRecipient = this.getView().getModel().getProperty("/recipient/name");

         var sMsg = oBundle.getText("helloMsg", [sRecipient]);

         // show message

         MessageToast.show(sMsg);

      }

   });

});

刪除onInit函數和所需模塊;這如今在組件中完成。如今您已經看到了上面顯示的代碼。

webapp/index.html

<!DOCTYPE html>

<html>

   <head>

      <meta http-equiv="X-UA-Compatible" content="IE=edge">

      <meta charset="utf-8">

      <title>Walkthrough</title>

      <script

         id="sap-ui-bootstrap"

         src="/resources/sap-ui-core.js"

         data-sap-ui-theme="sap_belize"

         data-sap-ui-libs="sap.m"

         data-sap-ui-bindingSyntax="complex"

         data-sap-ui-compatVersion="edge"

         data-sap-ui-preload="async"

         data-sap-ui-resourceroots='{

            "sap.ui.demo.walkthrough": "./"

         }' >

      </script>

      <script>

         sap.ui.getCore().attachInit(function () {

            new sap.ui.core.ComponentContainer({

         name: "sap.ui.demo.walkthrough",

         settings : {

            id : "walkthrough"

         }

            }).placeAt("content");

 

         });

      </script>

   </head>

   <body class="sapUiBody" id="content">

   </body>

</html>

Conventions

　　在索引頁上，咱們如今實例化組件，而不是應用程序視圖。輔助方法sap.ui.core.ComponentContainer經過搜索組件實例化組件。做爲參數傳入的名稱空間中的js文件。組件自動加載咱們在上面定義的根視圖並顯示它。若是如今調用index.html文件，應用程序應該仍然看起來同樣，但如今被打包成一個UI組件.

　　▪組件名爲component .js。

　　▪組件與應用程序的全部UI資產一塊兒位於webapp文件夾中。

　　▪index.html文件被有效地使用，它位於webapp文件夾中。

Parent topic: Walkthrough

Previous: Step 8: Translatable Texts

Next: Step 10: Descriptor for Applications

Related Information

Components

API Reference:sap.ui.core.mvc.ViewType

Samples:sap.ui.core.mvc.ViewType