sapui5 walkthrough 6-10

Posted 2022-10-06 suoluo119

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了sapui5 walkthrough 6-10相关的知识，希望对你有一定的参考价值。

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的主要内容，如果未能解决你的问题，请参考以下文章

sapui5 walkthrough 21-25

sapui5 walkthrough 11-15

sapui5 walkthrough 26-30

SAPUI5-Walkthrough-29OPA集成测试

SAPUI5 Walkthrough Step 27: Mock Server Configuration

SAPUI5简单的ajax操作