Урок 6. SapUI5: Device Adaptation (Мобильная адаптация)

Рассмотрим некоторые инструменты для адаптации интерфейса под мобильные устройства.

Responsiveness and Adaptiveness

В четвертом уроке мы реализовали Grid, который разбивает «видимую область» на 12 колонок:

При помощи такого подхода можно управлять позициями разнообразных элементов.
Например, у нас есть форма с множеством полей ввода, кнопок, радио кнопок и пр. Есть задача настроить вид формы для разных размеров экрана, начиная от мобильных экранов, заканчивая широкоформатными мониторами.

У кнопок, лейблов, радио кнопок есть свои Agregation (посмотрите одноименную вкладочку тут https://sapui5.hana.ondemand.com/#/api/sap.ui.core.Element (это класс, от которого наследуются элементы управления)).

Посмотрим на примере кнопки (в качество Agregation у нас layoutdata),

1
2
3
4
5

<button text="Submit" icon="sap-icon://paper-plane" press="onPressSubmit">
	<layoutdata>		<l:griddata indent="L2 M4" span="XL12 L2 M8 S12"></l:griddata>	</layoutdata></button>

Что такое XL12 L2 M8 S12?

Подробно про данные параметры можно прочитать тут https://experience.sap.com/fiori-design-web/form/#!.

А если кратко, то это размеры экрана.

• S — размер экрана до 600 px включительно!
• M — размер экрана от 601 px да 1024 px включительно!
• L — размер экрана от 1025 px до 1440 px включительно!
• XL — размер экрана от 1441 px!

То есть, строка XL12 L2 M8 S12 означает, что

• при размере экрана свыше 1441 px (XL) элемент будет занимать 12 блоков из 12 возможных,
• при размере экрана от 1025 px до 1440 px (L) элемент будет занимать 2 блока из 12 возможных,
• при размере экрана от 601 px да 1024 px (M) элемент будет занимать 8 блоков из 12 возможных,
• при размере экрана до 600 px (S) элемент будет занимать 12 блоков из 12 возможных.

indent=»L2 M4″ — для экрана L делаем отступ 2 блока, для экрана M делаем отступ 4 блока:

Это градация экранов, состоящая из 4-х точек XL L M S. Но ест и другие градации, про которые написано в документации https://sapui5.hana.ondemand.com/#/api/sap.ui.Device.media.RANGESETS.

Так же вы можете переопределить размеры для каждой конкретной точки (Xl L M S) при помощи свойств spanXL (px) spanL spanM spanS, для переопределения отступов — indentXL (px) indentL indentM indentS.
А можно напрямую задать класс, отображать или нет данный контент на данном разрешении экрана: visibleXL (true or false) visibleL visibleM visibleS (аналогично работают visibleOnLarge, visibleOnMedium, visibleOnSmall).
linebreakXL (true or false) linebreakL linebreakM linebreakS — перенос элемента на новую строку для разных размеров экрана.

CSS классы

В SapUI5 есть специальные CSS классы, для управления контентом, в зависимости от размера экрана:

• sapUiHideOnPhone: Элемент с данным классом будет скрыт, если экран менее 600px
• sapUiHideOnTablet: Элемент с данным классом будет скрыт, если размер экрана в интервале 600px — 1024px
• sapUiHideOnDesktop: Элемент с данным классом будет скрыт, если экран более 1024px
• sapUiVisibleOnlyOnPhone: Элемент с данным классом будет отображен, если экран менее 600px
• sapUiVisibleOnlyOnTablet: Элемент с данным классом будет отображен, если размер экрана в интервале 600px — 1024px
• sapUiVisibleOnlyOnDesktop: Элемент с данным классом будет отображен, если экран более 1024px

Отобразим фрагмент только на экранах больших мониторов (class=»sapUiVisibleOnlyOnDesktop»):

1

<core:fragment id="idCbrFrag" fragmentName="hello.layout.view.cbr" type="XML" class="sapUiVisibleOnlyOnDesktop"></core:fragment>

Размеры элементов (Cozy & Compact)

SapUI5 придерживается концепции Mobile First. Посмотрите на картинку выше.
Уже «из коробки» в SapUI5, как мы уже убедились, есть много различных инструментов для адаптации дизайна под разные устройства.

В зависимости от устройства, мы можем менять размеры кнопок, полей ввода и прочих элементов для удобства их использования пальцами на сенсорных устройствах. И делается это более чем легко:

Подключаем библиотеку sap/ui/Device при помощи define.
Затем в методе инициализации пишем:
this.getView().addStyleClass(Device.support.touch ? «sapUiSizeCozy» : «sapUiSizeCompact»);
Мы смотрим на поддержку устройством функции touch (сенсорный экран или нет). Если она есть, то подключаем Cozy (sapUiSizeCozy), иначе подключаем стили Compact (sapUiSizeCompact).

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

sap.ui.define([
	"sap/ui/core/mvc/Controller",
	"sap/m/MessageToast",
	"sap/ui/Device",	"hello/layout/model/formatter",
	"hello/layout/model/type/digits"
], function(Controller, MessageToast, Device, formatter, Digits) {	"use strict";
 
	return Controller.extend("hello.layout.controller.Main", {
 
		formatter: formatter,
 
		onInit: function() {
 
			this.getView().addStyleClass(Device.support.touch ? "sapUiSizeCozy" : "sapUiSizeCompact");

А можно сделать это же, но только посложнее, как описано в документации (https://sapui5.hana.ondemand.com/#/topic/d935dbf196d34997bf1ac42ac3e81579.html):

В component.js создадим метод getContentDensityClass:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

...
		init: function () {
...		},
...
		getContentDensityClass : function() {			if (!this._sContentDensityClass) {
				if (!sap.ui.Device.support.touch) {
					this._sContentDensityClass = "sapUiSizeCompact";
				} else {
					this._sContentDensityClass = "sapUiSizeCozy";
				}
			}
			return this._sContentDensityClass;
		}
 
	});
});

В методе инициализации контроллера вызываем только что созданный метод:

1
2
3

 onInit: function () {
	this.getView().addStyleClass(this.getOwnerComponent().getContentDensityClass());		},

В представлениях для диалоговых окон обязательно надо синхронизировать стили:

1
2

// forward compact/cozy style into dialog
jQuery.sap.syncStyleClass(oView.getController().getOwnerComponent().getContentDensityClass(), oView, oDialog);

Начиная с версии SapUI5 1.30 в manifest.json можно устанавливать поддержку смены дизайнов:

1
2
3
4
5
6
7
8
9
10
11
12

...
  "sap.ui5": {
    ...     
    "dependencies": {
      ...
    },
    "contentDensities": {      "compact": true,      "cozy": true    } 
  }

Сравните для тулбара!

Compact:

Cozy:

Или таблицы:
Compact:

Cozy:

Demand popin

demandPopin — свойство колонки, которое позволяет колонке сливаться с другими колонками.

Давайте обратимся к нашему примеру:

1
2
3
4
5
6
7
8
9
10
11

<columns>
	<column>
		<text text="Дата"></text>
	</column>
	<column minScreenWidth="Tablet" demandPopin="true">		<text text="Максимальная"></text>
	</column>
	<column minScreenWidth="Tablet" demandPopin="true">		<text text="Минимальная"></text>
	</column>
</columns>

Нормальное состояние таблицы (размер экрана больше 600px):

Эффект свойства demandPopin=»true» (экран меньше 600px):

Граничный размер, после которого колонки сливаются, задаются свойством minScreenWidth=»Tablet».
В качестве значения можно использовать css сущности: «1024px» или «40em».
Можно использовать уже заранее предопределенные слова: «Phone», «Tablet», «Desktop», «Small», «Medium», «Large».

Device Models

В зависимости от возможностей устройства, на котором работает приложение, функциональность и дизайн приложения могут отличаться.

Допустим, нам необходимо сделать поле недоступным для ввода:
<Input enabled=»false» … />

Хорошо, а если нам надо сделать поле недоступным для ввода только для мобильных устройств?

Решается это просто! Сделаем Device Models!

Подключаем sap/ui/Device в model/models.js и создаем JSON модель:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

sap.ui.define([
	"sap/ui/model/json/JSONModel",
	"sap/ui/Device"], function(JSONModel, Device) {	"use strict";
 
	return {
 
		createDeviceModel: function() {			var oModel = new JSONModel(Device);			oModel.setDefaultBindingMode("OneWay");			return oModel;		} 
	};
});

В component.js инициализируем модель:

1
2
3
4
5
6

init: function() {
	 // call the base component's init function
	 UIComponent.prototype.init.apply(this, arguments);
 
	 // set the device model
	 this.setModel(models.createDeviceModel(), "device");

А дальше в представлении уже задаем свойство для поля ввода:

1

<input id="second" enabled="{= !${device/>/system/phone} }"

{= !${device>/system/phone} — это логическое НЕ выражения {device>/system/phone}.
То есть если вы загружаете страницу с мобильного устройство, то {device>/system/phone} вернет TRUE,а {= !${device>/system/phone} — вернет FALSE:

Для отслеживания устройство с сенсорным экраном можно использовать {device>/support/touch}.

Для более детального изучения структуры Device Models (фильтрация по операционным системам, размерам экрана, положения устройства, браузера и т. п.) читайте https://sapui5.hana.ondemand.com/1.34.7/docs/api/symbols/sap.ui.Device.html и The Device API.