IntroductionQtQuick/ru

Русский English Български

[toc align_right="yes" depth="2"]

Введение в Qt Quick

О Qt Quick

Пользовательские интерфейсы разработанные в Qt Quick создаются как прямоугольные элементы в визуальном дереве. Технология ограничена набором элементов сфокусированных на взаимодействии через прикосновения и жесты. Qt Quick вводит новую концепцию логики моделирования приложений, используя иерархическую машину состояний. Кроме того, переходы и богатый набор анимаций ("tweens":http://en.wikipedia.org/wiki/Tweening) облегчают создание богатых пользовательских интерфейсов.

Хотя веб-разработчики все чаще называют себя дизайнерами и большинство разработчиков программного обеспечения смотрят на кодировку, как на искусство, по-прежнему большой проблемой для дизайнеров было участие в процессе разработки с Qt и C+. C, в конце концов, является языком низкого уровня ориентированным на системное программирование. Qt Quick был разработан с нуля, чтобы заполнить этот пробел. Как предметно-ориентированный язык он специально ориентирован на создание пользовательских интерфейсов. Это устанавливает декларативный слой поверх JavaScript, который похож на каскадные таблицы стилей (CSS). Вас не будут беспокоить приведение типов, указатели и время жизни объектов. Вместо этого, в центре внимания находится создание богатых пользовательских интерфейсов.

h2. Термины и терминология

Прежде чем начать кодирование в Qt Quick, давайте сразу обсудим некоторые термины. Все, кажется, говорят о Qt Quick в наше время и, так как технология все еще новая, ее окружает много мифов.

В первую очередь, Qt Quick, QtQuick и QML относятся к разным вещам! Qt Quick и QML часто используются как синонимы, что не совсем правильно. QML это язык, QtQuick (без пробела) является именем стандартной библиотеки компонентов, а Qt Quick (с пробелом) относится к технологии в целом. QML как язык позволяет описывать иерархии объектов и состояний основанной логики приложения. Это также может быть использовано в иных областях приложения, не связанных с разработкой пользовательского интерфейса.

h2. Настройка среды разработки

Начиная с версии 4.7, Qt поставляется с Qt Quick. Вы можете редактировать свои QML файлы вашим любимым редактором, но Qt Creator в настоящее время предлагает лучшую поддержку. Qt предоставляет новый инструмент под названием "qmlviewer", который позволяет отображать QML файлы. Начиная с версии 2.1, Qt Creator также поддерживает специальный режиме разработки QML. Depending on your target platform you may opt for downloading all tools in one package - including the necessary cross-compile chains. Qt Quick также включена в последние Nokia и Meego/AppUp SDK. You can avoid these SDKs (and their gigabytes) by installing Qt with your favorite package manager and setting your editor to highlight QML files (.qml) as JavaScript or CSS. As of Maverick (10.10), Qt 4.7 and qmlviewer are both included in Ubuntu. Ищите libqt4-dev и qt4-qmlviewer пакеты.

h2. Здравствуй, мир!

Начнем с самой простой программы, показывающей известное сообщение: "Здравствуй, мир!". Для загрузки файла, убедитесь, что qmlviewer под рукой. Если вы желаете использовать QtCreator, просто нажмите Файл->Новый файл или проект->Проект Qt Quick->Интерфейс пользователя на Qt Quick (File->New->Qt Quick Project->Qt Quick UI). Затем вставьте исходный код и нажмите на большую треугольную кнопку в левом нижнем углу интерфейса.

// HelloWorld.qml
import QtQuick 1.0
Rectangle {
 color: "beige"
 width: 100; height: 100
 Text {
 anchors.centerIn: parent
 color: "chocolate"
 text: "Здравствуй, мир!"
 }
 MouseArea {
 anchors.fill: parent
 onClicked: Qt.quit()
 }
}

Первая строка просто комментарий. Синтаксис комментариев такой же, как в C+. Строки, начинающиеся с // и текст, заключенный в /* … */ игнорируются. Вторая строка импортирует все стандартные компоненты: Rectangle, Image, Text, MouseArea, Flickable, … и т.д. Третья строка создает корневой узел вашей визуальной иерархии. Элемент Rectangle просто отображает прямоугольник закрашенный заданным цветом с возможностью закругления углов. Вы можете использовать любое из SVG названий цветов или задать цвет непосредственно с помощью RGB названия цветов. В нашем примере мы могли бы написать #F5F5DC вместо "beige". Размеры прямоугольника задается с помощью свойств width и height. Для каждого визуального элемента вы можете указать геометрию, используя свойства x, y, width и height задавая значения в пикселах. По большей части, это необходимо только для элементов верхнего уровня и анимации. После этого мы добавили два дочерние элемента: Text и MouseArea. Мы используем якоря, чтобы связать геометрию дети с родительской. Центр текстового элемента привязывается к родительскому центру. Попробуйте изменить размер окна, чтобы проверить это. Второй дочерний элемент MouseArea, стоит на якоре полностью перекрывающем его родителя. MouseArea является одним из невидимых элементов для захвата пользовательского ввода. Элемент называется MouseArea, но также обеспечивает поддержку событий нажатия и табуляции. Наконец MouseArea включает обработчик события onClicked, который вызывает функцию по умолчанию для завершения работы Qt Quick приложения.

h2. Язык QML

QML это декларативный язык, который определяет иерархию объектов. Дерево объектов создается при загрузке QML файла. Для каждого объекта определяется набор свойств. В качестве значений свойств используются константы или выражения JavaScript. Значение свойств установленных как javascript выржения переоцениваются, если любые свойства используемые в выражении изменяются. Эта концепция декларирования свойств, которые зависят друг от друга и обновляются в реальном времени называется связыванием свойств (property binding) в QML. QML называют расширением JavaScript, но это также и улучшение. Хотя язык JavaScript использует утиную типизацию ( "duck-typing":http://en.wikipedia.org/wiki/Duck_typing ), в QML есть базовые типы и проверка синтаксиса при закрузке файлов. Например, пропробуйте выполнить следующие действия:

import QtQuick 1.0
Rectangle {
 color: 0
}

При загрузке данного файла в qmlviewer декларативный контексты выдаст корректный отчет о несоответствии типа:

file:///home/frank/gitorious/qml-demos/MyRectangle.qml:3:12: Invalid property assignment: color expected
 color: 0

Кроме того, в QML вы не можете изменить глобальный объект. Это обычно происходит случайно, когда вы забыли использовать var при объявлении локальных переменных. Это незначительные изменения, расширенный синтаксис JavaScript полностью совместим с JavaScript используемым в веб браузерах. Вы можете использовать встроенные объекты, такие как Date, Number или Math. Вы можете написать JavaScript код в отдельном JavaScript файле и импортировать его в ваш QML контекст. Вы также можете объявить JavaScript в рамках компонентов. Взгляните на следующий пример:

import QtQuick 1.0

Rectangle {
 width: 100; height: 100
 color: red(0.5)
 Rectangle {
 anchors.verticalCenter: parent.verticalCenter
 width: parent.width / 2
 height: parent.height / 2
 color: red(1.)
 }
 function red(v) { return '#''' Math.floor(v''' 255).toString(16)'' '0000'; }
}

Здесь мы объявили функцию red для вычисления названий цветов оттенков красного.

Стандартные компоненты Qt Quick

Библиотека компонентов QtQuick предоставляет богатый набор анимационных элементов, элементов для обработки изображений, элементов обработки ввода и модель-представление элементов. Особое внимание уделяется специальным пользовательским интерфейсам, созданным в рамках встраиваемых и мобильных устройств. Есть основанные на якорях макеты и позиционеры, но есть и компоненты высокого уровня, такие как поля со списком или панели инструментов. Ведется постоянная работа над проектом под названием "Qt Components":http://developer.qt.nokia.com/wiki/Qt_Quick_Components который предоставляет такие высокоуровневые компоненты, но проект все еще находится на ранних стадиях.