创建Application Project

1.打开Eclipse，创建Project

　　

　　

　　

　　sap.ui.commons 和 sap.m 是两个不同的 UI 库，但现在因为跨平台的原因，sap.ui.commons 中控件基本都被标记为 deprecated，所以我们直接选择 sap.m

　　View 代表 MVC 开发模型中的视图 (View)，在 Eclipse 项目文件中，找到并选中 index.html，运行程序，Eclipse 会自动启动 Tomcat。打开浏览器，输入 http://localhost:8080， 出现天蓝色背景，表示 Hello world 运行成功。

　　

2.HTML代码构成说明

　　2.1源码

<!DOCTYPE HTML>

<html>

    <head>

        <meta http-equiv="X-UA-Compatible" content="IE=edge">

        <meta http-equiv='Content-Type' content='text/html;charset=UTF-8'/>

        <script src="resources/sap-ui-core.js"

                id="sap-ui-bootstrap"

                data-sap-ui-libs="sap.m"

                data-sap-ui-theme="sap_bluecrystal">

        </script>

        <!-- only load the mobile lib "sap.m" and the "sap_bluecrystal" theme -->

        <script>

                var oText = sap.m.Text({text:"Hello OpenUI5!"});

                oText.placeAt("content");

        </script>

    </head>

    <body class="sapUiBody" role="application">

        <div id="content">Hello World</div>

    </body>

</html>

　　2.2HTML包含三个部分：

　　　• bootstrap

　　　• Application area

　　　• UI area

　　　　

　　　2.2.1 Bootstrap部分：　　　

         <script src="resources/sap-ui-core.js"

                 id="sap-ui-bootstrap"

                 data-sap-ui-libs="sap.m"

                 data-sap-ui-theme="sap_bluecrystal">

         </script>

　　　Bootstrap 负责OpenUI5 的加载和初始化。

　　　OpenUI5 被组织放在不同的 library 中，为了把 OpenUI5 相关代码加载到 Application，开发人员必须明确指定去哪里获取 OpenUI5 的资源。

　　　src属性： src 属性告诉 application，OpenUI5 库所在的位置。如果我们手工编写代码，OpenUI5 库需要放在 Tomcat 的 webapps 目录下面，代码中则通过 src="http://localhost:8080/openui5/resources/sap-ui-core.js" 引用。SAP 也提供了在线的 Library，通过src="https://openui5.hana.ondemand.com/resources/sap-ui-core.js" 引用。data-sap-ui-theme：设定加载的主题。SAP提供了blue crystal(sap_bluecrystal), platinum (sap_platinum), gold reflection(sap_goldreflection)和high contrast black (sap_hcb)等几个默认主题，开发人员也可以自定义主题。data-sap-ui-libs：设定加载的 OpenUI5 库。如果有 OpenUI5 中多个库需要加载，不同的 namespace 用逗号分开。比如我们需要显示sap.m.Text，位于 sap.m 这个 namespace 中。

　　　2.2.2 Application area部分：

         <script>

                 var oText = sap.m.Text({text:"Hello OpenUI5!"});

                 oText.placeAt("content");

         </script>

　　　定义一个 text 属性为 “Hello OpenUI5” 的 Text控件，并放在 id 为 content 的 div 中。当然，这种直接把控件放在 div 中的做法只适合简单的演示，我们编写的程序要有与用户交互的功能，需要加载一些核心对象，对整个 application 进行有效管理。一个常见的模式如下：

 <script>

     sap.ui.getCore().attachInit(function() {

         var oText = sap.m.Text({text: "Hello OpenUI5!"});

         oText.placeAt("content");

     });

 </script>

　　　与刚才把控件放在 div 中不同的是，获取 sap.ui.core.Core 实例，然后调用 Core 的 attachInit() 方法，这个方法的作用是：框架 (framework) 初始化完成后，立即调用匿名函数。对 OpenUI5，目前最全面的参考是 SAP 公司的 SAP UI Development Toolkit: https://sapui5.hana.ondemand.com/，我们可以在里面查询 API, 查看Demo，或通过 Tutorial 学习。如果下载了 Openui5 库，启动 Tomcat 后也可以在浏览器中查看和学习。　

　　　sap.ui namespace ：我们通过 url: https://sapui5.hana.ondemand.com/#docs/api/symbols/sap.ui.html , 可以看到 sap.ui 这个命名空间的解释，以及命名空间的方法。

　　　

　　　sap.ui namespace 是 SAP 提供的与 OpenAjax 兼容的入口，用于UI（用户界面）相关的 JavaScript 功能（The sap.ui namespace is the central OpenAjax compliant entry point for UI related JavaScript functionality provided by SAP.）
　　sap.ui.core.Core

　　　OpenUI5 界面库的核心类，这个类启动核心框架 (Core Framework），并且通过 sap.ui.getCore() 方法让它自己变得可用。也就是说，我们前面的代码：sap.ui.getCore() 用于获得 Core 类的实例，这样就可以调用Core 类的方法。框架 (Core framework) 初始化后，就可以通过框架的方法执行代码。框架提供了对配置的读取，也暴露了方法，从而
application 和控件可以注册。Core 对象本身并不含任何控件。控件都在其他库 (library) 中。需要开发人员自行加载。Core.attachInit(fnFunction)注册一个函数，函数在framework 初始化后会立即执行。

　　　2.2.3 UI area　　　

     <body class="sapUiBody" role="application">

         <div id="content">Hello World</div>

     </body>

　　　负责界面展示，上述例子把 Textbox 放在 div 里面，这样就完成了OpenUI5 的 Hello world，理解 UI5 程序的基本结构。

　　　原文：https://blog.csdn.net/stone0823/article/details/53781841

UI5-学习篇-2-Hello World的更多相关文章

  1. OPEN(SAP) UI5 学习入门系列之四：更好的入门系列-官方Walkthrough

    好久没有更新了,实在不知道应该写一些什么内容,因为作为入门系列,实际上应该更多的是操作而不是理论,而在UI5 SDK中的EXPLORER里面有着各种控件的用法,所以在这里也没有必要再来一遍,还是看官方 ...

  2. OPEN(SAP) UI5 学习入门系列之一：扫盲与热身（下）

    1 UI5代码结构 上一次我们一起用了20秒的时间完成一个UI5版的Hello World.应用打开后有一个按钮,按钮的文字是Hello World,点击这个按钮之后,按钮会慢慢的消失掉(Fade o ...

  3. js学习篇1--数组

    javascript的数组可以包含各种类型的数据. 1. 数组的长度 ,直接用 length 属性; var arr=[1,2,3]; arr.length; js中,直接给数组的length赋值是会 ...

  4. Tomcat集群配置学习篇-----分布式应用

    Tomcat集群配置学习篇-----分布式应用 现目前基于javaWeb开发的应用系统已经比比皆是,尤其是电子商务网站,要想网站发展壮大,那么必然就得能够承受住庞大的网站访问量:大家知道如果服务器访问 ...

  5. （转载）OC学习篇之---概述

    前言 终于开启了OC的学习篇了,之前由于工作上的事,学习就一直搁浅了,不过最近由于各种原因,感觉必须要开启iOS的开发旅程了,不然就老了.因为之前一直是做Android的,所以学习iOS来就没那么费劲 ...

  6. 《Mysql 公司职员学习篇》 第二章 小A的惊喜

          第二章 小A的惊喜  ---- 认识数据库 吃完饭后,小Y和小A回到了家里,并打开电脑开始学习Mysql. 小Y:"小A,你平时的Excell文件很多的情况下,怎么样存放Exce ...

  7. Java多线程(学习篇)

    Java多线程:(学习篇) 1.什么是线程 2.线程状态 3.线程中断 4.线程交互 5.同步机制 6.锁机制 7.堵塞队列与堵塞栈 8.条件变量.原子量.线程池等 9.线性安全类和Callable与 ...

  8. 鸟哥Linux私房菜基础学习篇学习笔记3

    鸟哥Linux私房菜基础学习篇学习笔记3 第十二章 正则表达式与文件格式化处理: 正则表达式(Regular Expression) 是通过一些特殊字符的排列,用以查找.删除.替换一行或多行文字字符: ...

  9. 鸟哥Linux私房菜基础学习篇学习笔记2

    鸟哥Linux私房菜基础学习篇学习笔记2 第九章 文件与文件系统的压缩打包: Linux下的扩展名没有什么特殊的意义,仅为了方便记忆. 压缩文件的扩展名一般为: *.tar, *.tar.gz, *. ...

  10. 鸟哥Linux私房菜基础学习篇学习笔记1

    鸟哥Linux私房菜基础学习篇学习笔记1 第三章 主导分区(MBR),当系统在开机的时候会主动去读取这个区块的内容,必须对硬盘进行分区,这样硬盘才能被有效地使用. 所谓的分区只是针对64Bytes的分 ...

随机推荐

  1. 【转】每天一个linux命令（54）：ping命令

    原文网址:http://www.cnblogs.com/peida/archive/2013/03/06/2945407.html Linux系统的ping命令是常用的网络命令,它通常用来测试与目标主 ...

  2. ExtJS中，将Grid表头中的全选复选框取消复选

    今天发现公司产品用的EXTJS中使用Grid时,Grid表头中的全选复选框的选中状态不是很准确,就写了这个小扩展 在js中加入下面方法,在需要取消全选的地方调用即可,例:Ext.getCmp('gri ...

  3. 2018年，Java程序猿10本经典好书推荐

    1.Java 8实战 本书全面介绍了Java 8 这个里程碑版本的新特性,包括Lambdas.流和函数式编程.有了函数式的编程特性,可以让代码更简洁,同时也能自动化地利用多核硬件.全书分四个部分:基础 ...

  4. Redis在Windows集群中的错误

    创建集群: ./redis-trib.rb  create --replicas 1 127.0.0.1:7000 127.0.0.1:7001 127.0.0.1:7002 127.0.0.1:70 ...

  5. sublime快捷键功能记录

    shift+tab  向前缩进 ctrl+shift+k  删除当前行 菜单栏 view--side bar 选项 控制左侧文件展示视图 菜单栏“view”——“hideMiniMap” or &qu ...

  6. 杂项-frame：Rails框架

    ylbtech-杂项-frame:Rails框架 Rails框架首次提出是在2004年7月,它的研发者是26岁的丹麦人David Heinemeier Hansson.不同于已有复杂的Web 开发框架 ...

  7. 导入testng管理测试用例

    1.在pom.xml中增加testng的依赖,以导入testNG 2.在src-main-resources目录下新建xml文件,比如untitled.xml. <?xml version=&q ...

  8. 1076 Forwards on Weibo （30 分）

    1076 Forwards on Weibo (30 分) Weibo is known as the Chinese version of Twitter. One user on Weibo ma ...

  9. mysql存储过程的参数名不要跟字段名一样 （血淋淋的代价）

    如题,将会导致的结果就是参数的值将不会是你传入的值,而是变成每条记录的那个字段的值. 这样的后果,是灰常严重的.比如执行删除操作,它能把整个表的记录全删了. 这个是我的血淋淋的代价啊. 死坑如下,勿跳 ...

  10. javascript 中的函数声明和函数表达式区别

    函数声明格式: function add(a, b) { alert(a+b); } 函数表达式格式: var add = function (a, b) { alert(a+b); } 解析器在向环 ...