Skip to content

Latest commit

 

History

History
56 lines (39 loc) · 3.23 KB

Component_Controller_27ce0e4.md

File metadata and controls

56 lines (39 loc) · 3.23 KB
loio
27ce0e4987cd426f8fa3e60836316428

view on: demo kit nightly build | demo kit latest release

Component Controller

The component controller is a script file (written in either JavaScript or TypeScript) that provides the runtime metadata and contains the component methods.

When written in JavaScript, a component controller is defined with the asynchronous module definition (AMD) syntax; this does not apply when using TypeScript. In the sap.ui.define statement the required dependencies can be declared which can be used in the controller.

To create a component, you extend either the Component or UIComponent base class and pass the name of the module (namespace + .Component).

sap.ui.define([
  "sap/ui/core/UIComponent"
], (UIComponent) => {
  "use strict";

  return UIComponent.extend("my.app.Component", { // given "my.app" being the value of sap.app/id in manifest.json
    metadata: {
      interfaces: [
        "sap.ui.core.IAsyncContentCreation"
      ],
      manifest: "json"
    },
    // ...
  });
});

The metadata of the component controller should be used to declare the runtime metadata only (which are the properties, aggregations, associations and events).

We recommend to define the component metadata externally in the descriptor (manifest.json), because the descriptor for components is mandatory for modern components and allows performance optimizations.

We recommend to add the sap.ui.core.IAsyncContentCreation marker interface when defining a new component. Using this interface allows the component to be created fully asynchronously. This interface will implicitly set the component's rootView and router configuration to async. Nested views will also be handled asynchronously. Additionally, the error handling during the processing of views is stricter and will fail if a view definition contains errors, e.g. broken binding strings.

  • Component Metadata
    The component class provides specific metadata for components by extending the ManagedObject class. The UIComponent class provides additional metadata for the configuration of user interfaces or the navigation between views.
  • Methods Controlling the Initial Instantiation
    OpenUI5 provides two methods for the initial instantiation of the component.

Related Information

Using and Nesting Components