SAPUI5 (02) - OpenUI5 Hello World

最新推荐文章于 2023-12-24 21:07:00 发布

stone0823

最新推荐文章于 2023-12-24 21:07:00 发布

阅读量7.4k

点赞数 3

分类专栏： # SAPUI5

本文链接：https://blog.csdn.net/stone0823/article/details/53781841

版权

SAPUI5 专栏收录该内容

41 篇文章 122 订阅

订阅专栏

上一篇的 Hello World，运行的时候只有一个空页面，但无论如何，蓝色的背景显示 UI5 已经在程序中加载和运行。我们暂且不管 Eclipse 的项目文件结构，先把注意力放在 index.html 上。完整的 html 源代码如下：

<!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>

		<script>
			
		</script>

	</head>
	<body class="sapUiBody" role="application">
		<div id="content"></div>
	</body>
</html>

在正式介绍之前，我先在第二个 <script> 标签之间添加一些代码：

<script>

	var oText = sap.m.Text({text:"Hello OpenUI5!"});
	oText.placeAt("content");
	
</script>

运行程序，启动 Tomcat，浏览器中显示的页面如下：

SAPUI5 Hello World运行界面

下面介绍 Hello world 程序相关的知识点。

代码的主要构成

index.html 包含的代码，分为三个部分：

bootstrap
Application area
UI area

Bootstrap

下面代码的部分叫做 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 中。

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

以后我们经常会在这个网址查找 API，不再说明和贴图。

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 初始化后会立即执行。

UI area

<body class="sapUiBody" role="application">
	<div id="content"></div>
</body>

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

stone0823

关注

3
点赞
踩
11

收藏

觉得还不错? 一键收藏
2
评论
SAPUI5 (02) - OpenUI5 Hello World

Hello World详细解释
复制链接

扫一扫

专栏目录