Sunteți pe pagina 1din 2

loio

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

Declarative Support
Declarative programming allows you to define the UI within the HTML document as
elements.
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.

Example
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_belize"
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>

Summary: Attributes Used by Declarative Support


The table summarizes the attributes used by declarative support and gives examples.

Attribute Description Example


data-sap-ui- Type of control <div data-sap-ui-type="sap.m.Button"></div>
type
data-sap-ui- Defines the <div data-sap-ui-type="sap.m.Panel"><div
aggregation aggregation that data-sap-ui-aggregation="content" data-sap-
shall be used for ui-type="sap.m.Button" data-text="My
the element or Button"></div></div>
child element
data-sap- Sets or overrides <div data-sap-ui-type="sap.m.Panel" data-
ui.default- the default sap-ui-default-
aggregation aggregation of a aggregation="headerToolbar"><div data-sap-
control ui-type="sap.m.Toolbar"></div></div>
id Defines the ID <div data-sap-ui-type="sap.m.Button"
property of a id="myButton"></div>
control
class Adds a style class <div data-sap-ui-type="sap.m.Button"
to the control class="myButton"></div>

S-ar putea să vă placă și