Step 9: Component Configuration


After we have introduced all three parts of the Model-View-Controller (MVC) concept, we now come to another important structural aspect of SAPUI5.


Step 9: Component Configuration - 第1张  | 优通SAP


You can view and download all files at Walkthrough – Step 9.

Step 9: Component Configuration - 第2张  | 优通SAP

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)

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.


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.


Delete the onInit function and the required modules; this is now done in the
component. You now have the code shown above.


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.



fourteen + 7 =