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 onInit and onBeforeRendering methods. The methods of the ComponentContainer call the corresponding methods of the UI component internally.

The following example assumes 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");