sapui5 walkthrough 11-15

11 Step 11: Pages and Panels

修改App.view.xml

<mvc:View
   controllerName="sap.ui.demo.walkthrough.controller.App"
   xmlns="sap.m"
   xmlns:mvc="sap.ui.core.mvc"
  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>
</mvc:View>

这里使用了新的控件sap.m.Page。

Page控件提供一个0到n的聚合，这个聚合是content。

Page也被放在sap.m.App的聚合pages中，并且sap.m.App还提供了两个重要的功能。

1，它将一些属性写入index.html的头部，这些属性对于在移动设备上正确显示是必要的。

2，它提供了使用动画在页面之间导航的功能。

添加了displayBlock属性，为了使视图的全屏高度正常工作。

在Panel中也可以省略content，因为Panel控件将其声明为默认值，但是为了便于阅读，都会显示声明聚合内容。

修改ii18n.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}
homePageTitle=Walkthrough
helloPanelTitle=Hello World

执行

XMLView控件书写的顺序

在XMLView中，有大写字母开头的控件，也有小写字母开头的非控件，比如有<List>，也有<items>。

<mvc:View
    controllerName="sap.m.sample.ObjectListItem.List"
    xmlns:mvc="sap.ui.core.mvc"
    xmlns="sap.m">
    <List
        items="{/ProductCollection}"
        headerText="Products">
        <items>
            <ObjectListItem
                title="{Name}"
                type="Active"
                press="onListItemPress"
                number="{
                    parts:[{path:'Price'},{path:'CurrencyCode'}],
                    type: 'sap.ui.model.type.Currency',
                    formatOptions: {showMeasure: false}
                }"
                numberUnit="{CurrencyCode}">
                <firstStatus>
                    <ObjectStatus
                        text="{Status}"
                        state="{
                            path: 'Status',
                            formatter: 'sap.m.sample.ObjectListItem.Formatter.status'
                        }" />
                </firstStatus>
                <attributes>
                    <ObjectAttribute text="{WeightMeasure} {WeightUnit}" />
                    <ObjectAttribute text="{Width} x {Depth} x {Height} {DimUnit}" />
                </attributes>
            </ObjectListItem>
        </items>
    </List>
</mvc:View>

大写字母开头的都是Control，小写字母开头的都是Aggregations。

Control里面可以放入很多Object，Aggregations就是为了将这些Object集合在一起。

 打开API，就可以看到LIst的Aggregations。在这里可以看到所有的Aggregations都是小写字母开头的，而且可以看到<items>。

 在上面代码的例子中，可以看到<items>中的对象是 ObjectListItem。点击上图的items的type sap.m.ListItemBase。可以看到ListItemBase中有子类ObjectListItem。

所以顺序就以这种方式来书写：

Control　　Aggregations　　Control　　Aggregations...

在上面的例子中<items>不写也不会报错，因为控件将其声明为默认值，但是为了便于阅读，都要加上Control对应的Aggregations。

12 Step 12: Shell Control as Container

修改App.view.xml
<mvc:View
    controllerName="sap.ui.demo.walkthrough.controller.App"
    xmlns="sap.m"
    xmlns:mvc="sap.ui.core.mvc"
    displayBlock="true">
    <Shell>

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

</mvc:View>
这里加入了Shell控件，Shell控件可以根据设备的屏幕大小自动对应用程序进行视觉调整。比如用手机显示应用程序与用电脑显示应用程序。
边上多了蓝色的边框。

13 Step 13: Margins and Paddings

修改App.view.xml 
<mvc:View
    controllerName="sap.ui.demo.walkthrough.controller.App"
    xmlns="sap.m"
    xmlns:mvc="sap.ui.core.mvc"
    displayBlock="true">
    <Shell>
        <App>
            <pages>
                <Page title="{i18n>homePageTitle}">
                    <content>
                        <Panel
                            headerText="{i18n>helloPanelTitle}"
                            class="sapUiResponsiveMargin"
                            width="auto">
                            <content>
                                <Button
                                    text="{i18n>showHelloButtonText}"
                                    press=".onShowHello"
                                    class="sapUiSmallMarginEnd"/>
                                <Input
                                    value="{/recipient/name}"
                                    valueLiveUpdate="true"
                                    width="60%"/>
                                <Text
                                    text="Hello {/recipient/name}"
                                    class="sapUiSmallMargin"/>

                            </content>
                        </Panel>
                    </content>
                </Page>
            </pages>
        </App>
    </Shell>
</mvc:View>
在控件中使用了css样式，可能的话，都要使用sapui5提供的
 

14 Step 14: Custom CSS and Theme Colors

有的时候我们需要自定义样式，这时我们就需要向控件中添加自定义的类，来对控件进行样式设置。

尽量避免这种操作，因为sapui5在升级后有可能会使你的样式不可用，所以如果当使用自定义样式的时候，需要在sapui5每次都升级后，确认你的样式可用。

新建style.css

html[dir="ltr"] .myAppDemoWT .myCustomButton.sapMBtn {
   margin-right: 0.125rem
}

html[dir="rtl"] .myAppDemoWT .myCustomButton.sapMBtn {
   margin-left: 0.125rem
}

.myAppDemoWT .myCustomText {
   display: inline-block;
   font-weight: bold;
}

修改manifest.json，将新建的style.css引入工程

...
  "sap.ui5": {
    ...    
    "models": {
      ...
    },
    "resources": {
      "css": [
        {
          "uri": "css/style.css"
        }
      ]
    }
  }

命名空间sap.ui5的resources，可以加载应用程序的其他资源。通过定义相对于component的uri，来加载资源。

sapui5像使用link tag一样，将它添加到html页面的头部，这样浏览器就可以自动加载。

修改App.view.xml

<mvc:View
    controllerName="sap.ui.demo.walkthrough.controller.App"
    xmlns="sap.m"
    xmlns:mvc="sap.ui.core.mvc"
    displayBlock="true">
    <Shell>
        <App class="myAppDemoWT">
            <pages>
                <Page title="{i18n>homePageTitle}">
                    <content>
                        <Panel
                            headerText="{i18n>helloPanelTitle}"
                            class="sapUiResponsiveMargin"
                            width="auto">
                            <content>
                                <Button
                                    text="{i18n>showHelloButtonText}"
                                    press=".onShowHello"
                                    class="myCustomButton"/>
                                <Input
                                    value="{/recipient/name}"
                                    valueLiveUpdate="true"
                                    width="60%"/>
                                <FormattedText
                                    htmlText="Hello {/recipient/name}"
                                    class="sapUiSmallMargin sapThemeHighlight-asColor myCustomText"/>
                            </content>
                        </Panel>
                    </content>
                </Page>
            </pages>
        </App>
    </Shell>
</mvc:View>

15 Step 15: Nested Views

嵌套View，可以将panel的内容放入view中，嵌套到另外的一个view中。这样便于代码的理解，并且可以重用应用程序的各个部分。

修改App.view.xml

<mvc:View
    controllerName="sap.ui.demo.walkthrough.controller.App"
    xmlns="sap.m"
    xmlns:mvc="sap.ui.core.mvc"
    displayBlock="true">
    <Shell>
        <App class="myAppDemoWT">
            <pages>
                <Page title="{i18n>homePageTitle}">
                    <content>
                        <mvc:XMLView viewName="sap.ui.demo.walkthrough.view.HelloPanel"/>
                    </content>
                </Page>
            </pages>
        </App>
    </Shell>
</mvc:View>

新创建一个单独的HelloPanel view，并且使用了xmlview这个标签对他进行了引用。

新建HelloPanel.view.xml 

<mvc:View
   controllerName="sap.ui.demo.walkthrough.controller.HelloPanel"
   xmlns="sap.m"
   xmlns:mvc="sap.ui.core.mvc">
   <Panel
      headerText="{i18n>helloPanelTitle}"
      class="sapUiResponsiveMargin"
      width="auto" >
      <content>
         <Button
            text="{i18n>showHelloButtonText}"
            press=".onShowHello"
            class="myAppDemoWT myCustomButton"/>
         <Input
            value="{/recipient/name}"
            valueLiveUpdate="true"
            width="60%"/>
         <FormattedText
            htmlText="Hello {/recipient/name}"
            class="sapUiSmallMargin sapThemeHighlight-asColor myCustomText"/>
      </content>
   </Panel>
</mvc:View>

新建HelloPanel.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.HelloPanel", {
      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);
      }
   });
});

修改App.controller.js

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

【推广】 免费学中医，健康全家人
原文地址：https://www.cnblogs.com/suoluo119/p/11496866.html