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.

You have the following options to load and create a UIComponent:

• Loading the component before creating the container:

  #!js	var oComponent = sap.ui.component({
  		name: "samples.components.sample"
  	});
  
  	var oContainer = new sap.ui.core.ComponentContainer({
  		component : oComponent
  	});
  	oContainer.placeAt("target");
  

• Loading the component while creating the container:

  #!js	var oContainer = new sap.ui.core.ComponentContainer({
  		name: "samples.components.sample"
  	});
  	oContainer.placeAt("target");
  

• Loading the component asynchronously with "manifest first" mode by specifying the URL of the descriptor (manifest.json):

  #!js	var oComponent = sap.ui.component({
  		manifestUrl: "samples/components/sample/manifest.json",
  		async: true
  	});
  
  	var oContainer = new sap.ui.core.ComponentContainer({
  		component : oComponent
  	});
  	oContainer.placeAt("target");
  

• Loading the component asynchronously with "manifest first" mode by specifying the component name:

  #!js	var oComponent = sap.ui.component({
  		name: "samples.components.sample",
  		manifestFirst: true,
  		async: true
   	});
  
  	var oContainer = new sap.ui.core.ComponentContainer({
  		component : oComponent
  	});
  	oContainer.placeAt("target");