Using UI Components in Applications

SAPUI5 provides two options to instantiate a component container and a UI component within an application.

To render UI components, you must wrap them in a ComponentContainer. It is not possible to use the placeAt method to place UI components directly in a page. A component container carries specific settings and also contains the lifecycle methods of a regular control, such as the onBeforeRendering and onAfterRendering methods. The lifecycle methods of the ComponentContainer are forwarded to the corresponding methods of the nested UI component.

The following examples show the options that exist to instantiate a ComponentContainer and a UIComponent in an application. They assume that the samples.components.button component exists and is loaded:

• Option 1: Create the component first, then add the component to the container, and finally use the placeAt method to place the component on the page:

  var oComp = sap.ui.getCore().createComponent({
                   name: "samples.components.shell",
                   id: "Comp1",
                   settings: {appTitle: "Hello World 1"}
          });
  
          var oCompCont = new sap.ui.core.ComponentContainer("CompCont1", {
                   component: oComp
          });
          oCompCont.placeAt("target1");

• Option 2: Pass the component to the componentContainer constructor:

  var oCompCont2 = new sap.ui.core.ComponentContainer("CompCont2", {
          name: " samples.components.shell",
          settings: {text: "Hello World 2"}
          });
          oCompCont2.placeAt("target2");