在之前的章節中，我們已經介紹完了MVC的架構和實現，現在我們來講一下，SAPUI5的結構

這一步，我們將所有的UI資產從index.html里面獨立封裝在一個組件里面

這樣組件就變得獨立，可復用了。這樣，無所什么時候我們去訪問資源的時候，我們都直接訪問組件文件而不是index.html。這種方式使得我們的app變得更加靈活

文件拆分之后長這樣

首先，我們先新建一個Component.js

webapp/Component.js (New)

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

sap.ui.define(["sap/ui/core/UIComponent","sap/ui/model/json/JSONModel","sap/ui/model/resource/ResourceModel"
], (UIComponent, JSONModel, ResourceModel) => {"use strict";return UIComponent.extend("ui5.walkthrough.Component", {metadata : {"interfaces": ["sap.ui.core.IAsyncContentCreation"],"rootView": {"viewName": "ui5.walkthrough.view.App","type": "XML","id": "app"}},init() {// call the init function of the parentUIComponent.prototype.init.apply(this, arguments);// set data modelconst oData = {recipient : {name : "World"}};const oModel = new JSONModel(oData);this.setModel(oModel);// set i18n modelconst i18nModel = new ResourceModel({bundleName: "sap.ui.demo.walkthrough.i18n.i18n"});this.setModel(i18nModel, "i18n");}});
});

接下來，我們去修改App.controller.js

sap.ui.define(["sap/ui/core/mvc/Controller","sap/m/MessageToast"
], (Controller, MessageToast) => {"use strict";return Controller.extend("ui5.walkthrough.controller.App", {onShowHello() {// read msg from i18n modelconst oBundle = this.getView().getModel("i18n").getResourceBundle();const sRecipient = this.getView().getModel().getProperty("/recipient/name");const sMsg = oBundle.getText("helloMsg", [sRecipient]);// show messageMessageToast.show(sMsg);}});
});

修改index.js

webapp\index.js

sap.ui.define(["sap/ui/core/ComponentContainer"
], (ComponentContainer) => {"use strict";new ComponentContainer({name: "ui5.walkthrough",settings : {id : "walkthrough"},async: true}).placeAt("content");
});

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.

最終實現效果還是和之前一樣