UI5-文档-3-Hello World!
通过本教程，您将了解如何在单个HTML页面上通过几个步骤创建一个简单的第一个应用程序。
我们创建了一个带有两个页面和导航按钮的应用程序来在页面之间导航。
预览
Simple "Hello World" App - First Page
Simple "Hello World" App - Second Page
请注意：您可以在演示应用程序中查看和下载生成的应用程序Demo Apps。
Coding
在以下步骤中，我们将创建一个index.html文件与下面的代码。如果你想直接试用这个应用程序，只需从这里复制并粘贴代码即可。
您还可以通过在https://jsbin.com上创建jsbin示例来启动这个迷你应用程序并修改代码。
Caution：
Adapt the path where the resources are located (<<server>>:<<port>>) according to your installation. For OpenUI5 you can use src="https://openui5.hana.ondemand.com/resources/sap-ui-core.js". For accessing SAPUI5 on the SAP Cloud Platform, for example, use src="https://sapui5.hana.ondemand.com/resources/sap-ui-core.js".
您可以在教程或测试目的中使用对SAPUI5最新稳定版本的引用，但绝不可将其用于生产用途。在实际的应用程序中，您总是必须显式地指定SAPUI5版本。
For more information, see Step 1: Create an HTML Page and Variant for Bootstrapping from Content Delivery Network.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta charset="utf-8">
<title>Hello World App</title>
<script src="http://<<server>>:<<port>>/resources/sap-ui-core.js"
id="sap-ui-bootstrap"
data-sap-ui-theme="sap_belize"
data-sap-ui-libs="sap.m">
</script>
<script type="text/javascript">
sap.ui.getCore().attachInit(function () {
// create a mobile app and display page1 initially
var app = new sap.m.App("myApp", {
initialPage: "page1"
});
// create the first page
var page1 = new sap.m.Page("page1", {
title : "Hello World",
showNavButton : false,
content : new sap.m.Button({
text : "Go to Page 2",
press : function () {
// navigate to page2
app.to("page2");
}
})
});
// create the second page with a back button
var page2 = new sap.m.Page("page2", {
title : "Hello Page 2",
showNavButton : true,
navButtonPress : function () {
// go back to the previous page
app.back();
}
});
// add both pages to the app
app.addPage(page1).addPage(page2);
// place the app into the HTML document
app.placeAt("content");
});
</script>
</head>
<body class="sapUiBody" id="content">
</body>
</html>
Step 2: Initialize the AppStep 1: Create an HTML Page
2.2.1Step 1: Create an HTML Page
我们首先为应用程序创建一个HTML页面。在这里，我们定义了meta标记、用于加载SAPUI5库的脚本标记和应用程序内容的占位符。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta charset="utf-8">
<title>Hello World App</title>
<script src="http://<<server>>:<<port>>/resources/sap-ui-core.js"
id="sap-ui-bootstrap"
data-sap-ui-theme="sap_belize"
data-sap-ui-libs="sap.m">
</script>
</head>
<body class="sapUiBody" id="content">
</body>
</html>
▪< !DOCTYPE html>:这一行告诉浏览器这个页面是用HTML5编写的。创建一个名为index.html文件和添加以下部分:
▪头与以下信息:
a.meta标签<meta http-equiv=" x - ui兼容"内容="IE=edge">告诉Microsoft Internet Explorer使用最新的呈现引擎(edge)和<meta charset="utf-8">告诉任何浏览器该文件是utf-8编码(假设您在编辑时使用该编码)或者保存文件)。
b. 标题文本
c.使用以下信息加载和初始化SAPUI5的脚本标记:
c1.资源的位置
d. 您定义加载了哪个库，以及应该使用哪个主题。在我们的示例中，只加载了sa .m库和sap_belize主题。如果您愿意，可以加载其他库和主题
▪HTML <body>标记ID内容和类sapUiBody。这是应用程序的内容将在接下来的步骤中添加的地方
现在，已加载并准备使用包含控件的SAPUI5。
Related Information
Bootstrapping: Loading and Initializing
2.2.2Initialize the App
App .m库提供了一个名为App的控件，它是App的根控件。它初始化body标签的内容，在移动设备的HTML文档上设置一些meta标签，可以在导航时管理多个页面和动画。
index.html
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta charset="utf-8">
<title>Hello World App</title>
<script src="http://<server>:<port>/resources/sap-ui-core.js"
id="sap-ui-bootstrap"
data-sap-ui-theme="sap_belize"
data-sap-ui-libs="sap.m">
</script>
<script type="text/javascript">
sap.ui.getCore().attachInit(function () {
// create a mobile app and display page1 initially
var app = new sap.m.App("myApp", {
initialPage: "page1"
});
});
</script>
</head>
<body class="sapUiBody" id="content">
</body>
</html>
而不是使用sap.m.app控制，您还可以手动调用jQuery.sap.initMobile()来设置HTML并使用其他全屏控件，如sap.m.Page或sap.m.Carousel将作为应用程序的根元素。在第二个脚本块中，我们将一个函数附加到全局attachInit事件。一旦加载并初始化SAPUI5，就会调用这个函数。在这里创建app控件，并定义最初要显示的页面。此时，这个页面没有任何内容。
Parent topic: Hello World!
Previous: Step 1: Create an HTML Page
Next: Step 3: Add Content Pages
2.2.3Add Content Pages
应用程序由一组页面、视图和屏幕组成，用户可以在这些页面、视图和屏幕之间导航。现在我们向应用程序添加两个页面。
index.html
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta charset="utf-8">
<title>Hello World App</title>
<script src="http://<server>:<port>/resources/sap-ui-core.js"
id="sap-ui-bootstrap"
data-sap-ui-theme="sap_belize"
data-sap-ui-libs="sap.m">
</script>
<script type="text/javascript">
sap.ui.getCore().attachInit(function () {
// create a mobile app and display page1 initially
var app = new sap.m.App("myApp", {
initialPage: "page1"
});
// create the first page
var page1 = new sap.m.Page("page1", {
title : "Hello World",
showNavButton : false,
content : new sap.m.Button({
text : "Go to Page 2",
press : function () {
// navigate to page2
app.to("page2");
}
})
});
// create the second page with a back button
var page2 = new sap.m.Page("page2", {
title : "Hello Page 2",
showNavButton : true,
navButtonPress : function () {
// go back to the previous page
app.back();
}
});
// add both pages to the app
app.addPage(page1).addPage(page2);
// place the app into the HTML document
app.placeAt("content");
});
</script>
</head>
<body class="sapUiBody" id="content">
</body>
</html>
请注意：sap.m.page控件可以用于app控件的聚合页面，但也可以使用其他控件。该页面有一个用于显示信息的可滚动内容部分，并将创建一个标题和一个可选的页脚区域。
1. 创建一个sap.m.page控件并设置其标题。为了使这个例子简单，内容只是一个按钮，当按钮被按下时，通过调用app.to(“page2”)导航到第二个页面。参数page2是第二个页面的ID。您还可以为导航指定动画类型。默认是一个从右到左的幻灯片动画。
2. 创建显示Back按钮的第二个页面。属性showNavButton被设置为true以显示后退按钮。当它被按下时，事件处理函数调用app.back()。这将把用户带回主页与一个反向动画。
3. 将两个页面都添加到应用程序中，并将应用程序放置在您前面定义为body标记的HTML文件的内容区域:
app.addPage(page1).addPage(page2);
app.placeAt("content");
Summary应用程序现在被放置到HTML中，应用程序使用设备上可用的整个屏幕大小。
1.现在我们已经创建了“Hello World”应用程序，它只有一个HTML文件，只有两个页面。
2.您可以在任何设备上的任何浏览器上运行该应用程序。
3.要在移动设备上使用该应用程序，需要将HTML文件上传到web服务器，并在移动浏览器中调用生成的URL。
4.通过选择按钮来测试两个页面之间的导航。
Parent topic: Hello World!
Previous: Step 2: Initialize the App
UI5-文档-3-Hello World!的更多相关文章
- SAP 常用增强记录文档
转自:http://blog.csdn.net/budaha 20170215需要一个PR 修改保存时候的增强,目的是同步PR的处理状态 EBAN-STATU 到一个自建表ZTPRTOPO,记得有个P ...
- C#给PDF文档添加文本和图片页眉
页眉常用于显示文档的附加信息,我们可以在页眉中插入文本或者图形,例如,页码.日期.公司徽标.文档标题.文件名或作者名等等.那么我们如何以编程的方式添加页眉呢?今天,这篇文章向大家分享如何使用了免费组件 ...
- dotNET跨平台相关文档整理
一直在从事C#开发的相关技术工作,从C# 1.0一路用到现在的C# 6.0, 通常情况下被局限于Windows平台,Mono项目把我们C#程序带到了Windows之外的平台,在工作之余花了很多时间在M ...
- ABP文档 - Javascript Api - AJAX
本节内容: AJAX操作相关问题 ABP的方式 AJAX 返回信息 处理错误 HTTP 状态码 WrapResult和DontWrapResult特性 Asp.net Mvc 控制器 Asp.net ...
- ABP文档 - EntityFramework 集成
文档目录 本节内容: Nuget 包 DbContext 仓储 默认仓储 自定义仓储 特定的仓储基类 自定义仓储示例 仓储最佳实践 ABP可使用任何ORM框架,它已经内置了EntityFrame(以下 ...
- ABP文档 - SignalR 集成
文档目录 本节内容: 简介 安装 服务端 客户端 连接确立 内置功能 通知 在线客户端 帕斯卡 vs 骆峰式 你的SignalR代码 简介 使用Abp.Web.SignalR nuget包,使基于应用 ...
- ABP文档 - 通知系统
文档目录 本节内容: 简介 发送模式 通知类型 通知数据 通知重要性 关于通知持久化 订阅通知 发布通知 用户通知管理器 实时通知 客户端 通知存储 通知定义 简介 通知用来告知用户系统里特定的事件发 ...
- ABP文档 - Hangfire 集成
文档目录 本节内容: 简介 集成 Hangfire 面板授权 简介 Hangfire是一个综合的后台作业管理器,可以在ABP里集成它替代默认的后台作业管理器,你可以为Hangfire使用相同的后台作业 ...
- ABP文档 - 后台作业和工作者
文档目录 本节内容: 简介 后台作业 关于作业持久化 创建一个后台作业 在队列里添加一个新作业 默认的后台作业管理器 后台作业存储 配置 禁用作业执行 Hangfire 集成 后台工作者 创建一个后台 ...
- ABP文档 - Javascript Api
文档目录 本节内容: AJAX Notification Message UI Block & Busy Event Bus Logging Other Utility Functions A ...
随机推荐
- 我的nginx iis 负载均衡学习（环境搭建）
1,下载并安装nginx 比较简单 2,进行网站的配置 我使用了我的IIS 站点中已经拥有的两个站点 3,进行nginx 的配置 配置如下: 在server 节点之前添加如下的配置: upstream ...
- OpenWrt在没有Luci时刷机
scp上传bin文件到root文件夹下. sysupgrade openwrt-ar71xx-generic-dragino2-squashfs-sysupgrade.bin 等待重启
- python格式化输出 format
看图
- Guid 几种格式化
//32 位数字:00000000000000000000000000000000 Console.WriteLine(Guid.NewGuid().ToString("N")); ...
- JMS概念
来自为知笔记(Wiz)
- my sql 只展示 前10条数据的写法
select * from 表 where 条件 limit 10 这里想看多少条 limit 后面的数字就是多少
- Windows下永久解决数据库乱码 utf8 转 gbk
产生乱码原因 因为windows终端的默认字符集是gbk编码,而mysql数据库是utf8的编码,所以会产生乱码问题 解决乱码问题(临时修改) 询当前数据库默认编码: mysql> show v ...
- Access restriction: The type Resource is not accessible due to restriction on required library
方法一: 全局属性Project>preferences>java>Compiler>Errors/Warnings>把右侧的[Deprecated and restri ...
- Eclipse修改workspace目录的几种方式
Eclipse是一款很强的Java IDE,我们在开始的时候,往往设定了默认的workspace,当用久在之后,我们可能要去更改一下workspace的位置.下面有几种方法可以更改workspace的 ...
- Access-Control-Allow-Origin 跨域问题
1.同源.同源策略(Same origin policy) 同源指的是协议,端口,域名全部相同. 同源策略(Same origin policy)是一种约定,它是浏览器最核心也最基本的安全功能,如果缺 ...