现在是时候通过用SAPUI5控件sap.m.Text替换HTML主体中的“ Hello World”文本来构建我们的第一个小UI了。首先,我们将使用JavaScript控件界面来设置UI,然后将控件实例放入HTML主体中。
1.1.练习效果
2.2.源码
您可以在“ 演练-步骤3”中查看和下载所有文件。
3.3. webapp / index.html
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>SAPUI5 Walkthrough</title> <script id="sap-ui-bootstrap" src="https://openui5.hana.ondemand.com/resources/sap-ui-core.js" data-sap-ui-theme="sap_belize" data-sap-ui-libs="sap.m" data-sap-ui-compatVersion="edge" data-sap-ui-async="true" data-sap-ui-onInit="module:sap/ui/demo/walkthrough/index" data-sap-ui-resourceroots='{ "sap.ui.demo.walkthrough": "./" }'> </script> </head> <body class="sapUiBody" id="content"> </body> </html> |
班级 人体 添加了其他主题相关的样式以显示SAPUI5应用程序。
4.4. webapp / index.js
1 2 3 4 5 6 7 8 9 10 11 |
sap.ui.define([ "sap/m/Text" ], function (Text) { "use strict"; new Text({ text: "Hello World" }).placeAt("content"); }); |
与其使用本机JavaScript来显示对话框,我们不希望使用简单的SAPUI5控件。控件用于定义
屏幕各部分的外观和行为。
在上面的示例中, 在里面事件是我们现在实例化SAPUI5文本控件的地方。控件的名称
以其控件库的命名空间为前缀汁液/米/然后将选项与JavaScript对象一起传递给构造函数。为了我们的控制,
我们将文本 属性值“ Hello World”。
我们将控件的构造函数调用链接到标准方法 placeAt用于将SAPUI5控件放置在文档对象模型(DOM)或任何
其他SAPUI5控件实例的节点内。我们将DOM节点的ID作为
参数传递。作为目标节点,我们使用HTML文档的body标签并为其指定ID内容。
SAPUI5的所有控件都有一组固定的属性,聚合和
配置关联。您可以在演示工具包中找到它们的描述。此外,每个控件都带有一组公共
函数,您可以在API参考中查找这些函数。
别忘了删除“ Hello World” p。
5.5.注意
仅实例 sap.ui.core.Control 或它们的子类可以独立呈现并具有 placeAt功能。每个控件扩展sap.ui.core.Element只能在控件内部呈现。查看API参考以了解有关控件继承层次结构的更多信息。每个控件的API文档均引用直接已知的子类。