OPEN(SAP) UI5 学习入门系列之二: 最佳实践练习(上)
这篇博文难产了很久,原来是打算一周更新一篇的,上周原计划写MVC,但是写了一半,发现带入了太多的细节,不太符合这个入门系列的主题。 当我们学习一个新的技能的时候,如果一开始就面对大量的细节,很容易陷入其中而只见树木不见森林,所以最后我想我们还是先按照开发文档的节奏,一起来做UI5的最佳实践练习。在练习中对常用的一些控件以及API有一个直观的感受,如果需要细节的信息再去查文档。
这个最佳实践练习的子系列又会分为若干篇,但是不会完全按照Tutorial里面的章节来分,因为我希望每一篇都是都是一个完整的练习,都能跑出来,而不仅仅是一个片段。
最后做出来的App是这样的。
Figure 1: SAP UI5最佳实践练习的最终界面
开工吧!
1 首页
我们先把首页做出来,还是以之前Hello World的代码框架开始吧。 首先在 <tomcat>/webapps/
下新建一个目录就叫 ui5bp
吧,创建 index.html
,代码如下:
index.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"/> --> <meta charset="UTF-8"> <title>SAPUI5 Best Practice</title> <script
id="sap-ui-bootstrap"
src="http://localhost:8080/openui5/resources/sap-ui-core.js"
data-sap-ui-theme="sap_bluecrystal"
data-sap-ui-libs="sap.m"
data-sap-ui-xx-bindingSyntax="complex"
data-sap-ui-resourceroots='{
"ui5.tutorial.bp": "./"
}' >
</script> <script> </script>
</head>
<body class="sapUiBody"> <!-- This is where you place the UI5 button -->
<div id="content"></div>
</body>
打开浏览器,输入 http://localhost:8080/ui5bp/
你应该可以看到淡蓝色的背景,除此以外,啥都没有。
这里要提一下,我们定义了一个命名空间 ui5.tutorial.bp
把这个命名空间注册到根目录。后续我们定义或者引用资源都需要加上这个命名空间前缀。
打开开发者选项,也没有任何错误,那就成功了,继续下一步。
2 MVC框架
我们暂时不用Component来做模块化,我们先用最快最简单的方法让程序可以跑出个样子来,然后再慢慢的添加功能。
所以,我们先直接加入MVC。
简单介绍下,MVC就是模型、视图和控制器的简称,一般的Web开发都会用到这种架构用来把前端的UI和业务逻辑分离。具体先不多介绍,直接做吧。
我们先大致规划一下,我们的应用是一个主从页面结构,会有一个Master的页面和Detail的页面,我们今天先创建一个Empty页面来替代Detail。 我们会创建如下文件以及对应的目录:
ui5bp/
+-- view/
| |
| +-- App.view.js
| +-- App.controller.js
| +-- Empty.view.xml
| +-- Master.controller.js
| +-- Master.view.xml
|
+-- model/
| |
| +-- mock.json
+-- index.html
我们最后把App放入到index的content中,把Master和Detail放到App中去,其中包含 .view.
的文件是视图,用来定义UI,包含 .controller.
的文件是控制器,用来处理逻辑。 为了简化应用,我们暂时不使用在线的数据而是用一个json格式的文件数据作为我们的数据模型。这个文件你可以从这里下载。
简单提一下,视图可以用html、xml、js、json这四种文件形式来定义,控制器一般则只能用js。
好了,那我们来看每一个文件的代码。
view/App.view.js
sap.ui.jsview("ui5.tutorial.bp.view.App", { getControllerName: function () {
return "ui5.tutorial.bp.view.App";
}, createContent: function (oController) { // to avoid scroll bars on desktop the root view must be set to block display
this.setDisplayBlock(true); // create app
this.app = new sap.m.SplitApp(); // load the master page
var master = sap.ui.xmlview("Master", "ui5.tutorial.bp.view.Master");
master.getController().nav = this.getController();
this.app.addPage(master, true); // load the empty page
var empty = sap.ui.xmlview("Empty", "ui5.tutorial.bp.view.Empty");
this.app.addPage(empty, false); return this.app;
}
});
view/App.controller.js
sap.ui.controller("ui5.tutorial.bp.view.App", { /**
* Navigates to another page
* @param {string} pageId The id of the next page
* @param {sap.ui.model.Context} context The data context to be applied to the next page (optional)
*/
});
view/Master.view.xml
<core:View
controllerName="ui5.tutorial.bp.view.Master"
xmlns="sap.m"
xmlns:core="sap.ui.core" >
<Page
title="Product List" >
<subHeader>
<Bar>
<contentLeft>
<SearchField
search="handleSearch"
width="100%" >
</SearchField>
</contentLeft>
</Bar>
</subHeader>
<List
id="list"
items="{/SalesOrderCollection}" >
<ObjectListItem
type="Active"
press="handleListItemPress"
title="{SoId}"
number="{GrossAmount}"
numberUnit="{CurrencyCode}" >
<attributes>
<ObjectAttribute text="{BuyerName}" />
</attributes> </ObjectListItem>
</List>
</Page>
</core:View>
view/Master.controller.js
sap.ui.controller("ui5.tutorial.bp.view.Master", { handleSearch : function (evt) { // create model filter
var filters = [];
var query = evt.getParameter("query");
if (query && query.length > 0) {
var filter = new sap.ui.model.Filter("SoId", sap.ui.model.FilterOperator.Contains, query);
filters.push(filter);
} // update list binding
var list = this.getView().byId("list");
var binding = list.getBinding("items");
binding.filter(filters);
}
});
view/Empty.view.xml
<core:View
xmlns="sap.m"
xmlns:core="sap.ui.core" >
<Page>
</Page>
</core:View>
最后我们需要把这些文件和首页关联起来。 index.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"/> --> <meta charset="UTF-8"> <title>SAPUI5 Best Practice</title> <script
id="sap-ui-bootstrap"
src="http://localhost:8080/openui5/resources/sap-ui-core.js"
data-sap-ui-theme="sap_bluecrystal"
data-sap-ui-libs="sap.m"
data-sap-ui-xx-bindingSyntax="complex"
data-sap-ui-resourceroots='{
"ui5.tutorial.bp": "./"
}' >
</script> <script>
var oView = sap.ui.view({
id : "app",
viewName : "ui5.tutorial.bp.view.App",
type : "JS",
});
// Using a local model for offline development
var oModel = new sap.ui.model.json.JSONModel("model/mock.json");
oView.setModel(oModel); oView.placeAt('content');
</script>
</head>
<body class="sapUiBody"> <!-- This is where you place the UI5 button -->
<div id="content"></div>
</body>
完工,打开 http://localhost:8080/ui5bp/
,可以看到下图:
Figure 2: UI5最佳实践(一)
3 总结
- Master.view.xml:
这个页面大概是我们这次教程中最复杂的一个了,其中用到了这些控件:- Page
- Bar
- List
- ObjectListItem
- Master.controler.js:
目前我们只定义了一个方法 - 搜索。 - Empty.view.xml:
只是一个placeholder,因为Detail页面我们还没有创建,所以是一个空页面。 - App.view.js:
容纳Master和Detail页面的容器。 - App.controller.js
之后会在这里定义Master和Detail页面之间的导航功能
OPEN(SAP) UI5 学习入门系列之二: 最佳实践练习(上)的更多相关文章
- OPEN(SAP) UI5 学习入门系列之二: 最佳实践练习(下)
上期我们完成了一个简单的主从页面,但是页面是静态的,不能交互,功能也很简单,只有一个销售订单的列表. 我们今天就一鼓作气把代码全都写完,由于本次的代码量较大,所以只对重点代码部分进行讲解. 具体每个文 ...
- OPEN(SAP) UI5 学习入门系列之四:更好的入门系列-官方Walkthrough
好久没有更新了,实在不知道应该写一些什么内容,因为作为入门系列,实际上应该更多的是操作而不是理论,而在UI5 SDK中的EXPLORER里面有着各种控件的用法,所以在这里也没有必要再来一遍,还是看官方 ...
- OPEN(SAP) UI5 学习入门系列之一:扫盲与热身(下)
1 UI5代码结构 上一次我们一起用了20秒的时间完成一个UI5版的Hello World.应用打开后有一个按钮,按钮的文字是Hello World,点击这个按钮之后,按钮会慢慢的消失掉(Fade o ...
- OPEN(SAP) UI5 学习入门系列之三:MVC (上) - 模型
这次我们来一起学习MVC,这个专题分为两个小节,本次主要是总览以及模型,下一次着重会介绍视图以及控制器,因为控制器其实没有太多可以讲的,所以和视图合并在一块. 1 Model View Control ...
- [转]OPEN(SAP) UI5 学习入门系列之一:扫盲与热身(上)
本文转自:http://www.cnblogs.com/qianmarv/p/4671394.html 1 扫盲 什么是SAP Fiori? 了解SAP UI5必须要从SAP Fiori开始,两者概念 ...
- OPEN(SAP) UI5 学习入门系列之一:扫盲与热身(上)
什么是SAP Fiori? 了解SAP UI5必须要从SAP Fiori开始,两者概念经常被混淆,而两者也确实有着非常紧密的关系. 用过SAP的同学们都对SAP的传统的界面(SAP GUI)表示“呵呵 ...
- OPEN(SAP) UI5 学习入门系列之三:MVC (下) - 视图与控制器
继续来学习UI5的MVC模型吧,这次我们来探讨视图与控制器. 1 视图 在MVC中,视图用来定义和渲染UI.在UI5中,视图的类型是可以自定义的,除了以下预定义的四种视图类型之外,你也可以定制自己的视 ...
- ABP学习入门系列(二)(abp的数据迁移)
本文将介绍在ABP框架中将实体类迁移至数据库表 1.下图是abp的体系结构. 我们要是实现创建实体类并迁移数据到数据库的功能主要就是在下图中domain(领域层)做相应的一些操作. 2,看一下解决方案 ...
- Cordova入门系列(二)分析第一个helloworld项目 转发 https://www.cnblogs.com/lishuxue/p/6015420.html
Cordova入门系列(二)分析第一个helloworld项目 版权声明:本文为博主原创文章,转载请注明出处 上一章我们介绍了如何创建一个cordova android项目,这章我们介绍一下创建的 ...
随机推荐
- 100个gdb调试技巧
找到的一个有参考价值的关于GDB调试的站点:https://gitlore.com/subject/15
- JAVA国际化输出日期格式
1.建议控制台程序 使用 IntelliJ IDEA 创建 MAVEN项目, 不选别的选项,则为控制台程序. (其它方式创建的控制台程序可能编译不过) 2.源码如下: import java.tim ...
- Docker容器可以使用容器平台管理自动重启实现自修复吗?
容器的自修复功能是经常被吹嘘的.因为容器是衣服,人躺下了,衣服也躺下了,容器平台能够马上发现人躺下了,于是可以迅速将人重新唤醒工作. 而虚拟机是房子,人躺下了,房子还站着.因而虚拟机管理平台不知道里面 ...
- Nagios安装完后status map,trends等页面访问出错之解决
首先,可以进入/usr/local/nagios/sbin, [root@localhost sbin]# ldd statusmap.cgi linux-vdso.so. => (0x0000 ...
- LA 3211 飞机调度(2—SAT)
https://vjudge.net/problem/UVALive-3211 题意: 有n架飞机需要着陆,每架飞机都可以选择“早着陆”和“晚着陆”两种方式之一,且必须选择一种,第i架飞机的早着陆时间 ...
- canvas实现鼠标拖拽矩形移动改变大小
项目的一个新需求,动态生成矩形框,鼠标点击拖动改变矩形框的位置,并可以调整大小. 之前做过一个小demo,需求类似,但是在canvas内只有一个矩形框,拖动移动,当时记得是用isPointInPath ...
- php-fpm: 某项目网站频繁出现503问题解决( WARNING: [pool www] server reached pm.max_children setting (50), consider raising it)
服务是nginx+php-fpm配置, 在运行过一段时间后,会经常出现: WARNING: [pool www] server reached pm.max_children setting (50) ...
- Java Applet基础
applet是一种Java程序.它一般运行在支持Java的Web浏览器内.因为它有完整的Java API支持,所以applet是一个全功能的Java应用程序. 如下所示是独立的Java应用程序和app ...
- Android 版本升级涉及到的数据库数据迁移问题
最近做老版本向新版本升级,新版本增加了几张表,有的表经过了增加字段.那么如何把老的数据迁移到新的版本里呢? 我写了一段伪代码,是关于我们项目里的 用户登录信息 Users表, 历史表histor ...
- kotlin for android----------MVP模式下(OKHttp和 Retrofit+RxJava)网络请求的两种实现方式
今天要说的干货是:以Kotlin,在MVP模式下(OKHttp和 Retrofit+RxJava)网络请求两种实现方式的一个小案例,希望对大家有所帮助,效果图: Retrofit是Square公司开发 ...