Mobile SMARTS поддерживает работу со многими ТСД, у которых разные размеры и расширения экрана. Для простоты настройки отображения текстов и кнопок для конкретного мобильного устройства предусмотрен стиль клиентского приложения.
Для мобильных устройств на базе ОС Windows CE интерфейс форматируется согласно инструкции «Стиль клиентского приложения на ТСД».
Создание классов стилей
Для того, чтобы каждый раз не писать одинаковые параметры, у множества элементов необходимо использовать уже адаптированные стили.
У данного подхода несколько плюсов:
- класс стиля находится в одном месте и если необходимо изменить, например, цвет или размер шрифта, сделать это можно сразу везде без вмешательства в код верстки;
- для устройств на разных ОС (Win/ CE/ Android) можно задавать разные параметры для одних и тех же классов. Это может быть полезно когда разница в разрешениях экранов слишком велика;
- упрощение читаемости html кода.
Файлы стилей должны располагаться на сервере в папке «Documents» (приведем возможные имена файлов):
- global.css — общий файл стилей;
- global.android.css — файл стилей для Android-устройств;
- global.win.css — файл стилей для Win-клиента;
- global.cf.css — файл стилей для CE устройств.
Стили из основного файла используются, если не найдены стили из файла для конкретной ОС.
Рассмотрим код класса стиля на следующем примере:
.listHead — наименование класса
{
text-align: left; - указание, что текст будет прижат к левому краю элемента
vertical-align: middle; - вертикально посередине элемента
font-weight: bold; - текст жирный
font-size: 110%; - размер текста 110%
color: #666666; - цвет серый
padding-bottom: 10dp; - снизу элемента отступ внутри элемента 10dp
}
Список свойств достаточно большой, чтобы упомянуть их все в нашей статье, поэтому свойства можно посмотреть на сайте w3schools (поддерживаются не все свойства).
Также рекомендуется ознакомиться с CSS селекторами — это шаблоны, используемые для выбора элементов, которые вы хотите стилизовать (:active|:hover|:disabled используются для кнопок).
Пример использования селекторов для кнопок:
|
<h3 align="center">Нормальное состояние</r> <button direction="Возврат» width="100%» height="10%» class="bttn3">Кнопка</button> <h3 align="center">Состояние Active (нажата)</r> <button direction="Возврат» width="100%» height="10%» class="bttn3">Кнопка</button> <h3 align="center">Состояние Disabled (недоступна)</r> <button direction="Возврат» width="100%» height="10%» enabled="false» class="bttn3">Кнопка</button> |
Использование цветов в стилях приложения
Начиная с версии платформы Mobile SMARTS 3.3 появилась возможность использовать стили приложения.
В классах используется не конкретный цвет, а ссылка на этот цвет. Способ задания выглядит следующим образом:
.some_class{
color: var(--theme-textColorPrimary);
}
Аналогично, можно применять прямо в верстке с помощью style.
Список использующихся стандартных цветов:
| Цвет темы | Использование |
| --theme-colorPrimary | Отображение кнопок по умолчанию (цвет фона кнопки обмена в главном меню и кнопки с заливкой, содержимого текстовой и обведенной кнопок, рамки обведенной кнопки) |
| --theme-colorPrimaryOp24 | Цвет фона кнопки обмена и кнопки с заливкой при нажатии |
| --theme-colorPrimaryOp12 | Цвет фона текстовой и обведенной кнопок при нажатии |
| --theme-colorDivider |
Цвет разделяющей черты между кнопками в действии «Меню» |
| --theme-colorError | Используется в стилях отображения ошибок |
| --theme-colorListItemBackgroundFocused | Цвет фона кнопки в фокусе в действии «Меню» |
| --theme-colorListItemBackgroundPushed | Цвет фона кнопки при нажатии в действии «Меню» |
| --theme-textColorPrimary | Цвет текста по умолчанию |
| --theme-textColorSecondary | Вспомогательный цвет текста, используется в стилях текста описаний и комментариев |
Пользователь не может самостоятельно сменить значения предустановленных цветов.
