Петр Вытовтов. Разработка для Sailfish OS на примере мессенджера для социальной сети ВКонтакте

Хотя данный доклад посвящен основам разработки для операционной системы Sailfish, он направлен на тех людей, которые уже имеют базовые знания в программировании и, желательно, знакомы с языками QML и JavaScript.

В прошлый раз мы подробно рассмотрели основных игроков на рынке мобильных операционных систем на базе ядра Linux. Туда вошли Android-based операционные системы, Firefox OS, Tizen, Ubuntu Touch и Sailfish OS. Именно о разработке для последней операционной системы сегодня и пойдет речь.

Мой рассказ будет состоять из трех частей. Сначала мы ознакомимся с архитектурой этой операционной системы. Потом кратко рассмотрим среду разработки Qt Creator и предоставляемое SDK. И, наконец, разберем примеры кода из реального приложения.

Когда человек пользуется мобильным устройством, то два основных экрана, с которыми он взаимодействует — это экран блокировки и домашний экран. То, как построена работа с этими двумя элементами очень важно, но не стоит забывать и про остальные составные части.

Вся графическая часть Sailfish OS состоит из трех основных частей. Две мы уже упомянули — это экран блокировки и домашний экран, которые расположены друг под другом. Ниже домашнего экрана расположено меню всех установленных приложений. Дополнительно, на уровне домашнего экрана, стоит выделить экран запущенного в текущий момент времени приложения и экран событий. Но опустимся на более низкий уровень.

На низком уровне всю структуру операционной системы Sailfish можно разделить на пять основных слоев: (1) слой аппаратного обеспечения, (2) ядро Linux и аппаратные абстракции, (3) прослойка Mer, предоставляющая основные функции операционной системы, (4) пользовательский интерфейс, добавляющий функциональные особенности, выделяющие ОС среди других и, наконец, (5) слой пользовательских приложений.

Графически это можно показать на следующей диаграмме (см. слайд 6 презентации (взято с официального сайта) — прим. ред.), где зеленым цветом отмечены компоненты системы с открытым исходным кодом, а розовым — проприетарные. В дальнейшем разработчики собирались большую часть системы сделать открытой.

Разработка приложений для Sailfish OS проводится с помощью Sailfish IDE, постоенной на базе Qt Creator — основной среде разработки, используемой при работе с фреймворком Qt, которая обладает множеством настроек, в том числе и достаточно тонких.

Данная IDE позволяет работать с основными системами контроля версий и создавать проекты используя такие языки, как QML, JavaScript, C++, Python и GLSL. Из них основными языками разработки для Sailfish OS являются QML (верстка интерфейсов) и JavaScript (программирование логики). Использование C++, также, как и в Android, оправдано только для реализации задач, требующих высокой производительности. Использовать Python для разработки не рекомендуется, так как его следует доустанавливать отдельно через терминал после получения режима разработчика.

В создании приложений используется библиотека QtQuick, дополненная в SDK библиотекой Sailfish Silica, которая расширяет, дополняет и оптимизирует базовые элементы для данной операционной системы. Выделяется 8 основных групп классов в библиотеке Sailfish Silica.

К первой группе относятся, так называемые, «Основные типы», которые позволяют работать с оформлением, запущенными страницами, буфером обмена и т. д.

Вторая группа — «Элементы управления» — содержит основные классы, используемые в проектировании интерфейсов, которые дополняют уже имеющийся набор в QtQuick.

Третья группа — «Ввод-вывод текста» — позволяет организовать взаимодействие с пользователем путем передачи текстовой информации. Также имеется возможность замены логики работы кнопки <Enter>.

Четвертая группа — «Контейнеры» — предоставляет те элементы, которые могут быть использованы для размещения других элементов интерфейса. Также туда вошли классы, модифицирующие возможные для использования контейнеры.

Пятая группа — «Анимации» — добавляет три новых анимации в набор QtQuick: анимация добавления, анимация появления/исчезновения и анимация удаления, соответственно.

Шестая группа — «Меню» — позволяет добавить элементам контекстное меню, а страницам вытягиваемое, а также предоставляет два класса для создания элементов меню, которые можно выбрать (MenuItem) и, соответственно, нельзя (MenuLabel).

Седьмая группа — «Диалоги» — предоставляет классы для работы с диалогами (экранами, определяющими два действия на выбор после окончания работы с ними), а также три стандартных диалога: выбора цвета, выбора даты и выбора времени соответственно.

И, наконец, последняя группа — «Обложки» — классы, позволяющие отрисовать обложку приложения (то, что отображается на домашнем экране, когда приложение свернуто) и добавить на нее какие-либо действия.

Мы кратко рассмотрели архитектуру Sailfish OS, используемую среду разработки и SDK, но прежде чем перейти к коду, познакомимся с используемым примером. Kat — неофициальный клиент для социальной сети ВКонтакте. В официальном магазине приложение появилось 17-ого марта. Первый коммит датируется 27-ым февраля. На данный момент (доклад прозвучал 25 марта 2015 г. — прим. ред.) мы имеем следующие показатели загрузок (см. слайд 21 презентации — прим. ред.) и 13 положительных отзывов. Текущая версия предоставляет базовый функционал для обмена личными сообщениями, в следующей версии планируется реализовать полноценный мессенджер. Более подробная информация о приложении, а также его исходный код, доступны по ссылкам, представленным на слайде.

Начнем мы, пожалуй, с обложки. Здесь наибольший интерес для нас представляет возможность добавления каких-либо действий. Осуществляется это с помощью элемента CoverAction, у которого следует определить два параметра: iconSource (путь к изображению, которое будет отображаться на обложке и ассоциироваться с выполняемым действием) и onTriggered (вызов некоторой функции, которая будет выполняться при выборе данного действия). Стоит отметить, что CoverAction добавляет только одно действие. Если имеется желание добавить несколько (на данный момент максимум два), то следует использовать контейнер CoverActionList, в котором размещаются создаваемые элементы.

Далее, на примере списка диалогов, разберем как создается обычный список однотипных элементов. Для этого в элементе SilicaListView требуется определить два параметра: model (указывается модель, которой будет соответствовать размещение элементов) и delegate (указывается элемент, который будет использоваться в списке). При желании можно определить элементы header и footer для добавления в список заголовка и подвала соответственно. Не стоит забывать про элемент VerticalScrollDecorator, который позволит сорентироваться пользователю в какой части списка он находится.

Также стоит обратить внимание еще на две функциональных особенности. Во-первых, реализация вытягивающегося сверху меню выполняется с помощью элемента PullDownMenu, в который добавляются элементы MenuItem, отображаемые в качестве пунктов меню. Основными параметрами MenuItem являются text (текст, выводящийся в меню) и onClicked (действие, выполняемое при выборе пункта меню). Во-вторых, при открытии списка диалогов или возврате к нему следует выполнять инициализацию базы данных и получение обновленной информации с сервера. Для выполнения этих задач служат параметры onStatusChanged (срабатывает при смене статуса экрана) и Component.onCompleted (срабатывает после полной загрузки экрана).

На экране отдельного диалога нам интересны два момента. Во-первых, мне как человеку, который начал изучать QML не так давно, потребовалось время, чтобы понять, что обрезка контента списка по выделенной границе выполняется после установки флага clip в true. А во-вторых, стоит посмотреть на то, как модифицируется кнопка <Enter> на экранной клавиатуре. Для этого нам следует определить значения трех параметров: EnterKey.enabled (флаг, устанавливающий возможность использования кнопки <Enter>), EnterKey.iconSource (путь к изображению, которое будет отображаться вместо кнопки <Enter>) и EnterKey.onClicked (вызов функции, выполняемой по нажатию на кнопку <Enter>).

На примере создания нового сообщения можно увидеть то, как осуществляется работа с диалогами. Для отображения подсказок добавляется элемент DialogHeader, который содержит в себе два параметра: acceptText и cancelText, позволяющие установить текстовые подсказки на действия подтверждения и/или отмены. В свою очередь параметры onAccepted и onRejected определяют функции, вызываемые при подтверждении и отмене соответственно. Также стоит отметить создание контекстного меню для элементов списка. Для этого объявляется Component, содержащий в себе элемент ContextMenu. Создание и отображение этого компонента происходит при поступлении сигнала onPressAndHold.

И наконец, последнее, что стоит рассмотреть, это обработку гипертекстовых ссылок в отображаемой текстовой информации. Элементы Sailfish OS не определяют ссылки в тексте автоматически — они анализируют текст согласно нотации HTML. Для того, чтобы это происходило значение параметра textFormat надо установить в Text.StyledText, а ссылки, которые надо отобразить, заключить в пару тегов <a href=""></a>. После этого можно добавить цветовое выделение ссылок с помощью параметра linkColor, а также выполняемое после нажатия действие (параметр onLinkActivated).

В заключение можно сказать, что текст также автоматически не переносится, если параметр wrapMode не установлен в определенное значение.

Спасибо за внимание!

Реклама