Graafisen käyttöliittymän ohjelmointi Syksy Luento 13 QML Antti Nieminen

Transkriptio

1 Graafisen käyttöliittymän ohjelmointi Syksy 2013 Luento 13 QML Antti Nieminen

2 Sisältö Johdanto QML:n perusteita JavaScript QML:ssä C++ ja QML

3 QML QML (Qt Meta Language tai Qt Modeling Language) on deklaratiivinen kieli käyttöliittymien tekoon Käytetään erityisesti mobiilikäyttöliittymissä Qt Quick = QML:n standardikirjasto Nämä kalvot käsittelevät QML:n ja Qt Quick:in versiota 2.0 sekä Qt:n versiota 5.0 ellei toisin mainita

4 QML:n etuja Yksinkertainen, deklaratiivinen syntaksi Renderöidään OpenGL:llä > nopea ja kaunis käyttöliittymä JavaScript-tuki Helposti liitettävissä C++-koodiin Voidaan toteuttaa esim. käyttöliittymä QML:llä ja sovelluslogiikka C++:lla

5 Esimerkki 1 import QtQuick 2.0 Rectangle { width: 360 height: 360 Text { anchors.centerin: parent text: "Hello World MouseArea { anchors.fill: parent onclicked: { Qt.quit();

6 QML-tiedoston suoritus QML-tiedoston voi suorittaa mm. 1. Qt:n mukana tulevalla qmlscene-sovelluksella qmlscene tiedostoni.qml 2. Luomalla Qt Creatorilla Qt Quick projektin 3. Tavallisessa Qt C++ -projektissa Tästä lisää kalvojen loppupuolella

7 QML on deklaratiivinen QML on deklaratiivinen kieli Deklaratiivisellä kielellä kuvataan millainen lopputulos halutaan vs. imperatiivinen kieli: määritellään vaiheet jotka suorittamalla lopputulokseen päästään QML-dokumentti voi sisältää myös imperatiivisia osia Toteutetaan JavaScript-kielellä

8 Deklaratiivinen vs. imperatiivinen Rectangle { id: laatikko color: blue MouseArea { onclicked: { laatikko.color = red ;

9 QML-dokumentti QML-dokumentti koostuu olioista, jotka muodostavat puumaisen rakenteen Yhdessä dokumentissa tasan yksi korkeimman tason olio Olion vanhempaan voi viitata parent-attribuutin kautta Rectangle { color: red Rectangle { color: parent.color

10 QML-olio QML-oliolle täytyy määritellä sen tyyppi Lisäksi olio voi sisältää erilaisia attribuutteja sekä lapsiolioita <OLIOTYYPPI> { <ATTRIBUUTTI1>: <ARVO1> <ATTRIBUUTTI2>: <ARVO2> <LAPSIOLIO1> <LAPSIOLIO2>

11 QML-oliotyypit Visuaaliset oliot (visual objects) Rectangle, Image, Text, Kaikki periytyvät Item-tyypistä Syötteenlukuoliot (user input objects) MouseArea, Keys, PinchArea, Asemointioliot (positioning objects) Positioner, Row, Column, Ja paljon muita Myös omia tyyppejään voi luoda Joko QML:llä tai C++:lla

12 QML-tiedostot Samassa hakemistossa oleviin QML-dokumentteihin voidaan viitata suoraan tiedoston nimellä (ilman päätettä) > näin voidaan luoda omia oliotyyppejä Laatikko.qml: Rectangle { width: 100; height: 100 Toinen.qml: Row { Laatikko { color: blue Laatikko { color: red

13 import QML-dokumenttiin voi importoida QMLmoduuleja, QML-hakemistoja ja JavaScripttiedostoja Oletuksena käytettävissä on kaikki saman hakemiston QML-tiedostot import QtQuick 2.0 Tarvitaan käytännössä aina Vanhemmat versiot: 1.0, 1.1 Uudemmat: 2.1, 2.2,

14 Attribuutit QML-oliot sisältävät erilaisia attribuutteja id Property-attribuutit (x,y,width,itse määritellyt, ) Erilaiset signal ja handler attribuutit 5.0/qtqml/qtqml-syntax-objectattributes.html

15 id-attribuutti Oliolle voi asettaa id:n, jolla siihen voi viitata muista olioista Rectangle { Rectangle { id: laatikko1 color: red Rectangle { id: laatikko2 color: laatikko2.color

16 Property-attribuutit QML-olioiden property-attribuutit ovat tyypitettyjä Perustyypit: int, real, string, color, QML-oliotyypit: Rectangle, Item, var-tyyppiset propertyt voivat sisältää mitä vain Oman propertyn määrittely, esimerkki: Rectangle { property string tervehdys: "Moro!"

17 Propertyn arvo Property-attribuutit voivat sisältää joko staattisen arvon: width: 100; color: "red"; tai dynaamiseen lausekkeen: width: parent.width / 2 color: checkbox1.checked? "red" : "blue" Dynaamisessa tapauksessa propertyn arvo päivittyy automaattisesti lauseekkeen arvon muuttuessa ->

18 Property binding Propertyn arvon sitomista riippumaan jostain muusta/muista property(i)stä kutsutaan nimellä property binding Esim: Rectangle { width: box1.width + box2.width + 50 Aina kun jokin lausekkeen oikealla puolella olevista propertyistä muuttuu, muuttuu automaattisesti myös propertyn arvo

19 Esimerkki 2 import QtQuick 2.0 Rectangle { width: 400; height: 300; Rectangle { width: parent.width / 2 height: parent.height / 2 color: parent.width > parent.height? red : blue

20 Olion sijainti QML-olion visuaalisen sijainnin määrittämiseen on useita tapoja x- ja y-attribuutit suhteessa parent-olioon anchors-attribuutti Asetetaan suhteessa parent- tai sisar-olioon anchors.top: sisarolio.bottom Layoutit Row, Column, Grid, Flow,

21 State QML-oliolle voi määritellä erilaisia tiloja (State) Olion states-attribuutti sisältää listan State-olioita State-oliossa määritellään erot olion perustilaan Perustila on nimeltään tyhjä merkkijono State { name: pohjassa ; when: mousearea.pressed PropertyChanges { target: o1; color: yellow

22 Esimerkki 3 Import QtQuick 2.0 Rectangle { id: root width: 400; height: 300; color: "yellow" MouseArea: { id: mousearea; anchors.fill: parent states: [ State { name: "pohjassa" when: mousearea.pressed PropertyChanges { target: root; color: "red" ]

23 Transitiot ja animaatiot Transitioiden avulla voidaan määritellä miten siirrytään propertyn arvosta toiseen tai tilasta toiseen Siirtymä voidaan animoida jollakin Animation-oliolla transitions: [Transition{ from: ; to: pohjassa ColorAnimation { duration: 1000 ]

24 Signaalit QML-oliotkin lähettelevät signaaleja Valmiilla QML:n oliotyypeillä on signaaleja, esim. MouseArea:n clicked Signaaleja voi määritellä myös itse signal munsignaali(string parametri) Signaali lähetetään yksinkertaisesti kutsumalla sitä JavaScriptillä munsignaali( moi );

25 Signaalinkäsittelijät Signaaleja voi QML:ssä vastaanottaa signaalinkäsittelijöillä (signal handlers) kuten Qt:n slotit Signaalia nimeltä foo kuunnellaan määrittelemällä olioon käsittelijä nimellä onfoo Signaalinkäsittelijä toteutetaan JavaScriptkielellä

26 Esimerkki 4 import QtQuick 2.0 Rectangle { width: 400; height: 300; signal jotaintapahtui(string jotain) onjotaintapahtui: { teksti.text = tapahtui + jotain; MouseArea { anchors.fill: parent onclicked: { jotaintapahtui( klikkaus ); // lähetetään signaali Text { id:teksti, text: klikkaa

27 Propertyjen arvojen muutos Kun propertyn bar arvo muuttuu, lähtee tästä automaattisesti signaali barchanged Muutoksia voi siis kuunnella määrittelemällä käsittelijän onbarchanged Rectangle { property real arvo onarvochanged: { //

28 JavaScript QML:ssä JavaScript-kieltä voidaan käyttää monella tapaa QML-dokumenteissa Property binding lausekkeet Signaalinkäsittelijät Itse määritellyt JavaScript-funktiot Importoidut JavaScript-kirjastot QML:n JavaScript ei ole aivan yhtä salliva kuin webbiselaimissa Esim. globaalia oliota (global object) ei voi muokata

29 JavaScript QML:ssä JavaScriptissa voi QML-olioihin viitata niiden id:llä Text { id: teksti, text: moi Keys.onPressed: { teksti.text +=! ; Olio nimeltä Qt sisältää joitain QML-erikoisuuksia Esim. Qt.quit();

30 JavaScript ja property binding Property binding lauseke on käytännössä tavallinen JavaScript-lauseke, joka suoritetaan automaattisesti aina tarvittaessa width: Math.max(box1.width, box2.width) Property binding voidaan tehdä myös JavaScriptkoodissa width = Qt.binding(function(){return box1.width;) Huom! Pelkkä sijoitus ei sido vaan ainoastaan asettaa arvon kertaalleen width = box1.width

31 QtQuick:n moduuleita Controls Tavallisia käyttöliittymäkomponentteja QML:ssä! Qt 5.1, QtQuick 2.1 Window Tukea top-level-ikkunan toteutukseen Particles Partikkeliefektejä QML:ssä Jne.

32 Controls Gallery Demo qtquickcontrols/examples/quick/controls/gallery

33 QML:n toteutuksesta QML:n sisäinen toteutus kehittyy/muuttuu jatkuvasti Käyttöliittymän renderöinti OpenGL Pyrkii hyödyntämään mahdollisimman paljon näytönohjaimen ominaisuuksia JavaScript-moottori QML:ssä oma JavaScript-moottori Pohjana V8 Javascript Engine Räätälöity QML:n käyttötapauksiin

34 QML ja C++ QML-dokumentteja voi käsitellä Qt C++ - sovelluksella Qt C++:lla voi luoda ja muutella QML-olioita vastaanottaa QML-olioiden signaaleja kutsua QML-olioiden JavaScript-metodeita tarjota C++-olioiden metodeita QML:n käytettäväksi määritellä omia QML-oliotyyppejä jne.

35 QML:n käyttöönotto Qt C++ -projektissa Projektitiedostossa: QT += qml quick C++:ssa esimerkiksi: QQuickView view; view.setsource(qurl::fromlocalfile("file.qml")); view.show();

36 QML-oliot C++:ssa Kutakin QML-oliotyyppiä vastaa jokin QObject:ista periytyvä luokka Visuaaliset oliot periytyvät luokasta QQuickItem C++-puolelta voi QML-olioita hakea niiden objectname-attribuutin perusteella Ei siis id:n

37 QML-oliot C++:ssa QML: Rectangle { Rectangle { objectname: olio1 C++: QQuickView* view = new QQuickView(filename); QQuickItem* olio1 = view->rootobject()-> findchild<qquickitem*>("olio1"); olio1->setproperty("color", "red");

38 QML-olioiden signaalit QML-olioiden signaaleja voidaan vastaanottaa C++:ssa kuin muitakin signaaleja QQuickView* view = new QQuickView("view.qml"); QObject::connect(view->rootObject(), SIGNAL(munSignaali()), view, SLOT(close())); view.qml: Rectangle { signal munsignaali

39 JavaScript-funktion kutsuminen QML: Rectangle { function foo(s) { return s+! ; C++: QVariant paluuarvo; QVariant parametri = moi ; QMetaObject::invokeMethod(qmlObj, foo, Q_RETURN_ARG(Qvariant, paluuarvo), Q_ARG(QVariant, parametri));

40 C++-olio QML:ssä C++-olioita on mahdollista määritellä QML:ssä käytettäväksi Lisätään se QML-olion kontekstiin (QQmlContext) jollain nimellä Periydyttävä joko QObject- tai QVariant-luokasta QVariant t = new QVariant( Moro ); view->rootcontext()->setcontextproperty( tervehdys, t); QML: Text { text: tervehdys

41 C++-metodin kutsuminen QML:ssä Jotta luokan metodia voi kutsua QML:stä on sen esittelyssä oltava Q_INVOKABLE-makro class ExampleClass : public QObject { Q_OBJECT public: Q_INVOKABLE QString examplemethod(); Lisättynä QML-kontekstiin nimellä example : Text { text: example.examplemethod()

42 C++-olioiden propertyt C++-olioillekin voi määritellä propertyjä Q_PROPERTY-makro Q_PROPERTY(QColor color READ color WRITE setcolor NOTIFY colorchanged) public: Qcolor color() const; void setcolor(const Qcolor &color); public signals: void colorchanged();

43 QML Qt-käyttöliittymässä QML-dokumentti on mahdollista "upottaa" tavalliseen Qt C++ -käyttöliittymän sisään Tätä varten QQuickWindow (tai QQuickView) on käärittävä QWidget:iin Onnistuu funktiolla QWidget::createWindowContainer (Qt 5.1) QQuickView* view = new QQuickView(filename); QWidget *container = QWidget::createWindowContainer(view); mylayout->addwidget(container);

44 Oliotyyppien määrittely C++:lla C++:lla voi määritellä myös oliotyyppejä QML:n käyttöön QQmlEngine::qmlRegisterType qmlregistertype<piechart>( Charts, 1, 0, PieChart ); QML: import Charts 1.0 PieChart {

45 QML-oliotyyppi C++:lla Esimerkki: PieChart Periytetty QQuickPaintItem-luokasta qtdeclarative/examples/qml/tutorials/extending 5.0/qtqml/qtqml-cppintegrationdefinetypes.html

46 Yhteenveto: QML-olio QML-oliolla on kolme rajapintaa QML JavaScript C++ (QObject) C++ JavaScript QML-olio QML