IntroductionQtQuick/bg

Български 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, който прилича на Cascading Style Sheets (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. В зависимост от това за коя платформа ще разработвате, можете да си изберете какво да се инсталира. Qt Quick също така е включен в последните SDK на Nokia и Meego/AppUp. Друг вариант е да инсталирате на Qt с любимият си пакетен миниджър и да настроите вашия редактор да оцветява QML файловете (. qml) като JavaScript или CSS. От Маверик ( Убунту 10.10), Qt 4.7 и qmlviewer са включени като пакетите libqt4-dev и qt4-qmlviewer.
h2. Пример
Ще започнем с най-проста програма, показваща известното съобщение "Hello, world!". За да стартирате файла, бъдете сигурни, че имате инсталиран qmlviewer. Това лесно може да се тества като напишете в конзолата "qmlviewr —v". Ако искате да използвате QtCreator, просто изберете File-> New File or Project-> Qt Quick Project-> Qt Quick UI. Поставете изходния код и натиснете върху големият триъгълен бутон в долния ляв ъгъл или използвайте клавишната комбинация Ctrl+R.

<br />// HelloWorld.qml<br />import QtQuick 1.0<br />Rectangle {<br /> color: &quot;beige&amp;quot;<br /> width: 100; height: 100<br /> Text {<br /> anchors.centerIn: parent<br /> color: &quot;chocolate&amp;quot;<br /> text: &quot;Hello, world!&quot;<br /> }<br /> MouseArea {<br /> anchors.fill: parent<br /> onClicked: Qt.quit()<br /> }<br />}<br />

Първият ред е само коментар. Синтаксисът е същият както в C + . Линии, започващи с / / и текст, затворен в / * … * / се игнорират. Втората линия вмъква стандартната библиотека с всички компоненти по подразбиране: Rectangle, Image, Text, MouseArea, Flickable, … и т.н. Третият ред създава главния елемент на нашата визуална йерархия. Rectangle елемента просто показва правоъгълник, изпълнен с определен цвят и евентуално заоблени ръбове. За цвят може да се използва всяко от имената на цветове в SVG или да се посочи директно RGB код. В нашия пример бихме могли да използваме #F5F5DC вместо "beige"(бежово). Размерите на правоъгълника са зададени със свойствата width и height. За всеки визуален елемент можете да укажете геометрията му чрез x, y, width и height в брой на пиксели. Най-често това е необходимо само за елемента от най-високо ниво и за анимираните елементи.
След това добавяме два дъщерни елемента: Text и MouseArea. За да ги поставим, където искаме, използваме "anchors" (котви). Центърът на текста е закотвен в центъра на родителя. Опитайте да преоразмерите прозореца, за да се проверите това. Вторият елемент е MouseArea, който е закотвен, така че напълно да препокрие родителския елемент. MouseArea е един от невидимите елементи за прихващане на действия от потребителя. Той се нарича MouseArea, но също така засича и допир на устройства със сензорен екран. Накрая MouseArea започва да слуша за събитието onClicked, което извиква функция за изключване на Qt Quick приложението.
h2. Езика QML
QML е декларативен език, който описва йерархия от обекти. Дървото на обектите се създава при зареждане на QML файла. И на всеки обект се присвояват стойности на неговите свойства. Свойствата се изчисляват чрез константи или JavaScript изрази. Свойствата, дадени като израз на JavaScript изрази, се преизчисляват, ако някое от свойствата, използвано в израза, се промени. Тази концепция за деклариране на свойства, които зависят едно от друго и се обновяват на момента, се нарича обвързване на свойствата (property binding).
QML се смята за разширение на JavaScript, но той всъщност е и подобрение. Докато JavaScript е ""патешки" език":en.wikipedia.org http://en.wikipedia.org/wiki/Duck_typing , QML прави проверка на основните типове и проверка на синтаксиса при зареждане на .qml файловете. Опитайте например следното:

<br />import QtQuick 1.0
<br />Rectangle {
<br /> color: 0
<br />}<br />

При зареждането на този файл в qmlviewer ще получите несъответствие на тип:

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

Освен това в QML не ви е позволено да променяте глобален обект. Това често се случва по случайност, когато забравите да декларирате локална променлива с помощта на var.
Освен тези малки подобрения, JavaScript синтаксисa е напълно съвместим с JavaScript-а, използван в уеб браузърите. Можете да използвате вградените обекти като Date, Number или Math. Можете да пишете JavaScript код в отделни файлове и да ги импортирате в QML. Можете също така да деклариратe JavaScript функции в рамките на вашите компоненти. Обърнете внимание на следния пример:

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

}<br />

Тук имаме обявена функцията red за изчисляване на червени тонове.

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

QtQuick библиотеката предоставя богат набор от анимации, елементи за показване на изображения, елементи за въвеждане на данни и Model-View елементи. Има възможност за подреждане на елементите чрез закотвяне и позициониращи елементи, но няма компоненти от високо ниво като бутони или ленти с инструменти. В момента се разработват така наречените "Qt Components":http://developer.qt.nokia.com/wiki/Qt_Quick_Components за предоставяне на такива компоненти.