前面的Step进展的速度比较慢是因为我认为基础的东西一定要清晰，否则以后开发程序只能是copy着做，并不理解它的架构，出了问题更是无从查起。从Step11开始我准备加快速度，在完成整个Tutorial之后再进行回顾和复盘。

Step11 Pages and Panels

增加了pages和Panels两个控件，这里需要记住的一点就是控件下的，它在page中可以有0..N个。
学习过程当中，想用好每一个控件最好的途径就是参考SAP的标准API文档，在这里查找每一个API的属性和方法，不断的尝试。

Panel 控件用于为其他控件提供可识别的分组，在它内部的控件很多时，它可以有滚动条。另外可以对这个窗体进行轮廓的属性设置。

Step12 Shell Control as Container

Shell 从字面意思可以理解为‘壳，外形’，它可以做为app的一个root元素，它可以用来自动调节以适应不同设备屏幕的显示。如下图，在屏幕比较宽时两边可以出现一定宽度的条幅。

Step13 Margins and Paddings

Margins 边距

Paddings内边距


这里用sapUiResponsiveMargin给panel的周转加了一些空间，这里的Margin也会自动适应不同的屏幕。

用sapUiSmallMarginEnd给按钮和输入控件中间加入了一些边距。

sapUiSmallMargin对最后一个控件进行了边距控制

Step14 Custom CSS and Theme Color

用SAPUI5生成的HTML和CSS并不是Public API的一部分，每次升级都需要好好的把控件再测试一遍，而custom style不需要，这次就自定义了一个css文件来控件页面显示。
在要目录下新建一个css文件夹，新建一个style.css文件

这里的语法暂时不做深究了

同样需要在manifest.json文件里中入这个css文件，也可以通过descrptor editor来进行编辑

修改view

完整的css和Theme参数可以参考标准文档https://sapui5.hana.ondemand.com/sdk/#docs/guide/ea08f53503da42c19afd342f4b0c9ec7.html

我们可以把应用的一些配置信息都放到这个manifest.json里面，UI5提供了API来检索相应的配置信息，同时，当我们需要把这个app放到Fiori Launchpad的时候，一些相应的配置信息也会被Fiori Launchpad读到。

• 新建一个manifest.json文件

  1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44

  { "_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" } } } } }

这里只介绍了一些重要的设置参数，在WEBIDE中可能会由于一些设置没有而出现一些validation error消息

manifest.json文件是一个使用JSON格式来保存应用所需要的全局设置和参数。包括三个由namespaces定义的重要的部分：

1. sap.app
   （应用级别的设置）

   1 2 3 4 5 6

   ·id(必须): 应用组件的namespace，不能超过70个字符，唯一 ·type：定义我们要配置的类型，这里是：application ·i18n：定义Resource bundle 文件的路径 ·title：应用标题 ·description：描述 ·applicationVersion：应用的版本，方便日后升级

2. sap.ui
   （UI级别的设置）

   1 2 3

   ·technology：SAPUI5 ·deviceTypes：应用支持的设备：desktop,tablet,phone，默认是全部支持 ·supportedThemes：一个包含了所支持的主题的数组，比如sap_belize

3. sap.ui5
   

   1 2 3

   ·rootView：如果设置了这个，组件会自动实例化这个view并且把它做为rootView。 ·dependencies：应用所用到的库 ·models：这里可以设置所有app启动时就进行实例化的models，比如可以定义local resource bundle,i18n，并且指定路径，这样就不需要在component.js的init中手工加载了

WEBIDE一个非常好的功能就是可以layout维护descrptor

假如我们把上面那些设置都copy到这个文件里再用这个descrptor editor打开，你会发现维护起来非常直观。

这可以节约我们很多代码时间

(原来真的有default model，就是前面step中getModel()没有指定model name那个)

继续…

先在i18n.properties中加入一些文本，方便在descrptor引用，(不知道这里为什么用#做注释)

修改Component.js文件中的metadata部分，这里就可以把rootView这个属性替换为manifast: "json"

在这里执行程序的时候遇到一个坑，可能是我正在编辑manifast文件，在点击执行时执行的Component.js，而不是index.html

搞了半天才发现，在run configuration中增加了一个Web Application才搞定，留意了一下区别，默认的 Sap Fiori Component on Sandbox才是以后我们将会发布在Fiori之上的组件，后面学吧

前面Step4 5 7包括8用到了MVC的概念，这一步用的是另一个很重要的结构组件Component。我们可以把UI assets装到一个index.html之外的一个独立的组件中，组件是可以被复用的，我们访问资源的时候就可以直接关系到这个组件而不是再关系到index.html。这种形式使APP更容易的被周围的Container使用，比如Fiori Launchpad。

• 在根目录新建一个文件Component.js，和index.html相同路径
  
  组件继承自基础class sap.ui.core.UIComponents，并且在重写的init方法里必须调用基础class的init函数。
• 在完成上面基础代码的基础上完善Component
  
  可以看到这里主要加了两部分：

1. metadata定义rootview。现在由Component来管理app view的显示。
2. 之前在Controller介绍过的init函数，这个在Component组件被初始化时就会被调用。

• 当然init挪到Controller之后就要把Controller里的删掉，不再截图了。(记得把上面参考的路径也删掉)
• 修改index.html,这时就不再实例化View了，而改为了现在的Component
  sap.ui.core.ComponentContainer:
  
  

总结一下

手边没有趁手工具就用mspaint画一个吧，我觉得这个图画出来思路就清晰了，不用再解释了吧。

这次主要是把UI中的文本放到一个单独的文件中，这样集中进行维护，方便翻译至其它语言。
这个国际化的过程简称 i18n, 在SAPUI5中通过一种特殊的resource model和标准的数据绑定（前面没有 ‘/’ ）

新建一个文件夹i18n，新建一个文件i18n.properties
每一个元素的文本都以name-value的形式存储在这个properties文件中。
实际项目中，可能每一个语言新建一个,比如 i18n_de.properties for German, i18n_en.properties for English，这样用户登录可以装载合适的文本。

在onInit函数中实例化ResouceModel，这里bundleName路径包含了两部分，前面sap.ui.demo.wt这个是index.html中定义的应用的命名空间，后面i18n.i18n是properties文件的路径(文件夹.文件名)。SAPUI5运行环境会自动根据这个路径查找资源文件
this.getView().setModel(i18nModel,"i18n")这句话的意思是在使用这个Controller的View上set一个model的实例i18nModel，Key是i18n。

接下在就是在onShowHello事件句柄函数中来读这个Model了。

1
2

var oBundle = this.getView().getModel("i18n").getResourceBundle();
var sRecipient = this.getView().getModel().getProperty("/recipient/name");

这里我挺困惑的，这里两次getModel,上面加了model name，下面省略了，我用下面的方式看他们的结果，结果上面取到的是EventProvider sap.ui.model.resource.ResourceModel，下面取到的是EventProvider sap.ui.model.json.JSONModel,查了下api，说是不指定model name的话就是默认的model

1
2

MessageToast.show(this.getView().getModel("i18n"));
MessageToast.show(this.getView().getModel());

getResourceBundle:

getText:

getProperty:


在XML View中，我们使用了数据绑定来连接按钮文本和i18n model中的showHelloButtonText属性。

总结几点:

• 国际化的resource model 使用 i18n
• 默认的文件名 i18n.properties
• Resource bundle的key要用小写，比如上面例子中用到的i18n
• Resource bundle 的值可以包含多个，例如{1},{2},{3}…
• 不要拼接要翻译的字符串，要用占位符

前面我们已经创建了MVC中的View 和Controller,这次需要填加的是其中的M Model。我们将加入一个输入框，并且将它的值与Model绑定。有了前面的基础我们很容易理解这里的变化，加入了一个依赖模块，JSONModel，重要的是加了一个onInit的响应事件，前面的按钮我们知道了事件代码是需要触发的，不管是直接写代码还是Layout Editor编辑都能看出来按钮的onPress逻辑绑定在了press这个事件上，但这个onInit却是系统自带默认一个事件，onInit是一个SAP UI5的生命周期方法，在Controller创建的时候会被Framework调用，相当于是这个Controller的一个构造函数。

1. 在Controller中加入JSONModel 需要的参数"sap/ui/model/json/JSONModel" JSONModel
   

1
2
3
4
5
6
7
8
9
10

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

在Controller增加一个onInit函数，onInit是一个SAP UI5的生命周期方法，在Controller创建的时候会被Framework调用，相当于是这个Controller的一个构造函数。

1
2
3
4

var oData = {
   recipient : {
      name : "World"
   }

这里就是定义了一个Data model,这个Model只有一个属性recipient，这个属性又包含一个属性name,默认值是World。

1

new JSONModel(oData)

新实例一个JSON Model

1

this.getView().setModel(oModel);

为了可以在XML View中使用这个Model,调用一个setModel的函数来传递新建的Model。相当于进行了绑定。

再看View,定义完Data Model就可以使用它了，在这里加了一个sap.m.Input控件
{ }使用大括号来表示Model对象的属性（recipient的name属性），这叫做数据绑定data binding，

留心的话可以发现上面多加了一句data-sap-ui-compatVersion="edge"，这句话有什么作用呢，如果不加这句就只能简单绑定simple binding，加了就可以*复合绑定complex binding，应该就是可以和其它类型的变量一起混合使用，具体参考Compatibility Version Inforamtion不加就只有这句可以正确赋值value="{/recipient/name}"，加上这句后description="Hello {/recipient/name}"，description才可以有这个变量值，否则{/recipient/name}会以字符串的形式显示在屏幕上。
下面显示两种效果，对比一下

MVC

这里加入了JSONModel，应该已经算是MVC结构了，Model分几种？又是在哪里定义怎么控件的呢？
https://sapui5.hana.ondemand.com/#docs/guide/91f233476f4d1014b6dd926db0e91070.html

明天研究这个…