码迷，mamicode.com
首页 > 其他好文 > 详细

sapui5 walkthrough 6-10

时间：2019-09-06 18:53:14      阅读：115      评论：0      收藏：0      [点我收藏+]

标签：png   NPU   body   let   inf   dep   oda   demo   new   

6. Step 6: Modules

在sapui5中，将资源称为model。 
 
修改App.controller.js
sap.ui.define([
   "sap/ui/core/mvc/Controller",
   "sap/m/MessageToast"
], function (Controller, MessageToast) {
   "use strict";
   return Controller.extend("sap.ui.demo.walkthrough.controller.App", {
      onShowHello : function () {
         MessageToast.show("Hello World");
      }
   });
});
sap.ui.define可以为controller跟其他js model定义全局命名空间。使用命名空间，可以在整个应用程序中进行寻址。
技术图片

 

7. Step 7: JSON Model

修改App.controller.js
sap.ui.define([
   "sap/ui/core/mvc/Controller",
   "sap/m/MessageToast",
   "sap/ui/model/json/JSONModel"
], function (Controller, MessageToast, JSONModel) {
   "use strict";
   return Controller.extend("sap.ui.demo.walkthrough.controller.App", {
      onInit : function () {
         // set data model on view
         var oData = {
            recipient : {
               name : "World"
            }
         };
         var oModel = new JSONModel(oData);
         this.getView().setModel(oModel);
      },
      onShowHello : function () {
         MessageToast.show("Hello World");
      }
   });
});
添加了一个onInit函数，onInit是SAPUI5的生命周期方法之一，在创建controller时由框架调用，类似于控件的构造函数。
使用setModel函数，可以将当前的JSONModel设置到view中。
 
修改App.view.xml
<mvc:View
   controllerName="sap.ui.demo.walkthrough.controller.App"
   xmlns="sap.m"
   xmlns:mvc="sap.ui.core.mvc">
   <Button
      text="Say Hello"
      press=".onShowHello"/>
   <Input
      value="{/recipient/name}"
      description="Hello {/recipient/name}"
      valueLiveUpdate="true"
      width="60%"/>
</mvc:View>

 {…}表示数据取自对象"recipient"的"name"属性。被叫做 "data binding".

 修改index.html
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>SAPUI5 Walkthrough</title>
    <script
        id="sap-ui-bootstrap"
        src="https://openui5.hana.ondemand.com/resources/sap-ui-core.js"
        data-sap-ui-theme="sap_belize"
        data-sap-ui-libs="sap.m"
        data-sap-ui-compatVersion="edge"
        data-sap-ui-async="true"
        data-sap-ui-resourceroots=‘{
            "sap.ui.demo.walkthrough": "./"
        }‘
        data-sap-ui-oninit="module:sap/ui/demo/walkthrough/index">
    </script>
    <script src="index.js"></script>
</head>
<body class="sapUiBody" id="content">
</body>
</html>
view中description="Hello {/recipient/name}"这种形式为复杂绑定，需要设置data-sap-ui-compatVersion="edge"来确保它可以正确的运行
不设置
技术图片
设置
技术图片 

8.  Step 8: Translatable Texts

i18n用来实现国际化过程。
 
新建i18n.properties
showHelloButtonText=Say Hello
helloMsg=Hello {0}
通过在文本中添加花括号中的数字，可以向文本添加任意数量的参数。这些数字对应参数的顺序(从0开始)。
再实际项目中，通过添加后缀来实现多语言支持，i18n_de.properties为德文，i18n_en.properties为英文。
 
修改App.controller.js
sap.ui.define([
   "sap/ui/core/mvc/Controller",
   "sap/m/MessageToast",
   "sap/ui/model/json/JSONModel",
   "sap/ui/model/resource/ResourceModel"
], function (Controller, MessageToast, JSONModel, ResourceModel) {
   "use strict";
   return Controller.extend("sap.ui.demo.walkthrough.controller.App", {
     onInit : function () {
         // set data model on view
         var oData = {
            recipient : {
               name : "World"
            }
         };
         var oModel = new JSONModel(oData);
         this.getView().setModel(oModel);
         // set i18n model on view
         var i18nModel = new ResourceModel({
            bundleName: "sap.ui.demo.walkthrough.i18n.i18n"
         });
         this.getView().setModel(i18nModel, "i18n");
      },
      onShowHello : function () {
         // read msg from i18n model
         var oBundle = this.getView().getModel("i18n").getResourceBundle();
         var sRecipient = this.getView().getModel().getProperty("/recipient/name");
         var sMsg = oBundle.getText("helloMsg", [sRecipient]);
         // show message
         MessageToast.show(sMsg);
      }
   });
});
当页面使用多个model的时候，可以用 this.getView().setModel(i18nModel, "i18n"); 为页面指定多个model。
 
修改App.view.xml
<mvc:View
   controllerName="sap.ui.demo.walkthrough.controller.App"
   xmlns="sap.m"
   xmlns:mvc="sap.ui.core.mvc">
   <Button
      text="{i18n>showHelloButtonText}"
      press=".onShowHello"/>
   <Input
      value="{/recipient/name}"
      description="Hello {/recipient/name}"
      valueLiveUpdate="true"
      width="60%"/>
</mvc:View>

技术图片

技术图片

9. Step 9: Component Configuration

component是SAPUI5应用程序中使用的独立且可重用的部分。
sapui5执行程序的顺序是index.html⇒Component.js⇒manifest.json。但是当我们使用Fiori Launchpad来启动sapui5的程序时，不使用index.html，而是直接从Component.js文件启动。
 
创建Component.js
sap.ui.define([
   "sap/ui/core/UIComponent",
   "sap/ui/model/json/JSONModel",
   "sap/ui/model/resource/ResourceModel"
], function (UIComponent, JSONModel, ResourceModel) {
   "use strict";
   return UIComponent.extend("sap.ui.demo.walkthrough.Component", {
      metadata : {
         rootView: {
            "viewName": "sap.ui.demo.walkthrough.view.App",
            "type": "XML",
            "async": true,
            "id": "app"
         }
      },
      init : function () {
         // call the init function of the parent
         UIComponent.prototype.init.apply(this, arguments);
         // set data model
         var oData = {
            recipient : {
               name : "World"
            }
         };
         var oModel = new JSONModel(oData);
         this.setModel(oModel);

         // set i18n model
         var i18nModel = new ResourceModel({
            bundleName : "sap.ui.demo.walkthrough.i18n.i18n"
         });
         this.setModel(i18nModel, "i18n");
      }
   });
});
component的init函数会在sapui5启动的时候，自动被调用，component继承sap.ui.core.UIComponent，这里需要在重写的init方法中，在调用父类的init方法。
定义在init中的model会被其他controls自动的继承，所以模型也可以使用在view中。
 
修改App.controller.js
sap.ui.define([
   "sap/ui/core/mvc/Controller",
   "sap/m/MessageToast"
], function (Controller, MessageToast) {
   "use strict";
   return Controller.extend("sap.ui.demo.walkthrough.controller.App", {
      onShowHello : function () {
         // read msg from i18n model
         var oBundle = this.getView().getModel("i18n").getResourceBundle();
         var sRecipient = this.getView().getModel().getProperty("/recipient/name");
         var sMsg = oBundle.getText("helloMsg", [sRecipient]);
         // show message
         MessageToast.show(sMsg);
      }
   });
});
修改index.js
sap.ui.define([
    "sap/ui/core/ComponentContainer"
], function (ComponentContainer) {
    "use strict";

    new ComponentContainer({
        name: "sap.ui.demo.walkthrough",
        settings : {
            id : "walkthrough"
        },
        async: true
    }).placeAt("content");
});

使用ComponentContainer才可以通过component的配置来进行view的实例化。

技术图片
技术图片 

10. Step 10: Descriptor for Applications

所有application的特定配置都应该放进一个独立的描述文件"manifest.json"中。它会使程序更加灵活，以便托管在Fiori Lanuchpad中。
 
创建manifest.json文件
{
  "_version": "1.12.0",
  "sap.app": {
    "id": "sap.ui.demo.walkthrough",
    "type": "application",
    "i18n": "i18n/i18n.properties",
    "title": "{{appTitle}}",
    "description": "{{appDescription}}",
    "applicationVersion": {
      "version": "1.0.0"
    }
  },
  "sap.ui": {
    "technology": "UI5",
    "deviceTypes": {
        "desktop": true,
        "tablet": true,
        "phone": true
    }
  },
  "sap.ui5": {
    "rootView": {
        "viewName": "sap.ui.demo.walkthrough.view.App",
        "type": "XML",
        "async": true,
        "id": "app"
    },
    "dependencies": {
      "minUI5Version": "1.60",
      "libs": {
        "sap.m": {}
      }
    },
    "models": {
      "i18n": {
        "type": "sap.ui.model.resource.ResourceModel",
        "settings": {
          "bundleName": "sap.ui.demo.walkthrough.i18n.i18n"
        }
      }
    }
  }
}
manifest.json文件中有命名空间定义了三个重要的部分。
  • sap.appに関する設定：アプリケーションのid、タイトルなど
  • sap.uiに関する設定：サポートするデバイスの種類、UIのテーマなど
  • sap.ui5に関する設定：最初に表示するビュー(rootView)、従属するライブラリのバージョンなど
修改index.html
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>SAPUI5 Walkthrough</title>
    <script
        id="sap-ui-bootstrap"
        src="https://openui5.hana.ondemand.com/resources/sap-ui-core.js"
        data-sap-ui-theme="sap_belize"
        data-sap-ui-resourceroots=‘{
            "sap.ui.demo.walkthrough": "./"
        }‘
        data-sap-ui-oninit="module:sap/ui/core/ComponentSupport"
        data-sap-ui-compatVersion="edge"
        data-sap-ui-async="true">
    </script>
</head>
<body class="sapUiBody" id="content">
    <div data-sap-ui-component data-name="sap.ui.demo.walkthrough" data-id="container" data-settings=‘{"id" : "walkthrough"}‘></div>
</body>
</html>
在bootstrapping的时候，启动了module ComponentSupport。 通过div标签声明了组件，这样将在onInit事件中实例化组件。
之后可以删除index.js，描述文件将处理所有的事情。
 
修改i18n.properties
# App Descriptor
appTitle=Hello World
appDescription=A simple walkthrough app that explains the most important concepts of SAPUI5

# Hello Panel
showHelloButtonText=Say Hello
helloMsg=Hello {0}
修改Component.js
sap.ui.define([
   "sap/ui/core/UIComponent",
   "sap/ui/model/json/JSONModel"
], function (UIComponent, JSONModel) {
   "use strict";
   return UIComponent.extend("sap.ui.demo.walkthrough.Component", {
      metadata : {
            manifest: "json"
      },
      init : function () {
         // call the init function of the parent
         UIComponent.prototype.init.apply(this, arguments);
         // set data model
         var oData = {
            recipient : {
               name : "World"
            }
         };
         var oModel = new JSONModel(oData);
         this.setModel(oModel);
      }
   });
});
manifest: "json"表示对描述文件的引用，该引用将在组件实例化时自动加载和解析。
技术图片
 

sapui5 walkthrough 6-10

标签：png   NPU   body   let   inf   dep   oda   demo   new   

原文地址：https://www.cnblogs.com/suoluo119/p/11474691.html
踩
(0)
赞
(0)
   
举报
评论 一句话评论（0）
登录后才能评论！
分享档案
更多>
2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)
周排行
mamicode.com排行更多图片
更多
友情链接
兰亭集智   国之画   百度统计   站长统计   阿里云   chrome插件   新版天听网
关于我们 - 联系我们 - 留言反馈
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码！