介绍
After we have introduced all three parts of the Model-View-Controller (MVC) concept, we now come to another important structural aspect of SAPUI5.
1.练习效果
2.源码
Folder Structure for this Step
After this step your project structure will look like the figure above. We will
create the Component.js file now and modify the related files in
the app.
3.webapp/Component.js (New)
|
1 2 3 4 5 6 7 8 9 10 11 12 |
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); } }); }); |
We create an initial Component.js file in the webapp folder
that will hold our application setup. The init function of the component is
automatically invoked by SAPUI5 when the
component is instantiated. Our component inherits from the base class
sap.ui.core.UIComponent and it is obligatory to make the super
call to the init function of the base class in the overridden
init method.
4.webapp/Component.js
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 |
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"); } }); }); |
The Component.js file consists of two parts now: The new metadata section that simply defines a reference to
the root view and the previously introduced init function that is called when the component is initialized. Instead
of displaying the root view directly in the index.html file as we did previously, the component will now manage the
display of the app view.
In the init function we instantiate our data model and the
i18n model like we did before in the app controller. Be aware
that the models are directly set on the component and not on the root view of the
component. However, as nested controls automatically inherit the models from their
parent controls, the models will be available on the view as well.
5.webapp/controller/App.controller.js
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
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); } }); }); |
Delete the onInit function and the required modules; this is now done in the
component. You now have the code shown above.
6.webappindex.js
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
sap.ui.define([ "sap/ui/core/ComponentContainer" ], function (ComponentContainer) { "use strict"; new ComponentContainer({ name: "sap.ui.demo.walkthrough", settings : { id : "walkthrough" }, async: true }).placeAt("content"); }); |
We
now create a component container instead of the view in our index.js that instantiates the view for us according to the
component configuration.
7. 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.