UI5_Walkthrough_1

创建项目

参考 SAPUI5: UI Development Toolkit for HTML5
新建SAP UI5 Application Project
选择sap.m库，取消勾选创建view的选项

新建的项目如下，可以引用服务器的类库src="https://sapui5.hana.ondemand.com/resources/sap-ui-core.js"

同时定义了id，用的ui库，及ui主题模式

id="sap-ui-bootstrap"
data-sap-ui-libs="sap.m"
data-sap-ui-theme="sap_bluecrystal"

使用UI5最新的功能我们可以添加compatVersion，preload设置异步，UI5的资源在后台加载

data-sap-ui-compatVersion="edge"
data-sap-ui-preload="async"

创建Application与Page

下面的script标签中增加代码，sap.ui.getCore()获取SAP UI Library的核心Core对象，并attachInit绑定init事件，Core对象是单例模式，在任何地方都可以得到。attachInit中的function当UI5加载后立即执行，new sap.m.App创建Application，第一个参数为id，第二个为设置，sap.m.App继承自sap.m.NavContainer，initialPage来自于sap.m.NavContainer，传入一个control对象或id。

<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>

创建page1，content需要传入control对象，

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");
        }
    })
});

sap.m.NavContainer的to方法back方法可以实现导航到相应的page，通过app.addPage(page1).addPage(page2);将page添加到app，Control对象可以用placeAt方法将其放置于HTML document元素中。

XML View

新建view文件夹，创建一个简单的app view，参考默认命名空间sap.m，引用sap.ui.core.mvc为mvc别名。在view里面加了Text Control对象，每个control对象都有id名，如果没有系统运行时将自动生成

<mvc:View
   xmlns="sap.m"
   xmlns:mvc="sap.ui.core.mvc">
   <Text text="Hello World"/>
</mvc:View>

在index.html中，我们定义根目录别名sap.ui.demo.wt

data-sap-ui-resourceroots='{
 "sap.ui.demo.wt": "./"
}' 

初始化加载时，通过sap.ui.xmlview创建xmlview对象，xmlview继承自control，因此可以通过placeAt放到DOM元素上。viewName为路径名+文件名

    sap.ui.getCore().attachInit(function () {
           sap.ui.xmlview({
               viewName : "sap.ui.demo.wt.view.App"
            }).placeAt("content");
         });

Controller

在xml view上通过controllerName="sap.ui.demo.wt.controller.App"来指定它对应的controller，在view中创建Button并绑定press的事件onShowHello，建立controller文件夹并创建app.controller.js文件。controller的定义如下

sap.ui.define([
   "sap/ui/core/mvc/Controller"
], function (Controller) {
   "use strict";
   return Controller.extend("", {
   });
});

sap.ui.define定义模块遵循了AMD规范，传入参数sModuleName?, aDependencies?, vFactory, bExport?在声明模块的时候制定所有的依赖模块(aDependencies)，并且当做形参传到vFactory中。sap.ui.core.mvc.Controller.extend方法传入ClassName，FNMetaImpl（metadata 对象的构造方法），返回创建的class并带上相应构造方法。
以下代码构造了sap.ui.demo.wt.controller.App模块，该模块扩展了Controller模块，构造方法中添加了onShowHello事件的实现方法

sap.ui.define([
   "sap/ui/core/mvc/Controller"
], function (Controller) {
   "use strict";
   return Controller.extend("sap.ui.demo.wt.controller.App", {
      onShowHello : function () {
         // show a native JavaScript alert
         alert("Hello World");
      }
   });
});

UI5中的资源文件常常参考定义为Module模块，扩展上面的代码，加入MessageToast模块

sap.ui.define([
   "sap/ui/core/mvc/Controller",
   "sap/m/MessageToast"
], function (Controller, MessageToast) {
   "use strict";
   return Controller.extend("sap.ui.demo.wt.controller.App", {
      onShowHello : function () {
         MessageToast.show("Hello World");
      }
   });
});

AMD规范语法中，Controller和MessageToast加载完后，执行后面function函数，这样我们根据执行代码选择性地加载模块，提高了程序的性能。
在js模块程序中或其他HTML页面中，我们可以用sap.ui.require来加载

//同步加载
 var JSONModel = sap.ui.require("sap/ui/model/json/JSONModel");
//异步加载
  sap.ui.require(['sap/ui/model/json/JSONModel', 'sap/ui/core/UIComponent'], 
    function(JSONModel,UIComponent) {
    var MyComponent = UIComponent.extend('MyComponent', {
    });
  });

JSON Model

在上面的controller中再添加JSONModel的依赖"sap/ui/model/json/JSONModel"，添加onInit事件的Handler方法，新建一个oData JSON对象，并创建JSONModel，onInit在Controller创建时触发，this在这里是controller对象，通过getView()获取当前view，view对象setModel方法绑定model

      onInit : function () {
         // set data model on view
         var oData = {
            recipient : {
               name : "World"
            }
         };
         var oModel = new JSONModel(oData);
         this.getView().setModel(oModel);
      },

回到view中，新建input控件,{…}中内容表明将由Model中的值替换，即数据绑定，/recipient/name是Model中的路径

   <Input
      value="{/recipient/name}"
      description="Hello {/recipient/name}"
      valueLiveUpdate="true"
      width="60%"/>

翻译文本

创建i18n文件夹及i18n.properties文件

showHelloButtonText=Say Hello
helloMsg=Hello {0}

controller中引入依赖"sap/ui/model/resource/ResourceModel"
bundleName为i18n的完整路径，与前面JSONModel类似，将其绑定到Model，setModel通过第二个参数i18n指定模型的名称，在view.xml中通过text="{i18n>showHelloButtonText}"访问i18n Model中内容

var i18nModel = new ResourceModel({
  bundleName: "sap.ui.demo.wt.i18n.i18n"
});
this.getView().setModel(i18nModel, "i18n");

var sRecipient = this.getView().getModel().getProperty("/recipient/name");得到JSON Model的/recipient/name路径下的值，var oBundle = this.getView().getModel("i18n").getResourceBundle();得到i18n Model的ResourceBundle对象，var sMsg = oBundle.getText("helloMsg", [sRecipient]);getText取Bundle对象的helloMsg文本，由于文本中定义了{0}，接收sRecipient的值，再通过MessageToast.show(sMsg);显示出来

      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);
      }

组件配置

我们通过Component模块来管理开发的UI资源，定义Component.js文件如下，继承UIComponent模块。

sap.ui.define([
   "sap/ui/core/UIComponent"
], function (UIComponent) {
   "use strict";
   return UIComponent.extend("sap.ui.demo.wt.Component", {
      init : function () {
         // call the init function of the parent
         UIComponent.prototype.init.apply(this, arguments);
    }
   });
});

将前面controller中设置JSONModel及ResourceModel放到init事件方法中来，同时新添加了metadata，指定了rootview

metadata : {
    rootView: "sap.ui.demo.wt.view.App"
},

index.html中，此时创建ComponentContainer对象（也是继承自Control）

         sap.ui.getCore().attachInit(function () {
            new sap.ui.core.ComponentContainer({
               name : "sap.ui.demo.wt"
            }).placeAt("content");
         });

将metadata内容提取到manifest.json文件，将i18n Model定义在json文件中，我们可以移除Component.js中相关代码

{
  "_version": "1.1.0",
  "sap.app": {
    "_version": "1.1.0",
    "id": "sap.ui.demo.wt",
    "type": "application",
    "i18n": "i18n/i18n.properties",
    "title": "{{appTitle}}",
    "description": "{{appDescription}}",
    "applicationVersion": {
      "version": "1.0.0"
    }
  },
  "sap.ui": {
    "_version": "1.1.0",
    "technology": "UI5",
    "deviceTypes": {
      "desktop": true,
      "tablet": true,
      "phone": true
    },
    "supportedThemes": [
      "sap_belize"
    ]
  },
  "sap.ui5": {
    "_version": "1.1.0",
    "rootView": "sap.ui.demo.wt.view.App",
    "dependencies": {
      "minUI5Version": "1.30",
      "libs": {
        "sap.m": {}
      }
    },
    "models": {
      "i18n": {
        "type": "sap.ui.model.resource.ResourceModel",
        "settings": {
          "bundleName": "sap.ui.demo.wt.i18n.i18n"
        }
      }
    }
  }
}