Реклама

Поиск

QML - Урок 008. Работа с System Tray в Qml Qt приложении

TutorialQMLQSystemTrayIcon, Qt, QML274

При переводе интерфейса приложения c Qt/C++ на Qt/QML мои руки добрались и до иконки приложения в системном трее. Задача заключалась в том, чтобы перевести иконку в System Tray с C++ на Qml, частично или полностью. Первый вариант, который я реализовал, являлся обёрткой вокруг QSystemTrayIcon с QMenu с использованием системы сигналов и слотов . Решение вполне логичное, учитывая, что в QML нет готового объекта, наподобие MenuBar для System Tray .   Поэтому делаем обёртку, с которой можно взаимодействовать из QML слоя.

После того, как обёртка была реализована, мне довелось посоветоваться с программистом из Wargamming Константином Ляшкевичем , который порекомендовал мне также обратить внимание на то, что QML может иметь доступ не только к сигналам и слотам, но и к параметрам Q_PROPERTY, которые также имелись в классе QSystemTrayIcon, то есть фактически можно было только зарегистрировать данный класс, как тип в QML слое и попытаться написать практически весь код на QML. Я проверил данный совет и рассказал о результате Константину. В итоге он сам заинтересовался данной задачей и Мы потратили вечерний час на занимательное костылирование и совместными усилиями запихали QSystemTrayIcon максимально в QML.

Таким образом в данной статье Вы увидите две реализации для работы с иконкой в системном трее.

Полученное приложение будет сворачиваться в System Tray по клику по иконке в трее, а также по нажатию кнопки закрытия окна. Но только в том случае, если будет активен специальный чекбокс, для контроля процесса сворачивания окна приложения в трей, если же чекбокс не активен, то приложение будет закрываться. Также приложение можно будет закрыть при активном чекбоксе через пункт меню в иконке системного трея.

QML - Урок 024. Custom QQuickItem - добавляем в QML объект из C++

TutorialQMLCustom QQuickItem, QQuickItem, QQuickPaintedItem, Qt, QML351

QML объекты в Qt весьма замечательны, с ними удобно работать, но что если стандартных объектов нам становится недостаточно? Тогда можно сделать собственный объект, запрограммировать его в C++ и внедрить в логику QML слоя. В данном уроке предлагаю сделать небольшой импровизированный таймер, который можно запустить, остановить и очистить, но при этом дизайн таймера будет разработан в C++ слое и по сути большая часть работы будет осуществляться в C++.

А для разработки кастомизированного QuickItem понадобится использовать QQuickPaintedItem, в котором будет таймер, представленный на рисунке ниже, который будет нарисован наподобие обычного QGraphicsItem , но он будет обладать рядом свойств, которыми можно будет управлять из QML слоя.

Реклама

QML - Урок 016. База данных SQLite и работа с ней в QML Qt

TutorialQMLБаза данных, SQLite, Qt, QML, Android, DataBase, Model, View, MVC476

Небольшой пример по работе с базой данных в QML Qt . В данном уроке сводится воедино информация о применении сигналов и слотов в QML Qt , о доступе к C++ классам из QML слоя, реализации интерфейса приложения на QML, а также о реализации модели/представлении для таблицы базы данных.

База данных содержит таблицу со списком людей, в которой имеется четыре колонки:

  • id (INTEGER) - уникальный номер записи;
  • FirstName (VARCHAR (255)) - Имя;
  • SurName (VARCHAR (255)) - Фамилия;
  • Nik (VARCHAR (255)) - Ник.

Приложение должно реализовывать удаление и добавление записей в базу данных через интерфейс приложения. Для добавления записей в Базу данных будет использоваться три поля для ввода данных и кнопка, которая инициализирует добавление данных в базу данных SQL . Добавление записей в таблицу осуществляется через класс обёртку предназначенным для этого методом.Также в приложении присутствует класс ListModel , который реализует модель представления данных для отображения информации в TableView в слое QML.

QML - Урок 015. Разработка QML Data Mapper - Аналог QDataWidgetMapper

TutorialQMLQML, Qt, QDataWidgetMapper, mapper, QMLDataMapper97

В процессе переноса GUI одной софтины с QWidgets на QML обнаружилось отсутствие аналога QDataWidgetMapper для QML . Данный факт был несколько портящим настроение. Но делать было нечего, кроме как искать другие способы реализации или делать полностью свой велосипед для этого, свой Qml Data Mapper.

Тем не менее поиски на просторах сети дали свои результаты в качестве примера 2011 года от разработчиков Nokia по реализации SQL Widget Mapper для BlackBerry на основе Cascades (фреймворка для native разработки на QML Qt под BlackBerry, соответственно). Путём вечерней медитации над данным примером удалось перепилить код для нынешнего QML Qt , который вполне неплохо будет чувствовать себя как при работе под Desktop, так и при работе под Android, (кроссплатформенность как ни как).

Для демонстрации работы QML Data Mapper будет написано приложение, которое работает с базой данных SQLite. При каждом запуске приложение записывает несколько строк в базу данных, из которой данные забираются при помощи модели данных наследованной от QSqlQueryModel и отображаются в QML TableView. В главном окне приложения присутствует кнопка, по нажатию которой вызывается диалоговое окно, в котором отображается информация о первой строке таблицы. При двойном клике по одной из строк таблицы также вызывается диалоговое окно, но с информацией об этой строке. Также в диалоговом окне присутствуют кнопки для пролистывания информации из таблицы.

QML - Урок 011. Передача данных из QSqlQueryModel в Qml TableView

TutorialQMLQML, SQL, Qt, DataBase, QSqlQueryModel, TableView227

Для представления таблиц баз данных в TableView при разработке с использованием QML можно использовать класс, наследованный от QSqlQueryModel. Для этого необходимо в наследованном классе определить метод, который установит соответствие ролей колонок таблицы к соответствующим колонкам в TableView, определенном в QML, где также указаны роли для каждого объекта TableViewColumn, то есть для каждой колонки. Также необходимо будет переопределить метод QVariant data( ... ) const , который возвращает данные для ячеек таблицы. В данном случае информация будет возвращаться в соответствии с определёнными ролями колонок таблицы.

Структура проекта для работы с TableView

Проект состоит из следующих файлов:

  • QmlSqlQueryModel.pro - профайл проекта;
  • database.h - заголовочный для создания и инициализации тестовой базы данных;
  • database.cpp - файл исходных кодов для создания и инициализации тестовой базы данных;
  • model.h - заголовочный файл модели данных;
  • model.cpp - файл исходных кодов модели данных;
  • main.cpp - основной исходный файл проекта;
  • main.qml - qml файл с TableView.

Реклама

QML - Урок 021. Переключение между окнами в QML

TutorialQMLQt, QML, window, Quick, Controls, QtQuick184

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

А теперь задали тот же вопрос, но уже применительно для QML. Итак, посмотрим, как это реализовать на QML.

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

  • question4.pro - профайл проекта, создаётся по умолчанию и не изменяется;
  • main.cpp - основной файл исходных кодов, создаётся по умолчанию и не изменяется;
  • main.qml - основной файл qml с главным окном приложения;
  • AnotherWindow.qml - тип второстепенных окон проекта.

AnotherWindow.qml

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

QML - Урок 004. Сигналы и слоты в Qt QML

TutorialQMLconnections, example, qml, qml урок, qt, qt qml, qt урок, signal qml, slot qml, сигналы и слоты qml670

А вот мы и добрались до передачи данных между слоем QML и слоем C++. Честно говоря, принцип настолько же простой, как и просто использование сигналов и слотов в одном слое C++. Особенно в Qt 5.5.

Пример будет показан на основе программного кода из предыдущего урока , где мы создали диалоговое окно. Но скриншотов примера работы на Android не будет показано, но заверяю Вас - Всё работает как швейцарские часы.

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

структура проекта с qml

По сравнению с предыдущим уроком, у нас появились некоторые изменения. А именно, добавился новый класс, который будет являться ядром приложения.

  • appcore.h - заголовочный файл ядра приложения;
  • appcore.cpp - файл исходных кодов ядра приложения.

А продолжать работать мы также будем с QQMLApplicationEngine. Нужно будет просто взять от движка QML контекст и загрузить в него объект нового класса, от которого будут поступать сигналы и в который будут передаваться данные.

QML - Урок 025. Динамический перевод мультиязычного приложения на QML

TutorialQMLQt, QML, перевод, QTranslator, translation190

После того, как мы ознакомились с переводами интерфейса приложения на Qt/C++ , настало время изучить возможности динамического перевода приложения, интерфейс которого написан на QML.

При разработке на QML есть пара моментов, которые нужно учесть, в отличие от стандартного приложения на QWidgets, а именно:

  1. Требуется дополнительная настройка .pro файла проекта;
  2. Сам процесс загрузки переводов для нужного языка осуществляется в C++ слое;
  3. Переинициализация перевода интерфейса осуществляется в QML слое с помощью функции qsTr();
  4. После загрузки перевода, нужно отправить сигнал из C++ слоя в QML слой, чтобы заново перевести интерфейс приложения, что аналогично и для С++ приложения, но требует настройки взаимодействия С++ слоя с QML слоем.

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

Создаём проект, в который будут входит следующие файлы:

  • QmlLanguage.pro - профайл проекта;
  • deployment.pri - файл настройки деплоя, создаётся по умолчанию;
  • main.cpp - файл исходных кодов с функцией main;
  • qmltranslator.h - заголовочный файл класса загрузки перевода;
  • qmltranslator.cpp - файл исходных кодов класса загрузки перевода;
  • main.qml - основной файл QML слоя.

Реклама

Реклама