Step 3: Controls


Now it is time to build our first little UI by replacing the “Hello World” text in the HTML body by the SAPUI5 control sap.m.Text. In the beginning, we will use the JavaScript control interface to set up the UI, the control instance is then placed into the HTML body.


Step 3: Controls - 第1张  | 优通SAP


You can view and download all files at Walkthrough – Step 3.


The class sapUiBody adds additional theme-dependent styles for displaying SAPUI5 apps.


Instead of using native JavaScript to display a dialog we want to use a simple SAPUI5 control. Controls are used to define appearance and behavior of
parts of the screen.

In the example above, the callback of the init event is where we now instantiate a SAPUI5 text control. The name of the control is prefixed by the namespace
of its control library sap/m/ and the options are passed to the constructor with a JavaScript object. For our control
we set the text property to the value “Hello World”.

We chain the constructor call of the control to the standard method placeAt that is used to place SAPUI5 controls inside a node of the document object model (DOM) or any
other SAPUI5 control instance. We pass the ID of a DOM node as an
argument. As the target node we use the body tag of the HTML document and give it the ID content.

All controls of SAPUI5 have a fixed set of properties, aggregations, and
associations for configuration. You can find their descriptions in the Demo Kit. In addition, each controls comes with a set of public
functions that you can look up in the API reference.

Don’t forget to remove the “Hello World” p.


Only instances of sap.ui.core.Control or their subclasses can be rendered stand-alone and have a placeAt function. Each control extends sap.ui.core.Element that can only be rendered inside controls. Check the API reference to learn more about the inheritance hierarchy of controls. The API documentation of each control refers to the directly known subclasses.



3 × 3 =