| loio |
|---|
| 91f130196f4d1014b6dd926db0e91070 |
view on: demo kit nightly build | demo kit latest release
Declarative programming allows you to define the UI within the HTML document as elements.
Deprecated as of UI5 version 1.120, replaced by XML View.
For this, OpenUI5 provides the sap.ui.core.plugin.DeclarativeSupport plugin that can be included either as required or marked as a module in the initial bootstrap script tag. The plugin parses the document and converts its tags with special attributes into OpenUI5 controls.
Declarative support is aware of properties, associations, events, and aggregations in a OpenUI5 control manner. This means that you can specify them within the markup of the HTML document either as data attributes or as child elements.
The following sections provide an overview of the declarative support and introduce the use of declarative support in OpenUI5.
The following example shows the concept by combining a sap.m.input with a sap.m.Button control. When you click the button, the value of the text field is displayed in an alert box:
<!Doctype HTML>
<html>
<head>
<title>Declarative Programming for SAPUI5 - sample01</title>
<script id="sap-ui-bootstrap"
type="text/javascript"
src="resources/sap-ui-core.js"
data-sap-ui-theme="sap_horizon"
data-sap-ui-libs="sap.m"
data-sap-ui-modules="sap.ui.core.plugin.DeclarativeSupport"
>
</script>
</head>
<body class="sapUiBody">
<div data-sap-ui-type="sap.m.Input" id="message" class="my-button" data-value="Hello World"></div>
<div data-sap-ui-type="sap.m.Button" data-text="Click me!" data-press="handlePress"></div>
</body>
</html>The table summarizes the attributes used by declarative support and gives examples.
|
Attribute |
Description |
Example |
|---|---|---|
|
|
Type of control |
|
|
|
Defines the aggregation that shall be used for the element or child element |
|
|
|
Sets or overrides the default aggregation of a control |
|
|
|
Defines the ID property of a control |
|
|
|
Adds a style class to the control |
|
- Enabling Declarative Support (deprecated)
Declarative support needs to be enabled in the HTML document by adding an attribute to the OpenUI5 bootstrap script tag. - Defining Controls (deprecated)
For declarative support, define the controls in your HTML document as HTML tags. - Declarative Support: Properties (deprecated)
For setting a property, define the property as a data attribute of the corresponding HTML tag. - Declarative Support: Associations (deprecated)
An association is defined as a data attribute of the HTML tag. Instead of passing the reference to another control you define the ID of another control. - Declarative Support: Events (deprecated)
The value of the event data attribute contains the name of a JavaScript function which will be used as callback once the event has been triggered. - Declarative Support: Aggregations (deprecated)
Aggregation support is required to allow nested controls for layout containers and/or add elements to a control, for example, forComboBox. - Declarative Support: Data Binding (deprecated)
Declarative support in OpenUI5 also enables data binding. - Compiling Declarative HTML (deprecated)
OpenUI5 provides a plugin for controls that are defined as declarative markup on startup time.