SAPUI5基础知识13 - 页面和面板（Page & Panel）

十年铸器

于 2024-07-15 19:30:00 发布

阅读量379

点赞数 6

分类专栏： SAPUI5 文章标签： SAP Fiori SAPUI5

本文链接：https://blog.csdn.net/nkGavinGuo/article/details/140437306

版权

SAPUI5 专栏收录该内容

40 篇文章 14 订阅

订阅专栏

1. 背景

在前面的博客中，我们主要专注于SAPUI5程序的结构设计，在本篇博客中，让我们改善一下SAPUI5程序的外观。我们将使用sap.m库中的sap.m.Page控件和sap.m.Panel控件来让应用程序的屏幕元素更好地展示。

2. 控件学习

2.1 sap.m.App (应用程序的根控件)

sap.m.App是UI5移动应用的根元素，它常常作为是根容器，用来管理和导航不同的页面（sap.m.Page 或 sap.m.NavContainer）

可以通过homeIcon属性，配置应用程序的主页图标
可以使用backgroundColor和backgroundImage属性设置背景颜色和背景图像

在新开发的SAPUI5应用中，推荐使用sap.m.App实现分屏效果（screen split）, 这个可以添加sap.f.FlexibleColumnLayout实现（之前，是通过sap.m.SplitApp实现）。

2.1 sap.m.Page （页面控件）

sap.m.Page是一个容器控件，用来承载应用程序的整个屏幕。页面有三个明显的区域可以容纳内容 - 页眉(headerContent) 、内容区域(content)和页脚(footer)。

页眉区域: 页面最上面的区域被header占据。标准header包括一个导航按钮和一个标题。或者，也可以通过customHeader创建自定义的header。
内容区域: 内容占据了页面的主要部分。默认情况下，只有内容区域是可滚动的。可以通过将enablesrolling设置为false来防止这种情况。
页脚区域：页脚占据了页面底部的固定部分。页脚也可以浮动在内容的底部之上（通过floatingFooter属性来实现）。

在sap.m.Page控件中，它提供了可以包含其它控件的区域(例如，在content区域添加button控件），这种允许在一个控件（Control）包含其他控件行为，称之为控件的聚合（Control Aggregation）。

2.2 sap.m.Panel（面板控件）

sap.m.Panel面板控件也是一个容器控件，用于分组和显示信息，它可以折叠以节省屏幕空间。

面板由带有标题文本或标题工具栏的标题栏(title bar)，信息工具栏(info toolbar) 和内容区域(content area)组成。使用headerToolbar聚合，可以在标题栏内添加任何工具栏内容（即自定义按钮，间隔符，标题）。

有两种类型的面板：固定和可展开的。可展开的面板可以通过expandable 属性启用。此外，还可以使用expandAnimation属性定义展开动画。

指导方针：不建议嵌套两个或更多面板。不要在同一页上堆叠太多面板。

3. 练习

在之前练习的基础上，让我们使用页面和面板控件来美化我们的界面。

3.1 增强App.view.xml文件

将<Input>和<Button>控件放置于<Panel>面板容器控件的<content>聚合中，并通过headerText属性设定面板的文本；
将面板控件<Panel>放置于<Page>控件的<content>聚合中，并通过title属性设定页面标题；
将<Page>控件放置于<App>控件的<pages>聚合中；
此外，为了使视图的全屏高度正常，为视图添加了displayBlock属性，值为true。

在这里插入图片描述
改动后的App.view.xml文件内容如下：

<mvc:View
    controllerName="zsapui5.test.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>

3.2 增强i18n.properties文件

在文本包文件中，为起始页面标题和面板添加了新的键值对。

在这里插入图片描述
更新后的i18n.properties文件内容如下：

# App Descriptor
appTitle=Hello World
appDescription=A simple app that explains the most important concepts of SAPUI5

# Hello Panel
showHelloButtonText=Say Hello
helloMsg=Hello {0}

homePageTitle=homePageTitle
helloPanelTitle=PanelTitle