为 FlexibleColumnLayout 控件实现移动端行为

学习目标

  • 为 FlexibleColumnLayout 控件实现移动端行为。

设备适配

设备模型

sap.f.FlexibleColumnLayout 控件自带默认的响应行为，但根据设备的不同，其内部使用的控件在桌面或移动设备上使用时可能表现不同。

通过引入设备模型，你可以将控件属性绑定到设备的能力。SAP Business Application Studio 的 SAPUI5 模板会为你生成用于设置设备模型的代码。

观看此视频以进一步了解设备模型。

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

实现列表视图

要在视图实现中使用设备模型，请将控件的属性绑定到模型的属性。

一个示例列表视图定义，使用 mode 和 type 属性借助设备模型实现响应行为

  • List 的 mode (1) 属性和 ObjectListItem 的 type (2) 属性控制条目的可选择方式。

  • 在手机设备上，选择应通过条目进行（列表模式 "None"，列表项类型 "Active"），否则应通过 List 本身进行（列表模式 "SingleSelectMaster"，列表项类型 "Inactive"）。

selectionChange 事件仅在桌面设备或横屏模式的平板设备上触发。事件处理函数将通过 listItem 事件参数访问所选条目。

在竖屏模式的手机或平板电脑上，将触发所选列表项上的 Press 事件。事件处理函数使用提供给事件处理函数的事件对象上的 getSource 方法来访问所选条目。

必要的分支判断可以借助设备模型和表达式绑定语法来实现。

实现列表视图控制器

如前一单元所述，每个视图都有自己的控制器实现。我们在 *Overview.controller.js* 实现中提供两个事件处理函数，以支持基于应用程序运行设备的两种不同场景。

一个示例列表视图控制器，实现 onPress 和 onSelectionChange 事件

  1. 对于 onPress 事件处理程序，通过访问 source 绑定上下文来获取 Carrid 属性。

  2. 对于 onSelectionChange 事件处理程序，你从 listitem 参数获取绑定上下文。

  3. 在这两种情况下，你随后都会触发到明细视图的导航。为此，你通过基础控制器继承的 getRouter 函数获取对路由器的引用，并调用 navTo 函数。

在手机上管理 FlexibleColumnLayout 行为

为了在手机上使用 FlexibleColumnLayout（一次只能显示一列），你可能需要在中间列上实现关闭功能。

为此，你可以使用以下代码在 Object Page Header 中添加一个按钮：

视图 xml 代码，其中包含带有 OverflowToolbarButton 元素的 navigationActions 聚合。

handleClose 方法应将布局设置回 OneColumn，并导航到 Overview 目标。

此时代码可能如下所示：

handleClose 方法的代码。

为列表-明细应用程序添加移动端行为

业务示例

在本练习中，你将在列表-明细应用程序中实施更改，使其在桌面、平板电脑或手机设备上执行时表现不同。

由于手机上一次只能显示一个视图，你需要对同步代码应用更改，并在明细视图中提供一个关闭按钮以返回列表视图。

注意

SAP Business Technology Platform 及其工具是云服务。由于云软件的特性，步骤流程以及字段和按钮的命名可能与练习解决方案有所不同。

前提条件

你需要已完成上一个练习以实现同步。

注意

否则，你可以从解决方案中导入 2-listdetail stage1.tar 文件。

步骤

  1. 将 Device 模型添加到列表视图控制器。

  2. 打开 *Carrier.controller.js* 文件。

  3. 在控制器定义中添加 sap/ui/Device 引用。你的代码应如下所示：

sap.ui.define([
"student/com/sap/training/advancedsapui5/listdetail/controller/BaseController",
"sap/ui/Device"
],
function (Controller, Device) {
"use strict";

  1. 修改 _showDetail 方法，仅当设备不是手机时，才将 true 作为 _navigateToCarrierDetails 函数的第二个参数传入，

  2. 在 _showDetail 方法开头添加一个新变量 bReplace，其值为 !Device.system.phone。

var bReplace = !Device.system.phone;

  1. 将 _navigateToCarrierDetails 的参数从 true 改为 bReplace。

this._navigateToCarrierDetails(sCarrierId,bReplace);

  1. 为列表视图的 DynamicPage 添加移动端行为。如果在手机设备上，将 mode 属性修改为 'None'，并将列表项 type 属性修改为 'Active'。不要忘记将 press 事件映射到 onSelect 方法。

  2. 打开 *Carrier.view.xml* 文件。

  3. 按如下方式修改 mode 属性：

mode="{= ${device>/system/phone} ? 'None' : 'SingleSelectMaster'}"

  1. 按如下方式修改列表项 type 属性：

type="{= ${device>/system/phone} ? 'Active' : 'Inactive'}"

  1. 在 type 属性之后添加以下内容，以将条目 press 用户操作映射到 onSelect 方法：

press="onSelect"

  1. 确保在打开时列表会显示，方法是阻止第一个元素的显示。使用 List 的 Mode 属性来检查使用的是哪种设备。

  2. 打开 *Carrier.controller.js* 文件。

  3. 按如下方式修改 _onListMatched 函数：

_onListMatched: function() {
this.getListSelector().oWhenListLoadingIsDone.then(
function(mParams) {
if (mParams.list.getMode() === "None") {
return;
}
var sObjectId = mParams.oFirstListItem.getBindingContext().getProperty("Carrid");
this._navigateToCarrierDetails(sObjectId,true);
}.bind(this)
);
}

  1. 为你的明细视图添加一个 Close 按钮以用于手机显示。

  2. 打开 *Flights.view.xml* 文件。

  3. 在 Flight 视图的 ObjectPageDynamicHeaderTitle 聚合中、expandedHeading 聚合之后添加以下代码：

<ux:navigationActions>
<OverflowToolbarButton type="Transparent" icon="sap-icon://decline" press="handleClose"
tooltip="Close middle column" visible="{=${device>/system/phone}}"/>
</ux:navigationActions>

  1. 打开 *Flights.controller.js* 文件。

  2. 使用以下代码将 handleClose 事件添加到 Flights 视图控制器：

handleClose: function () {
var oView = this.getView();
oView.getModel("mainView").setProperty("/layout", "OneColumn");
this.getRouter().navTo("Overview",{}, true);
}

  1. 使用 Chrome Dev Tools 测试你的应用程序，以检查模拟手机显示时的行为。

注意

进入 Dev Tools 后，请确保将 URL 改回概览路由并刷新浏览器（可能需要多次），以应用显示更改。