第36步:设备适应_sapuivisibleonlyondesktop-CSDN博客

预览

在这里插入图片描述

在手机设备上，面板被折叠以节省屏幕空间，一个按钮被隐藏。

代码

您可以在演练-步骤36查看和下载所有文件。

webapp/view/HelloPanel.view.xml
在这里插入图片描述

<mvc:View
	controllerName="sap.ui.demo.walkthrough.controller.HelloPanel"
	xmlns="sap.m"
	xmlns:mvc="sap.ui.core.mvc">
	<Panel
		headerText="{i18n>helloPanelTitle}"
		class="sapUiResponsiveMargin"
		width="auto"
		expandable="{device>/system/phone}"
		expanded="{= !${device>/system/phone} }">
		<content>
			<Button
				id="helloDialogButton"
				icon="sap-icon://world"
				text="{i18n>openDialogButtonText}"
				press=".onOpenDialog"
				class="sapUiSmallMarginEnd sapUiVisibleOnlyOnDesktop"/>
			<Button
				text="{i18n>showHelloButtonText}"
				press=".onShowHello"
				class="myCustomButton"/>
			<Input
				value="{/recipient/name}"
				valueLiveUpdate="true"
				width="60%"/>
			<FormattedText
				htmlText="Hello {/recipient/name}"
				class="sapUiSmallMargin sapThemeHighlight-asColor myCustomText"/>
		</content>
	</Panel>
</mvc:View>

我们在HelloPanel中添加了两个新的expandable属性和expanded属性。用户现在可以关闭和打开面板，在小屏幕的设备上为下面的表格有更多的空间。expandable属性绑定到名为device的模型和路径/system/phone。所以面板只能在手机设备上扩展。设备模型由SAPUI5的sap.ui.Device API填充。展开属性控制面板的状态，我们使用表达式绑定语法在电话设备上关闭它，并在所有其他设备上展开面板。SAPUI5的device API提供了更多的功能来检测各种特定于设备的设置，请查看文档了解更多细节。

注意
sap.ui.Device API基于用户代理和设备的许多其他属性检测设备类型(Phone、Tablet、Desktop)。因此，简单地减小屏幕尺寸不会改变设备类型。要测试这个特性，您必须在浏览器中启用设备模拟，或者在真实设备上打开它。

当我们设置一个CSS类如sapUiVisibleOnlyOnDesktop或sapUiHideOnDesktop时，我们也可以通过设备类型隐藏单个控件。我们只显示在桌面设备上打开对话框的按钮，并为其他设备隐藏它。有关更多选项，请参阅下面链接的文档。

webapp/Component.js
在这里插入图片描述

sap.ui.define([
	"sap/ui/core/UIComponent",
	"sap/ui/model/json/JSONModel",
	"./controller/HelloDialog",
	"sap/ui/Device"
], function (UIComponent, JSONModel, HelloDialog, Device) {
	"use strict";
	return UIComponent.extend("sap.ui.demo.walkthrough.Component", {
		metadata: {
			manifest: "json"
		},
		init: function () {
			// call the init function of the parent
			UIComponent.prototype.init.apply(this, arguments);

			// set data model
			var oData = {
				recipient: {
					name: "World"
				}
			};
			var oModel = new JSONModel(oData);
			this.setModel(oModel);
			// disable batch grouping for v2 API of the northwind service
			this.getModel("invoice").setUseBatch(false);

			// set device model
			var oDeviceModel = new JSONModel(Device);
			oDeviceModel.setDefaultBindingMode("OneWay");
			this.setModel(oDeviceModel, "device");

			// set dialog
			this._helloDialog = new HelloDialog(this.getRootControl());
			// create the views based on the url/hash
			this.getRouter().initialize();
		},

		exit : function () {
			this._helloDialog.destroy();
			delete this._helloDialog;
		},

		openHelloDialog : function () {
			this._helloDialog.open();
		}

	});
});

在app组件中，我们向sap.ui.Device添加一个依赖项，并在init方法中初始化设备模型。我们可以简单地将加载的依赖项Device传递给JSONModel的构造函数。这将使SAPUI5 device API的大多数属性可用JSON模型。然后在组件上将模型设置为命名模型，这样我们就可以在数据绑定中引用它，就像我们在上面的视图中看到的那样。

注意
我们必须将绑定模式设置为OneWay，因为设备模型是只读的，而且我们希望避免在将控件的属性绑定到它时意外更改模型。默认情况下，SAPUI5中的模型是双向的(TwoWay)。当属性更改时，绑定的模型值也会更新。

webapp/view/Detail.view.xml

提示
你可以使用浏览器的开发者工具测试应用程序的设备特定功能。例如，在谷歌Chrome中，你可以轻松模拟平板电脑或手机，并看到效果。SAPUI5的一些响应选项仅在加载应用程序时进行初始设置，因此您可能必须重新加载页面才能看到结果。

在这里插入图片描述

<mvc:View
	controllerName="sap.ui.demo.walkthrough.controller.Detail"
	xmlns="sap.m"
	xmlns:mvc="sap.ui.core.mvc"
	xmlns:wt="sap.ui.demo.walkthrough.control">
	<Page
		title="{i18n>detailPageTitle}"
		showNavButton="true"
		navButtonPress=".onNavBack">
		<ObjectHeader
			responsive="true"
			fullScreenOptimized="true"
			number="{
				parts: [{path: 'invoice>ExtendedPrice'}, {path: 'view>/currency'}],
				type: 'sap.ui.model.type.Currency',
				formatOptions: {
					showMeasure: false
				}
			}"
			numberUnit="{view>/currency}"
			intro="{invoice>ShipperName}"
			title="{invoice>ProductName}">
			<attributes>
				<ObjectAttribute title="{i18n>quantityTitle}" text="{invoice>Quantity}"></ObjectAttribute>
				<ObjectAttribute title="{i18n>dateTitle}" text="{
					path: 'invoice>ShippedDate',
					type: 'sap.ui.model.type.Date',
					formatOptions: {
					  style: 'long',
					  source: {
						pattern: 'yyyy-MM-ddTHH:mm:ss'
					  }
					}
				  }"/>
			</attributes>
		</ObjectHeader>
		<wt:ProductRating id="rating" class="sapUiSmallMarginBeginEnd" change=".onRatingChange"/>
	</Page>
</mvc:View>

一些控件已经具有可配置的内置响应特性。通过将responsive属性设置为true并将fullScreenOptimized设置为true，可以将ObjectHeader控件置于更灵活的模式中。这将显示我们现在添加到视图中的数据，根据设备大小在屏幕上的不同位置。

我们还将前面步骤列表中的number和numberUnit字段添加到ObjectHeader中，并使用与前面步骤中货币类型相同的格式化程序。然后定义两个属性:发票数量和发货日期，发货日期是数据模型的一部分。到目前为止，我们还没有从发票JSON文件中使用这个shippedDate字段，它包含一个典型字符串格式的日期。

现在我们使用Date类型，并在格式选项的源部分提供日期格式的模式。它将显示更易于阅读的格式化日期文本，也适合小屏幕设备。

webapp/controller/Detail.controller.js
在这里插入图片描述

sap.ui.define([
	"sap/ui/core/mvc/Controller",
	"sap/ui/core/routing/History",
	"sap/m/MessageToast",
	"sap/ui/model/json/JSONModel"

], function (Controller, History, MessageToast, JSONModel) {
	"use strict";
	return Controller.extend("sap.ui.demo.walkthrough.controller.Detail", {
		onInit : function () {
			var oViewModel = new JSONModel({
				currency: "EUR"
			});
			this.getView().setModel(oViewModel, "view");

			var oRouter = this.getOwnerComponent().getRouter();
			oRouter.getRoute("detail").attachPatternMatched(this._onObjectMatched, this);
		},
		_onObjectMatched : …
});

在Detail控制器中，我们只需添加带有货币定义的视图模型，以正确显示数字。它与InvoiceList控制器文件中的代码相同。

webapp/i18n/i18n.properties
在这里插入图片描述

# Detail Page
detailPageTitle=Walkthrough - Details
ratingConfirmation=You have rated this product with {0} stars
dateTitle=Order date
quantityTitle=Quantity