UI5_Walkthrough_2

Pages and Panels

将前面app的xml内容放到Panel中，并将Panel放到Page中，设置displayBlock="true"可以更适应全屏工作的高度。

   <App>
      <pages>
         <Page title="{i18n>homePageTitle}">
            <content>
               <Panel
                  headerText="{i18n>helloPanelTitle}">
                  <content>
                     <Button
                        text="{i18n>showHelloButtonText}"
                        press="onShowHello"/>
                     <Input
                        value="{/recipient/name}"
                        description="Hello {/recipient/name}"
                        valueLiveUpdate="true"
                        width="60%"/>
                  </content>
               </Panel>
            </content>
         </Page>
      </pages>
   </App>

Page与Panel的界面如下

Shell Control

使用Shell Control作为应用的root容器，Shell在界面上引用了letterbox，可以使得应用能更好视频屏幕视觉。
在index文件中将原来新建ComponentContainer的代码改成如下，放到Shell中， Shell control可以作为应用的根元素

            new sap.m.Shell({
               app : new sap.ui.core.ComponentContainer({
                  name : "sap.ui.demo.wt",
                  height : "100%"
               })
            }).placeAt("content");

Shell Control如下，全屏后，APP内容放在中间部分

Margins and Paddings

将Panel设置class="sapUiResponsiveMargin" width="auto"，可以看到内容与边框之间有一定的边缘Margin，并且是响应式的，随着屏幕大小的改变，Margin的大小也自动在变。在Button及Text元素中，可以设置class="sapUiSmallMarginEnd"或者class="sapUiSmallMargin来设置元素间的边缘Margin。

Custom CSS

定义css文件/css/style.css，其中1rem为16px。

.myAppDemoWT .myCustomButton.sapMBtn {
  margin-right: 1rem
}
.myAppDemoWT .myCustomText {
  font-weight: bold;
}

在manifest.json中引入css文件资源
在view中，app标签上<App class="myAppDemoWT">Button标签class="myCustomButton"这样可以定位到自定义的样式，在Text标签上class ="sapUiSmallMargin sapThemeHighlight-asColor myCustomText"加入自定义myCustomText样式

Nested Views

新建xml view，将原来app view的Panel中的内容移到新的HelloPanel View，并新建与之对应的controller。原来的App view中，content标签中通过<mvc:XMLView viewName="sap.ui.demo.wt.view.HelloPanel"/>引用Nested View。
由于Nested View，原来上面的custom css文件中css选择器选择不到相应的类，需要修改

Dialogs and Fragments

Fragments是轻量级的UI部件，没有独立的controller，可以在多个view中共用。定义一个button，在上面定义press="onOpenDialog"事件，在controller中定义onOpenDialog事件的实现，通过sap.ui.xmlfragment创建fragment，其中id为HelloPanel view的ID，将dialog添加为view的adependent，生命周期将于view一样。

      onOpenDialog : function () {
         var oView = this.getView();
         var oDialog = oView.byId("helloDialog");
         // create dialog lazily
         if (!oDialog) {
            // create dialog via fragment factory
            oDialog = sap.ui.xmlfragment(oView.getId(), "sap.ui.demo.wt.view.HelloDialog");
            oView.addDependent(oDialog);
         }
        oDialog.open();
      }

新建HelloDialog.fragment.xml

<core:FragmentDefinition
   xmlns="sap.m"
   xmlns:core="sap.ui.core" >
   <Dialog
      id="helloDialog"
      title="Hello {/recipient/name}">
   </Dialog>
</core:FragmentDefinition>

Fragment Callbacks

Fragments没有独立controller来处理事件，sap.ui.xmlfragment的第三个参数传入处理事件的controller，
可以直接oDialog = sap.ui.xmlfragment(oView.getId(), "sap.ui.demo.wt.view.HelloDialog", this)this为当前HelloPanel Controller。定义onCloseDialog事件的实现this.getView().byId("helloDialog").close();

Icons

图标通过sap-icon://<iconname>.来访问。在button上可以icon="sap-icon://world"，在dialog fragment中，在content标签内可以添加Icon Control

<core:Icon
  src="sap-icon://hello-world"
  size="8rem"
  class="sapUiMediumMargin"/>

Reuse Dialogs

前面我们将Dialog Fragment的交互代码写在HelloPanel Controller中，我们要复用这个Dialog Fragment时，需要将代码写在Component.js这个公共模块下。首先定义模块HelloDialog.js，继承SAPUI5 Base Object，构造方法传入view，open事件中，由于没有controller传入，我们定义local的oFragmentController对象，里面包含了onCloseDialog事件，新建oDialog时，将oFragmentController对象作为第三个参数传入，

sap.ui.define([
    "sap/ui/base/Object"
], function (UI5Object) {
    "use strict";
    return UI5Object.extend("sap.ui.demo.wt.controller.HelloDialog", {
        constructor : function (oView) {
            this._oView = oView;    
        },
        open : function () {
            var oView = this._oView;
            var oDialog = oView.byId("helloDialog");
            if (!oDialog) {
                var oFragmentController = {
                    onCloseDialog : function () {
                        oDialog.close();
                    }
                };
                // create dialog via fragment factory
                oDialog = sap.ui.xmlfragment(oView.getId(), "sap.ui.demo.wt.view.HelloDialog", oFragmentController);
                // connect dialog to the root view of this component (models, lifecycle)
                oView.addDependent(oDialog);
            }
            oDialog.open();
        }
    });
});

fragment的生命周期随着view的销毁而销毁，我们要将复用的fragment绑定到rootView
在Component.js中，添加HelloDialog依赖，this.getAggregation("rootControl")获取manifest.json中定义的rootView，将其作为HelloDialog模块的参数传入，this._helloDialog = new HelloDialog(this.getAggregation("rootControl"));添加openHelloDialog事件的实现this._helloDialog.open();调用helloDialog模块的open事件。
修改onOpenDialog的实现方法this.getOwnerComponent().openHelloDialog();，getOwnerComponent获取当前view的component，即component.js，然后出发open事件。