Configuring and Instantiating Components

Components are independent and reusable parts used in SAPUI5 applications. They facilitate the encapsulation of closely related parts of an application. This makes the structure of an application and its code easier to understand and to maintain.

SAPUI5 provides the following two types of components:

• Faceless components (class: sap.ui.core.Component)

  Faceless components have no user interface and are used for coding when no UI elements are needed, such as for a service that provides data from a back-end system.

• UI components (class: sap.ui.core.UIComponent)

  UI components extend faceless components and add rendering functionality to the component. They represent a screen area or element on the UI along with the respective settings and metadata. This component type will be covered in the course.

Let's look at the structure of a component.

To render UI components, you must wrap them in a sap/ui/core/ComponentContainer. You cannot use the placeAt method to place UI components directly in a page.

The component container separates the application and the nested component. It is an SAPUI5 control that can be nested at any place within the SAPUI5 control tree.

To load and create a UI component, you can use the following options:

• Create a new component instance asynchronously before creating the container using the create method of sap.ui.core.Component. The separately created component instance can then be passed to the constructor of sap.ui.core.ComponentContainer.
• Create a new component instance asynchronously when creating the container using the constructor of sap.ui.core.ComponentContainer (see the following example).

Let's look at an example. In the following figure, a component instance is instantiated together with the component container. For this reason, the module in which instantiation takes place is dependent on sap/ui/core/ComponentContainer. The constructor of ComponentContainer is passed a settings object with the following properties:

• id

• name

• manifest

• async

• settings

After the component container is created, the placeAt method is called on it to add it to a UI area.