第11步:页面和面板

最新推荐文章于 2024-10-17 20:38:05 发布

真的是我太天真

最新推荐文章于 2024-10-17 20:38:05 发布

阅读量227

点赞数

分类专栏： SAPUI5

原文链接：https://sapui5.hana.ondemand.com/sdk#/topic/3b9d9f84930d43df90ad0789d99bd4a3

版权

SAPUI5 专栏收录该内容

40 篇文章

订阅专栏

预览

在这里插入图片描述

现在有一个面板显示了前面步骤中的控件

代码

你可以在演练-第11步查看和下载所有文件。

webapp/view/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的包含控件中。该页面提供了到0…N个被其他控件称为content的聚合。它还在content顶部的标题部分中显示title属性。页面本身被放到另一个名为sap.m.App控件的页面聚合中，该控件为我们做以下重要的事情:

它将一系列属性写入index.html的头部，这些属性是在移动设备上正确显示所必需的。
它提供了使用动画在页面之间导航的功能。我们很快就会用到它。

为了让视图的全屏高度正常工作，我们给视图添加了值为true的displayBlock属性。实际内容包装在Panel控件中，以便对相关内容进行分组。

webapp/i18n/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}
homePageTitle=Walkthrough
helloPanelTitle=Hello World