Documente Academic
Documente Profesional
Documente Cultură
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>