使用控件构建 UI 结构

学习目标

• 使用 Shell、App、Page、Panel 和 SimpleForm 控件创建 UI

简单表单

在实现表单之前，我们先试着理解表单的结构。

观看视频，了解表单的结构。

视频：本节含 SAP 官方视频（视频 ID 1_pxg7xhix），需在 learning.sap.com 在线观看。

实现简单表单

既然您已经理解了表单的整体结构，我们将看看如何使用 SimpleForm 控件实现表单。

使用 SimpleForm 控件需要使用 sap.ui.layout.form 和 sap.ui.core 这两个库。因此，在 XML 视图中必须将这些库的名称映射到 XML 命名空间。在图中示例 Using the SimpleForm Control 中，分别使用前缀 f 和 core 进行映射。

<f:SimpleForm> 标签的 layout 属性指定用于呈现表单内容的表单布局。可用的布局有若干种。建议使用 ColumnLayout，因为它的响应式特性能够以最佳方式利用可用空间。

如果使用可编辑控件作为内容，则必须将 <f:SimpleForm> 标签的 editable 属性设置为 true，否则设置为 false。如果 editable 属性设置不当，将会出现视觉问题，例如标签对齐错误或控件之间的间距错误。

表单的内容通过 content 聚合指定。其结构方式如下：

• 添加一个 sap.ui.core.Title 元素（或 Toolbar 控件）以开始一个新组（ FormContainer ）。

• 添加一个 Label 控件以开始一个新行（ FormElement ）。

• 根据需要添加输入字段、文本字段等控件。它们将被分配到以最后一个标签开始的那一行（ FormElement ）。

添加工具栏

我们来看看如何向表单添加工具栏。

toolbar 聚合可用于向 SimpleForm 控件可选地添加一个工具栏。在图中示例 Adding a Toolbar 中，一个 sap.m.Toolbar 控件被添加到此聚合中。要在工具栏中显示的控件放置在其 content 聚合中。

所使用的 ToolbarSpacer 会在 sap.m.Toolbar 的各元素之间添加水平间距。这将使按钮显示在该行的末尾。

除了文本 Create Customer 之外，按钮上还会显示一个图标。前缀 sap-icon:// 表示该图标来自 SAPUI5 附带的图标字体。它包含 500 多个图标。

注意

您可以使用 Demo Kit 中的 Icon Explorer 工具查找其他图标。

有关 SimpleForm 控件的更多详细信息，请参见文档。

面板

添加面板

sap.m.Panel 控件提供了一个用于分组和显示信息的容器。

它由标题栏、可选的标题工具栏、可选的信息工具栏以及内容区域组成，其中标题栏可用于显示标题文本。

expandable 属性（默认值：false）可用于指定面板的内容和信息工具栏（如果存在）是否可以折叠和展开。

expanded 属性（默认值：false）指定面板最初是否展开。

headerToolbar 聚合允许使用自定义工具栏作为面板的标题。标题工具栏在展开和折叠状态下都可见。它可用于在标题中添加额外的控件以供用户交互。

infoToolbar 聚合允许使用自定义工具栏作为面板的信息栏。信息工具栏放置在标题下方，仅在展开状态下可见。它可用于向用户显示额外信息。

content 聚合决定面板的内容。它可以包含任意数量的任意类型的控件。

有关面板的更多信息，请参见文档。

页面

添加页面

sap.m.Page 控件是一个容器控件，它承载应用程序的一整个屏幕。它通常用作视图的根控件（参见下图）。

页面有三个不同的区域：标题、内容区域和页脚。

页面最上方的区域由标题占据。页面的 title 属性可用于设置将显示在标题栏中的标题。

如果将 showNavButton 属性设置为 true，则会在标题栏左侧显示一个导航按钮。按下导航按钮时，会触发 navButtonPress 事件。在图中示例中，事件处理器 onNavPress 被附加到该事件，以便能够对按钮单击作出反应。

content 聚合决定页面的内容。它占据页面的主要部分，可以包含任意数量的任意类型的控件。

页脚是可选的，占据页面的底部部分。

有关页面控件的更多信息，请参见文档。

App 与 Shell

应用程序通常由多个页面组成，用户可以在其中转到详细信息页面并再次返回。SAPUI5 通过提供控件 sap.m.App 来支持此模式。App 控件从 sap.m.NavContainer 控件继承导航能力。

在开发 SAPUI5 应用程序时，App 控件通常用作根元素。它向 HTML 页面添加某些必要的头部标签，以便正确显示，并提供在页面之间以动画方式导航的功能。sap.m.App 在其间导航的内容实体可以是 sap.m.Page 类型、sap.ui.core.mvc.View 类型，或任何具有全屏/页面语义的其他控件。要显示相应的页面，需将它们添加到 App 控件的 pages 聚合中。

SAPUI5 为开发人员提供了很大的自由度，以便基于 App 控件定义应用程序的设计。一种典型的设计是为每个要显示的页面使用一个视图。图 Typical Approach 展示了这样一种应用设计，练习场景中也使用了这种设计。

在这种方法中，会创建一个所谓的 App 视图（*App.view.xml*），其中包含一个空的 <App> 标签。此 App 视图在应用程序描述符 *manifest.json* 中指定为要打开的组件的根视图。

要显示的页面实现为 XML 视图，每个 XML 视图使用 sap.m.Page 控件作为其根元素。然后使用路由器将这些 XML 视图添加到 App 控件的 pages 聚合中。这将在课程后面讨论。

在 App 视图中，将 <App> 标签放在 sap.m.Shell 容器内。

使用 Shell 容器是为了控制应用程序在桌面上的宽度。在大型显示器上，应用程序的全宽呈现可能过宽。将 App 控件放在 Shell 容器内可以获得合适的左右垂直边距。

Shell 控件提供了更多自定义应用程序的选项，例如设置自定义背景图像或颜色，以及设置自定义徽标。有关更多详细信息，请查看 Demo Kit 中的 API Reference 和 Samples。

图 The App View 展示了上文讨论的 App 视图在 *App.view.xml* 文件中的实现。

在 <mvc:View> 标签中，添加了属性 displayBlock="true"。这可防止在设置为 100% 高度的视图中出现垂直滚动条。

与上面的描述相反，<App> 标签并不是空的。而是通过 <mvc:XMLView> 标签将一个名为 sap.training.exc.view.Overview 的 XML 视图静态嵌入到 pages 聚合中。这只是一个初步实现。在 Routing and Navigation 单元中，将说明如何通过路由器动态嵌入视图。届时还可以实现视图之间的导航，即在 pages 聚合中动态交换视图。

添加带表单的 UI

业务场景

在本练习中，您将向应用程序添加一个用于创建新航班客户的表单。您将用于此目的的 SimpleForm UI 元素嵌入到一个 Panel UI 元素中，而该 Panel 又要包含在一个 Page UI 元素中。

SimpleForm、Panel 和 Page UI 元素的嵌套在一个单独的 XML 视图中实现。您从现有的 App 视图引用此视图。在那里，新视图要嵌入到 App UI 元素的 pages 聚合中，而 App UI 元素又要包含在一个 Shell 中。

图 UI with Form 展示了 UI 的嵌套结构。

Template:	Git 仓库：https://github.com/SAP-samples/sapui5-development-learning-journey.git，分支：sol/7_declarative_API_for_components
Model solution:	Git 仓库：https://github.com/SAP-samples/sapui5-development-learning-journey.git，分支：sol/8_SimpleForm

任务 1：实现带表单的视图

步骤

1. 在编辑器中打开 *webapp/view* 文件夹中的 *Overview.view.xml* 文件。

注意

为简单起见，将要在其中实现表单的 XML 视图文件已包含在项目中。相应的视图控制器文件 Overview.controller.js 也已存在于 webapp/controller 文件夹中。

2. 向 <mvc:View> 标签添加以下属性，以声明视图实现所需的 XML 命名空间：

xmlns:f="sap.ui.layout.form"
xmlns:core="sap.ui.core"

结果

Overview 视图现在应如下所示： 3. 将以下代码插入 <mvc:View> 标签，以在视图上定义一个 sap.m.Page，其中包含一个 sap.m.Panel，而后者又包含所需的 sap.ui.layout.form.SimpleForm。

注意

表单工具栏中 Create Customer 按钮的功能将在后续练习中通过事件处理器实现。

<Page title="Flight Customers">
<content>
<Panel headerText="New Customer" expandable="true" expanded="true">
<content>
<f:SimpleForm layout="ColumnLayout" editable="true">
<f:toolbar>
<Toolbar>
<content>
<ToolbarSpacer/>
<Button icon="sap-icon://create" text="Create Customer"/>
</content>
</Toolbar>
</f:toolbar>
<f:content>
<core:Title text="General Data"/>
<Label text="Form"/>
<Input value=""/>
<Label text="Customer Name"/>
<Input value=""/>
<Label text="Discount"/>
<Input value=""/>
<core:Title text="Address Data"/>
<Label text="Street"/>
<Input value=""/>
<Label text="Post Code"/>
<Input value=""/>
<Label text="City"/>
<Input value=""/>
<Label text="Country"/>
<Input value=""/>
<core:Title text="Contact Data"/>
<Label text="Email"/>
<Input value=""/>
<Label text="Telephone"/>
<Input value=""/>
</f:content>
</f:SimpleForm>
</content>
</Panel>
</content>
</Page>

结果

Overview 视图现在应如下所示：

任务 2：从 App 视图引用表单视图

步骤

1. 在编辑器中打开 *webapp/view* 文件夹中的 *App.view.xml* 文件。

2. 向 <mvc:View> 标签添加以下属性，以使视图的全屏高度正常工作：

displayBlock="true"

结果

App 视图现在应如下所示： 3. 从 App 视图中删除 Say Hello 按钮。

1. 删除以下行：

<Button text="Say Hello" press=".onSayHello"/>

4. 将以下代码插入<mvc:View> 标签，以将 Overview 视图嵌入到 sap.m.App UI 元素的 pages 聚合中，而该元素又要包装在 sap.m.Shell 中：

<Shell>
<App>
<pages>
<mvc:XMLView viewName="sap.training.exc.view.Overview"/>
</pages>
</App>
</Shell>

结果

App 视图现在应如下所示：

任务 3：调整 App 视图控制器

步骤

1. 在编辑器中打开 *webapp/controller* 文件夹中的 *App.controller.js* 文件。

注意

由于上一步中删除了 App 视图上的 Say Hello 按钮，因此现在已从视图控制器中删除所有与按钮相关的代码。

2. 从视图控制器中删除 onSayHello 事件处理器方法。

3. 删除以下行：

onSayHello: function () {
MessageBox.information("Hello World");
}

3. 从依赖数组中移除模块 sap/m/MesssageBox，并从视图控制器的工厂函数中移除相应的接口参数 MessageBox。

结果

视图控制器现在应如下所示： 4. 从 SAP Business Application Studio 启动应用程序对其进行测试运行。

1. 右键单击 sapui5-development-learning-journey 项目中的任意子文件夹，并在出现的上下文菜单中选择 Preview Application。

2. 在出现的对话框中选择名为 start-noflp 的 npm 脚本。

3. 在打开的应用程序中，检查带表单的组件是否按预期显示。