现在是时候构建我们的第一个小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的更多相关文章

  1. DevExpress v15.2.4帮助文档下载（全）

    原文地址:http://www.devexpresscn.com/Resources/Documentation-498.html DevExpress v15.2帮助文档下载列表大全来啦!包含.ne ...

  2. 干货分享！DevExpress v17.1最新版帮助文档下载大全

    DevExpress v17.1.5帮助文档下载列表大全来啦!包含.NET.VCL.HTML/JS系列所有帮助文档,提供CHM和PDF两个版本.除已停止更新的Silverlight.Windows 8 ...

  3. DevExpress v18.1最新版帮助文档下载大全

    DevExpress v18.1.4帮助文档下载列表大全来啦!包含.NET.VCL.HTML/JS系列所有帮助文档,提供CHM和PDF两个版本.除已停止更新的Silverlight.Windows 8 ...

  4. DevExpress v17.2最新版帮助文档下载大全

    DevExpress v17.2.4帮助文档下载列表大全来啦!包含.NET.VCL.HTML/JS系列所有帮助文档,提供CHM和PDF两个版本.除已停止更新的Silverlight.Windows 8 ...

  5. jQuery实现在线文档

    1.1.1 摘要 现在,许多网站都提供在线图片和图书阅读的功能,这种方式比下载后阅读来的直观和人性化,要实现该功能涉及到点击处理和图片动态加载. 在接下来的博文中,我们将通过Javascript方式实 ...

  6. SharePoint 2010 文档管理之文档推送

    前言:文档推送功能,不是一个复杂的功能,我们这里简单的应用了Ribbon定制.Js使用.对象模型推送(Server端),下面,我们来简单介绍下文档推送功能吧. 一. 功能设计: 文档推送功能,主要就是 ...

  7. 操作PDF文档功能的相关开源项目探索——iTextSharp 和PDFBox

    原文 操作PDF文档功能的相关开源项目探索——iTextSharp 和PDFBox 很久没自己写写心得日志与大家分享了,一方面是自己有点忙,一方面是自己有点懒,没有及时总结.因为实践是经验的来源,总结 ...

  8. _00024 尼娜抹微笑伊拉克_云计算ClouderaManager以及CHD5.1.0群集部署安装文档V1.0

    笔者博文:妳那伊抹微笑 itdog8 地址链接 : http://www.itdog8.com(个人链接) 博客地址:http://blog.csdn.net/u012185296 博文标题:_000 ...

  9. WPF界面设计技巧（11）-认知流文档 & 小议WPF的野心

    原文:WPF界面设计技巧(11)-认知流文档 & 小议WPF的野心 流文档是WPF中的一种独特的文档承载格式,它的书写和呈现方式都很像HTML,它也几乎具备了HTML的绝大多数优势,并提供了更 ...

  10. HTML5的文档结构

    HTML5的文档结构 HTML5简化了许多,它的设计遵循了3个原则:1.兼容性.2.实用性.3.通用访问性     1. header 元素     <header> 标签定义文档或者文档 ...

随机推荐

  1. GPG key retrieval failed: [Errno 14] Could not open/read file:///etc/pki/rpm-gpg/RPM-GPG-KEY-CentOS-

    今天更新为163的源后,yum的时候报错:GPG key retrieval failed: [Errno 14] Could not open/read file:///etc/pki/rpm-gp ...

  2. FastAdmin 绑定的模块禁用路由

    为了安全,将后台入口隐藏. 这里出一个问题,因为装了 CMS 插件,使用入口登录后显示的是 CMS 的首页. 这个问题已经修复. https://gitee.com/karson/fastadmin/ ...

  3. 文件上传 accept 兼容性

    写法1 在chrome下有反应很慢的问题,不要使用 写法2 在firefox.Safari 中有兼容性问题,弹出选择框不会高亮显示jpg后缀的图片 写法3 在写法2上都添加了image/jpeg,解决 ...

  4. vue-router 结合源码分析原理

    路由响应过程: 浏览器发出请求 服务器监听到num端口(或443)有请求过来,并解析url路径 根据服务器的路由配置,返回相应信息(可以是 html 字串,也可以是 json 数据,图片等) 浏览器根 ...

  5. windows环境下把Python代码打包成独立执行的exe可执行文件

    有时候因为出差,突然急需处理一批数据.虽然写好的脚本存储在云端随用随取,然而编译的环境还需要重新搭建,模块也需要重新装载,从头到尾这么一遍下来,也是要花费可观的时间成本的. 有没有什么办法,可以让.p ...

  6. 驳《编码规范是技术上的遮羞布》自由发挥==摆脱编码规范？X

    引子: 看了一坨文字<编码规范是技术上的遮羞布>,很是上火,见人见智,本是无可厚非,却深感误人子弟者众.原文观点做一个简单的提炼: 1.扔掉编码规范吧,让程序员自由发挥,你会得到更多的好处 ...

  7. 【Spring学习笔记-MVC-9】SpringMVC数据格式化之日期转换@DateTimeFormat

    作者:ssslinppp       1. 摘要 本文主要讲解Spring mvc数据格式化的具体步骤: 并讲解前台日期格式如何转换为java对象: 在之前的文章<[Spring学习笔记-MVC ...

  8. my sql 只展示 前10条数据的写法

    select * from 表 where 条件 limit 10 这里想看多少条 limit 后面的数字就是多少

  9. sersync基于rsync+inotify实现数据实时同步

    一.环境描述 需求:服务器A与服务器B为主备服务模式,需要保持文件一致性,现采用sersync基于rsync+inotify实现数据实时同步 主服务器A:192.168.1.23 从服务器B:192. ...

  10. javascript创建对象之函数构造模式和原型模式结合使用(四)

    创建自定义类型的常见方式就是组合使用构造函数模式与原型模式一起使用. 构造函数模式用于定义实例对象的特有的部分(属性和方法),原型模式用于定义共享的部分. 这样最大限度的节省了内存的开销. funct ...