设为首页收藏本站站点任务
请登陆 注册有礼
二维码
网站快捷导航

[Fiori] OPEN(SAP) UI5 学习入门系列之二： 最佳实践练习（上）

Twilight发表于 2016-05-06 16:14Twilight 最后回复于 2016-05-06 16:14 [复制链接] 5565 0

这篇博文难产了很久，原来是打算一周更新一篇的，上周原计划写MVC，但是写了一半，发现带入了太多的细节，不太符合这个入门系列的主题。 当我们学习一个新的技能的时候，如果一开始就面对大量的细节，很容易陷入其中而只见树木不见森林，所以最后我想我们还是先按照开发文档的节奏，一起来做UI5的最佳实践练习。在练习中对常用的一些控件以及API有一个直观的感受，如果需要细节的信息再去查文档。
这个最佳实践练习的子系列又会分为若干篇，但是不会完全按照Tutorial里面的章节来分，因为我希望每一篇都是都是一个完整的练习，都能跑出来，而不仅仅是一个片段。
最后做出来的App是这样的。
Best practice 1.jpg
Figure 1: SAP UI5最佳实践练习的最终界面

一、首页
我们先把首页做出来，还是以之前Hello World的代码框架开始吧。 首先在<tomcat>/webapps/ 下新建一个目录就叫 ui5bp 吧，创建 index.html ，代码如下：
index.html
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  5. <!--<meta http-equiv="Content-Type" content="text/html;charset=UTF-8"/> -->
  6. <meta charset="UTF-8">

  8. <title>SAPUI5 Best Practice</title>

  10. <script id="sap-ui-bootstrap"
  11.         src="http://localhost:8080/openui5/resources/sap-ui-core.js"
  12.         data-sap-ui-theme="sap_bluecrystal" data-sap-ui-libs="sap.m"
  13.         data-sap-ui-xx-bindingSyntax="complex"
  14.         data-sap-ui-resourceroots='{
  15.         "ui5.tutorial.bp": "./"
  16.     }'>
  17.        
  18. </script>

  20. <script>
  21.        
  22. </script>
  23. </head>
  24. <body class="sapUiBody">
  25.         <!-- This is where you place the UI5 button -->
  26.         <div id="content"></div>
  27. </body>
复制代码

打开浏览器，输入 http://localhost:8080/ui5bp/ 你应该可以看到淡蓝色的背景，除此以外，啥都没有。
这里要提一下，我们定义了一个命名空间 ui5.tutorial.bp 把这个命名空间注册到根目录。后续我们定义或者引用资源都需要加上这个命名空间前缀。
打开开发者选项，也没有任何错误，那就成功了，继续下一步。

二、MVC框架
我们暂时不用Component来做模块化，我们先用最快最简单的方法让程序可以跑出个样子来，然后再慢慢的添加功能。
所以，我们先直接加入MVC。
简单介绍下，MVC就是模型、视图和控制器的简称，一般的Web开发都会用到这种架构用来把前端的UI和业务逻辑分离。具体先不多介绍，直接做吧。
我们先大致规划一下，我们的应用是一个主从页面结构，会有一个Master的页面和Detail的页面，我们今天先创建一个Empty页面来替代Detail。 我们会创建如下文件以及对应的目录：
  1. ui5bp/
  2. +-- view/
  3. |     |
  4. |     +-- App.view.js
  5. |     +-- App.controller.js
  6. |     +-- Empty.view.xml
  7. |     +-- Master.controller.js
  8. |     +-- Master.view.xml
  9. |
  10. +-- model/
  11. |     |
  12. |     +-- mock.json
  13. +-- index.html
复制代码

我们最后把App放入到index的content中，把Master和Detail放到App中去，其中包含.view. 的文件是视图，用来定义UI，包含 .controller. 的文件是控制器，用来处理逻辑。 为了简化应用，我们暂时不使用在线的数据而是用一个json格式的文件数据作为我们的数据模型。这个文件你可以从这里下载。
简单提一下，视图可以用html、xml、js、json这四种文件形式来定义，控制器一般则只能用js。
好了，那我们来看每一个文件的代码。
view/App.view.js
  1. sap.ui.jsview("ui5.tutorial.bp.view.App", {

  3.         getControllerName : function() {
  4.                 return "ui5.tutorial.bp.view.App";
  5.         },

  7.         createContent : function(oController) {

  9.                 // to avoid scroll bars on desktop the root view must be set to block
  10.                 // display
  11.                 this.setDisplayBlock(true);

  13.                 // create app
  14.                 this.app = new sap.m.SplitApp();

  16.                 // load the master page
  17.                 var master = sap.ui.xmlview("Master", "ui5.tutorial.bp.view.Master");
  18.                 master.getController().nav = this.getController();
  19.                 this.app.addPage(master, true);

  21.                 // load the empty page
  22.                 var empty = sap.ui.xmlview("Empty", "ui5.tutorial.bp.view.Empty");
  23.                 this.app.addPage(empty, false);

  25.                 return this.app;
  26.         }
  27. });
复制代码

view/App.controller.js
  1. sap.ui.controller("ui5.tutorial.bp.view.App", {

  3. /**
  4. * Navigates to another page
  5. *
  6. * @param {string}
  7. *            pageId The id of the next page
  8. * @param {sap.ui.model.Context}
  9. *            context The data context to be applied to the next page (optional)
  10. */
  11. });
复制代码

view/Master.view.xml
  1. <core:View controllerName="ui5.tutorial.bp.view.Master" xmlns="sap.m"
  2.         xmlns:core="sap.ui.core">
  3.         <Page title="Product List">
  4.                 <subHeader>
  5.                         <Bar>
  6.                                 <contentLeft>
  7.                                         <SearchField search="handleSearch" width="100%">
  8.                                         </SearchField>
  9.                                 </contentLeft>
  10.                         </Bar>
  11.                 </subHeader>
  12.                 <List id="list" items="{/SalesOrderCollection}">
  13.                         <ObjectListItem type="Active" press="handleListItemPress"
  14.                                 title="{SoId}" number="{GrossAmount}" numberUnit="{CurrencyCode}">
  15.                                 <attributes>
  16.                                         <ObjectAttribute text="{BuyerName}" />
  17.                                 </attributes>

  19.                         </ObjectListItem>
  20.                 </List>
  21.         </Page>
  22. </core:View>
复制代码

view/Master.controller.js
  1. sap.ui.controller("ui5.tutorial.bp.view.Master", {

  3.         handleSearch : function(evt) {

  5.                 // create model filter
  6.                 var filters = [];
  7.                 var query = evt.getParameter("query");
  8.                 if (query && query.length > 0) {
  9.                         var filter = new sap.ui.model.Filter("SoId",
  10.                                         sap.ui.model.FilterOperator.Contains, query);
  11.                         filters.push(filter);
  12.                 }

  14.                 // update list binding
  15.                 var list = this.getView().byId("list");
  16.                 var binding = list.getBinding("items");
  17.                 binding.filter(filters);
  18.         }
  19. });
复制代码

view/Empty.view.xml
  1. <core:View xmlns="sap.m" xmlns:core="sap.ui.core">
  2.         <Page>
  3.         </Page>
  4. </core:View>
复制代码

最后我们需要把这些文件和首页关联起来。
index.html
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  5. <!--<meta http-equiv="Content-Type" content="text/html;charset=UTF-8"/> -->

  7. <meta charset="UTF-8">

  9. <title>SAPUI5 Best Practice</title>

  11. <script id="sap-ui-bootstrap"
  12.         src="http://localhost:8080/openui5/resources/sap-ui-core.js"
  13.         data-sap-ui-theme="sap_bluecrystal" data-sap-ui-libs="sap.m"
  14.         data-sap-ui-xx-bindingSyntax="complex"
  15.         data-sap-ui-resourceroots='{
  16.         "ui5.tutorial.bp": "./"
  17.     }'>
  18.        
  19. </script>

  21. <script>
  22.         var oView = sap.ui.view({
  23.                 id : "app",
  24.                 viewName : "ui5.tutorial.bp.view.App",
  25.                 type : "JS",
  26.         });
  27.         // Using a local model for offline development
  28.         var oModel = new sap.ui.model.json.JSONModel("model/mock.json");
  29.         oView.setModel(oModel);

  31.         oView.placeAt('content');
  32. </script>
  33. </head>
  34. <body class="sapUiBody">

  36.         <!-- This is where you place the UI5 button -->
  37.         <div id="content"></div>
  38. </body>
复制代码

完工，打开 http://localhost:8080/ui5bp/ ，可以看到下图：
Best practice 2.jpg
Figure 2: UI5最佳实践（一）

三、总结
  • 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页面之间的导航功能
Fiori, UI5

相关帖子
回复

使用道具 举报

Twilight

管理员

+发表新主题
  1. 839 主题
  2. 964 帖子
  3. 10798 积分
收听TA 发消息

Ta最近发表

快速回帖

本版积分规则
高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 | 注册有礼

小黑屋|手机版|SAP顾问圈 ( 沪ICP备18020878号 )

GMT+8, 2024-4-24 15:43 , Processed in 0.049179 second(s), 9 queries , Gzip On, Redis On.

© 2014-2017 SAPclubDesign by Twilight.Liu®X3.4

平台客服 1204767879 无客服码

快速回复 返回顶部 返回列表