QML – moderní uživatelská rozhraní v Qt (3)

10. 4. 2012 | Jaroslav Řezník

Články - QML – moderní uživatelská rozhraní v Qt (3)  

Doposud jsme se v rámci seriálu o vývoji mobilních aplikací v Qt Quick seznamovali s vývojovým prostředím (Qt SDK a Qt Creatorem) a předvedli jsme si, jak si přeložit svou první aplikaci v QML. O tomhle zajímavém deklarativním jazyce jsme si pak podrobněji pověděli v druhé části seriálu. Probrali jsme strukturu QML a aplikací, do krve se nám snad i dostala syntaxe jazyka a máme i představu, kam Qt Quick patří v rámci frameworku Qt. V následujících dílech budeme pokračovat v rozšiřování našich znalostí a v tomto se zaměříme na komponenty v QML.

Obsah

• Komponenty
• Vlastní komponenty
  • Tlačítko
• Závěr

Komponenty

A komponenty nás budou provázet taky celým článkem – pro začátek naše vlastní (Qt Components se bude podrobněji věnovat minimálně jeden celý díl seriálu) a výrazně nám usnadní tvorbu našich aplikací. Zpřehlední nám zdrojový kód, který by se jinak stal dlouhou nudlí skládající se z kopírování a vkládání kusů kódu. Tím se také tyto části kódu stanou znovupoužitelné pro použití jak v rámci aplikace, tak i dalších následujících projektů. V případě uvolnění pod open source licencí pak mohou posloužit i ostatním vývojářům v naší rozrůstající se komunitě. QML je jako jazyk navíc velmi vhodný k rychlému prototypování návrhu aplikace a následný refaktoring aplikace do komponent se udělá v podstatě skoro sám. Vývojáře tak k němu přímo vybízí a dochází k symbióze návrhu a implementace aplikace.

Vlastní komponenty

Komponenty můžeme nadefinovat jak ve vlastním souboru, tak i v rámci již existujícího QML zdrojového kódu. První případ je vlastně klasický QML dokument, který obsahuje vyžadované importy (minimálně QtQuick) a jeden prvek nejvyšší úrovně (často se jedná o element Item představený v předchozí části seriálu) s popisem vlastností a chování komponenty. Soubor s definicí komponenty musí začínat velkým písmenem s příponou .qml. Tímto jménem se pak následně ve zdrojovém kódu aplikace na komponentu odkazujeme. Druhou možností je pak vytvoření nové komponenty právě v rámci jiného QML dokumentu (či komponenty). Pro tento případ máme k dispozici element Component. Hojně se využívá pro oddělení menší části kódu do vlastní komponenty bez nutnosti vytvářet bokem nový soubor a to především pro opakující se prvky. Například jako delegát pro opakovače (repeatery) a ListView element, jak jsme si bez vědomí znalosti komponent ukázali v minulém dílu. Opět především z důvodu přehlednosti zdrojových kódů.

V následujícím příkladu si napíšeme dvě komponenty – čtverec a obdélník a ty následně vytvoříme pomocí elementu Loader do jednoho řádku (element Row), kde se taky zobrazí. Všimněte si, že obě komponenty mají vlastní id a to je taky jediná vlastnost, která jde v rámci elementu Component nejvyšší úrovně nastavit. O Loaderu a dalších možnostech, jak vytvářet komponenty dynamicky, si povíme v jednom z následujících dílů seriálu o pokročilých vlastnostech QML.

import QtQuick 1.0

Rectangle {
    width: 300
    height: 100

    Component {
        id: ctverec
 
        Rectangle { width: 100; height: 100; color: "blue" }
    }

    Component {
        id: obdelnik
 
        Rectangle { width: 200; height: 100; color: "red" }
    }
    
    Row {
        anchors.fill: parent
        
        Loader { sourceComponent: ctverec }
        Loader { sourceComponent: obdelnik }
    }
}

Využití v rámci delegátu si představíme na závěr článku v rámci naší první malé, ale skutečné aplikace. Jaká to bude, si zatím necháme jako tajemství. Nechte se překvapit!

Tlačítko

K tvorbě skutečného uživatelského rozhraní jsou ovšem potřeba přece jenom složitější komponenty než jen výše předvedený čtverec a obdélník. Mají definované rozličné vlastnosti, složitější chování a případně i reagují na akce uživatele. A čisté Qt Quick nechává tuto práci na vývojářích. Protože kromě základních elementů představených v minulém dílu seriálu k jejich obvyklému překvapení neobsahuje žádné elementy/komponenty pro tvorbu uživatelských rozhraní. My si teď ukážeme jak takovou komponentu, která bude vypadat tak, jak jsme si popsali výše, vytvoříme. Tlačítko je jeden z nejzákladnějších prvků uživatelských rozhraní a bude tedy první komponentou, kterou si navrhneme.

Začneme vytvořením nového souboru (v Qt Creatoru buď pomocí menu File -> New File or Project nebo kliknutím pravého tlačítka ve stromové struktuře projektu a výběrem položky Add New, následně vybereme QML a QML File), který pojmenujeme Button.qml. Qt Creator nám pak předgeneruje šablonu, kterou budeme dále rozvíjet.

import QtQuick 1.1

Rectangle {
    id: container
    width: 100; height: 40; radius: 5

Pro naše tlačítko použijeme jako výchozí prvek klasický obdélník (Rectangle) a nastavíme si jeho id na container (bude sloužit jako kontejner pro další prvky). Pomocí vlastnosti radius pak naše tlačítko trošku zjemníme a zakulatíme jeho rohy.

    property color buttonColor: "red"
    property alias buttonText: label.text

    signal clicked

V následující části kódu se dostáváme k první zajímavé a pro naše tlačítko nejdůležitější části. Definici jeho vlastností a signálu jako reakci na stisk tlačítka. Na prvním řádku je klasická definice vlastnosti – pomocí klíčového slova property, následovaného typem vlastnosti a názvem vlastnosti. Za dvojtečkou se nachází výchozí hodnota vlastnosti – v našem případě tedy (pokud neuvedeme jinou barvu) bude tlačítko červené. Druhá vlastnost je takzvaný alias na vlastnost jiného prvku. Místo typu se za klíčovým slovem property objevuje další klíčkové slovo alias a za dvojtečkou se pak nachází odkaz na zástupnou vlastnost jiného prvku. Čtení a zápis na takto zástupné vlastnosti se automaticky projeví na čtení a zápisu v odkazované vlastnosti daného prvku. V našem případě prvku label a jeho vlastnosti text (ten si nadefinujeme později).

Dále nás zajímá definice signálu – v našem případě bez parametrů, které je možné jinak uvést v závorce (každý parametr musí být nějakého typu).

    gradient: Gradient {
        GradientStop { position: 0.0; color: buttonColor }
        GradientStop { position: 1.0; color: Qt.darker(buttonColor, 2.0) }
    }

Pro pozadí tlačítka (tedy výplni prvku container) použijeme barevný přechod z barvy určené naší vlastností buttonColor na její tmavší variantu – za použítí vestavěné funkce darker objektu Qt. Pokud by nám stačila jednobarevná výplň, mohli bychom opět na barvu pozadí použít alias vlastnosti.

    Text {
        id: label
        anchors.centerIn: parent; color: "white"
    }

A dostáváme se k textu tlačítka, na který jsme si výše připravili alias buttonText. Pro naše účely tedy stačí nastavit id na stejnou hodnotu jako v aliasu (label). Všimněte si, že vůbec nenastavujeme hodnotu vlastnosti text. Ta se nastaví právě přes alias. Pouze vycentrujeme text na střed tlačítka a nastavíme jeho barvu na bílou.

    MouseArea {
        anchors.fill: parent

        onClicked: container.clicked()
    }
}

Zbývá poslední krok – naučit naše tlačítko naslouchat příkazům uživatele. Opět použijeme již představený element MouseArea, který roztáhneme na celé naše tlačítko (vlastnost anchors.fill). A nadefinujeme reakci na jeho signál onClicked. Tedy signál, který reaguje na stisk tlačítka myši (či dotek na dotykovém zařízení) a jako akci vyšleme náš vlastní signál clicked bez parametrů.

Tímto jsme si vytvořili naše první komponentu – tlačítko. Nezbývá než se potěšit výsledkem a tlačítko použít v aplikaci. První tlačítko bude ve výchozí podobě červené (vizte výchozí vlastnost) a druhému nastavíme vlastnost buttonColor na zelenou barvu a bude tedy zelené. Při kliknutí se do konzole vypíše buď „Ahoj“ nebo „Hi“ v závislosti na stisknutém tlačítku.

import QtQuick 1.1

Row {
    width: 210; height: 40; spacing: 5

    Button { buttonText: "Ahoj"; onClicked: console.log("Ahoj") }
    Button { buttonText: "Hi"; buttonColor: "Green"; onClicked: console.log("Hi") }
}

Závěr

V následujícím dílu seriálu se podíváme na funkcionalitu, která dělá moderní uživatelské rozhraní (a to někdy k nelibosti některých uživatelů) moderní – na animace. Ty nás pak přivedou ke stavům a přechodům.

Seriál QML – moderní uživatelská rozhraní v Qt (dílů: 3)

První díl: QML – moderní uživatelská rozhraní v Qt (1), poslední díl: QML – moderní uživatelská rozhraní v Qt (3).
Předchozí díl: QML – moderní uživatelská rozhraní v Qt (2)

Diskuse k tomuto článku

[Pepa]

http://en.wikipedia.org/wiki/Qt_%28framework%29 "...Nokia will remain the main development force behind the framework." NOKIA=MICROSOFT

[Rezza]

Tak oni se naopak snazi ukazat, ze Nokia tam nemusi byt ten hlavni :)

[little.owl]

Nicmene v realu drzi cely projekt pod krkem, bez ohledu na dohody s KDE a LGPL licenci.

[Rezza]

Jakym zpusobem? Ano, kdyz prestanou na Qt delat, tak bude asi pro komunitu tezke spravovat takovy obri balik, ale...

[Saljack]

Ale zase by se asi vyházela podpora pro mrtvý Symbian a naopak by se začlenil Android.

[Rezza]

Z Qt 5 se podpora Symbianu už vyházela, k nelibosti komunity, hh.

[Saljack]

Tak on je Symbian z meho pohledu naprosto mrtvi a nezajimavi pro budoucnost. Jedine co ho v soucasnosti drzelo nad vodou bylo prave Qt. Je to celkem skoda, ze to Nokia takhle posrala, protoze moje E51 byla super.

[little.owl]

Ano, kdyz prestanou na Qt delat, tak bude asi pro komunitu tezke spravovat takovy obri balik, ale...

To je v podstate to, co jsem myslel.

Obavam se, ze ciste komunitne spravovane Qt bez podpory komercni firmy s placenymi vyvojari na pozadi, urcujici nejaky smer a garantujici predvidatelny rozvoj, bude uplne jiny projekt a rada firem kupujicich licencovanou verzi zacne hledat jinou cestu.

Nemyslim, ze Nokia nebude Qt rozvijet, otazka zni jak rychle - tedy kolik do toho investuje - a kam to bude smerovat, pomaly nejisty rozvoj je ta nejhorsi cesta a uprimne pokud vlastnikem bude Nokia s nejasnou motivaci, bude tato otazka stale ve vzduchu.

V soucasne dobe bych do noveho produktu postaveneho na Qt jiz nesel, lepsi napsat v cistem C++, platforme zavisle casti izolovat a resit nativne.

[__dark__]

V soucasne dobe bych do noveho produktu postaveneho na Qt jiz nesel, lepsi napsat v cistem C++, platforme zavisle casti izolovat a resit nativne.

Platforme zavisla cast je v dnesni dobe skoro vsechno, takze dobrou chut

[little.owl]

Zalezi na produktu, v nasi codebase je to mene nez 15%, v podstate jen GUI, vlakna a souvisejici synchronizace a sitove sockety.

[Saljack]

A to ti příjde málo? To jako, když budete chtít vyvinout multiplatformní aplikaci, tak tam vložíte vlastní vrstvu, která bude pro každou platformu řešit tyto problémy? No to mi opravdu přijde na hlavu, když Qt funguje skoro na všech majoritních platformách.

[Lol Phirae]

Ne, úplně jsem z toho "pokroku" zvlhnul!!!

[little.owl]

Ano, nehraje to pro nas zas tak velkou roli, GUI je donkey job a s Qt na OSX jsme meli spise problemy.

Qt funguje skoro na všech majoritních platformách.

To je ono, skoro funguje.

[Čtenář]

V soucasne dobe bych do noveho produktu postaveneho na Qt jiz nesel,

no každý má svůj názor

First look: Qt 5 makes JavaScript a first-class citizen for app development

http://arstechnica.com/business/news/2012/04/an-in-depth-look-at-qt-5-making-javascript-a-first-class-citizen-for-native-cross-platform-developme.ars

[little.owl]

Tak od Javascriptu na desktop aplikace se budu drzet dale.

[Rezza]

Tak komercni vyvoj dela Digia, necekam, 4.8.1 delali prakticky oni, vcetne release. Ted je aktualne mozna horsi ten prekotny vyvoj :) Motivace Nokie jsou mobilni aplikace, coz se trosku rozchazi s tim, co potrebuji lidi delajici na desktop aplikacich.

Doufejme, ze to jeste pujde. Delat multiplatformni framework neni easy, Gtk 4 co jsem slysel hodne omezi podporu ne-linux platforem, protoze proste nemaji lidi...

[little.owl]

Tak komercni vyvoj dela Digia, necekam, 4.8.1 delali prakticky oni, vcetne release.

Vim, mame od nich Qt Commercial SDK, pouzivany na Ångström, tam to budem pouzivat asi dal, ne vsak na desktopu.

Motivace Nokie jsou mobilni aplikace

A postavene na Qt?

Gtk 4 co jsem slysel hodne omezi podporu ne-linux platforem,

Gtk4 ? Co se o tom vi?

[Rezza]

Postavene na Qt - ano, proc jinak by to Nokia delala. Jinak by cele Qt dala pryc uz davno. Next billion strategy. Qt 5 je vlastne z duvodu mobilu, jinak by asi nebylo potreba - hlavne deleni na mensi casti. Nedavno dokonce rikal Lars Knoll (na FOSDEMu), ze je to kvuli footprintu jeste porad malo rozdelene.

O Gtk 4 jsem slysel na Desktop Summitu od Mathiase Clasena. Proste nemaji lidi, co by delali na jinych platformach nez Linuxu, vyvojare soucasne to nezajima, takze... Asi nezrusi uplne podporu, jen bude hodne osekana, pripadne bokem. Vic nevim.

[Saljack]

To ale GTK odsouvá na druhou kolej.

[Lol Phirae]

Na druhou kolej přijel osobní vlak z Vizovic!

[little.owl]

Postavene na Qt - ano, proc jinak by to Nokia delala. Jinak by cele Qt dala pryc uz davno.

Ze setrvacnosti, backup plan? I kdyz vim, ze to interne v Berline pouzivaji.

Nedavno dokonce rikal Lars Knoll (na FOSDEMu), ze je to kvuli footprintu jeste porad malo rozdelene.

To chvalim, footprint a nutna velikost flashe byl zatim jeden z hlavnich duvodu proc Qt nepouzit.

Asi nezrusi uplne podporu, jen bude hodne osekana, pripadne bokem.

No dobre .... ale zrusit GIMP pro Windows?! ...

[QML]

Někdo čeká, že v tomto VÁŽNĚ bude někdo dělat např. i desktop aplikaci ? Dlouho jsem používal QT4, teď začínám nový projekt a i s příchodem použitelného kódu v QT5 jsem se rozhodoval, jestli nová cesta nastavená Nokií ohledně QML nebude lepší. Představoval jsem si, že bude možné vytvořit plně funkční desktopovou aplikaci s použitím QT Widgets, ale s ksichtem a dalšími prvky definovanými pomocí QML. Buď nevím jak na to, nebo to prostě nejde ani v QtQuick 2.0

V QML se musí definovat i to poslední tlačítko. Což ZASE povede k tomu, že vzhled a UX obecně bude aplikaci od aplikace naprosto odlišný. To někoho vážně nenapadlo dodat tam ekvivalent QT Widgets pro použití v rámci QML ? Ono to někoho i napadlo, viděl jsem nějaké video staré rok a něco, ale očividně se to do Qt Quick 2.0 nepropašovalo.

Celé jsem to buď nepochopil, nebo furt nemůžu najít tu killer featuru, která dělá z QML něco použitelného...

[Saljack]

V tom je právě ten problém. Protože v základu QML nemá vůbec, ale vůbec nic. Existují sice pochybné komponenty viz: http://labs.qt.nokia.com/2011/03/10/qml-components-for-desktop/ . Ale proč tohle nedali do základu mi naprosto nedochází a dokud to tam nebude nemá to podle mě velkou šanci na prosazení. Aspoň ten Button, Window, Dialog atp. tam mohli být.

[LKG]

Ano, přesně tohle jsem myslel - QML components for desktop je to video o kterém jsem mluvil. Když si představím, že by si každý zbastlil ty věci po svém, tak to je prostě regulérní peklo.

[Rezza]

V Qt 5 dokonce bude rozdelene i QML jako deklarativni jazyk od jeho casti, co vubec neco umi zobrazit. Proste ber QML jako jazyk, na C++ si nikdo nestezuje, ze nema v sobe tlacitka, pak o uroven vys Qt Quick 2 - zakladni knihovna na kresleni na QML a nad tim komponenty. Je to tak i ve vetsine jinych projektu (Clutter a MX) atd.

[s0]

Celé jsem to buď nepochopil, nebo furt nemůžu najít tu killer featuru, která dělá z QML něco použitelného...

přesně tohle řeším už pekelně dlouho.

Navíc mám pocit, že jakmile někde uvedou, že "s tímhle budou skvělě pracovat designéři", tak je to automaticky krok do slepé uličky - vizte např. Zope (DTML vs. TPL), všelijaké PHP templaty, Django templaty... vždycky se s tím serou stejní lidé jako předtím, akorát, že je tam vrstva navíc.

[LKG]

Ono mi to občas přijde celé takové podivné. Tlačí se technologie, která umí v základu zobrazit pár základních tvarů, byť "dobře" konfigurovatelných. Hlavně že to umí částicové efekty. To je fakt potřeba.

Když se ohlédnu za QT jako takovou, tak se musí nechat že knihovna je to dobrá, ale přijde mi, že všechny tyhle věci co mají nějakým způsobem pomoct, jsou vyřešené tím nejhorším možným způsobem. Když se to používá jako čistě C++ knihovna bez udělátek typu Designer a jeho .ui soubory, tak se s tím dá solidně pracovat.

[pjoter]

Ono mi to občas přijde celé takové podivné. Tlačí se technologie, která umí v základu zobrazit pár základních tvarů, byť "dobře" konfigurovatelných. Hlavně že to umí částicové efekty. To je fakt potřeba.

Nevim no, videl jsi treba QtMediaHub? Pokud si delal nejake podobne UI v C/C++ tak asi vis jaky to je maras, nemluve o tom, jaky maras to je aby to dobre vypadalo a chovalo se to stejne na Win/Linux/OSX. Pomoci QML se da udelat celkem zabijacke UI skoro bez prace a vicemene ciste, temer bez chyb (chyby jsou vetsinou v C/C++ backendu, v UI minimum). Proto QML pouzivam a to UX bytostne nesnasim, konzole-ole! :)

Ano, tento tutorial sice ukazuje zakladni kameny a neodkryva naplno moznosti QML, ale to je holt udel tutorialu. Kazdopadne kdo ma predstavivost, tak i z techto zakladu pochopi jak mocny nastroj QML je. Pokud ne, je to ciste jeho problem :)

[Saljack]

V tom je právě ten problém vše vypadá jako omalovanky a a dokážeš si představit jaké to bude, když to bude takhle dělat každý?

[mirec]

Uiiii windows ;)

[Rezza]

Bude to, ale jak sami rikaji, nejdrive v 5.1, spise v 5.2 a pozdeji. Zatim pro desktop plati Qt Widgets jako hlavni.

[Saljack]

Pak je podle mě pěkná blbost vydávat Qt 5, v kterém by měli být Qt Widgets jako "zastaralé" a nebo poté vydat rovnou Qt 6. Prostě v tom nadělají takový bordel.

[Rezza]

Srovnejs si Qt 4.0 a Qt 4.8 co vse se tam objevilo a zmenilo. Pokud by to byla takhle, tak dnes mame po vzorech Chrome a Firefoxu Qt 12 :D

[spam]

I felt very happy while reading this site. This was really very informative site for me. I really liked it Click this

[spam]

I really loved it here but are there any recent updates? Thanks www.paintersduluth.com

[spam]

Great site thanks admin. More power greensboro wedding videographer

[spam]

Awesome! Learned alot thanks so much keep posting more. cheap fence