码迷,mamicode.com
首页 > 其他好文 > 详细

UI5-文档-4.3-Controls

时间:2018-12-11 14:33:49      阅读:252      评论:0      收藏:0      [点我收藏+]

标签:some   元素   asc   nbsp   wal   ini   独立   bit   技术   

现在是时候构建我们的第一个小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

Working with Controls

API Reference:sap.m.Text

Samples:sap.m.Text

API Reference:sap.ui.core.Control

API Reference:sap.ui.core.Element

API Reference:sap.ui.base.ManagedObject

UI5-文档-4.3-Controls

标签:some   元素   asc   nbsp   wal   ini   独立   bit   技术   

原文地址:https://www.cnblogs.com/ricoo/p/10101790.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!