Одним из главных преимуществ библиотеки Webix является то, что приложения, созданные на ее основе, одинаково хорошо работают как на десктопных, так и на мобильных устройствах. Пользовательский веб-интерфейс, созданный с помощью Webix, показывает хорошие результаты на обеих платформах. Тем не менее, мы хотели бы дать вам несколько рекомендаций, которые помогут вам в создании максимально удобного в использовании мобильного веб-приложения.
В данной статье описываются самые значимые составляющие процесса разработки мобильных приложений. Чтобы рассмотреть их детально, создадим простое приложение “Список контактов”. Это стандартное приложение, которое позволяет пользователям создавать список контактов, находить нужные контакты и просматривать дополнительную информацию о них.
Загрузить полный исходный код готового приложения вы можете из репозитория на github. Смотрите также онлайн демо.
Создание страницы
Как и в случае разработки десктопного веб-приложения, мы начнем с создания HTML-страницы. Она должна включать в себя HTML5 объявление doctype, все необходимые js и css файлы, а также команду webix.ui.
<script type="text/javascript" charset="utf-8">
webix.ui.fullScreen();
webix.ui({
template:"App will be here"
});
</script>
У Webix есть отличная функция “полноэкранного” режима, которая позволяет приложению растянуться на весь экран. Когда данный режим активирован, библиотека пытается спрятать тулбары браузера и, таким образом, приложение занимает весь экран мобильного устройства. Для того, чтобы активировать “полноэкранный” режим, необходимо добавить команду webix.ui.fullScreen(); перед инициализацией интерфейса.
Изменение размеров UI
Мобильные устройства отличаются многообразием размеров и параметров разрешения экрана, что необходимо принимать во внимание при разработке мобильных приложений. Существует большое количество моделей с различными спецификациями, и с каждым годом их становится все больше. Поэтому мы советуем вам избегать использования фиксированных размеров в мобильных приложениях. Фиксированные размеры лучше применять только тогда, когда без них нельзя обойтись. Виджеты Webix изначально создавались с учетом этого подхода. Они могут распознавать и применять неустановленные размеры автоматически. Для примера давайте рассмотрим следующую конфигурацию:
rows:{
{ view:"toolbar", height:50 },
{ cols:[
{ view:"list", gravity:2 },
{ view:"template" }
]}
}
})
Результат работы описанного выше кода будет выглядеть так:
Здесь используется только один фиксированный размер — высота тулбара. Высота списка и высота темплейта будут рассчитываться автоматически, так же, как и ширина всех компонентов. Таким образом, размеры элементов нашего приложения могут изменяться под размеры любого экрана. Кроме того, благодаря свойству gravity, темплейт всегда будет в два раза шире списка на устройстве с экраном любого размера.
Структура UI
В большинстве случаев, создание десктопного веб-приложения начинается с лайаута. Затем, в нем размещаются более мелкие компоненты. Данный подход также применим и для мобильных приложений. Однако, учитывая небольшие размеры мобильных устройств, для создания мобильного интерфейса удобнее будет использовать виджет multiview. Данный элемент делает видимой только активную страницу, позволяя переключаться между другими страницами.
Например, в случае десктопного приложения, мы могли бы использовать следующую конфигурацию:
rows:{
toolbar
{ cols:[ list, preview ] }
}
});
Для мобильного устройства используется другая схема:
rows:{
toolbar
{ cells:[ list, preview ] }
}
});
Десктопное приложение будет выглядеть как список с дополнительными деталями справа. Что касается мобильного устройства, на экране будет отображаться либо список контактов, либо страница с информацией о контактах. Пользователи смогут переключаться между двумя этими представлениями.
Динамическое переключение страниц
Поскольку наше приложение показывает либо список контактов, либо темплейт со списком деталей контактов, необходимо добавить логику переключения между двумя этими страницами. Существует 2 подхода к управлению видимой страницей. Первый из них заключается в использовании специальных контролов (таких, как сегментированная кнопка, к примеру) для управления видимостью:
rows:[
{ view:"segmented", multiview:true, options:[
{ id:"list", value:"List" },
{ id:"temp", value:"Template" }
]},
{ cells:[
{ view:"list", id:"list" },
{ view:"template", id:"temp" },
]}
]
});
Ключевые моменты данного решения следующие:
- id представления совпадает с id опции сегментированной кнопки;
- свойство multiview сегментированной кнопки имеет значение true.
Второй подход основан на обработке событий и прямых вызовах view.show API.
rows:[
{ view:"button", value:"Back", click:"$$('list').show()" },
{ cells:[
{ view:"list", id:"list", on:{
onItemClick:function(){ $$('temp').show(); }
}},
{ view:"template", id:"temp" },
]}
]
});
Оба подхода могут быть использованы в разработке как десктопных, так и мобильных приложений. Первый подход требует меньше кода, однако число элементов, для которых он может использоваться, ограничено. Второй подход позволяет использовать любой контрол или действие для изменения активной страницы, однако кода здесь понадобиться больше.
Динамический тулбар
В одном из примеров кода, приведенных выше, есть кнопка ”Назад”. Это типичный сценарий для мобильного приложения, но отображать эту кнопку нужно только когда мы находимся на определенной странице. Конечно, мы можем поместить тулбар внутрь компонента multiview, таким образом у каждой страницы будет свой собственный тулбар. Но существует более удачное решение. Мы можем задать один тулбар и просто отметить, какие кнопки должны отображаться, когда та или иная страница становится видимой.
view:"toolbar",
height:50, visibleBatch:"list", id:"toolbar",
elements:[
{ view:"button", value:"Back", batch:"details" },
{ view:"search", value:"", batch:"list" }
]
};
Как видите, у всех кнопок теперь есть атрибут “batch”, а у самого тулбара есть атрибут “visibleBatch”. В основном, все кнопки тулбара разделяются на группы в зависимости от значения параметра “batch”, а параметр “visibleBatch” определяет какие кнопки должны быть видимы. Для того, чтобы изменить настройки видимости, вы можете вызвать метод “showBatch()”:
Данный метод покажет все кнопки, у которых параметр “batch” имеет значение “details”, в то время как все остальные кноки будут скрыты. Такая техника позволяет показывать различные кнопки на одном и том же тулбаре при переключении между разными представлениями (параметр “batch” работает во всех лайаутных компонентах, поэтому использование данной техники возможно не только в тулбаре).
Поддержка кнопки “Назад”
В современных мобильных телефонах почти нет физических кнопок. Однако, в большинстве из них все еще есть как минимум кнопка “Назад”. Поэтому, было бы здорово, чтобы в нашем приложении осуществлялась поддержка данной кнопки. Сделать это совершенно просто:
rows:{
toolbar
{ cells:[ list, preview ], id:"multiview"}
}
});
webix.history.track("multiview", "list");
Мы используем метод webix.history.track(), чтобы хранить историю переключения между представлениями. Метод принимает в качестве параметров идентификаторы представлений.
В коде выше первый идентификатор — это multiview id. Второй же — id того представления, которое отображается на экране первоначально. Теперь каждый раз, когда видимое представление сменяется другим, оно сохраняется в истории и при нажатии кнопки “Назад” будет показано снова.
Применение стилей
Для мобильных приложений лучше увеличить размер шрифта. Мы можем сделать это с помощью блока “style”:
Заключение
Вы можете посмотреть онлайн-приложение, в котором были использованы все описанные техники, а также взглянуть на демо на гитхабе.
Как видите,Webix не только предоставляет нужные инструменты для создания десктопных веб-приложений, но и позволяет вам использовать компоненты пользовательского интерфейса для создания простых и удобных мобильных приложений, совместимых с любыми современными мобильными устройствами.
