Getting Started Programming with QML/hr: Difference between revisions

From Qt Wiki
Jump to navigation Jump to search
No edit summary
No edit summary
Line 4: Line 4:


Dobrodošli u svijet QMLa, opisnog UI jezika. U ovom vodiču kreirat ćemo jednostavni editor teksta upotrebom QMLa. Nakon što završite s čitanjem ovog vodiča, trebali biste biti spremni za razvoj vlastitih aplikacija upotrebom QMLa i C+''.
Dobrodošli u svijet QMLa, opisnog UI jezika. U ovom vodiču kreirat ćemo jednostavni editor teksta upotrebom QMLa. Nakon što završite s čitanjem ovog vodiča, trebali biste biti spremni za razvoj vlastitih aplikacija upotrebom QMLa i C+''.
<br />h2. QML u izradi korisničkog sučelja
 
<br />Aplikacija koju ćemo raditi je jednostavni tekstualni editor koji učitava, snima te izvodi jednostavne funkcije na tekstu. Ovaj vodič sastoji se od dva dijela. U prvom dijelu obrađuju se dizajn i izgled aplikacije te ponašanje iste upotrebom opsinog jezika u QMLu. U drugom dijelu, učitavanje i snimanje datoteke bit će implementirano koriteći Qt C. Upotrebom "Qt Meta-Object System":http://doc.qt.nokia.com/4.7/metaobjects.html omogućujemo QML-ovim elementima pristup C''+ metodama. Radeći u Qt C++ i QML-u, lako je odvojiti logiku korisničkog sučelja od ostatka aplikacije.
h2. QML u izradi korisničkog sučelja
 
Aplikacija koju ćemo raditi je jednostavni tekstualni editor koji učitava, snima te izvodi jednostavne funkcije na tekstu. Ovaj vodič sastoji se od dva dijela. U prvom dijelu obrađuju se dizajn i izgled aplikacije te ponašanje iste upotrebom opsinog jezika u QMLu. U drugom dijelu, učitavanje i snimanje datoteke bit će implementirano koriteći Qt C. Upotrebom "Qt Meta-Object System":http://doc.qt.nokia.com/4.7/metaobjects.html omogućujemo QML-ovim elementima pristup C''+ metodama. Radeći u Qt C++ i QML-u, lako je odvojiti logiku korisničkog sučelja od ostatka aplikacije.


p=. [[Image:http://doc.qt.nokia.com/4.7/images/qml-texteditor5_editmenu.png|Texteditor]]
p=. [[Image:http://doc.qt.nokia.com/4.7/images/qml-texteditor5_editmenu.png|Texteditor]]
Line 19: Line 21:
U QML-u, osnovni vizualni element je "Rectangle":http://doc.qt.nokia.com/4.7/qml-rectangle.html. "Rectangle":http://doc.qt.nokia.com/4.7/qml-rectangle.html ima svojstva kojima se određuje njegov izgled i položaj.
U QML-u, osnovni vizualni element je "Rectangle":http://doc.qt.nokia.com/4.7/qml-rectangle.html. "Rectangle":http://doc.qt.nokia.com/4.7/qml-rectangle.html ima svojstva kojima se određuje njegov izgled i položaj.


<code><br />import Qt 4.7<br />Rectangle{<br /> id:simplebutton<br /> color: "grey"<br /> width: 150<br /> height: 80<br /> Text{<br /> id: buttonLabel<br /> text: "button label"<br /> anchors.centerIn: parent;<br /> anchors.verticalCenterOffset: –1<br /> }<br />}<br /></code>
<code>
import Qt 4.7
Rectangle{
id:simplebutton
color: "grey"
width: 150
height: 80
Text{
id: buttonLabel
text: "button label"
anchors.centerIn: parent;
anchors.verticalCenterOffset: –1
}
}
</code>


Prvo, linija koda <code>import Qt 4.7</code> omogućuje "qmlviewer":http://doc.qt.nokia.com/4.7/qmlviewer.html alatom da uveze QML element koje ćemo kasnije koristiti. Ova linija je neophodna za svaku QML datoteku. Primjetite da koristimo i verziju Qt-a pri tome.
Prvo, linija koda <code>import Qt 4.7</code> omogućuje "qmlviewer":http://doc.qt.nokia.com/4.7/qmlviewer.html alatom da uveze QML element koje ćemo kasnije koristiti. Ova linija je neophodna za svaku QML datoteku. Primjetite da koristimo i verziju Qt-a pri tome.
Line 33: Line 49:
Da bismo implementirali interakciju s dugmetom, upotrijebiti ćemo QML-ov sistem za obradu događaja. Obrada događaja u QML-u je prilično slično sustavu signala i slotova u QT-u. Signali se emitiraju i pozivaju povezani slot.
Da bismo implementirali interakciju s dugmetom, upotrijebiti ćemo QML-ov sistem za obradu događaja. Obrada događaja u QML-u je prilično slično sustavu signala i slotova u QT-u. Signali se emitiraju i pozivaju povezani slot.


<code><br />Rectangle{<br /> id:simplebutton<br />
<code>
Rectangle{
id:simplebutton


MouseArea{<br /> id: buttonMouseArea
MouseArea{
id: buttonMouseArea


anchors.fill: parent //anchor all sides of the mouse area to the rectangle's anchors<br /> //onClicked handles valid mouse button clicks<br /> onClicked: console.log(buttonLabel.text + " clicked" )<br /> }<br />}<br /></code>
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" )
}
}
</code>


Dodajemo "MouseArea":http://doc.qt.nokia.com/4.7/qml-mousearea.html našem <code>simplebutton</code> elementu. "MouseArea":http://doc.qt.nokia.com/4.7/qml-mousearea.html element opisuje interaktivno područje unutar kojeg se detektiraju korinički pomaci miša. Za naše dugme, povezali smo cijeli "MouseArea":http://doc.qt.nokia.com/4.7/qml-mousearea.html za područje dugmeta. Dio koda <code>anchors.fill</code> omogućuje pritup svojstvu <code>fill</code> unutar grupe svojstva <code>anchors</code>. QML koristi predloške (<code>layout</code>) bazirane na principu sidra (<i>anchor</i>) koji omogućavaju povezivanje sidra jednog elementa s drugim elementima kreirajući pri tome robusna sučelja.
Dodajemo "MouseArea":http://doc.qt.nokia.com/4.7/qml-mousearea.html našem <code>simplebutton</code> elementu. "MouseArea":http://doc.qt.nokia.com/4.7/qml-mousearea.html element opisuje interaktivno područje unutar kojeg se detektiraju korinički pomaci miša. Za naše dugme, povezali smo cijeli "MouseArea":http://doc.qt.nokia.com/4.7/qml-mousearea.html za područje dugmeta. Dio koda <code>anchors.fill</code> omogućuje pritup svojstvu <code>fill</code> unutar grupe svojstva <code>anchors</code>. QML koristi predloške (<code>layout</code>) bazirane na principu sidra (<i>anchor</i>) koji omogućavaju povezivanje sidra jednog elementa s drugim elementima kreirajući pri tome robusna sučelja.
Line 45: Line 70:
Izvorni kod u <code>SimpleButton.qml</code> dovoljan je za prikaz dugmeta na ekranu te ispis teksta svaki put kad bi kliknuli na njega mišem.
Izvorni kod u <code>SimpleButton.qml</code> dovoljan je za prikaz dugmeta na ekranu te ispis teksta svaki put kad bi kliknuli na njega mišem.


<code><br />Rectangle {<br /> id:Button<br />
<code>
Rectangle {
id:Button


property color buttonColor: "lightblue"<br /> property color onHoverColor: "gold"<br /> property color borderColor: "white"
property color buttonColor: "lightblue"
property color onHoverColor: "gold"
property color borderColor: "white"


signal buttonClick()<br /> onButtonClick: {<br /> console.log(buttonLabel.text + " clicked" )<br /> }
signal buttonClick()
onButtonClick: {
console.log(buttonLabel.text + " clicked" )
}


MouseArea {<br /> onClicked: buttonClick()<br /> hoverEnabled: true<br /> onEntered: parent.border.color = onHoverColor<br /> onExited: parent.border.color = borderColor<br /> }
MouseArea {
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<br /> color: buttonMouseArea.pressed ? Qt.darker(buttonColor, 1.5) : buttonColor<br />}<br /></code>
// determines the color of the button by using the conditional operator
color: buttonMouseArea.pressed ? Qt.darker(buttonColor, 1.5) : buttonColor
}
</code>


U datoteci <code>Button.qml</code> nalazi se potpuno funkcionalno dugme. Izvorni kod uz ovaj vodič je djelomično skraćen s obzirom da se ti dijelovi kod nalaze u prijašnjim primjerima ili nisu relevantne za ovu temu.
U datoteci <code>Button.qml</code> nalazi se potpuno funkcionalno dugme. Izvorni kod uz ovaj vodič je djelomično skraćen s obzirom da se ti dijelovi kod nalaze u prijašnjim primjerima ili nisu relevantne za ovu temu.
Line 77: Line 118:
Izbornici prikazuju sadržaj liste s time da svaki od njih ima mogućnost izvršavanja akcije. U QMLu, izbornik se može kreirati na više načina. Prvo, kreirat ćemo izbornik koji sadrži dugmad koja će eventulano izvršavati različite akcije. Izvorni kod za izbornike nalazi se u datoteci <code>FileMenu.qml</code>.
Izbornici prikazuju sadržaj liste s time da svaki od njih ima mogućnost izvršavanja akcije. U QMLu, izbornik se može kreirati na više načina. Prvo, kreirat ćemo izbornik koji sadrži dugmad koja će eventulano izvršavati različite akcije. Izvorni kod za izbornike nalazi se u datoteci <code>FileMenu.qml</code>.


<code><br />import Qt 4.7 import the main Qt QML module<br />import "folderName" import the contents of the folder<br />import "script.js" as Script import a Javascript file and name it as Script<br /></code>
<code>
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
</code>


Izvorni kod iznad pokazuje kako koristiti <code>import</code> ključnu riječ. Ona je neophodna ukoliko želimo koristiti JavaScript datoteke, ili QML datoteke a koje se ne nalaze unutaristog direktorija. S obzirom da se <code>Button.qml</code> nalazi u istom direktoriju kao i <code>FileMenu.qml</code>, za <code>Button.qml</code> nije potrebno koristiti <code>import</code> da bi ga upotrijebili. Button element možemo kreirati deklaracijom <code>Button{}</code>, slično kao što smo radili deklaraciju <code>Rectangle{}</code> elementa.
Izvorni kod iznad pokazuje kako koristiti <code>import</code> ključnu riječ. Ona je neophodna ukoliko želimo koristiti JavaScript datoteke, ili QML datoteke a koje se ne nalaze unutaristog direktorija. S obzirom da se <code>Button.qml</code> nalazi u istom direktoriju kao i <code>FileMenu.qml</code>, za <code>Button.qml</code> nije potrebno koristiti <code>import</code> da bi ga upotrijebili. Button element možemo kreirati deklaracijom <code>Button{}</code>, slično kao što smo radili deklaraciju <code>Rectangle{}</code> elementa.


<code><br />Izvorni kod <code>FileMenu.qml</code>:
<code>
Izvorni kod <code>FileMenu.qml</code>:


Row{<br /> anchors.centerIn: parent<br /> spacing: parent.width/6
Row{
anchors.centerIn: parent
spacing: parent.width/6


Button{<br /> id: loadButton<br /> buttonColor: "lightgrey"<br /> label: "Load"<br /> }<br /> Button{<br /> buttonColor: "grey"<br /> id: saveButton<br /> label: "Save"<br /> }<br /> Button{<br /> id: exitButton<br /> label: "Exit"<br /> buttonColor: "darkgrey"
Button{
id: loadButton
buttonColor: "lightgrey"
label: "Load"
}
Button{
buttonColor: "grey"
id: saveButton
label: "Save"
}
Button{
id: exitButton
label: "Exit"
buttonColor: "darkgrey"


onButtonClick: Qt.quit()<br /> }<br /> }<br /></code>
onButtonClick: Qt.quit()
}
}
</code>


U datoteci <code>FileMenu.qml</code> deklarirali smo tri <code>Button</code> elementa. Njih smo postavili unutar <code>Row</code> elementa, koji sve elemente koji se nalazu unutar njega postavlja u okomiti red. Deklaracija <code>Button</code> elementa nalazi se u <code>Button.qml</code> datoteci koja je ista ona datoteka koju smo koritili u prethodnom primjeru. Na svojstva elementa <code>Button</code> mogu se vezati nove vrijednosti i time prepisati osnovna svojstva elementa postavljena u <code>Button.qml</code>. Klikom na dugme <code>exitButton</code> aplikacije će se zatvoriti. Treba uzeti u obzir da će se uz metodu <code>onButtonClick</code> vezanu na <code>exitButton</code> dugme istovremno aktivirati i metoda <code>onButtonClick</code> koja se nalazi unutar <code>Button.qml</code> datoteke.
U datoteci <code>FileMenu.qml</code> deklarirali smo tri <code>Button</code> elementa. Njih smo postavili unutar <code>Row</code> elementa, koji sve elemente koji se nalazu unutar njega postavlja u okomiti red. Deklaracija <code>Button</code> elementa nalazi se u <code>Button.qml</code> datoteci koja je ista ona datoteka koju smo koritili u prethodnom primjeru. Na svojstva elementa <code>Button</code> mogu se vezati nove vrijednosti i time prepisati osnovna svojstva elementa postavljena u <code>Button.qml</code>. Klikom na dugme <code>exitButton</code> aplikacije će se zatvoriti. Treba uzeti u obzir da će se uz metodu <code>onButtonClick</code> vezanu na <code>exitButton</code> dugme istovremno aktivirati i metoda <code>onButtonClick</code> koja se nalazi unutar <code>Button.qml</code> datoteke.
Line 111: Line 175:
Deklariramo dva vizualna elementa unutar <code>menuListModel</code>, <code>FileMenu</code> i <code>EditMenu</code>. Prilagođujemo dva menija i prikazujemo ih upotrebom <code>ListView</code>. <code>MenuBar.qml</code> datoteka sadrži QML deklaracije a <code>EditMenu.qml</code> swadrži jednostavni <code>Edit</code> izbornik.
Deklariramo dva vizualna elementa unutar <code>menuListModel</code>, <code>FileMenu</code> i <code>EditMenu</code>. Prilagođujemo dva menija i prikazujemo ih upotrebom <code>ListView</code>. <code>MenuBar.qml</code> datoteka sadrži QML deklaracije a <code>EditMenu.qml</code> swadrži jednostavni <code>Edit</code> izbornik.


<code>VisualItemModel {<br /> id: menuListModel<br /> FileMenu{<br /> width: menuListView.width<br /> height: menuBar.height<br /> color: fileColor<br /> }<br /> EditMenu{<br /> color: editColor<br /> width: menuListView.width<br /> height: menuBar.height<br /> }<br />}<br /></code>
<code>VisualItemModel {
id: menuListModel
FileMenu{
width: menuListView.width
height: menuBar.height
color: fileColor
}
EditMenu{
color: editColor
width: menuListView.width
height: menuBar.height
}
}
</code>


"ListView":http://doc.qt.nokia.com/4.7/qml-listview.html element prikazuje model prema delegatu. Delagat mode deklarirati da se elementi modela prikazuju unutar <code>Row</code> elementa ili da ih se prikaže unutar mrežnog prikaza. Naš <code>menuListModel</code> već ima vidljive elemente te nije potrebno deklarirati delegata.
"ListView":http://doc.qt.nokia.com/4.7/qml-listview.html element prikazuje model prema delegatu. Delagat mode deklarirati da se elementi modela prikazuju unutar <code>Row</code> elementa ili da ih se prikaže unutar mrežnog prikaza. Naš <code>menuListModel</code> već ima vidljive elemente te nije potrebno deklarirati delegata.


<code>ListView {<br /> id: menuListView
<code>ListView {
id: menuListView


//Anchors are set to react to window anchors<br /> anchors.fill:parent<br /> anchors.bottom: parent.bottom<br /> width:parent.width<br /> height: parent.height
//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<br /> model: menuListModel
//the model contains the data
model: menuListModel


//control the movement of the menu switching<br /> snapMode: ListView.SnapOneItem<br /> orientation: ListView.Horizontal<br /> boundsBehavior: Flickable.StopAtBounds<br /> flickDeceleration: 5000<br /> highlightFollowsCurrentItem: true<br /> highlightMoveDuration:240<br /> highlightRangeMode: ListView.StrictlyEnforceRange<br />}<br /></code>
//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
}
</code>


U to <code>ListView</code> nasljeđuje <code>Flickable</code> i time reagira na pomake miša. Zasdnji dio koda iznad postavlja <code>Flickable</code> svojstva da reagiraju na pokrete unutar našeg programa. PReciznije, svojstvo <code>highlightMoveDuration</code> određuje vrijeme izmjene između dva izbornika. Veća vrijednost, <code>highlightMoveDuration</code> uzrokovat će sporiju izmjenu izbornika.
U to <code>ListView</code> nasljeđuje <code>Flickable</code> i time reagira na pomake miša. Zasdnji dio koda iznad postavlja <code>Flickable</code> svojstva da reagiraju na pokrete unutar našeg programa. PReciznije, svojstvo <code>highlightMoveDuration</code> određuje vrijeme izmjene između dva izbornika. Veća vrijednost, <code>highlightMoveDuration</code> uzrokovat će sporiju izmjenu izbornika.
Line 129: Line 221:
<code>Rectangle</code> objekt <code>labelList</code> imna svojstvo <i>z</i> postavljenmo na 1, što znači da će biti prikazan ispred izborničke trake. ELementi s nižom <i>z</i> vrijednosti bit će prikazane ispred elementa s višom <i>z</i> vrijednoti. Osnovna vrijednost <i>z</i> je 0.
<code>Rectangle</code> objekt <code>labelList</code> imna svojstvo <i>z</i> postavljenmo na 1, što znači da će biti prikazan ispred izborničke trake. ELementi s nižom <i>z</i> vrijednosti bit će prikazane ispred elementa s višom <i>z</i> vrijednoti. Osnovna vrijednost <i>z</i> je 0.


<code>Rectangle{<br /> id: labelList<br /> <br /> z: 1<br /> Row{<br /> anchors.centerIn: parent<br /> spacing:40<br /> Button{<br /> label: "File"<br /> id: fileButton<br /> <br /> onButtonClick: menuListView.currentIndex = 0<br /> }<br /> Button{<br /> id: editButton<br /> label: "Edit"<br /> <br /> onButtonClick: menuListView.currentIndex = 1<br /> }<br /> }<br />}<br /></code>
<code>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
}
}
}
</code>


The menu bar we just created can be flicked to access the menus or by clicking on the menu names at the top. Switching menu screens feel intuitive and responsive.<br />Izbornička traka koju smo upravo kreirali može biti manipulirana da bi se izbornicima pristupalo klikajući po nazivu izbornika na vrhu. Izmjena izborničkih ekrana djeluje intuitivno i ima brzi odaziv.
The menu bar we just created can be flicked to access the menus or by clicking on the menu names at the top. Switching menu screens feel intuitive and responsive.
Izbornička traka koju smo upravo kreirali može biti manipulirana da bi se izbornicima pristupalo klikajući po nazivu izbornika na vrhu. Izmjena izborničkih ekrana djeluje intuitivno i ima brzi odaziv.


p=. [[Image:http://doc.qt.nokia.com/4.7/images/qml-texteditor2_menubar.png|http://doc.qt.nokia.com/4.7/images/qml-texteditor2_menubar.png]]
p=. [[Image:http://doc.qt.nokia.com/4.7/images/qml-texteditor2_menubar.png|http://doc.qt.nokia.com/4.7/images/qml-texteditor2_menubar.png]]
Line 141: Line 255:
Naš Tekst editor ne bi bio tekst editor a da nema u sebi površinu na kojoj možemo raditi izmjene na tekstu. QML ima "TextEdit":http://doc.qt.nokia.com/4.7/qml-textedit.html element koji omogućuje deklaraciju područja za prikaz i izmjene teksta. "TextEdit":http://doc.qt.nokia.com/4.7/qml-textedit.html se razlikuje od običnog "Text":http://doc.qt.nokia.com/4.7/qml-text.html koji nema mogućnost izmjene teksta.
Naš Tekst editor ne bi bio tekst editor a da nema u sebi površinu na kojoj možemo raditi izmjene na tekstu. QML ima "TextEdit":http://doc.qt.nokia.com/4.7/qml-textedit.html element koji omogućuje deklaraciju područja za prikaz i izmjene teksta. "TextEdit":http://doc.qt.nokia.com/4.7/qml-textedit.html se razlikuje od običnog "Text":http://doc.qt.nokia.com/4.7/qml-text.html koji nema mogućnost izmjene teksta.


<code><br /> TextEdit{<br /> id: textEditor<br /> anchors.fill:parent<br /> width:parent.width; height:parent.height<br /> color:"midnightblue"<br /> focus: true
<code>
TextEdit{
id: textEditor
anchors.fill:parent
width:parent.width; height:parent.height
color:"midnightblue"
focus: true


wrapMode: TextEdit.Wrap
wrapMode: TextEdit.Wrap


onCursorRectangleChanged: flickArea.ensureVisible(cursorRectangle)<br /> }
onCursorRectangleChanged: flickArea.ensureVisible(cursorRectangle)
}

Revision as of 11:44, 25 February 2015

[toc align_right="yes" depth="2"]

Početak programiranja u QML-u

Dobrodošli u svijet QMLa, opisnog UI jezika. U ovom vodiču kreirat ćemo jednostavni editor teksta upotrebom QMLa. Nakon što završite s čitanjem ovog vodiča, trebali biste biti spremni za razvoj vlastitih aplikacija upotrebom QMLa i C+.

h2. QML u izradi korisničkog sučelja

Aplikacija koju ćemo raditi je jednostavni tekstualni editor koji učitava, snima te izvodi jednostavne funkcije na tekstu. Ovaj vodič sastoji se od dva dijela. U prvom dijelu obrađuju se dizajn i izgled aplikacije te ponašanje iste upotrebom opsinog jezika u QMLu. U drugom dijelu, učitavanje i snimanje datoteke bit će implementirano koriteći Qt C. Upotrebom "Qt Meta-Object System":http://doc.qt.nokia.com/4.7/metaobjects.html omogućujemo QML-ovim elementima pristup C+ metodama. Radeći u Qt C++ i QML-u, lako je odvojiti logiku korisničkog sučelja od ostatka aplikacije.

p=. Texteditor

Da bi pokrenuli QML primjer proslijediti QML datoteku "qmlviewer":http://doc.qt.nokia.com/4.7/qmlviewer.html programu. C++ dijelovi ovog vodiča predpostavljaju da čitatelj posjeduje osnovno znanje o kreiranju izvršnih datoteka iz Qt projekata.

Definicija Dugmadi i Menija

Osnovni elementi - dugme

Započet ćemo rad na tekst editoru kreiranjem dugmeta. Funkcionalno, dugme se sastoji od područja osjetljivog na akcije miša i naslov. Dugmad izvršava akcije nakon što korisnik klikne na njega.

U QML-u, osnovni vizualni element je "Rectangle":http://doc.qt.nokia.com/4.7/qml-rectangle.html. "Rectangle":http://doc.qt.nokia.com/4.7/qml-rectangle.html ima svojstva kojima se određuje njegov izgled i položaj.

import Qt 4.7
Rectangle{
 id:simplebutton
 color: "grey"
 width: 150
 height: 80
 Text{
 id: buttonLabel
 text: "button label"
 anchors.centerIn: parent;
 anchors.verticalCenterOffset: 1
 }
}

Prvo, linija koda

import Qt 4.7

omogućuje "qmlviewer":http://doc.qt.nokia.com/4.7/qmlviewer.html alatom da uveze QML element koje ćemo kasnije koristiti. Ova linija je neophodna za svaku QML datoteku. Primjetite da koristimo i verziju Qt-a pri tome. Ovaj jednostavi element ima unikatni naziv,

simplebutton

koji je vezan za svojstvo

id

. Svojstva elementa "Rectangle":http://doc.qt.nokia.com/4.7/qml-rectangle.html vežu se za vrijednosti, navođenjem svojstva iza kojeg bi uslijedila dvotočka a zatim vrijednost. U primjeru izvornog koda, siva boje postavljenja je za vrijednost boje(

color

) "Rectangle":http://doc.qt.nokia.com/4.7/qml-rectangle.html elementa. Na isti način postavljena su svojstva za visinu(

height

) i širinu(

width

) elementa. "Text":http://doc.qt.nokia.com/4.7/qml-text.html element je nepromjenjivo tekstualno polje. U primjeru ćemo ga nazvati

buttonLabel

. Da bi postavili sadržaj "Text":http://doc.qt.nokia.com/4.7/qml-text.html polja, potrebno je postaviti svojstvo

text

. Naziv se nalazi unutar elementa "Rectangle":http://doc.qt.nokia.com/4.7/qml-rectangle.html i da bi centrirali potrebno je povezati lokaciju "Text":http://doc.qt.nokia.com/4.7/qml-text.html elementa s njegovim parent elementom, koji je u ovom slucaju simplebutton. Ovaj ćemo izvorni kod snimiti u datoteku SimpleButton.qml. Pokrenut ćemo "qmlviewer":http://doc.qt.nokia.com/4.7/qmlviewer.html program s parametrom

SimpleButton.qml

i prikazat će nam se sivi pravokutnik s upisanim tekstom.

p=. http://doc.qt.nokia.com/4.7/images/qml-texteditor1_simplebutton.png

Da bismo implementirali interakciju s dugmetom, upotrijebiti ćemo QML-ov sistem za obradu događaja. Obrada događaja u QML-u je prilično slično sustavu signala i slotova u QT-u. Signali se emitiraju i pozivaju povezani slot.

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" )
 }
}

Dodajemo "MouseArea":http://doc.qt.nokia.com/4.7/qml-mousearea.html našem

simplebutton

elementu. "MouseArea":http://doc.qt.nokia.com/4.7/qml-mousearea.html element opisuje interaktivno područje unutar kojeg se detektiraju korinički pomaci miša. Za naše dugme, povezali smo cijeli "MouseArea":http://doc.qt.nokia.com/4.7/qml-mousearea.html za područje dugmeta. Dio koda

anchors.fill

omogućuje pritup svojstvu

fill

unutar grupe svojstva

anchors

. QML koristi predloške (

layout

) bazirane na principu sidra (anchor) koji omogućavaju povezivanje sidra jednog elementa s drugim elementima kreirajući pri tome robusna sučelja. Za "MouseArea":http://doc.qt.nokia.com/4.7/qml-mousearea.html postoji mnogo signala koji se aktiviraju pomicanjem miša unutar "MouseArea":http://doc.qt.nokia.com/4.7/qml-mousearea.html granica. Jedan od njih je

onClicked

i on se poziva svaki put kad se pritisne tipka miša, po defaultu lijeva. Akciju ćemo zatim povezati s

onClicked

signalom. U našem primjeru

console.log()

ispisuje tekst svaki put kad bi se tipka miša pritisnula unutar granica "MouseArea":http://doc.qt.nokia.com/4.7/qml-mousearea.html. Metoda

console.log()

je izuzetno korisna za potrebe traženja i ispravljanja grešaka u kodu kao i ispis teksta. Izvorni kod u

SimpleButton.qml

dovoljan je za prikaz dugmeta na ekranu te ispis teksta svaki put kad bi kliknuli na njega mišem.

Rectangle {
 id:Button
 

property color buttonColor: "lightblue"
 property color onHoverColor: "gold"
 property color borderColor: "white"

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

MouseArea {
 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
}

U datoteci

Button.qml

nalazi se potpuno funkcionalno dugme. Izvorni kod uz ovaj vodič je djelomično skraćen s obzirom da se ti dijelovi kod nalaze u prijašnjim primjerima ili nisu relevantne za ovu temu. Proizvoljna svojstva deklariraju se upotrebom "property type name" sintakse . U primjeru izvornog koda, svojstvo

buttonColor

, tip

color

je deklarirano i vezano uz vrijednost

"lightblue"

. Svojstvo

buttonColor

kasnije ćemo upotrijebiti u kondicionaloj operaciji kojom ćemo utvrditi boji dugmeta. Bitno je za primjetiti da je svojstvu vrijednost moguće dodijeliti upotrebom

"="

operatora uz mogućnost dodijeljivanja vrijednosti upotrebom znaka

":"

. Proizvoljna svojstva omogućuju pristup internim elementima izvan "Rectangle":http://doc.qt.nokia.com/4.7/qml-rectangle.html objekta. Osnovni "tipovi podatka":http://doc.qt.nokia.com/4.7/qdeclarativebasictypes.html s kojima QML radi su

int

,

string

,

real

kao i

variant

Povezivanjem

onEntered

i

onExited

signala s bojama, okvir dugmeta na ekranu promijenit će boju u žuto dok se pokazivač nađe unutar njegovih granica . Signal

buttonClick()

deklariran je u Button.qml datoteci postavljanjem ključne riječi ispred naziva signala. Svim signalim automatski se kreiraju vezane metode koje nose isti naziv kao signal. Kao rezultat dobijemo metodu

onButtonClick()

vezanu za signal

buttonClick

. Na metodu

onButtonClick()

zatim se veže akcija koja će se izvršiti. U našem primjeru,

onClicked

signal aktivirat će metodu

onButtonClick

koja će prikazati tekst. Metoda

onButtonClick

omogućuje vanjskim objektima pristup području dugmeta. Primjerice, elementi na sučelju mogu imati više od jedne deklaracije "MouseArea":http://doc.qt.nokia.com/4.7/qml-mousearea.html a

buttonClick

signal će odrediti koja će vezana metoda bolje odraditi akciju vezanu na signal.

Do sada smo svladali osnove implementacije elemenata u QMLu za obradu osnovnih pokreta mišem. Kreirali smo "tekstualni":"Rectangle":http://doc.qt.nokia.com/4.7/qml-text.html element unutar objekta "Rectangle":http://doc.qt.nokia.com/4.7/qml-rectangle.html, prilagodli njegova svojstva i implementirali ponašanje koje odgovarta pokretima mišem. Koncept kreiranja elemenata unutar elemenata raširen je kroz cijelu aplikaciju.

Ovo dugme je beskorisno ukoliko nije upotrebljen kao komponenta koja će izvršti neku akciju. U sljedećem dijelu vodiča kreirat ćemo meni koji će sadržavati neke od dugmadi.

p=. http://doc.qt.nokia.com/4.7/images/qml-texteditor1_button.png

Kreiranje izborničke (MENU) stranice

Do ovog tgrenutka pokrili smo kreiranje elemenata i pripadajućih akcija unutar jedne QML datoteke. U ovom dijelu vodića proći ćemo uvoz QML elemenata te ponovno korištenje postojećih elemenata u izgradnji drugih.

Izbornici prikazuju sadržaj liste s time da svaki od njih ima mogućnost izvršavanja akcije. U QMLu, izbornik se može kreirati na više načina. Prvo, kreirat ćemo izbornik koji sadrži dugmad koja će eventulano izvršavati različite akcije. Izvorni kod za izbornike nalazi se u datoteci

FileMenu.qml

.

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

Izvorni kod iznad pokazuje kako koristiti

import

ključnu riječ. Ona je neophodna ukoliko želimo koristiti JavaScript datoteke, ili QML datoteke a koje se ne nalaze unutaristog direktorija. S obzirom da se

Button.qml

nalazi u istom direktoriju kao i

FileMenu.qml

, za

Button.qml

nije potrebno koristiti

import

da bi ga upotrijebili. Button element možemo kreirati deklaracijom

Button{}

, slično kao što smo radili deklaraciju

Rectangle{}

elementa.

Izvorni kod <code>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()

}
}

U datoteci

FileMenu.qml

deklarirali smo tri

Button

elementa. Njih smo postavili unutar

Row

elementa, koji sve elemente koji se nalazu unutar njega postavlja u okomiti red. Deklaracija

Button

elementa nalazi se u

Button.qml

datoteci koja je ista ona datoteka koju smo koritili u prethodnom primjeru. Na svojstva elementa

Button

mogu se vezati nove vrijednosti i time prepisati osnovna svojstva elementa postavljena u

Button.qml

. Klikom na dugme

exitButton

aplikacije će se zatvoriti. Treba uzeti u obzir da će se uz metodu

onButtonClick

vezanu na

exitButton

dugme istovremno aktivirati i metoda

onButtonClick

koja se nalazi unutar

Button.qml

datoteke.

p=. Izbornik

Row

se deklarira unutar deklaracije

Rectangle

time kreirajući

Rectangle

koji sadrži u sebi red dugmadi. Ovaj dodatni

Rectangle

element indirektno utječe na organizaciju reda dugmadi unutar menija. Deklaracija izbornika

Edit

je u ovoj fazi prilično slična. Izbornik sadrži dugmad s nazivima:

Cut

,

Paste

i

Select All

p=. http://doc.qt.nokia.com/4.7/images/qml-texteditor1_editmenu.png

Oboružani znanjem o uvozu i prilagođavanju od prije postojećih elemenata, sad možemo spojiti izborničke stranice u izborničku traku, koja će se sastojati od dugmadi za izbor menija i dobiti dobar primjer strukturiranja podataka upotrebom QML-a.

Implementacija izborničke trake

Naš tekst editor treba prikazivati izbornik upotrebom izborničke trake. Izbornička traka izmjenjivat će različite menije omogućujući koriniku izbor željene akcije. Izmjena izbornika podrazumjeva da su izbornicima treba malo više strukturiranja od običnog prikaza u redu. QML koristi modele i predloške za pregled strukturiranih podataka.

Upotreba podatkovnih modela i predložaka

QML dolazi s različitim "podatkovim modelima":http://doc.qt.nokia.com/4.7/qdeclarativemodels.htm i predlošcima za prikaz istih. Naša izbornička traka prikazivati će izbornike u listi, sa zaglavljem u kojem će se nalaziti nazivi redova. Lista izbornika deklarira se unutar "VisualItemModel":http://doc.qt.nokia.com/4.7/qml-visualitemmodel.html elementa. "VisualItemModel":http://doc.qt.nokia.com/4.7/qml-visualitemmodel.html element sadrži elemente koji u sebi već sadrže

Rectangle

elemente kao i UI elemente koje smo uvezi. Druge tipove modele kao što je "ListModel":http://doc.qt.nokia.com/4.7/qml-listmodel.html moraju koristiti delegate da bi prikazali svoje podatke. Deklariramo dva vizualna elementa unutar

menuListModel

,

FileMenu

i

EditMenu

. Prilagođujemo dva menija i prikazujemo ih upotrebom

ListView

.

MenuBar.qml

datoteka sadrži QML deklaracije a

EditMenu.qml

swadrži jednostavni

Edit

izbornik.

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

"ListView":http://doc.qt.nokia.com/4.7/qml-listview.html element prikazuje model prema delegatu. Delagat mode deklarirati da se elementi modela prikazuju unutar

Row

elementa ili da ih se prikaže unutar mrežnog prikaza. Naš

menuListModel

već ima vidljive elemente te nije potrebno deklarirati delegata.

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
}

U to

ListView

nasljeđuje

Flickable

i time reagira na pomake miša. Zasdnji dio koda iznad postavlja

Flickable

svojstva da reagiraju na pokrete unutar našeg programa. PReciznije, svojstvo

highlightMoveDuration

određuje vrijeme izmjene između dva izbornika. Veća vrijednost,

highlightMoveDuration

uzrokovat će sporiju izmjenu izbornika.

ListView

sadržava sve elemente po indeksima i svaki vizualni element je dostupan po tom indeksu, soritano po redu deklaracije. Izmjena

currentIndex

izmjenjuje označeni element unutar

ListView

elementa. Ovaj efekt dobvro je vidljiv na zaglavlju našeg izbornika. U redu se nalaze dva dugmeta koji kad se kliken na njih mijenjaju trenutno odabrani izbornik. Dugme

fileButton

izmijenit će trenbutno odabrani izbornik na

File

izbornik, s indeksom 0 pošto je

FileMenu

prvi deklariran unutar

menuListModel

elementa. Slično tome,

editButton

će promijeniti trenutni izbornik na

EditMenu

.

Rectangle

objekt

labelList

imna svojstvo z postavljenmo na 1, što znači da će biti prikazan ispred izborničke trake. ELementi s nižom z vrijednosti bit će prikazane ispred elementa s višom z vrijednoti. Osnovna vrijednost z je 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
 }
 }
}

The menu bar we just created can be flicked to access the menus or by clicking on the menu names at the top. Switching menu screens feel intuitive and responsive. Izbornička traka koju smo upravo kreirali može biti manipulirana da bi se izbornicima pristupalo klikajući po nazivu izbornika na vrhu. Izmjena izborničkih ekrana djeluje intuitivno i ima brzi odaziv.

p=. http://doc.qt.nokia.com/4.7/images/qml-texteditor2_menubar.png

Izrada Text Editora

Deklaracija Text Area

Naš Tekst editor ne bi bio tekst editor a da nema u sebi površinu na kojoj možemo raditi izmjene na tekstu. QML ima "TextEdit":http://doc.qt.nokia.com/4.7/qml-textedit.html element koji omogućuje deklaraciju područja za prikaz i izmjene teksta. "TextEdit":http://doc.qt.nokia.com/4.7/qml-textedit.html se razlikuje od običnog "Text":http://doc.qt.nokia.com/4.7/qml-text.html koji nema mogućnost izmjene teksta.

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

wrapMode: TextEdit.Wrap

onCursorRectangleChanged: flickArea.ensureVisible(cursorRectangle)

}