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 ...
随机推荐
- 转详解Zoosk千万用户实时通信背后的开源技术
导语:本文由Zoosk(一个具有5000万会员的浪漫的社交约会网站)工程副总裁Peter Offringa所写,讲述了Zoosk的实时通信技术. 当我们的会员从Zoosk获得的最有价值的消息时,他们可 ...
- HTML图片热区map area的用法
<area>标记主要用于图像地图,通过该标记可以在图像地图中设定作用区域(又称为热点),这样当用户的鼠标移到指定的作用区域点击时,会自动链接到预先设定好的页面.其基本语法结构如下: < ...
- NOSQL详解
Nosql的全称是Not Only Sql,这个概念早起就有人提出,在09年的时候比较火.Nosql指的是非关系型数据库,而我们常用的都是关系型数据库.就像我们常用的mysql,sqlserver一样 ...
- php 的交互命令行
php 的交互命令行 使用过 python 都知道 python 可以使用交互命令. 如下图: 但是 执行 php 显示这个是什么鬼? 按回车和加分号都没用,这是什么原因? 其实是因为使用 php 交 ...
- WPF ListView 简单的拖拽实现(转)
首先设置ListView的AllowDrop=True:SelectionMode=Extended;并且ListView视图为GridVIew. private void listView1_Mou ...
- URL中的hash（井号）
1.#的含义 #代表网页中的一个位置,其右边的字符,就是该位置的标识符.比如 http://www.example.com/index.html#print 就是代表index.html中的print ...
- html 子元素和父元素都监听了 click 事件，点击子元素时为何先触发的是父元素的 click 事件？
先上一段代码,点击子元素时先触发的是父元素的 click 事件 <html> <head> <script type="text/javascript" ...
- 【shell】正则表达式语法
一个正则表达式就是由普通字符(例如字符 a 到 z)以及特殊字符(称为元字符)组成的文字模式.该模式描述在查找文字主体时待匹配的一个或多个字符串.正则表达式作为一个模板,将某个字符模式与所搜索的字符串 ...
- sql 查询年龄
SET ANSI_NULLS ON GO SET QUOTED_IDENTIFIER ON GO -- ============================================= -- ...
- 学习笔记之Docker
Docker 官网 http://www.docker.com Docker is the company driving the container movement and the only co ...