UI5-文档-4.3-Controls
现在是时候构建我们的第一个小UI了,将HTML主体中的“Hello World”文本替换为SAPUI5控件sap.m.Text。首先,我们将使用JavaScript控件接口来设置UI,然后将控件实例放入HTML体中。
Preview
The "Hello World" text is now displayed by a SAPUI5 control
Coding
你可以在此查看和下载所有文件Walkthrough - Step 3.
webapp/index.html
<!DOCTYPE html> <html> <head> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta charset="utf-8"> <title>Walkthrough</title> <script id="sap-ui-bootstrap" src="/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-preload="async" > </script> <script> sap.ui.getCore().attachInit(function () { new sap.m.Text({ text : "Hello World" }).placeAt("content"); }); </script> </head> <body class="sapUiBody" id="content"> </body> </html>
在上面的例子中,init事件的回调是我们实例化SAPUI5文本控件的地方。控件的名称以其控件库sap.m的名称空间为前缀,选项被传递给带有JavaScript对象的构造函数。对于控件,我们将文本属性设置为值“Hello World”。我们想要使用一个简单的SAPUI5控件,而不是使用原生JavaScript来显示对话框。控件用于定义屏幕部分的外观和行为。
我们将控件的构造函数调用链接到标准方法placeAt,该方法用于将SAPUI5控件放置在文档对象模型(DOM)或任何其他SAPUI5控件实例的节点内。我们将DOM节点的ID作为参数传递。作为目标节点,我们使用HTML文档的body标记并为其提供ID content。类sapUiBody添加了额外的主题相关样式来显示SAPUI5应用程序。
SAPUI5的所有控件都有一组用于配置的固定属性、聚合和关联。您可以在演示工具包中找到它们的描述。此外,每个控件都附带一组公共函数,您可以在API引用中查找这些公共函数。
不要忘记删除“Hello World”p。
请注意:只有sap.ui.core的实例。控件或其子类可以独立呈现并具有placeAt函数。每个控件扩展sap.ui.core。只能在控件内部呈现的元素。查看API参考以了解更多关于控件继承层次结构的信息。每个控件的API文档引用直接已知的子类。
Parent topic: Walkthrough
Previous: Step 2: Bootstrap
Next: Step 4: XML Views
Related Information
API Reference:sap.ui.core.Control
API Reference:sap.ui.core.Element
API Reference:sap.ui.base.ManagedObject
最新文章
- Xamarin开发Android笔记:拍照或相册选取图片角度问题
- mongodb 数据库操作--备份 还原 导出 导入
- NGINX怎样处理惊群的
- [转]SQL快速入门
- delphi 修改Hint的字体和颜色
- PHP加速器
- mvc5 + ef6 + autofac搭建项目(repository+uow)(二)
- 你需要了解的JS框架
- PostgreSQL 9.3 Streaming Replication 状态监控
- PHP 调用 Go 服务的正确方式 - Unix Domain Sockets
- bzoj 2733: [HNOI2012]永无乡
- (二)校园信息通微信小程序从后台获取首页的数据笔记
- [USACO13FEB] Tractor
- java框架之Struts2(4)-拦截器&;标签库
- 005. Asp.Net Routing与MVC 之三: 路由在MVC的使用
- STL容器之deque
- Java LocalDateTime,DateTimeFomatter----JDK8新时间类的简单使用
- [UE4]Make Array创建数组,而不是定义数组
- 安装淘宝cnpm镜像
- eclipse包层级显示和工作空间显示