Приложение Hello, World

Разбор простого приложения “Hello, World” для ОС РОСА Мобайл

Начало

Чтобы создать простейшее приложение по шаблону, нажмите Ctrl-Shift-P, выполните команду Rosa: Create template, и выберете конфигурацию приложения (в этой статье рассматривается single-page-template) и директорию, в которой будет сохранен проект (в данном примере, директория с проектом, и, соответственно, проект называется "example"):

Этот шаблон написан на C++ с использованием Qt/QML с использованием Rosa Controls (библиотеки визуальных компонентов) и локализации на базе KDE (KLocalizedString и KLocalizedContext). В качестве сборочной системы используется CMake. Проект организован таким образом, чтобы упростить разработку приложений с поддержкой тем, переводов и оформления в стиле Rosa.

Структура проекта

CMakeLists.txt
 ├── gather-tr-strings.bash
 ├── metainfo
 │ ├── rosa.example.appdata.xml
 │ ├── rosa.example.desktop
 │ └── rosa.example.svg
 ├── po
 │ ├── en_US
 │ │ └── example.po
 │ └── ru
 │ └── example.po
 ├── rpm
 │ └── example.spec
 └── src
 ├── CMakeLists.txt
 ├── icons
 │ └── other
 │ ├── rosa-dark.svg
 │ └── rosa-light.svg
 ├── icons.qrc
 ├── main.cpp
 ├── qml
 │ ├── InitPage.qml
 │ └── Main.qml
 └── qml.qrc

CMakeLists.txt – Сборочные инструкции для CMake.
gather-tr-strings.bash – Скрипт, который используется для автоматического сбора строк, требующих перевода. Запускается при сборке проекта.
metainfo/ – Каталог, содержащий различные метаданные о приложении (.desktop-файл, иконку и AppStream файл с дополнительной информацией).
po/ – Каталог с файлами перевода .po для различных языков (в данном случае, русского и английского).
rpm/ – Каталог, в котором находится .spec-файл с инструкциями для сборки RPM-пакета.
src/ – Основная директория с исходным кодом приложения.
- CMakeLists.txt – Локальный CMake-файл, описывающий правила сборки для исходников в src.
- icons/ – Иконки приложения в формате SVG.
- icons.qrc и qml.qrc – Файлы ресурсов Qt, которые используются для включения SVG-иконок и QML-файлов в бинарный файл приложения.
- main.cpp – Точка входа в приложение и на C++.
- qml/ – Каталог с файлами QML (Main.qml, InitPage.qml).

Сборка и запуск приложения

Следуя инструкциям из описания среды разработки [ссылка!], добавьте устройство и выберите его в качестве основного, а затем используйте команду Rosa: Start Build and run on device, чтобы просто запустить приложение на физическом или виртуальном устройстве или Rosa: Start RPM Build and install on device, чтобы собрать RPM-пакет и установить его на устройстве.

Основные файлы и примеры кода

main.cpp

В файле main.cpp создаётся QApplication, настраивается стиль интерфейса (через QQuickStyle), а также подключается механизм локализации KDE (KLocalizedString). Далее инициализируется QML-движок и загружается главным интерфейсом приложения.

#include <QApplication> 
#include <QQmlApplicationEngine> 
#include <QQmlContext> 
#include <QQuickStyle> 
#include <KLocalizedString> 
 
int main(int argc, char *argv[]) 
{ 
    QQuickStyle::setStyle(QStringLiteral("RosaStyle")); 
    QApplication app(argc, argv); 
    KLocalizedString::setApplicationDomain("example"); 
    QQmlApplicationEngine engine; 
    engine.rootContext()->setContextObject(new KLocalizedContext(&engine)); 
    engine.addImportPath(QStringLiteral("qrc:/qml")); 
    engine.load(QUrl(QStringLiteral("qrc:/qml/Main.qml"))); 
    return app.exec(); 
}

Main.qml

Главный QML-файл, который определяет разметку основного окна приложения (ApplicationWindow). Здесь задаются размеры приложения, основной цвет фона, а также указывается страница, которая будет открыта при запуске (загружается QML-файл InitPage.qml).

Свойство initialPage указывает на начальную страницу, в данном случае она будет загружена при помощи функции getPage("qrc:/qml/InitPage.qml"). Путь до этой страницы имеет такой вид, т.к. объявлен соответствующим образом в файле qml.qrc.

import QtQuick 2.15 
import QtQuick.Controls 2.15 
import QtQuick.Layouts 1.15 
import RosaTheme 1.0 as Rosa 
import RosaControls 1.0 
                        
ApplicationWindow { 
    width: Rosa.Theme.scale(360) 
    height: Rosa.Theme.scale(640) 
    color: Rosa.Theme.lightShadesBlueGrayColor 
    initialPage: getPage("qrc:/qml/InitPage.qml") 
}

InitPage.qml

Это пример страницы (компонента Page), которая будет отображаться при запуске приложения. Здесь создается заголовок страницы, отображается иконка приложения и несколько текстовых сообщений, использующих функцию i18n() для локализации.

Аналогично загрузке QML-файлов, для использования иконок в приложении, в качестве пути до них (в данном случае "qrc:/icons/other/rosa-light.svg"), используются пути, заданные в файле icons.qrc. Далее, мы подробнее рассмотрим файлы ресурсов.

import QtQuick 2.15 
import QtQuick.Controls 2.15 
import QtQuick.Layouts 1.15 
import RosaTheme 1.0 as Rosa 
import RosaControls 1.0 
 
Page { 
    id: root 
    title: i18n("Init page") 
    header: PageHeader { 
        title: root.title 
    } 
    ColumnLayout { 
        anchors.fill: parent 
        Item { 
            Layout.fillHeight: true 
        } 
        Image { 
            Layout.alignment: Qt.AlignHCenter 
            sourceSize: Rosa.Theme.scaleSize(68, 68) 
            source: "qrc:/icons/other/rosa-light.svg" 
        } 
        PlaceholderMessage { 
            Layout.alignment: Qt.AlignHCenter 
            Layout.fillWidth: true 
            text: i18n("Template application") 
            description: i18n("This template is a starting point for developing applications using Rosa Controls") 
        } 
        Item { 
            Layout.fillHeight: true 
        } 
    } 
}

Файлы ресурсов: icons.qrc и qml.qrc

qml.qrc и icons.qrc описывают файлы, которые будут включены в бинарный ресурс Qt (т.е. при сборке проекта, файлы, указанные там, будут включены в бинарный файл приложения).

<RCC> 
    <qresource prefix="/"> 
        <file>qml/Main.qml</file> 
        <file>qml/InitPage.qml</file> 
    </qresource> 
</RCC> 
 
<RCC> 
    <qresource prefix="/"> 
        <file>icons/other/rosa-light.svg</file> 
        <file>icons/other/rosa-dark.svg</file> 
    </qresource> 
</RCC>

Файлы перевода

В каталоге po находятся .po-файлы с переводами (например, ru/example.po и en_US/example.po). Строки, отмеченные в коде функциями i18n("..."), автоматически подхватываются для перевода.

Файл .desktop и метаданные

Файл rosa.example.desktop (где "example" – имя проекта) описывает метаданные приложения для графического окружения (название, комментарий, категории, исполняемый файл и т.д.). Часть примера:

[Desktop Entry]
 Name=example
 Name[en_US]=example
 Name[ru]=Шаблон приложения РОСА
 ...
 Exec=example
 Icon=rosa.example
 Type=Application
Categories=Qt;KDE;Utility;

Также в каталоге metainfo присутствуют файлы:

rosa.example.appdata.xml — содержит дополнительную информацию (AppStream) о приложении (описание, ссылки на сайт разработчика и баг-трекер, скриншоты и т.д.).
rosa.example.svg — иконка приложения в формате SVG.

Файл спецификации RPM

В файле example.spec (где "example" – имя проекта) описаны параметры сборки для RPM-пакетов, в том числе зависимости, перечень устанавливаемых файлов и т.д. Часть примера:

Name: example
 Summary: Template for development
 Version: 0.1.0
 Release: 1
 Group: Graphical desktop/KDE
 License: GPLv3
 Url: https://mobile.rosa.ru
 BuildRequires: ...
 ...
 %files
 %{_bindir}/example
 %{_kde5_applicationsdir}/rosa.example.desktop
 ...
 %{_datadir}/locale/ru/LC_MESSAGES/example.mo
 %{_datadir}/locale/en_US/LC_MESSAGES/example.mo

Заключение

Используя представленный шаблон, вы можете расширять QML-интерфейс, добавлять новые страницы, компоненты и иконки, а также создавать и поддерживать переводы для вашего приложения. Для более подробного изучения примеров продвинутых приложений, вы можете ознакомиться с разбором приложений Заметки и Миграция.

Разбор приложения “Заметки” Разбор приложения “Миграция”