Jolla ei ole vielä julkaissut sovelluskehitysympäristöä, joten keskityn esimerkeissä Symbianiin ja MeeGoon joista itselläni on runsaasti kokemusta. Symbian- ja MeeGo -sovelluksille on edelleen runsaasti kysyntää, joten aihe on edelleen ajankohtainen. Kannattaa kuitenkin huomata, että Jollan ja Blackberryn tuleville älypuhelimille voi niillekin kehittää QML -sovelluksia. Lisäksi Qt:n nykyinen omistaja, Digia, aikoo tuoda Qt:n ja QML:n virallisesti myös Androidille ja iPhonelle.
Uutta ohjelmointikieltä opeteltaessa on syytä lähteä liikkeelle aivan perusesimerkeistä. Sen takia tällä kertaa esimerkkinä on perinteinen HelloWorld -sovellus :-) Kirjoitan myöhemmin blogiartikkelin, jossa annan monipuolisemman tosielämän esimerkin, jossa esittelen mm. verkkoayhteyttä, listanäkymän käyttöä, XML -muotoisen datan käsittelyä ja GPS-paikannusta. Mutta aloitetaan nyt yksinkertaisella Hello Worldilla. Annan sovelluksesta kolme eri koodiesimerkkiä, joista ensimmäinen on kaikkein yksinkertaisin, ja kolmas kehittynein, sekä lähinnä oikeaa tosielämän sovellusta
Esimerkit on tehty Qt:n QML-kielellä.
*** Esimerkki 1 ***
Ensimmäinen versio Hello World -sovelluksesta on kaikkein yksinkertaisin. Sovellus käyttää ainoastaan QML -kielen peruskomponentteja. Sovellus ei käytä mitään alustakohtaisia komponentteja, joten koodi toimii sellaisenaan nin Symbianissa kuin MeeGossakin.
Lähdekooditiedosto - main.qml
import QtQuick 1.1
Rectangle {
MouseArea {
}
Rectangle {
Text {
anchors.centerIn: parent
text: "Hello world!"
}
text: "Hello world!"
MouseArea {
anchors.fill: parent
onClicked: Qt.quit()
}
onClicked: Qt.quit()
Yllä oleva esimerkki on täysin toimiva QML-sovellus. Sovellus näyttää "Hello world!" -tekstin keskitettynä keskelle puhelimen näyttöä. Käyttöliittymä mukautuu automaattisesti puhelimen kääntämiseen pysty- tai vaaka-asentoon, joten teksti on aina keskellä näyttöä riippumatta näytön resoluutiosta ja koosta. Sovellus voidaan sulkea koskettamalla sormella puhelimen näyttöä.
Sovellus näyttää tältä:
QML -sovellusten pääohjelma kirjoitetaan yleensä main.qml -lähdekooditiedostoon. Tässä tapauksessa koko ohjelmakoodi on main.qml -tiedostossa.
Ohjelmalistauksessa oleva import -rivi on pakollinen jokaisessa QML -lähdekooditiedpstossa, eli QML -dokumentissa. Kyseinen rivi ottaa käyttöön QML -kielen peruskomponentit. Rivin lopussa oleva luku on Qt Quick -versionumero, joka pitää aina määritellä. Symbianissa ja MeeGossa QtQuick versio on nykyään 1.1. Kun versionumeroksi on kirjoitettu 1.1 se tarkoittaa, että ohjelmakoodi vaatii toimiakseen Qt Quick version 1.1 tai sitä uudemman version.
Jokainen QML -lähdekooditiedosto, eli QML -dokumentti, määrittelee yhden QML -komponentin. QML -komponentti voidaan rinnastaa Java ja C++ kielten luokkiin. Yllä olevassa esimerkissä on käytetty kolmea uudelleenkäytettävää QML -komponenttia: Rectangle, Text ja MouseArea. Tässä artikkelissa myöhemmin esitetyssä esimerkissä 3 luodaan ohjelmoijan määrittelemä komponentti MainPage, joka on määritelty QML -dokumentissa MainPage.qml. Komponentin nimi ja lähdekooditiedoston nimi ovat aina toisiaan vastaavat, esim. MainPage.qml -lähdekooditiedosto määrittelee komponentin MainPage.
Komponentti Rectangle on ns. juurikomponentti, josta enemmän myöhrmmin tässä artikkelissa. Kuten edellä sanoin QML-sovelluksen pääohjelma kirjoitetaan yleensä main.qml -lähdekooditiedostoon. main.qml lähdekooditiedostossa määritelty juurikomponentti toimii sovelluksen pääohjelmakomponenttina, sekä käyttöliittymän "ikkunana", jonka sisällä sovelluksen käyttöliittymä näytetään.
Eli sovelluksen "ikkunana" on komponentti Rectangle. Rectangle on yksi QML:n peruskomponenteista, se on graafinen komponentti, joka näyttää ruudulla suorakaiteen. Rectanglella, kuten kaikilla QML-komponenteilla, on useita ominaisuuksia (property), joihin komponenttin toimintaan ja ulkoasuun voidaan vaikuttaa. Esimerkissä komponentin Rectangle sisällä on määritelty komponentti Text, joka määrittelee, että ruudun keskellä näytetää teksti "Hello world!". Sovelluksen kolmas komponentti on MouseArea, joka reagoi puhelimen näytön kosketukseen, kun näyttöä kosketaan sovellus suljetaan.
*** Esimerkki 2 ***
Toinen versio Hello World -sovelluksesta on pohjimmiltaan vastaava kuin edellä esitetty versio. Erona on se, että nyt sovellus on toteutettu käyttäen Symbianille suunniteltuja käyttöliittymäkomponentteja, jotka noudattavat Symbianin käyttöliittymätyyliä.
Lähdekooditiedosto - main.qml
import QtQuick 1.1
import com.nokia.symbian 1.1
Window {
Sovellus näyttää tältä:
*** Esimerkki 3 ***
Kolmas ja viimeinen versio Hello World -sovelluksesta on kaikkein lähinnä oikeaa tosielämän sovellusta. Edelliset kaksi esimerkkiä toimivat perusesimerkkeinä, mutta niistä puutui useita tosielämän sovelluksille yhteisiä piirteitä.
Aiempien esimerkkien kohdalla sovelluskoodi voitiin kirjoittaa yhteen lähdekooditiedostoon nimeltä main.qml. Käytännössä oikeita sovelluksia kehitettäessä on järkevää pilkkoa sovelus pienempiin loogisiin uudelleen käytettäviin osiin. Siksi tässä esimerkissä ohjelmakoodi on jaettu kahteen eri tiedostoon nimiltään: main.qml ja MainPage.qml. main.qml sisältää itse sovelluksen päärungon, MainPage.qml sisältää sovelluksen päänäkymään liittyvän koodin. Sovelluksessa voi olla useita eri näkymiä, jotka kukin voidaan määritellä omassa lähdekooditiedostossaan. Tässä tapauksessa näkymiä on vain yksi.
Lähdekooditiedosto - main.qml
Lähdekooditiedosto - MainPage.qml
Sovellus näyttää tältä:
Yllä oleva kolmas versio Hello World - sovelluksesta näyttää "Hello wor!d!" -tekstin puhelimen näytön keskellä samaan tapaan kuin aiemmat esimerkit. Lisäksi viimeisimmän esimerkin sovellus näyttää puhelimen näytön yläreunassa Symbianin tilapalkin (StatusBar) ja näytön alareunassa Symbianin työkalupalkin (ToolBar). Sovellus lisää työkalupalkkiin yhden nappulan (ToolButton), jota koskettamalla sovellus voidaan sulkea.
msin.qml -lähdekooditiedostossa määritellään, että sovellus näyttää tilapalkin ja työkalupalkin. Sovelluksen aloitusnäkymäksi asetetaan MainPage.qml -lähdekooditiedostossa määritelty näkymä (MainPage QML-komponentti). Samalla määritellään mitä nappuloita työkalupalkissa näkyy kun MainPage -näkymä on näkyvissä ruudulla. Tässä esimerkissä työkalupalkin napit määritellään main.qml -lähdekooditiedostossa. Ne voitaisiin yhtä hyvin määritellä MainPage.qml -lähdekooditiedostossa. Niin tehdäänkin usein sillon kun kehitettävässä sovelluksessa on useampi kuin yksi näkymä. Jokaisella näkymällä voi olla omat työkalupalkin napit, jotka näytetään näkymän ollessa ruudulla näkyvissä. Kpska tässä sovelluksessa on vain yksi näkymä, riittää että työkalupalkin napit määritellään main.qml lähdekooditiedostossa.
Jokaisessa QML -lähdekooditiedostossa on yksi ja vain yksi ns. juurikomponentti. Esimerkin 1 tapauksessa juurikomponentti on Rectangöe. Esimerkissä 2, juurikomponentti on Window. Esimerkin 3 lähdekooditiedostossa main.qml juurikomponentti on PageStackWindow ja MainPage.qml -lähdekooditiedostossa juurikomponentti on Page.
Kyse on olio-ohjelmoinnista tutusta periytymisestä. Olio-ohjelmointikieliä, kuten C++ ja Java, käytettäessä voidaan määritellä uusia luokkia periyttämällä uusi luokka jostakin toisesta jo olemassa olevasta luokasta. QML:n juurikomponentin tapauksessa on kyse samasta asiasta. Esimerkiksi esimerkin 3 QML -komponentti MainPage on peritty komponentista Page. Komponentti MainPage siis laajentaa komponentin Page -toiminnallisuutta.
Esimerkissä 2 juurikomponenttina oli komponentti Window, esimerkissä 3 puolestaan lähdekooditiedoston main.qml juurikomponenttina on PageStackWindow. On ohjelmoijan makuasia kumpaa komponenttia sovelluksessaan käyttää. PageStackWindow on kuitenkin monipuolisempi kuin Window ja sisältää monia helpottavia ominaisuuksia, jotka vähentävät koodinkirjoitustarvetta. PageStackWindow on peritty komponentista Window, joten se sisältää kaikki samat toiminnot kuin Window ja sen lisäksi joukon toimintoja, jotka puuttuvat komponentista Window.
QML ei ole tarkoitettu vain käyttöliittymien rakentamiseen. Sovelluksen voi tehdä kokonaan QML kielellä. Niin haluttaessa sovellus voidaan tehdä myös niin, että osa siitä on toteutettu QML -kielellä ja osa C++:lla. QML -kieltä voidaan myös laajentaa uusilla QML-komponenteilla, jotka on tehty C++:lla, tällöin C++:lla tehtyä komponenttia voidaan kätyttää QML -sovelluksessa aivan samoin kuin mitä tahansa QML -komponenttia.
import com.nokia.symbian 1.1
Window {
Label {
MouseArea {
}
anchors.centerIn: parent
text: "Hello world!"
}text: "Hello world!"
MouseArea {
anchors.fill: parent
onClicked: Qt.quit()
}
onClicked: Qt.quit()
Sovellus näyttää tältä:
*** Esimerkki 3 ***
Kolmas ja viimeinen versio Hello World -sovelluksesta on kaikkein lähinnä oikeaa tosielämän sovellusta. Edelliset kaksi esimerkkiä toimivat perusesimerkkeinä, mutta niistä puutui useita tosielämän sovelluksille yhteisiä piirteitä.
Aiempien esimerkkien kohdalla sovelluskoodi voitiin kirjoittaa yhteen lähdekooditiedostoon nimeltä main.qml. Käytännössä oikeita sovelluksia kehitettäessä on järkevää pilkkoa sovelus pienempiin loogisiin uudelleen käytettäviin osiin. Siksi tässä esimerkissä ohjelmakoodi on jaettu kahteen eri tiedostoon nimiltään: main.qml ja MainPage.qml. main.qml sisältää itse sovelluksen päärungon, MainPage.qml sisältää sovelluksen päänäkymään liittyvän koodin. Sovelluksessa voi olla useita eri näkymiä, jotka kukin voidaan määritellä omassa lähdekooditiedostossaan. Tässä tapauksessa näkymiä on vain yksi.
Lähdekooditiedosto - main.qml
import QtQuick 1.1
import com.nokia.symbian 1.1
PageStackWindow {
import com.nokia.symbian 1.1
PageStackWindow {
id: window
showStatusBar: true
showToolBar: true
initialPage: MainPage { tools: toolBarLayout }
ToolBarLayout {
}
showStatusBar: true
showToolBar: true
initialPage: MainPage { tools: toolBarLayout }
ToolBarLayout {
id: toolBarLayout
ToolButton {
}ToolButton {
flat: true
iconSource: "toolbar-back"
onClicked: Qt.quit()
}
iconSource: "toolbar-back"
onClicked: Qt.quit()
Lähdekooditiedosto - MainPage.qml
import QtQuick 1.1
import com.nokia.symbian 1.1
Page {
import com.nokia.symbian 1.1
Page {
Label {
}
anchors.centerIn: parent
text: "Hello world!"
}
text: "Hello world!"
Sovellus näyttää tältä:
Yllä oleva kolmas versio Hello World - sovelluksesta näyttää "Hello wor!d!" -tekstin puhelimen näytön keskellä samaan tapaan kuin aiemmat esimerkit. Lisäksi viimeisimmän esimerkin sovellus näyttää puhelimen näytön yläreunassa Symbianin tilapalkin (StatusBar) ja näytön alareunassa Symbianin työkalupalkin (ToolBar). Sovellus lisää työkalupalkkiin yhden nappulan (ToolButton), jota koskettamalla sovellus voidaan sulkea.
msin.qml -lähdekooditiedostossa määritellään, että sovellus näyttää tilapalkin ja työkalupalkin. Sovelluksen aloitusnäkymäksi asetetaan MainPage.qml -lähdekooditiedostossa määritelty näkymä (MainPage QML-komponentti). Samalla määritellään mitä nappuloita työkalupalkissa näkyy kun MainPage -näkymä on näkyvissä ruudulla. Tässä esimerkissä työkalupalkin napit määritellään main.qml -lähdekooditiedostossa. Ne voitaisiin yhtä hyvin määritellä MainPage.qml -lähdekooditiedostossa. Niin tehdäänkin usein sillon kun kehitettävässä sovelluksessa on useampi kuin yksi näkymä. Jokaisella näkymällä voi olla omat työkalupalkin napit, jotka näytetään näkymän ollessa ruudulla näkyvissä. Kpska tässä sovelluksessa on vain yksi näkymä, riittää että työkalupalkin napit määritellään main.qml lähdekooditiedostossa.
Jokaisessa QML -lähdekooditiedostossa on yksi ja vain yksi ns. juurikomponentti. Esimerkin 1 tapauksessa juurikomponentti on Rectangöe. Esimerkissä 2, juurikomponentti on Window. Esimerkin 3 lähdekooditiedostossa main.qml juurikomponentti on PageStackWindow ja MainPage.qml -lähdekooditiedostossa juurikomponentti on Page.
Kyse on olio-ohjelmoinnista tutusta periytymisestä. Olio-ohjelmointikieliä, kuten C++ ja Java, käytettäessä voidaan määritellä uusia luokkia periyttämällä uusi luokka jostakin toisesta jo olemassa olevasta luokasta. QML:n juurikomponentin tapauksessa on kyse samasta asiasta. Esimerkiksi esimerkin 3 QML -komponentti MainPage on peritty komponentista Page. Komponentti MainPage siis laajentaa komponentin Page -toiminnallisuutta.
Esimerkissä 2 juurikomponenttina oli komponentti Window, esimerkissä 3 puolestaan lähdekooditiedoston main.qml juurikomponenttina on PageStackWindow. On ohjelmoijan makuasia kumpaa komponenttia sovelluksessaan käyttää. PageStackWindow on kuitenkin monipuolisempi kuin Window ja sisältää monia helpottavia ominaisuuksia, jotka vähentävät koodinkirjoitustarvetta. PageStackWindow on peritty komponentista Window, joten se sisältää kaikki samat toiminnot kuin Window ja sen lisäksi joukon toimintoja, jotka puuttuvat komponentista Window.
QML ei ole tarkoitettu vain käyttöliittymien rakentamiseen. Sovelluksen voi tehdä kokonaan QML kielellä. Niin haluttaessa sovellus voidaan tehdä myös niin, että osa siitä on toteutettu QML -kielellä ja osa C++:lla. QML -kieltä voidaan myös laajentaa uusilla QML-komponenteilla, jotka on tehty C++:lla, tällöin C++:lla tehtyä komponenttia voidaan kätyttää QML -sovelluksessa aivan samoin kuin mitä tahansa QML -komponenttia.