第11步:页面和面板

预览

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

代码

你可以在演练-第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

我们为起始页标题和面板标题向文本包中添加新的键/值对。

章节

1. 第1步:你好世界
2. 第2步:引导
3. 第3步:控件
4. 第4步:XML视图
5. 第5步:控制器
6. 第6步:模块
7. 第7步:JSON模型
8. 第8步:可翻译的文本
9. 第9步:组件配置
10. 第10步:应用程序描述符
11. 第11步:页面和面板
12. 第12步:Shell控件作为容器
13. 第13步:外边距和内边距
14. 第14步:自定义CSS和主题颜色
15. 第15步:嵌套视图
16. 第16步:对话框和片段
17. 第17步:片段回调
18. 第18步:图标
19. 第19步:重用对话框
20. 第20步:聚合绑定
21. 第21步:数据类型
22. 第22步:表达式绑定
23. 第23步:自定义格式器
24. 第24步:过滤
25. 第25步:排序和分组
26. 第26步:远程OData服务
27. 第27步:模拟服务器配置
28. 第28步:使用QUnit进行单元测试
29. 第29步:与OPA的集成测试
30. 第30步:调试工具
31. 第31步:路由和导航
32. 第32步:路由与参数
33. 第33步:路由回溯和历史
34. 第34步:自定义控件
35. 第35步:响应性
36. 第36步:设备适应
37. 第37步:内容密度
38. 第38步:可访问性