Журнал LinuxFormat - перейти на главную

LXF142:QML

Материал из Linuxformat
(Различия между версиями)
Перейти к: навигация, поиск
(викификация, оформление, иллюстрация)
 
 
(не показана 1 промежуточная версия 1 участника)
Строка 1: Строка 1:
−
: '''Технология ''QML''''' Только начинает свое разви­тие, но ее преимущества видны уже сегодня
+
: '''Технология ''QML''''' Только начинает свое разви­тие, но ее преимущества видны уже сегодня [[Категория:Учебники]]
 +
 
 +
{{Цикл/QML}}
  
 
==''Qt'' и ''QML'': Язык ин­тер­фей­са==
 
==''Qt'' и ''QML'': Язык ин­тер­фей­са==
Строка 21: Строка 23:
  
  
−
[[Изображение:LXF142_65_1.jpg|300px|Рис. 3]] Рис. 3. Про­гресс ин­ди­ка­то­ров про­грес­са.|Ширина=300px}}
+
[[Изображение:LXF142_65_2.jpg|300px|Рис. 3]] Рис. 3. Про­гресс ин­ди­ка­то­ров про­грес­са.|Ширина=300px}}
  
 
А еще с по­мо­щью QML мож­но по­иг­рать в так лю­би­мую офис­ным планк­то­ном ко­сын­ку (рис. 2). Или на­сла­дить­ся ин­ди­ка­то­ра­ми вы­полнения за­да­чи, вы­полнен­ны­ми в пас­тель­ных то­нах (рис. 3).
 
А еще с по­мо­щью QML мож­но по­иг­рать в так лю­би­мую офис­ным планк­то­ном ко­сын­ку (рис. 2). Или на­сла­дить­ся ин­ди­ка­то­ра­ми вы­полнения за­да­чи, вы­полнен­ны­ми в пас­тель­ных то­нах (рис. 3).

Текущая версия на 12:49, 6 июля 2012

Подписка на печатную версию
Весь 2015 год (12 номеров)
Первое полугодие (6 номеров)
Второе полугодие (6 номеров)
Подписка на электронную версию
Весь 2015 год (12 номеров)
Первое полугодие (6 номеров)
Второе полугодие (6 номеров)
Подшивки старых номеров журнала (печатные версии)
Весь 2014 год (12 номеров)
Первое полугодие (6 номеров)
Второе полугодие (6 номеров)
Технология QML Только начинает свое разви­тие, но ее преимущества видны уже сегодня


[править] Qt и QML: Язык ин­тер­фей­са

При­знав прин­цип раз­де­ле­ния движ­ка и ло­ги­ки про­грам­мы, Ан­д­рей Бо­ров­ский на­хо­дит об­щий язык с ин­тер­фей­сом поль­зо­ва­те­ля.


В про­грам­ми­ро­вании из­дав­на жи­вут, взаи­мо­дей­ст­ву­ют и бо­рют­ся друг с дру­гом два под­хо­да: дек­ла­ра­тив­ный (что на­до сде­лать) и им­пе­ра­тив­ный (как сде­лать). А са­мая за­вет­ная меч­та всех раз­ра­бот­чи­ков – су­пер-про­грам­ма, ко­то­рая пре­вра­ща­ла бы дек­ла­ра­тив­ное опи­сание за­да­чи в им­пе­ра­тив­ное (прав­да, ес­ли та­кая про­грам­ма когда-нибудь поя­вит­ся, раз­ра­бот­чи­ки, в со­вре­мен­ном смыс­ле это­го сло­ва, ис­чез­нут: их окон­ча­тель­но за­ме­нят ди­зайнеры).

Про­бле­ма за­клю­ча­ет­ся еще и в том, что те, кто ре­ша­ет дек­ла­ра­тив­ную и им­пе­ра­тив­ную час­ти за­да­чи, за­час­тую го­во­рят на раз­ных язы­ках и мыс­лят раз­ны­ми ка­те­го­рия­ми. Дек­ла­ра­тив­ная часть мо­жет ме­нять­ся как пер­чат­ки (поч­ти в бу­к­валь­ном смыс­ле), а им­пе­ра­тив­ная го­раз­до бо­лее кон­сер­ва­тив­на. На­гляд­ный при­мер то­му – мно­го­чис­лен­ные при­ло­жения баз дан­ных. На им­пе­ра­тив­ном уровне все они де­ла­ют прак­ти­че­­ски од­но и то же – об­менива­ют­ся дан­ны­ми с СУБД, ис­поль­зуя ко­ман­ды и объ­ек­ты язы­ка SQL (я сам ис­поль­зо­вал один и тот же класс взаи­мо­дей­ст­вия с СУБД в со­вер­шен­но раз­ных при­ло­жениях). А вот внешне, с точ­ки зрения поль­зо­ва­те­лей, при­ло­жения БД мо­гут су­ще­ст­вен­но от­ли­чать­ся (бла­го­да­ря че­му так мно­го ко­де­ров и обес­пе­че­ны ра­бо­той). Под внешней ча­стью при­ло­жения я под­ра­зу­ме­ваю не толь­ко то, как оно вы­гля­дит, но и то, как оно се­бя ве­дет – то, что обыч­но на­зы­ва­ют ло­ги­кой ра­бо­ты при­ло­жения.


Все эти про­стые на­блю­дения, сде­лан­ные не мной и не сей­час, при­ве­ли раз­ра­бот­чи­ков к фор­му­ли­ров­ке очень важ­но­го прин­ци­па: раз­де­ления движ­ка и ло­ги­ки. Под ло­ги­кой в дан­ном слу­чае понима­ет­ся все, что про­грам­ма де­ла­ет. Дви­жок же ре­ша­ет, как имен­но это бу­дет сде­ла­но. К дан­но­му прин­ци­пу близ­ко при­мы­ка­ет дру­гой – раз­де­ление движ­ка и ин­тер­фей­са. Ин­тер­фейс, как уже бы­ло от­ме­че­но, го­раз­до ча­ще под­вер­га­ет­ся из­менениям, чем дви­жок. Кро­ме то­го, поль­зо­ва­те­ли и ад­минист­ра­то­ры хо­тят иметь воз­мож­ность на­страи­вать его са­мо­стоя­тель­но. Хо­ро­шие при­ме­ры раз­де­ления движ­ка и ин­тер­фей­са – гра­фи­че­­ская оберт­ка во­круг кон­соль­ной про­грам­мы Unix или Web-ин­тер­фейс взаи­мо­дей­ст­вия с неким сер­ве­ром. При этом ин­тер­фейс удоб­но опи­сы­вать в тер­ми­нах дек­ла­ра­тив­но­го язы­ка (Web-ин­тер­фей­сы управ­ления – на­гляд­ный то­му при­мер), а дви­жок го­раз­до про­ще на­пи­сать на им­пе­ра­тив­ном язы­ке.

Раз­ра­бот­чи­ки Qt ре­ши­ли, по-ви­ди­мо­му, за­кре­пить прин­ци­пы раз­де­ления движ­ка и ин­тер­фей­са «на за­ко­но­да­тель­ном уровне», за­ста­вив их бу­к­валь­но го­во­рить на раз­ных язы­ках. Ес­ли основ­ным ин­ст­ру­мен­том реа­ли­за­ции движ­ка по-прежнему оста­ет­ся C++ и все биб­лио­те­ки и вспо­мо­га­тель­ные сред­ст­ва Qt library, то для опи­сания ин­тер­фей­са при­ло­жения пред­ло­жен са­мо­стоя­тель­ный язык QML.

Как вы уже по­ня­ли, QML – дек­ла­ра­тив­ный язык. Он по­зво­ля­ет опи­сы­вать, что имен­но дол­жен ви­деть поль­зо­ва­тель на эк­ране. С по­мо­щью QML мож­но опи­сать внешний вид и рас­по­ло­жение эле­мен­тов управ­ления при­ло­жением. Как вам, на­при­мер, идея за­менить стан­дарт­ный су­хо­ва­тый QDial на вот та­кой гла­мур­ный «спи­до­метр» (рис. 1)?


А еще с по­мо­щью QML мож­но по­иг­рать в так лю­би­мую офис­ным планк­то­ном ко­сын­ку (рис. 2). Или на­сла­дить­ся ин­ди­ка­то­ра­ми вы­полнения за­да­чи, вы­полнен­ны­ми в пас­тель­ных то­нах (рис. 3).

Нет ну­ж­ды го­во­рить о том, что QML кросс-плат­фор­мен так же, как и са­ма Qt. Но на са­мом де­ле, при­ме­ры из ском­пи­ли­ро­ван­но­го сборника Qt соз­да­ют об­ман­чи­вое впе­чат­ление о те­ку­щих воз­мож­но­стях QML. Тех­но­ло­гия все еще да­ле­ка от со­вер­шен­ст­ва, хо­тя кое-что, ра­зу­ме­ет­ся, мож­но сде­лать уже сей­час.

Вернем­ся к опи­санию язы­ка QML. По­ми­мо дек­ла­ра­тив­ных эле­мен­тов, язык вклю­ча­ет свой соб­ст­вен­ный ва­ри­ант ECMAScript (близ­кий к JavaScript) с пол­ным на­бо­ром им­пе­ра­тив­ных эле­мен­тов. Так что на QML мож­но не толь­ко ин­тер­фей­сы, но и пи­сать про­грам­мы, а Qt ис­поль­зо­вать лишь в ка­че­­ст­ве ин­тер­пре­та­то­ра. Соб­ст­вен­но го­во­ря, в со­став но­вей­ших ди­ст­ри­бу­ти­вов Qt уже вхо­дит та­кой ин­тер­пре­та­тор – ути­ли­та qmlviewer, ко­то­рая по­з­во­ляет на­сла­дить­ся все­ми доступ­ны­ми на дан­ный мо­мент воз­мож­но­стя­ми тех­но­ло­гии QML, не на­пи­сав ни строч­ки ко­да на C++. Ес­ли уж го­во­рить на­чис­то­ту, QML весь­ма по­хож на со­вре­мен­ный HTML, с той разницей, что вы­пол­ня­ет­ся он не в брау­зе­ре, а в при­ло­жении Qt, и мо­жет взаи­мо­дей­ст­во­вать с объ­ек­та­ми это­го при­ло­жения. Когда я го­во­рю, что QML по­хож на HTML 5, я имею в ви­ду сход­ст­во функ­цио­наль­ных воз­мож­но­стей, но не син­так­си­са. Вот про­стей­шая про­грам­ма – «Hello World» ми­ра QML (этот при­мер взят из офи­ци­аль­ной до­ку­мен­та­ции Qt): 

 import QtQuick 1.0
 Rectangle {
  id: page
  width: 500; height: 200
  color: “lightgray”
  Text {
   id: helloText
   text: “Hello world!”
   y: 30
   anchors.horizontalCenter: page.horizontalCenter
   font.pointSize: 24; font.bold: true
 }

Пре­ж­де чем раз­би­рать при­мер, на­до ска­зать па­ру слов об из­мен­чи­вом син­так­си­се. При пе­ре­хо­де от Qt 4.7 к Qt 4.7.1 син­так­сис QML был несколь­ко пре­об­ра­зо­ван. На­при­мер, в вер­сии 4.7 в на­ча­ле про­грам­мы вме­сто «import QtQuick 1.0» мы долж­ны пи­сать «import Qt 4.7». По­сколь­ку я ве­рю, что из­менения, про­изо­шед­шие при пе­ре­хо­де от Qt 4.7 к Qt 4.7.1, от­ра­жа­ют дальней­шие уст­рем­ления раз­ра­бот­чи­ков, я бу­ду поль­зо­вать­ся син­так­си­сом Qt 4.7.1. А вот в са­мой до­ку­мен­та­ции по Qt все еще мож­но встре­тить при­ме­ры, ис­поль­зую­щие ста­рый син­так­сис. Будь­те вни­ма­тель­ны!

Итак, пер­вая стро­ка про­грам­мы QML 

import QtQuick 1.0

ука­зы­ва­ет, где хра­нят­ся оп­ре­де­ления ис­поль­зуе­мых в про­грам­ме струк­тур. Ес­ли вы поль­зуе­тесь Qt 4.7, эта стро­ка долж­на вы­гля­деть ина­че, о чем бы­ло ска­за­но вы­ше. Да­лее сле­ду­ет корневой объ­ект на­шей про­грам­мы. Как и в HTML, и в XML эле­мен­ты QML об­ра­зу­ют ие­рар­хи­че­­ские струк­ту­ры. В об­щем ви­де они имеют такой вид: 

ОБЪЕКТ {
 ОБЪЕКТ {
  …
 }
 …
}

В рас­смот­рен­ном вы­ше при­ме­ре объ­ект Rectangle (ко­рень ие­рар­хии) вклю­ча­ет до­черний объ­ект Text, пред­на­зна­чен­ный для вы­во­да тек­ста. Но это не все. По­ми­мо до­черних объ­ек­тов, у эле­мен­тов язы­ка QML (так же как у тэ­гов HTML) име­ют­ся па­ра­мет­ры (их еще на­зы­ва­ют свой­ст­ва­ми). Как вы мо­же­те ви­деть, для эле­мен­та Rectangle за­да­ют­ся та­кие па­ра­мет­ры, как ши­ри­на, вы­со­та и цвет. Кро­ме то­го, у объ­ек­та Rectangle есть па­ра­метр id, ко­то­рый по­зво­ля­ет про­грам­ме QML от­ли­чать один объ­ект Rectangle от дру­го­го. Этот па­ра­метр не яв­ля­ет­ся обя­за­тель­ным, и его мож­но опустить, ес­ли дру­гие час­ти про­грам­мы не ссы­ла­ют­ся на дан­ный кон­крет­ный объ­ект, од­на­ко в на­шем слу­чае он не­об­хо­дим. Рас­смот­рим стро­ку 

anchors.horizontalCenter: page.horizontalCenter

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

Да­лее офи­ци­аль­ный ту­то­ри­ал QML ре­ко­мен­ду­ет со­хранить текст в фай­ле с рас­ши­рением .qml и вы­полнить его в про­грам­ме qmlviewer. Я не бу­ду при­во­дить эк­ран­ный снимок то­го, что вы там уви­ди­те (ско­рее все­го, вы и са­ми уже до­га­да­лись).

На QML мож­но взгля­нуть и ина­че – а имен­но, как на язык сце­на­ри­ев для QGraphicsView. Дей­ст­ви­тель­но, на сто­роне про­грам­мы Qt важ­ную роль в ра­бо­те QML иг­ра­ет класс QDeclarativeView, ко­то­рый яв­ля­ет­ся по­том­ком клас­са QGraphicsView. Та­ким об­ра­зом, мы име­ем раз­ви­тие тех­но­ло­гии Graphics View Framework, про ко­то­рую я пи­сал когда-то, что од­но из ее пред­на­зна­чений – по­строение слож­ных гра­фи­че­­ских ин­тер­фей­сов. QML мож­но ис­поль­зо­вать и для на­пи­сания сце­на­ри­ев для объ­ек­тов QGraphicsScene. QtScript для это­го то­же по­дой­дет, с той разницей, что QtScript на­це­лен на ра­бо­ту с объ­ек­та­ми при­ло­жения Qt, ко­то­рые мо­гут соз­да­вать­ся и унич­то­жать­ся при­ло­жением, тогда как QML в боль­шей сте­пени ори­ен­ти­ро­ван на ра­бо­ту с гра­фи­че­­ски­­ми эле­мен­та­ми, соз­дан­ны­ми в опи­са­тель­ной час­ти са­мо­го язы­ка.

А мож­но ли вы­полнить про­стей­шую про­грам­му на QML из на­шей соб­ст­вен­ной про­грам­мы, на­пи­сан­ной в Qt? Ра­зу­ме­ет­ся! За­помните пра­ви­ло: все, что мо­жет по­ка­зать qmlviewer, мо­жем по­ка­зать и мы, хо­тя иногда для это­го при­дет­ся из­ряд­но по­тру­дить­ся. Во­об­ще на­до от­ме­тить, что на дан­ном эта­пе раз­ра­бот­чи­ки язы­ка QML со­сре­до­то­чи­лись в основ­ном на опи­сании са­мо­го язы­ка, и ре­сур­сов на эту те­му в Се­ти уже пре­доста­точ­но. Во­про­сы взаи­мо­дей­ст­вия QML и Qt осве­ща­ют­ся не так под­роб­но (ско­рее все­го, у раз­ра­бот­чи­ков про­сто не дош­ли ру­ки до это­го). Но мы по­про­бу­ем немно­го ис­пра­вить по­ло­жение дел, ведь глав­ный до­ку­мент – ис­ход­ные тек­сты ин­ст­ру­мен­тов Qt, пред­на­зна­чен­ных для ра­бо­ты с QML – у нас есть!

До­пустим, у нас есть ок­но Dialog, ко­то­рое яв­ля­ет­ся по­том­ком клас­са QDialog. До­ба­вить в него вид­жет, спо­соб­ный ото­бра­зить вы­вод опи­сан­ной вы­ше про­грам­мы QML, не про­сто, а очень про­сто. Вот кон­ст­рук­тор на­ше­го ок­на, в ко­то­ром до­бав­ля­ет­ся вид­жет: 

 Dialog::Dialog(QWidget *parent) :
  QDialog(parent),
  ui(new Ui::Dialog)
 {
  ui->setupUi(this);
  QDeclarativeView *qmlView = new QDeclarativeView;
  qmlView->setSource(QUrl::fromLocalFile(«/home/andrei/qml/helloworld.qml»));
  QVBoxLayout *layout = new QVBoxLayout(this);
  layout->addWidget(qmlView);
  qmlView->show();
 }

Как уже бы­ло ска­за­но, про­стей­шее сред­ст­во ото­бра­жения QML в Qt – класс QDeclarativeView, эк­зем­п­ляр ко­то­ро­го мы и соз­да­ем пер­вым де­лом (объ­ект qmlView). Да­лее нам сле­ду­ет за­гру­зить файл про­грам­мы QML в соз­дан­ный объ­ект; для это­го слу­жит ме­тод setSource, ко­то­ро­му ссыл­ка на файл про­грам­мы QML пе­ре­да­ет­ся в ви­де объ­ек­та QUrl. Данный факт на­ме­ка­ет нам на то, что в пер­спек­ти­ве мы бу­дем за­гру­жать QML-оберт­ки на­ших про­грамм Qt из Се­ти. Да­лее вид­жет qmlView до­бав­ля­ет­ся в ок­но обыч­ным для про­грамм­но соз­дан­ных вид­же­тов спо­со­бом. В ре­зуль­та­те в окне на­шей про­грам­мы поя­вит­ся то же, что вы уже ви­де­ли в окне, соз­дан­ном ути­ли­той qmlviewer (ра­зу­ме­ет­ся, путь к фай­лу .qml, про­пи­сан­ный в ар­гу­мен­те ме­то­да setSource(), вам на­до за­менить на свой соб­ст­вен­ный).

Для сбор­ки про­грам­мы, в файл про­ек­та (тот, что с рас­ши­ре­ни­ем .pro) не­об­хо­ди­мо до­ба­вить стро­ку 

QT += declarative

Эта стро­ка ука­жет, что в про­ект сле­ду­ет вклю­чить ссыл­ки на биб­лио­те­ки Qt, от­вет­ст­вен­ные за ра­бо­ту с QML. Опи­сание клас­са QDeclarativeView (един­ст­вен­но­го клас­са, пред­на­зна­чен­но­го для QML, ко­то­рый нам по­ка что по­на­до­бил­ся) хранит­ся в за­го­ло­воч­ном фай­ле <QtDeclarative/QDeclarativeView>.

На­ша про­грам­ма де­мон­ст­ри­ру­ет кар­тин­ку, соз­дан­ную с по­мо­щью про­стей­шей про­грам­мы QML, и вы мо­же­те по­экс­пе­ри­мен­ти­ро­вать с ко­дом фай­ла helloworld.qml и убе­дить­ся в том, что да­же су­ще­ст­вен­но из­менен­ные фай­лы бу­дут ото­бра­жать­ся в на­шей про­грам­ме точ­но так же (ина­че го­во­ря, мы дей­ст­ви­тель­но име­ем раз­де­ление движ­ка и ин­тер­фей­са). Од­на­ко пить шам­пан­ское по­ка ра­но, тем бо­лее что этот на­пи­ток пло­хо спо­соб­ст­ву­ет эф­фек­тив­но­му про­грам­ми­ро­ванию. Хо­тя на­ша про­грам­ма уме­ет по­ка­зы­вать кар­тин­ки, соз­дан­ные с по­мо­щью QML (че­ст­но го­во­ря, не все), эти кар­тин­ки и са­ма про­грам­ма никак не взаи­мо­дей­ст­ву­ют ме­ж­ду со­бой, а ведь в таком взаи­мо­дей­ст­вии и за­клю­ча­ет­ся смысл ис­поль­зо­вания QML.

Итак, пой­дем даль­ше. На­ша сле­дую­щая за­да­ча за­клю­ча­ет­ся в том, что­бы на­ла­дить взаи­мо­дей­ст­вие ме­ж­ду ко­дом Qt и QML, а это, в свою оче­редь, удобнее сде­лать, ес­ли код QML ин­те­рак­ти­вен, то есть мо­жет реа­ги­ро­вать на дей­ст­вия поль­зо­ва­те­ля.

Начнем с про­грам­мы на QML, бла­го она не на­мно­го сложнее пре­ды­ду­щей. Этот файл на­зы­ва­ет­ся interactive.qml. Как и все ос­таль­ные фай­лы ис­ход­ни­ков дан­но­го при­ме­ра, вы най­де­те его на дис­ке. 

 import QtQuick 1.0
  Rectangle {
    width: 120
    height: 40
    color: palette.background
 
  TextInput {
	 id: ti	
     anchors.centerIn: parent
     color: palette.foreground
     text: “blue”
  }
 
  MouseArea {
     anchors.fill: parent
     onClicked: {
	 palette.background = ti.text;
		 ti.focus = true;
     }
  }
 }

В этой про­грам­ме мы встре­ча­ем два но­вых объ­ек­та QML: MouseArea и TextInput. MouseArea, как и под­ска­зы­ва­ет на­зва­ние – это об­ласть, ко­то­рая реа­ги­ру­ет на со­бы­тия мы­ши. Стро­ка 

anchors.fill: parent

в те­ле эле­мен­та MouseArea оз­на­ча­ет, что дан­ный эле­мент дол­жен за­полнить все про­стран­ст­во сво­его ро­ди­тель­ско­го эле­мен­та, в дан­ном слу­чае – эле­мен­та Rectangle. Еще у эле­мен­та MouseArea есть ряд со­бы­тий, по­хо­жих на со­бы­тия объ­ек­та Qt. Об­ра­бот­чик со­бы­тия onClicked вы­зы­ва­ет­ся вся­кий раз, когда поль­зо­ва­тель щел­ка­ет мы­шью в об­лас­ти эле­мен­та MouseArea, то есть, в на­шем слу­чае, в об­лас­ти пря­мо­угольника Rectangle. Пре­ж­де чем раз­би­рать­ся, что де­ла­ет наш об­ра­бот­чик со­бы­тия, рас­смот­рим дру­гой но­вый эле­мент про­грам­мы – объ­ект TextInput. Этот эле­мент пред­на­зна­чен для вво­да стро­ки тек­ста (та­ким об­ра­зом, в на­шей про­грам­ме це­лых два объ­ек­та принима­ют ввод поль­зо­ва­те­ля). У объ­ек­та TextInput есть иден­ти­фи­ка­тор ti, ко­то­рый ис­поль­зу­ет­ся в об­ра­бот­чи­ке со­бы­тия onClicked. Бла­го­да­ря стро­ке 

ti.focus = true;

эле­мент TextInput по­лу­ча­ет фо­кус вво­да вся­кий раз, когда мы щел­ка­ем мы­шью в пря­мо­угольнике. Па­ра­метр text эле­мен­та TextInput со­дер­жит вве­ден­ный поль­зо­ва­те­лем текст. Кро­ме то­го, этот па­ра­метр мож­но ис­поль­зо­вать для на­чаль­но­го за­дания тек­ста, ко­то­рый бу­дет ото­бра­жать­ся по умол­чанию. Ос­та­лось изу­чить вол­шеб­ный объ­ект palette, ко­то­рый, су­дя по все­му, управ­ля­ет цве­том пря­мо­угольника (свой­ст­во palette.background) и тек­ста стро­ки вво­да (свой­ст­во palette.foreground).

Из­на­чаль­но эле­мент вво­да со­дер­жит текст «blue», и имен­но это зна­чение бу­дет при­свое­но свой­ст­ву palette.background при щелч­ке мы­шью. В ре­зуль­та­те цвет пря­мо­угольника станет синим. А цвет тек­ста станет жел­тым (до­полнитель­ным к синему до бе­ло­го). Так ра­бо­та­ет объ­ект palette. Ес­ли в стро­ке тек­ста вы вве­де­те yellow, то по­сле щелч­ка мы­шью уви­ди­те, как текст и пря­мо­угольник «по­ме­ня­ют­ся» цве­та­ми. Мо­же­те по­экс­пе­ри­мен­ти­ро­вать и с дру­ги­ми со­че­тания­ми, уч­тя при этом, что нуж­но вво­дить на­звания цве­тов, при­ня­тые в QML. А от­ку­да взял­ся этот объ­ект palette? Он не яв­ля­ет­ся ча­стью QML, а соз­дан qmltest, про­грам­мой Qt, ис­ход­ные тек­сты ко­то­рой вы най­де­те на дис­ке. Глав­ное до­полнение на­шей про­грам­мы Qt по сравнению с пре­ды­ду­щей – класс CustomPalette. Вот его объ­яв­ле­ние (файл palette.h): 

 class CustomPalette : public QObject
 {
   Q_OBJECT
   Q_PROPERTY(QColor background READ background WRITE setBackground NOTIFY backgroundChanged)
   Q_PROPERTY(QColor foreground READ foreground WRITE setForeground NOTIFY foregroundChanged)
 public:
   CustomPalette();
   QColor background() const;
   void setBackground(const QColor &c);
   QColor foreground() const;
   void setForeground(const QColor &c);
 signals:
   void foregroundChanged();
   void backgroundChanged();
 private:
   QColor m_background;
   QColor m_foreground;
 };

Как мы ви­дим, этот класс объ­яв­ля­ет два свой­ст­ва: background и foreground. Свой­ст­ва, объ­яв­лен­ные с по­мо­щью мак­ро­са Q_PROPERTY(), не име­ют осо­бо­го смыс­ла для про­грам­мы, на­пи­сан­ной на C++, за­то они очень по­лез­ны, когда объ­ек­ты Qt взаи­мо­дей­ст­ву­ют с ко­дом, на­пи­сан­ном на дру­гих язы­ках, в том чис­ле и на QML.

Что про­ис­хо­дит в про­грам­ме Qt, когда мы при­сваи­ва­ем зна­чение свой­ст­ву background? Вы­зы­ва­ет­ся ме­тод setBackground(), ко­то­рый, как вы мо­же­те убе­дить­ся, оз­на­ко­мив­шись с реа­ли­за­ци­ей клас­са (файл palette.cpp), при­сваи­ва­ет но­вое зна­чение пе­ре­мен­ной m_background; так что при чтении свой­ст­ва background, за ко­то­рое от­ве­ча­ет ме­тод background(), оно бу­дет воз­вра­ще­но. Да­лее ме­тод setBackground() ин­вер­ти­ру­ет по­лу­чен­ный цвет и при­сваи­ва­ет ин­вер­ти­ро­ван­ное зна­чение пе­ре­мен­ной m_foreground, так что те­перь свой­ст­во foreground вернет зна­чение, до­пол­няю­щее background до бе­ло­го.

В кон­це ме­тод setBackground() эми­ти­ру­ет два сиг­на­ла: backgroundChanged() и foregroundChanged(). Об­ра­ти­те внимание, что в са­мой про­грам­ме Qt об­ра­бот­чи­ков для этих сиг­на­лов не пре­ду­смот­ре­но. Де­ло в том, что эти сиг­на­лы пред­на­зна­че­ны для про­грам­мы QML. Они долж­ны опо­вес­тить со­от­вет­ст­вую­щие эле­мен­ты про­грам­мы о том, что цве­та из­менились. Имен­но по­это­му име­на этих сиг­на­лов сто­ят по­сле клю­че­во­го сло­ва NOTIFY мак­ро­са Q_PROPERTY(). Что­бы по­нять, как это ра­бо­та­ет, вернем­ся к опи­санию объ­ек­та Rectangle. Стро­ка 

color: palette.background

ука­зы­ва­ет на то, что зна­чение цве­та этот объ­ект дол­жен по­лу­чать из свой­ст­ва palette.background, и, бла­го­да­ря на­ли­чию сиг­на­ла backgroundChanged(), это бу­дет про­ис­хо­дить ав­то­ма­ти­че­­ски вся­кий раз, когда свой­ст­ву palette.background бу­дет при­свое­но но­вое зна­чение. Точ­но так же бу­дет вес­ти се­бя и свой­ст­во palette.foreground.

Об­ра­ти­те внимание так­же на то, что хо­тя в про­грам­ме QML мы ис­поль­зу­ем тек­сто­вые обо­зна­чения цве­тов, свой­ст­ва клас­са CustomPalette опе­ри­ру­ют зна­чения­ми QColor. Впро­чем, класс QColor об­ла­да­ет сред­ст­ва­ми для кон­вер­та­ции тек­сто­вых обо­зна­чений цве­тов в дру­гие их пред­став­ления, так что ниче­го осо­бен­но­го тут нет. Вот, соб­ст­вен­но го­во­ря, и вся ма­гия на­шей про­грам­мы. Ос­та­лось свя­зать объ­ект клас­са CustomPalette с объ­ек­том palette про­грам­мы QML. Для на­ча­ла за­гру­зим про­грам­му в объ­ект qmlView. Тут для нас нет ниче­го но­во­го. Но нам необ­хо­ди­мо пре­доста­вить про­грам­ме QML доступ к объ­ек­ту клас­са CustomPalette.

Для понимания то­го, как это про­ис­хо­дит, необ­хо­ди­мо немно­го уг­лу­бить­ся в ие­рар­хию клас­сов Qt, от­ве­чаю­щих за взаи­мо­дей­ст­вие с QML. Как бы­ло ска­за­но вы­ше, про­грам­ма на QML пред­став­ля­ет со­бой ие­рар­хию объ­ек­тов, та­ких как Rectangle или TextInput. При за­груз­ке про­грам­мы QML в объ­ект QDeclarativeView для ка­ж­до­го объ­ек­та QML соз­да­ет­ся его «пред­ста­ви­тель» – объ­ект QDeclarativeContext. Эти объ­ек­ты об­ра­зу­ют ие­рар­хию, со­от­вет­ст­вую­щую ие­рар­хии объ­ек­тов QML, и пред­на­зна­ча­ют­ся, вы пра­виль­но по­ня­ли, для об­ме­на дан­ны­ми ме­ж­ду про­грам­ма­ми (точнее, ме­ж­ду со­от­вет­ст­вую­щи­ми объ­ек­та­ми) QML и Qt. Корнево­му объ­ек­ту про­грам­мы QML (в на­шем слу­чае – объ­ек­ту Rectangle) со­от­вет­ст­ву­ет объ­ект QDeclarativeContext, ука­за­тель на ко­то­рый воз­вра­ща­ет ме­тод rootContext() объ­ек­та qmlView клас­са QDeclarativeView. Дан­ные, ко­то­рые мы пе­ре­да­ем это­му объ­ек­ту, ста­но­вят­ся ви­ди­мы­ми для корнево­го ком­понен­та про­грам­мы QML и по умол­чанию для всех его до­чер­них ком­по­нен­тов. Та­ким об­ра­зом, строч­ка 

qmlView->rootContext()->setContextProperty(“palette”, new CustomPalette);

из фай­ла qmltest.cpp за­да­ет зна­чение свой­ст­ва (па­ра­мет­ра) palette объ­ек­та Rectangle. Ина­че этот па­ра­метр про­сто не имел бы смыс­ла. Об­ра­ти­те внимание, что до­черние эле­мен­ты на­сле­ду­ют свой­ст­во palette. Что­бы свя­зать все вы­ше ска­зан­ное в еди­ное це­лое, рас­смот­рим текст кон­ст­рук­то­ра клас­са qmltest (файл qmltest.cpp, ко­то­рый вы най­де­те на дис­ке): 


 qmltest::qmltest(QWidget *parent, Qt::WFlags flags)
	 : QDialog(parent, flags)
 {
	 ui.setupUi(this);
 QDeclarativeView *qmlView = new QDeclarativeView;
 qmlView->setSource(QUrl::fromLocalFile(“/home/andrei/qml/interactive.qml”));
	 qmlView->rootContext()->setContextProperty(“palette”,new CustomPalette);
 QVBoxLayout *layout = new QVBoxLayout(this);
 layout->addWidget(qmlView);
 }

Не за­будь­те, опять же, сменить путь к фай­лу interactive.qml на свой соб­ст­вен­ный. Ре­зуль­тат про­ил­лю­ст­ри­ро­ван рис. 4.

По­сколь­ку на­ша про­грам­ма косвен­но взаи­мо­дей­ст­ву­ет с объ­ек­том клас­са QDeclarativeContext, в нее необ­хо­ди­мо до­ба­вить за­го­ло­воч­ный файл <QtDeclarative / QDeclarativeContext>.

Тех­но­ло­гия QML толь­ко на­чи­на­ет свое раз­ви­тие, и мно­гие ба­зо­вые ве­щи все еще при­хо­дит­ся вы­пол­нять вруч­ную. Но я еще пом­ню вре­ме­на, когда об ин­тег­ри­ро­ван­ной сре­де ви­зу­аль­ной раз­ра­бот­ки для Qt на­по­до­бие Delphi мож­но бы­ло толь­ко меч­тать, а те­перь мы име­ем Qt Creator, ко­то­рый не толь­ко ни в чем не усту­па­ет Delphi IDE, но, по-мо­ему, пре­восхо­дит ее. Так что по­яв­ление ви­зу­аль­но­го ин­ст­ру­мен­та для ра­бо­ты с QML, я ду­маю, не за го­ра­ми.

Источник — «http://wiki.linuxformat.ru/wiki/index.php?title=LXF142:QML&oldid=14250»
Персональные инструменты
купить
подписаться
Яндекс.Метрика