Getting Started Programming with QML/hu

~Az alant olvasható leírás rev. 0.2 verziót visel, ezzel is jelezve, hogy a jövőben szeretnénk még csiszolni rajta~ :)

Bevezetés a QML programozásba

Üdvözöllek a QML világában, mely egy UI leíró nyelv! Ebben a bevezetőben egy egyszerű szövegszerkesztő alkalmazást fogunk létrehozni a QML segítségével. Ezen útmutató olvasása után már készen fogsz állni, hogy kifejleszd a saját alkalmazásaidat a QML és a Qt keretrendszer segítségével.

Felhasználói felület létrehozása QML nyelven

Példa alkalmazásunk egy egyszerű szövegszerkesztő lesz, amely alkalmas egyszerű szövegfájlok megnyitására illetve alapvető szerkesztési műveletek elvégzésére. A leírás első részében a program felhasználói felületét tervezzük meg a QML leírónyelv segítségével. A második részben a fájlok betöltése és elmentése lesz implementálva C++ nyelven. A Qt "Meta-Object System":http://doc.qt.nokia.com/4.7/metaobjects.html segítségével a C++ függvényeket olyan tulajdonságokként ábrázolhatjuk, melyeket a QML elemek is képesek használni. QML és Qt C++ használatával hatékonyan szétválaszthatjuk a kezelői felület felépítését és a program logikáját.

p=. qml-texteditor5_editmenu.png

QML példakódunk futtatásához csupán adjuk meg argumentumként a "qmlviewer":http://doc.qt.nokia.com/4.7/qmlviewer.html programnak a QML fájlunkat. Ezen útmutató C++ része feltételezi, hogy az olvasó le tud fordítani egy Qt-ban írt programot.

Az útmutató fejezetei:

1. Nyomógomb és menü létrehozása
2. Menüsáv implementálása
3. Szövegszerkesztő létrehozása
4. A szövegszerkesztő küllemének megteremtése
5. QML kibővítése Qt C++ segítségével

Nyomógomb és menü létrehozása

Alapelemek – a gomb

Szövegszerkesztőnket egy gomb létrehozásával kezdjük. Ha funkcionálisan nézzük, akkor a gomb rendelkezik egy egér számára érzékeny területtel és egy felirattal. A gombok akkor hajtják végre a feladatokat, ha a felhasználó rájuk klikkel. QML-ben a legalapvetőbb vizuális elem a "Rectangle":http://doc.qt.nokia.com/4.7/qml-rectangle.html. A Rectangle elem tulajdonságokkal rendelkezik, hogy beállíthassunk az elem megjelenését és elhelyezkedését.

Először az import Qt 4.7 sor engedélyezi a qmlviewer eszköznek, hogy betöltse azokat a QML elemeket, melyeket később használni fogunk. Ennek a sornak szerepelnie kell minden QML fájlban! Figyeljük meg, hogy a Qt modulok verzióját az import utasítás már tartalmazza!

Ez az egyszerű Rectangle rendelkezik egy egyedi azonosítóval, simplebutton, amely az id tulajdonsághoz kötődik. A Rectangle elem tulajdonságaihoz értékeket rendelünk a tulajdonság kilistázásakor, ekkor a kettőspont után áll az érték. A mintakódban a grey (szürke) színt rendeltük a Rectangle color tulajdonságához. Hasonlóan járunk el a Rectangle width és height tulajdonságainak esetében.

A Text elem egy nem szerkeszthető szövegmező. Nevezzük el buttonlabel-ként ezt a Text elemet. A szövegmezőben lévő szöveget a Text tulajdonság segítségével módosíthatjuk. A feliratot a Rectangle tárolja és hogy középre igazítsuk, a Text elem anchors tuljadonságát a szülőjéhez rendeljük, ami itt most a simplebutton. Az anchor-ok (kapcsok) olykor más elemek anchor-jaihoz kötődnek, hogy leegyszerűsítsék az elrendezést.

Most mentsük el a kódot SimpleButton.qml néven. Futtassuk a qmlviewer-t a fájlunkat argumentumként megadva. Egy szürke téglalapot fogunk látni, benne a feliratunkkal.

A gombnyomás funkciójának implementálására használhatjuk a QML eseménykezelő metódusát. A QML esemény kezelése nagyon hasonlít a Qt signal and slot mechanizmusára. Példánkban az onClicked handlerben kezeljük le az eseményt.

Rectangle{
 id:simplebutton
 …

MouseArea{
 id: buttonMouseArea

anchors.fill: parent //anchor all sides of the mouse area to the rectangle’s anchors
 //onClicked handles valid mouse button clicks
 onClicked: console.log(buttonLabel.text + ” clicked” )
 }
 }

Létrehozunk egy "MouseArea":qml-mousearea.html elemet a simplebutton-on belül. A MouseArea elem meghatározza azt az interaktív területet, ahol érzékelni fogjuk majd az egérkattintásokat. Gombunk esetében az egész MouseArea-t a szülőjéhez kapcsoljuk, ami most a simplebutton. Az anchors.fill szintaktika is egy mód, hogy elérjünk egy bizonyos tulajdonságot (fill), az anchors tulajdonságokon belül. A QML kapocs alapú vázat használ, ahol az egyes elemek más elemekhez kapcsolhatók, így robosztus vázakat hozhatunk létre.

A MouseArea-nak sok jelfeldolgozója ún. handler-je van, amelyek a meghatározott MouseArea határain belül történő egér események hatására hívódnak meg. Ezek közül az egyik az onClicked, amely a gomb megnyomásakor hívódik meg, alapértelmezésben ez itt a bal gomb. Műveleteket is köthetünk az onClicked handler-jéhez. A példánkban, a console.log() szöveget ír a kimenetre, akárhányszor ráklikkelünk a MouseArea területére. A console.log() függvény egy nagyon hasznos eszköz hibakeresésre, segítségével bármit kiírathatunk a konzolba.

A SimpleButton.qml kódja már képes arra, hogy megjelenítsen egy gombot és szöveget írjon képernyőre klikkeléskor.

Rectangle {
 id: button
 …

property color buttonColor: “lightblue”
 property color onHoverColor: “gold”
 property color borderColor: “white”

signal buttonClick()
 onButtonClick: {
 console.log(buttonLabel.text + ” clicked” )
 }

MouseArea{
 id: buttonMouseArea
 onClicked: buttonClick()
 hoverEnabled: true
 onEntered: parent.border.color = onHoverColor
 onExited: parent.border.color = borderColor
 }

//determines the color of the button by using the conditional operator
 color: buttonMouseArea.pressed ? Qt.darker(buttonColor, 1.5) : buttonColor
 }

Egy teljesen működő gomb a Button.qml fájlban található. Ebben a leírásban szereplő kódrészlet mellőz néhány részletet, mert azokat már vagy tárgyaltuk az előzőekben vagy irreleváns a kód értelmezése szempontjából.

Egyedi tulajdonságokat a tulajdonság típus név szintaktikával tudunk deklarálni. Kódunkban a color típusú buttonColor tulajdonsághoz a „lightblue”-t rendeljük. A buttonColor később lesz használva egy kiegészítő műveletben, hogy meghatározzuk a gomb kitöltési színét. Megemlítendő, hogy értékadás az = jellel is történhet a kettőspont helyett. Az egyedi tulajdonságok lehetővé teszik, hogy belső elemek kívülről hozzáférhetőek legyenek, a Rectangle hatósugarán kívül is. A QML-nek megvannak a maga alaptípusai, mint az int, a real, a string, vagy az általános konténertípus a variant.

Színeket hozzáadva az onEntered és az onExited jelkezelőkhöz, a gomb szegélye sárgává fog válni, amikor az egér a gomb fölé ér, és visszaáll az eredeti színre, ha a kurzor távozik a területéről.

Egy buttonClick() signalt is deklarálunk a Button.qml-ben a signal neve elé tett signal kulcsszóval. Minden signal-nak automatikusan létrejön a handler-je, „on”-al kezdődő nevekkel. Így értelemszerűen az onButtonClicked a buttonClicked handler-je. Ezután az onButtonClicked-edet összekötjük egy művelettel, hogy az megfelelően működhessen. A mi gomb-példánkban egérkattintásra az onClicked handlerje szimplán meg fogja hívni az onButtonClick függvényt, mely megjelenít egy szöveget. Az onButtonClick lehetővé teszi, hogy külső objektumok könnyedén hozzáférjenek a Button klikkelési területéhez. Például egy elemnek több MouseArea deklarációja is van és a ButtonClick signal jobban el tudja végezni a megkülönböztetést a több MouseArea handler között.

Most már megvan az alaptudásunk, hogy implementáljunk olyan elemeket QML-ben, melyek képesek lekezelni alap egérműveleteket. Hozzunk létre egy Text feliratot egy Rectangle-ben, szabjuk testre a tulajdonságait és implementáljuk az egérmozgásokra válaszoló műveleteit. Ez az alapelv, hogy elemeket hozunk létre más elemeken belül, végig fogja kísérni a szövegszerkesztő programunkat. Ám ez a gomb haszontalan, amíg nem műveletek ellátására szolgáló komponensként használjuk. A következő részben létrehozunk egy menüt, mely több ilyen gombot is tartalmazni fog.

p=. qml-texteditor1_button

Menü létrehozása

Eddig a részig áttekintettük, hogyan hozzunk létre elemeket és kössünk hozzájuk műveleteket egy QML fájlon belül. Ebben a fejezetben megtanuljuk, hogyan importáljunk QML elemeket és hogyan használjuk fel ezeket a komponenseket újra, hogy újabb komponenseket hozzunk létre.

Egy menü egy lista tartalmát jeleníti meg, mindegyik elemnek megvan a lehetősége, hogy végrehajtson egy feladatot. QML-ben sokféleképpen hozhatunk létre menüket. Először egy, a gombokat tartalmazó menüt fogunk készíteni, melyek különböző műveleteket hajtanak majd végre. A menü kódja a FileMenu.qml-ben található.

import Qt 4.7 import the main Qt QML module
import “folderName” import the contents of the folder
import “script.js” as Script import a Javascript file and name it as Script

A fent használt szintaktika megmutatja, hogyan használjuk az import parancsot. Olyan JavaScript vagy QML fájlok használatakor van szükségünk rá, melyek nem ugyanabban a mappában vannak. Mivel a Button.qml ugyanabban a mappában van, mint a FileMenu.qml, így nem kell importálnunk a button.qml-t, hogy használhassuk. Azonnal létrehozhatunk egy Button elemet a Button { } függvényt deklarálva, hasonlóan a Rectangle { }-hoz.

In FileMenu.qml:

Row{
 anchors.centerIn: parent
 spacing: parent.width/6

Button{
 id: loadButton
 buttonColor: “lightgrey”
 label: “Load”
 }
 Button{
 buttonColor: “grey”
 id: saveButton
 label: “Save”
 }
 Button{
 id: exitButton
 label: “Exit”
 buttonColor: “darkgrey”

onButtonClick: Qt.quit()
 }
 }

A FileMenu.qml-ben deklaráljunk egy Row elemen belül 3 Button elemet. A Row egy pozícionáló elem, ami egy vízszintes sorban rendezi el a gyerekeit.

A Button deklarációja a Button.qml-ben van, ami ugyan az a Button.qml, amit mi az előző fejezetben használtunk. Új tulajdonságkötéseket deklarálhatunk az újonnan létrehozott gombokban, hatékonyan felülírva a Button.qml-ben beállított tulajdonságokat. Az Exit gomb megnyomásának hatására ki fog lépni a program és bezárja az ablakot. Gondoljuk végig, hogy a Button.qml-ben lévő onButtonClick signal handler is meg lesz hívva az exitButton-ban lévő onButtonClick handleren kívül.

p=. qml-texteditor1_filemenu

A Row.t a Rectangle.en belül deklaráljuk, ezzel létrehozunk egy _Rectangle- tárolót a gombok sorának. A második Rectangle létrehozása a menü gombjainak egy sorban történő tárolására indirekt módon történik. A Edit menü nagyon hasonló ebben a fázisban. Ez a menu is 3 gombot fog tartalmazni a következő nevekkel: Copy, Paste, Select All.

p=. qml-texteditor1_editmenu

Most, hogy tudjuk hogyan importáljuk és szabjuk testre az előzőleg már létrehozott komponenseiket, már elkészíthetjük a menüsorunkat, mely a menüpontok kiválasztására szolgáló gombokból fog állni. Nézzük meg, hogyan rendszerezzük adatainkat a QML-ben!

A menüsor implementálása

Szövegszerkesztőnknek meg kell tudni jelenítenie a menüket a menüsorból. A menüsoron kiválaszthatja a felhasználó, hogy melyik menüt jelenítse meg a program. A menük közötti váltásból következik, hogy az egy sorba rendezésnél bonyolultabb struktúrával fog rendelkezni a menünk.

Adatmodellek (Data Models) és adatnézetek (Data Views) használata:

Különböző "Data View":http://doc.qt.nokia.com/4.7/qdeclarativemodels.html -kal rendelkezik a QML a "Data Model":http://doc.qt.nokia.com/4.7/qdeclarativemodels.html -ek megjelenítésére. Menüsorunk listaként fogja megjeleníteni a kiválasztott menüt egy fejléccel, ahol többi menü nevét soroljuk fel vízszintesen. A menülistánk egy "VisualItemModel":http://doc.qt.nokia.com/4.7/qml-visualitemmodel.html -ben lesz deklarálva, mely olyan elemeket tartalmaz, melyek már eleve rendelkeznek valamilyen megjelenéssel, mint például egy Rectangle vagy egy importált UI elem. Más modell típusoknak, mint például a "ListModel":http://doc.qt.nokia.com/4.7/qml-listmodel.html, egy megbízott kell, hogy megjelenítse az adatait. Két vizuális elemet deklarálunk a menuListModel-ünkben, a FileMenu-t és az EditMenu-t. Testreszabjuk a két menüt és megjelenítjük őket a "ListView":http://doc.qt.nokia.com/4.7/qml-listview.html -val. A Menubar.qml fájlunk tartalmazza a QML deklarálását és egy egyszerű szerkesztői menüt, melyet az EditMenu.qml-ben hoztunk létre.

VisualItemModel{
 id: menuListModel
 FileMenu{
 width: menuListView.width
 height: menuBar.height
 color: fileColor
 }
 EditMenu{
 color: editColor
 width: menuListView.width
 height: menuBar.height
 }
 }

A ListView elem egy megbízotton keresztül fogja megjeleníteni a modellünket. A megbízott lehet hogy meghatározza, hogy például egy sorban vagy egy hálóban jelenítse meg az elemeket. A mi menuListModel-ünknek már vannak látható elemei, így nekünk nem kell megbízottat deklarálnunk hozzá.

ListView{
 id: menuListView

//Anchors are set to react to window anchors
 anchors.fill:parent
 anchors.bottom: parent.bottom
 width:parent.width
 height: parent.height

//the model contains the data
 model: menuListModel

//control the movement of the menu switching
 snapMode: ListView.SnapOneItem
 orientation: ListView.Horizontal
 boundsBehavior: Flickable.StopAtBounds
 flickDeceleration: 5000
 highlightFollowsCurrentItem: true
 highlightMoveDuration:240
 highlightRangeMode: ListView.StrictlyEnforceRange
 }

A "Flickable":http://doc.qt.nokia.com/4.7/qml-flickable.html -ből örököljük a ListView-unkat, ezzel a listánk reagálhat majd az egérmozdulatokra és más gesztusokra. Fenti kódunk utolsó része beállítja a Flickable tuljadonságait, hogy létrehozzunk a nézetünk kívánt kinetikus mozgását. A highLightMovementDuration tuljadonság meghatározza, hogy meddig tartson a kinetikus transzformáció. Egy nagyobb highLightMovementDuration érték lassabb menüváltást fog eredményezni. A ListView a modell minden egyes elemét egy indexszel látja el a deklarálásuk sorrendjében, melyeket ezeken az indexeken keresztül érhetünk el. A currentIndex értékének megváltoztatásával a ListView egy másik elemét jelöljük ki. A menüsor fejlécére is hatással lesz ez az effektus. Két gomb van egy sorban, melyek mindketten megváltozatják a megjelenített menüt, ha rájuk klikkelünk. A filebutton-ra kattintva megjelenik a fálj menü, az index pedig 0 lesz, mivel a FileMenu-t deklaráltuk először. A labelList rectangle-jének van egy z értéke, mely itt 1, ezzel jelölve, hogy ezt a menüsor előtt jelenítjük meg. Minél nagyobb a z értéke, annál előrébb foglal helyet a képernyőre merőleges síkban. A z alapértelmezett értéke 0.

 Rectangle{
 id: labelList
 …
 z: 1
 Row{
 anchors.centerIn: parent
 spacing:40
 Button{
 label: “File”
 id: fileButton
 …
 onButtonClick: menuListView.currentIndex = 0
 }
 Button{
 id: editButton
 label: “Edit”
 …
 onButtonClick: menuListView.currentIndex = 1
 }
 }
 }

A létrehozott menüsorunkon vagy a felette lévő két gomb valamelyikére klikkelve megjeleníthetjük a menüket. Így egy intuitív és interaktív menüválasztó képernyőt alkottunk.

p=. qml-texteditor3_texteditor

A szövegszerkesztő megalkotása

TextArea deklarálása

Szövegszerkesztőnk mindaddig nem szövegszerkesztő, amíg nem tartalmaz egy szerkeszthető szövegmezőt. A QML "TextEdit":http://doc.qt.nokia.com/4.7/qml-textedit.html eleme egy többsoros szövegmező létrehozását teszi lehetővé. A TextEdit különbözik a "Text":http://doc.qt.nokia.com/4.7/qml-text.html elemtől, melyet a felhasználó nem szerkeszthet direkt módon.

 TextEdit{
 id: textEditor
 anchors.fill:parent
 width:parent.width; height:parent.height
 color:”midnightblue”
 focus: true

wrapMode: TextEdit.Wrap

onCursorRectangleChanged: flickArea.ensureVisible(cursorRectangle)
 }

A szerkesztőnek megvan a saját betűszín tulajdonsága is. A TextArea egy flickable mezőn belül van, mely görgetni fogja a szöveget, ha a szövegkurzor a látható mezőn kívül van. Az ensureVisibility() függvény fogja leellenőrizni, hogy a kurzor rectangle-je kívül van-e a látható szegélyeken, és ha igen, akkor ennek megfelelően fogja mozgatni a szövegmezőt. A QML JavaScript szintaktikát használ a kódjaihoz, és ahogy már korábban említettük, importálhatunk és használhatunk is Javascript fájlokat egy QML fájlon belül.

 function ensureVisible®{
 if (contentX >= r.x)
 contentX = r.x;
 else if (contentX+width <= r.x+r.width)
 contentX = r.x+r.width-width;
 if (contentY >= r.y)
 contentY = r.y;
 else if (contentY+height <= r.y+r.height)
 contentY = r.y+r.height-height;
 }

Komponensek kombinálása a szövegszerkesztőhöz

Most már készen állunk, hogy létrehozzuk szövegszerkesztőnket a QML segítségével. Programunk két fő komponensből áll, az általunk létrehozott menüsorból és egy szövegmezőből. A QML lehetővé teszi, hogy újrafelhasználjuk komponenseinket azok importálásával és testreszabásával ha szükséges, ezzel is egyszerűbbé téve a kódunkat. A szövegszerkesztőnk egyharmadát a menüsor, kétharmadát a szövegmez fogja elfoglalni. A menüsor minden más elem előtt fog megjelenni.

 Rectangle{

id: screen
 width: 1000; height: 1000

//the screen is partitioned into the MenuBar and TextArea. 1/3 of the screen is assigned to the MenuBar
 property int partition: height/3

MenuBar{
 id:menuBar
 height: partition
 width:parent.width
 z: 1
 }

TextArea{
 id:textArea
 anchors.bottom:parent.bottom
 y: partition
 color: “white”
 height: partition*2
 width:parent.width
 }
 }

Újrafelhasznált komponenseikkel sokkal egyszerűbbnek tűnik a TextEditor forráskódja. Ezután testreszabhatjuk a fő alkalmazásunkat anélkül, hogy az előre definiál tulajdonságok miatt kellene aggódnunk. Ezzel a módszerrel könnyedén hozhatunk létre programvázakat és interfészeket.

p=. qml-texteditor3_texteditor

Szövegszerkesztőnk megjelenésének testreszabása

A Drawer Interface implementálása

A szövegszerkesztőnk egyszerűen néz ki, most már a megjelenését is testre kellene szabnunk. A QML-t használva átmeneteket és animációkat deklarálhatunk a szövegszerkesztőnkhöz. Menüsorunk elfoglalja az ablak egyharmadát, így jó lenne, ha csak akkor jelenne meg, ha mi akarjuk. Hozzáadhatunk egy rajzoló interfészt, amely összecsukja illetve megjeleníti a menüsort klikkeléskor. Jelen esetben egy kis rectange.t használtunk, mely reagál az egérkattintásokra. A drawer, akárcsak az maga az alkalmazás, két állapottal rendelkezik, egy nyitottal és egy zárttal. A drawer elem egy kis magasságú rectangle, amihez kapcsolunk egy "Image":ttp://doc.qt.nokia.com/4.7/qml-image.html elemet, egy kis nyíl ikont jelenítve meg középen a rectangle-ön belül. A drawer meghatározza az program állapotát, ahogy a felhasználó rákattint a kis nyílra.

Rectangle{
 id:drawer
 height:15

Image{
 id: arrowIcon
 source: “images/arrow.png”
 anchors.horizontalCenter: parent.horizontalCenter
 }

MouseArea{
 id: drawerMouseArea
 anchors.fill:parent
 onClicked:{
 if (screen.state "DRAWER_CLOSED"){
 screen.state = "DRAWER_OPEN"
 }
 else if (screen.state “DRAWER_OPEN”){
 screen.state = “DRAWER_CLOSED”
 }
 }
 …
 }
 }

Ez az állapot egy sor konfigurációs beállítás, melyeket "State":http://doc.qt.nokia.com/4.7/qml-state.html elemeken keresztül deklarálunk. A különböző állapotok a state tulajdonsághoz kötődnek és kilistázhatjuk őket onnan. Az alkalmazásunkban két állapot, a DRAWER_CLOSED és a DRAWER_OPEN lesz. Az elemek konfigurációja a "PropertyChanges":http://doc.qt.nokia.com/4.7/qml-propertychanges.html elemben lesznek deklarálva. A DRAWER_OPEN állapotban 4 elem tulajdonsága fog megváltozni. A menuBar y tulajdonsága 0-ra fog változni. Hasonlóképpen, a textArea pozíciója lejjebb fog kerül, ha a DRAWER_OPEN állapot az aktív. A textArea, a drawer és a drawer ikonja fog változáson keresztülmenni, hogy elérje a megfelelő állapotot.

 states:[
 State {
 name: “DRAWER_OPEN”
 PropertyChanges { target: menuBar; y: 0}
 PropertyChanges { target: textArea; y: partition + drawer.height}
 PropertyChanges { target: drawer; y: partition}
 PropertyChanges { target: arrowIcon; rotation: 180}
 },
 State {
 name: “DRAWER_CLOSED”
 PropertyChanges { target: menuBar; y:-height; }
 PropertyChanges { target: textArea; y: drawer.height; height: screen.height – drawer.height }
 PropertyChanges { target: drawer; y: 0 }
 PropertyChanges { target: arrowIcon; rotation: 0 }
 }
 ]

Az állapotváltozások azonnaliak, ám az átmenetnek ennél finomabbaknak kell lenniük. A "Transition":http://doc.qt.nokia.com/4.7/qml-transition.html elemben határozzuk meg a különböző állapotok közötti átmeneteket, amelyet ezután az elem transitions tulajdonságához rendelhetjük. A szövegszerkesztőnknek állapotátmenete lesz, akár DROWER_OPEN-re akár DROWER_CLOSED-ra módosul az állapota. Fontos, hogy az átmeneteknek rendelkezniük kell egy from (honnan) és egy to (hová) állapottal, de jelen esetben használhatunk csillagot * is, jelölve, hogy ez itt minden átmenetre vonatkozik. Az átmenetek során animációkat rendelhetünk a tulajdonság változásokhoz. A menüsorunk y : 0-ból y : x helyre ugrik, de ezt a mozgást leanimálhatjuk a "NumberAnimation":http://doc.qt.nokia.com/4.7/qml-numberanimation.html elem használatával. A cél elem tulajdonságait úgy állítjuk be, hogy annak mozgása egy meghatározott idő alatt, egy előre meghatározott csillapított görbe mentén animálódjon. Ez a csillapított görbe fogja szabályozni az animáció tulajdonságait az állapotváltozások között. Ez az ún. easing curve most az "Easing.OutQuint":http://doc.qt.nokia.com/4.7/qml-propertyanimation.html#easing.type-prop lesz, amely lelassítja az elem mozgását az animáció vége felé. Bővebb információért érdemes elolvasni a "QML's Animation":http://doc.qt.nokia.com/4.7/qdeclarativeanimation.html c. leírást.

transitions: [
 Transition {
 to: ”*”
 NumberAnimation { target: textArea; properties: “y, height”; duration: 100; easing.type:Easing.OutExpo }
 NumberAnimation { target: menuBar; properties: “y”; duration: 100; easing.type: Easing.OutExpo }
 NumberAnimation { target: drawer; properties: “y”; duration: 100; easing.type: Easing.OutExpo }
 }
 ]

Egy másik módja a tulajdonságváltozások animálásnak egy "Behavior":http://doc.qt.nokia.com/4.7/qml-behavior.html elem deklarálása. Egy átmenet csak állapotváltozások alatt működik, míg a Behavior hozzárendelhető egy egyszerű tulajdonságváltozáshoz is. A szövegszerkesztőnkben a nyílnak van egy NumberAnimation-ja, mely leanimálja annak rotation tulajdonságát valahányszor megváltozik az.

In TextEditor.qml:

Behavior{
 NumberAnimation{property: “rotation”;easing.type: Easing.OutExpo }
 }

Térjünk vissza a komponenseinkhez az állapotokról és az animációkról megszerzett tudásunkkal, most már szebbé tehetjük azok megjelenését. A Button.qml-ben a gomb lenyomásához color és scale tulajdonságokat adhatunk. A szín típusokat a "ColorAnimation":http://doc.qt.nokia.com/4.7/qml-coloranimation.html fogja animálni, míg a számokat a NumberAnimation. Az alant látható on propertyName szintakszis hasznos lehet, ha csak egyetlen tulajdonságra akarunk utalni.

In Button.qml:
 …

color: buttonMouseArea.pressed ? Qt.darker(buttonColor, 1.5) : buttonColor
 Behavior on color { ColorAnimation{ duration: 55} }

scale: buttonMouseArea.pressed ? 1.1 : 1.00
 Behavior on scale { NumberAnimation{ duration: 55} }

Még mutatósabbá tehetjük QML komponenseinket, ha olyan effektusokat adunk hozzájuk, mint a gradiens vagy az átlátszóság. Egy "Gradient":http://doc.qt.nokia.com/4.7/qml-gradient.html elem deklarálásával felülírhatjuk az elem color tulajdonságát. A "GradientStop":http://doc.qt.nokia.com/4.7/qml-gradientstop.html elemmel színeket is deklarálhatunk a gradiensünkön belül, melyet egy 0.0 és 1.0 közötti skálával adunk meg.

In MenuBar.qml
 gradient: Gradient {
 GradientStop { position: 0.0; color: ”#8C8F8C” }
 GradientStop { position: 0.17; color: ”#6A6D6A” }
 GradientStop { position: 0.98;color: ”#3F3F3F” }
 GradientStop { position: 1.0; color: ”#0e1B20” }
 }

A menüsorunkon használjuk majd a gradienst egy színátmenet megjelenítésére. Az első szín 0.0-nál kezdődik, az utolsó pedig 1.0-nál végződik.

Innen hova

Ezzel befejeztük egy nagyon egyszerű szövegszerkesztő felhasználói felületét. Tovább haladva most már implementálhatjuk az alkalmazásunk logikáját a jól megszokott Qt és C++ segítségével. A QML szépen dolgozik, elválasztva előbbit az UI designtól.

p=. qml-texteditor4_texteditor

QML kibővítése Qt C++ használatával

Már megvan a szövegszerkesztőnk váza, most implementálhatjuk a funkciókat C++ -ban. A QML-t és a C++ -t együtt használva lehetőségünk van Qt-ben létrehozni a program logikáját. Beilleszthetünk egy QML kotextust a C++ alkalmazásunkban a "Qt's Declarative":http://doc.qt.nokia.com/4.7/qtbinding.html osztályok használatával és meg is jeleníthetjük a QML elemeket a Graphic Scene segítségével. Vagy exportálhatjuk a C++ kódunkat egy olyan pluginba, amit a qmlviewer olvasni tud. A programunk számára a mentés és betöltés funkciókat C++ -ban fogjuk implementálni és ezt exportáljuk egy pluginba. Így csak a QML fájlunkat kell betöltenünk, nem kell egy futtatható állományt elindítani.

C++ osztályok megismertetése a QML-el

Qt és C++ segítségével fogjuk implementálni a betöltés és mentés opciókat. A C++ osztályok és függvények használatához regisztrálni kell őket a QML-ben. Az osztály továbbá Qt pluginként kell fordítani és a QML fájlnak tudnia kell, hogy ez a plugin merre található.

Az alkalmazásunk számára a következő elemeket kell létrehoznunk:

1. Directory osztály, mely a mappákhoz kötődő művelteket fogja végrehajtani
2. File osztály, ami egy "QObject":http://doc.qt.nokia.com/4.7/qobject.html, amely fájlok listáját szimulálja egy mappában
3. plugin osztály mely a QML kontextushoz fogja regisztálni az osztályt
4. Qt project fájl, mely majd lefordítja a plugin-t
5. qmldir, mely átadja a plugin helyét a qmlviewer számára

Qt plugin létrehozása

A plugin létrehozásához a következőket kell beállítanunk a Qt project fájlunkban. Első körben a szükséges sources, headers, és a Qt modules szerepelnek a hozzáadandók listájában. Az összes C++ kód és project fájl a filedialog könyvtárban lesz.

In cppPlugins.pro:

TEMPLATE = lib
 CONFIG ''= qt plugin
 QT''= declarative

DESTDIR ''= ../plugins
 OBJECTS_DIR = tmp
 MOC_DIR = tmp

 TARGET = FileDialog

 HEADERS''= directory.h  file.h  dialogPlugin.h

SOURCES += directory.cpp  file.cpp  dialogPlugin.cpp

A declarative modullal fordítjuk a Qt-t és _plugin_ként konfiguráljuk, amihez egy lib sablonra lesz szükségünk. A szülő plugins mappába kell tennünk a lefordított plugint.

Egy osztály regisztrálása QML-ben

In dialogPlugin.h:

#include <QtDeclarative/QDeclarativeExtensionPlugin>

class DialogPlugin : public QDeclarativeExtensionPlugin
 {
 Q_OBJECT

public:
 void registerTypes(const char *uri);

};

A DialogPlugin osztályunk a "QDeclarativeExtensionPlugin":http://doc.qt.nokia.com/4.7/qdeclarativeextensionplugin.html egy alosztálya. Implementálnunk kell az örökölt függvényt, a "registerTypes()":http://doc.qt.nokia.com/4.7/qdeclarativeextensionplugin.html#registerTypes -t. A dialogPlugin.cpp a következőképpen néz ki:

DialogPlugin.cpp:

#include "dialogPlugin.h"
 #include "directory.h"
 #include "file.h"
 #include <QtDeclarative/qdeclarative.h>

void DialogPlugin::registerTypes(const char '''uri){

 qmlRegisterType<Directory>(uri, 1, 0, "Directory");
 qmlRegisterType<File>(uri, 1, 0,"File");
 }

 Q_EXPORT_PLUGIN2(FileDialog, DialogPlugin);

A registerTypes() függvény regisztrálja a FILE és DIRECTORY osztályainkat QML-ben. Ennek a függvénynek meg kell adni a sablonja nevét, a fő- és az alverziószámot, valamint természetesen az osztályunk nevét.

Exportálnunk kell a plugint a "Q_EXPORT_PLUGIN2":http://doc.qt.nokia.com/4.7/qtplugin.html#Q_EXPORT_PLUGIN2 makróval. Megjegyzendő, hogy a dialogPlugin.h fájlunkban ott van a "Q_OBJECT":http://doc.qt.nokia.com/4.7/qobject.html#Q_OBJECT makró az osztályunk tetején. Majd futassuk a qmkae-t a project fájlunkon hogy legeneráljuk a szükséges meta-object kódot.

h3. QML tulajdonságok létrehozása C++ osztályban

Létrehozhatunk QML elemeket és tulajdonságokat a C++ és a "Qt's Meta-Object System":http://doc.qt.nokia.com/4.7/metaobjects.html segítségével. Implementálhatjuk ezeket a tulajdonságokat slot-ok és signal-ok használatával, átadva ezeket a Qt-nek.

A szövegszerkesztőnknek be kell tudnia tölteni, illetve elmenteni a fájlokat. Általában ezeket a funkciókat egy fájl dialogban valósítjuk meg. Szerencsére használhatjuk a "QDir":http://doc.qt.nokia.com/4.7/qdir.html, "QFile":http://doc.qt.nokia.com/4.7/qfile.html, "QTextStream":http://doc.qt.nokia.com/4.7/qtextstream.html függvényeket, hogy implementáljuk a mappaolvasásokat és az input/output folyamatokat.

class Directory : public QObject{

 Q_OBJECT

 Q_PROPERTY(int filesCount READ filesCount CONSTANT)
 Q_PROPERTY(QString filename READ filename WRITE setFilename NOTIFY filenameChanged)
 Q_PROPERTY(QString fileContent READ fileContent WRITE setFileContent NOTIFY fileContentChanged)
 Q_PROPERTY(QDeclarativeListProperty<File> files READ files CONSTANT )

 …

A Directory class a Qt’s Meta-Object System-et használja, hogy regisztrálja a fájlkezelés megvalósításához szükséges tulajdonságokat. A Directory osztályt pluginként exportáltuk és QML-ben Directory elemként hivatkozhatunk rá. Az összes listázott tulajdonság a Q_PROPERTY makrót használja, amely egy QML tulajdonság.

A "Q_PROPERTY":http://doc.qt.nokia.com/4.7/qobject.html#Q_PROPERTY deklarál egy tulajdonságot, továbbá függvényeket olvas és ír a Qt’s Meta-Object System-ből/be. Például a "QString":http://doc.qt.nokia.com/4.7/qstring.html filename tulajdonságát a filename() függvénnyel tudjuk olvasni, illetve a setFilename() függvénnyel írni. Továbbá egy signál, a filenameChanged(), is rendelve van a filename tulajdonsághoz, amely minden esetben emittálásra kerül, ha a tulajdonság megváltozik. Az író és olvasó függvényeket public-ként deklaráljuk a header fájlban.

Hasonlóképpen deklaráljuk a többi tulajdonságot, természetesen a használatuknak megfelelően. A filesCount tulajdonság az adott mappában lévő fájlok számát adja jelzi. A filename tulajdonság mindig az éppen kijelölt fájl nevét tárolja, a fileContent tulajdonságban pedig a betöltött/elmentett fájl tartalma tárolódik el.

 Q_PROPERTY(QDeclarativeListProperty<File> files READ files CONSTANT )

A files lista tulajdonság egy lista a mappában lévő fájlokról. A Directory osztály azért implementáltuk, hogy kiszűrje az érvénytelen szöveges fájlokat, csak a .txt kiterjesztésűek lesznek érvényesek. Továbbá a "QList":http://doc.qt.nokia.com/4.7/qlist.html "QDeclarativeListProperty":http://doc.qt.nokia.com/4.7/qdeclarativelistproperty.html -ként delarálva C++ -ban lesz használható QML-ben. A sablon objektumot a "QObject":http://doc.qt.nokia.com/4.7/qobject.html -től kell származtatni, így a File osztályt is. A Directory osztályban, a File objektumok listáját a _QList_–ben tárolj m_fileList néven.

class File : public QObject{

 Q_OBJECT
 Q_PROPERTY(QString name READ name WRITE setName NOTIFY nameChanged)

 …
 };

Ez a tulajdonság ezután a Directory elem tulajdonságainak részeként használható QML-ben. Jegyezzük meg, hogy nem kell azonosító id tulajdonságot létrehoznunk a C++ kódunkban.

Directory{
 id: directory

 filesCount
 filename
 fileContent
 files

 files[0].name
 }

Mivel a QML Javascript szintaktikát és struktúrát használ, így végigfuthatunk a fájlok listáján és meg is kapjuk azok tulajdonságait. Hogy megkapjuk az első fájl név tulajdonságát, csak hívjuk meg a files[0].name függvényt.

A sima C++ függvények is elérhetőek QML–ben. A betöltő és elmentő függvények C++ -ban kerültek implementálásra a "Q_INVOKABLE":http://doc.qt.nokia.com/4.7/qobject.html#Q_INVOKABLE makró felhasználásával. De _slot_–ként is deklarálhatjuk a függvényeket, melyek ezután elérhetőek lesznek QML –ben.

In Directory.h:

 Q_INVOKABLE void saveFile();
 Q_INVOKABLE void loadFile();

A Directory osztálynak tudomást kell szereznie más objektumokról, ha megváltozik a mappa tartalma. Ezt a funkciót _signal_–ok használatával oldjuk meg. Ahogy előzőleg említettük, a QML _signal_–oknak van egy hozzájuk tartozó végrehajtójuk, egy ún. _handler_–jük, amelyek neve megegyezik egy on prefixumot leszámítva. A signal neve directoryChanged és ez mindig emittálásra kerül, ha a mappa frissül. A frissítés szimplán újra betölti a mappa tartalmát és frissíti a listában a mappa érvényes fájljait. Ezek a QML elemek észrevehetőek felhasználjuk az onDirectoryChanged handler-t.

Érdemes tovább vizsgálni a list tulajdonságokat, ugyanis ún. callback-eket, visszahívásokat alkalmaznak, hogy elérjék és módosítsák a lista tartalmát. A list tulajdonság QDeclarativeListProperty<File> típusú, így akárhányszor hozzáférünk a listához, a hozzáférőnek egy QDeclarativeListProperty<File>-al kell visszatérnie. A sablon típusnak, a _File_–nak QObject leszármaztatottnak kell lennie! Hogy létrehozzunk egy "QDeclarativeListProperty":http://doc.qt.nokia.com/4.7/qdeclarativelistproperty.html -t , a lista hozzáférőjét és módosítóját függvény mutatókként át kell adni konstruktornak! A listának, esetünkben a _QList_–nek egy File mutató listának kell lennie! A QDeclarativeProperrty konstruktor konstruktorának és a Directory implementálása:

 QDeclarativeListProperty ( QObject''' object, void * data, AppendFunction append, CountFunction count = 0, AtFunction at = 0, ClearFunction clear = 0 )
 QDeclarativeListProperty<File>( this, &amp;m_fileList, &amp;appendFiles, &amp;filesSize, &amp;fileAt, &amp;clearFilesPtr );

A konstruktor átadja a mutatókat a függényekneknek, amik csatolják, megszámolják a elemeinek számát vagy kiürítik a listát, illetve visszanyerik az elemeit az indexek segítségével. Csak az append (csatoló) függvény megbízott. Megjegyzendő, hogy a függvény mutatóknak meg kell egyezniük az "AppendFunction":http://doc.qt.nokia.com/4.7/qdeclarativelistproperty.html#AppendFunction-typedef, a "CountFunction":http://doc.qt.nokia.com/4.7/qdeclarativelistproperty.html#CountFunction-typedef, az "AtFunction":http://doc.qt.nokia.com/4.7/qdeclarativelistproperty.html#AtFunction-typedef, és a "ClearFunction":http://doc.qt.nokia.com/4.7/qdeclarativelistproperty.html#ClearFunction-typedef definícióival!

void appendFiles(QDeclarativeListProperty<File> * property, File * file)
 File* fileAt(QDeclarativeListProperty<File> * property, int index)
 int filesSize(QDeclarativeListProperty<File> * property)
 void clearFilesPtr(QDeclarativeListProperty<File> *property)

Hogy egyszerűbbé tegyük a dialógunkat, a Directory osztály kiszűr minden fájlt, amely nem .txt kiterjesztésű és csak azokat jeleníti meg, amelyek azok. Sőt, ez az implementáció arról is gondoskodik, hogy az elmentett fájljaink megfelelő (.txt) kiterjesztést kapjanak. A Directory a "QTextStream":http://doc.qt.nokia.com/4.7/qtextstream.html függvényt használja, hogy kiolvasson a fájlból, illetve hogy írjon bele.

A Directory elemünkkel tehát visszanyerhetjük a fájljaink listáját, azok nevét és tartalmát stringként, megtudhatjuk, hogy hány fájl van az adott mappában, és valahányszor megváltozik annak tartalma, arról értesítést kaphatunk.

Ahhoz hogy létrehozzuk a _plugin_–t, futassuk a _qmake_–t a cppPlugins.pro project fájlon, aztán futassuk a make parancsot hogy lefordítsuk és áthelyezzük a pluginunkkat a plugins könyvtára.

Plugin importálása QML-ben

A qmlviewer azokat a fájlokat importálja, amelyek az alkalmazásunkkal egy mappában van. De létrehozhatunk egy qmldir fájlt is, amely tartalmazza majd, hogy merre találhatóak a QML fájljaink, melyeket importálni szeretnénk. A qmldir fájl tovább tartalmazhatta más pluginok és ún. resources, eszközök helyét.

In qmldir:

Button ./Button.qml
 FileDialog ./FileDialog.qml
 TextArea ./TextArea.qml
 TextEditor ./TextEditor.qml
 EditMenu ./EditMenu.qml

plugin FileDialog plugins

A plugin, melyet fentebb létrehoztunk FileDialog névvel rendelkezik, ahogy azt a TARGET mezőben is jeleztük a project fájlunkban. A lefordított plugin a plugins könyvtárban található.

Egy File Dialog integrálása a File Menu–be

A _FileMenu_–ünknek egy _FileDialog_–ot kell elemet megjelenítenie, amely tartalmazza a könyvtár, .txt kiterjesztésű, fájljait és lehetővé teszi a felhasználó számára, hogy kiválassza a megnyitni kívánt fájlt. Továbbá el kell helyeznünk benne a mentés, a megnyitás és az új gombokat, hogy azok elvégezhessék a kívánt műveletet. A FileMenu tartalmazni fog egy szerkeszthető szövegmezőt is, ahová a felhasználó begépelhet egy fájlnevet. A Directory elemet a _FileMenu.qml_–ben használjuk fel, és ez majd értesít minket, ha megváltozott a könyvtár tartalma. Ezt az signal-t az onDirectoryChanged handler fogja számunkra eljuttatni.

In FileMenu.qml:

Directory{
 id:directory
 filename: textInput.text
 onDirectoryChanged: fileDialog.notifyRefresh()
 }

Alkalmazásunk egyszerűségét megőrizendő, a fájl dialógunk csak a szükséges fájlokat fogja megjeleníteni, amelyek .txt kiterjesztésűek.

In FileDialog.qml:

signal notifyRefresh()
 onNotifyRefresh: dirView.model = directory.files

Ahogy fentebb írtuk, a FileDialog elem meg fogja jeleníteni a mappa számunkra releváns tartalmát, amelyet a files tulajdonság kiolvasásával fogunk elérni. A fájlokat egy "GridView":http://doc.qt.nokia.com/4.7/qml-gridview.html modellt használó elem fogja megjeleníteni rácsos elrendezésben egy delegate-nek megfelelően. A delegate fogja lekezelni a modellünk megjelenését és a fájl dialógunk létrehoz majd egy grid-et, egy rácsot, középre igazítva benne a szöveget. Egy fájlnévre kattintva egy rectangle jelenik meg, kijelölve a fájlnevet. Akárhányszor emittálásra kerül a notifyRefresh signal, a FileDialog újratölti majd a könyvtár tartalmát.

In FileMenu.qml:

Button{
 id: newButton
 label: "New"
 onButtonClick:{
 textArea.textContent = ""
 }
 }
 Button{
 id: loadButton
 label: "Load"
 onButtonClick:{
 directory.filename = textInput.text
 directory.loadFile()
 textArea.textContent = directory.fileContent
 }
 }
 Button{
 id: saveButton
 label: "Save"
 onButtonClick:{
 directory.fileContent = textArea.textContent
 directory.filename = textInput.text
 directory.saveFile()
 }
 }
 Button{
 id: exitButton
 label: "Exit"
 onButtonClick:{
 Qt.quit()
 }
 }

Most már a FileMenu-nk kapcsolódhat a megfelelő műveletekhez. A saveButton továbbítja majd a TextEdit-ből a szöveget a Directory filecontent tulajdonságában, majd átmásolja a fájl nevét a szerkeszthető szövegmezőből. Végül pedig a gomb meghívja a saveFile() függvényt, amely elmenti a fájlunkat. A loadButton hasonló végrehajtással rendelkezik. A New gomb megnyomására pedig kitörlődik a TextEdit tartalma. Továbbá a EditMenu gombjai kapcsolónak a TextEdit függvényeihez, hogy képesek legyenek a copy, paste funkció betöltésére, valamint hogy a kijelölhessük a szöveget.

p=. qml-texteditor5_filemenu

A szövegszerkesztőnk befejezése

p=. qml-texteditor5_newfile

Összegezve, a kis alkalmazásunk képes az alapvető szövegszerkesztési funkciók ellátása, így képes elmenteni, megnyitni, illetve módosítani bármilyen .txt kiterjesztésű fájlt.

Köszönjük, hogy elolvasta eme ismertetőt, reméljük hasznosnak bizonyult és remek QML alkalmazások fognak születni az itt elolvasott tudás birtokában!

Have a nice day! :)