Getting Started Programming with QML/hr
This article may require cleanup to meet the Qt Wiki's quality standards. Reason: Auto-imported from ExpressionEngine. Please improve this article if you can. Remove the {{cleanup}} tag and add this page to Updated pages list after it's clean. |
Contents
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+.
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 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 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. Rectangle 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
}
}
import Qt 4.7
simplebutton
id
color
height
width
buttonLabel
text
SimpleButton.qml
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" )
}
}
simplebutton
anchors.fill
fill
anchors
layout
onClicked
onClicked
console.log()
console.log()
SimpleButton.qml
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
}
Button.qml
buttonColor
color
"lightblue"
buttonColor
"="
":"
int
string
real
variant
onEntered
onExited
buttonClick()
onButtonClick()
buttonClick
onButtonClick()
onClicked
onButtonClick
onButtonClick
buttonClick
Do sada smo svladali osnove implementacije elemenata u QMLu za obradu osnovnih pokreta mišem. Kreirali smo "tekstualni":Rectangle element unutar objekta Rectangle, 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 datoteciFileMenu.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
import
Button.qml
FileMenu.qml
Button.qml
import
Button{}
Rectangle{}
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()
} }
</code>
U datoteciFileMenu.qml
Button
Row
Button
Button.qml
Button
Button.qml
exitButton
onButtonClick
exitButton
onButtonClick
Button.qml
p=. Izbornik
Row
Rectangle
Rectangle
Rectangle
Edit
Cut
Paste
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 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 elementa. VisualItemModel element sadrži elemente koji u sebi već sadržeRectangle
menuListModel
FileMenu
EditMenu
ListView
MenuBar.qml
EditMenu.qml
Edit
VisualItemModel {
id: menuListModel
FileMenu{
width: menuListView.width
height: menuBar.height
color: fileColor
}
EditMenu{
color: editColor
width: menuListView.width
height: menuBar.height
}
}
Row
menuListModel
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
}
ListView
Flickable
Flickable
highlightMoveDuration
highlightMoveDuration
ListView
currentIndex
ListView
fileButton
File
FileMenu
menuListModel
editButton
EditMenu
Rectangle
labelList
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 element koji omogućuje deklaraciju područja za prikaz i izmjene teksta. TextEdit se razlikuje od običnog Text 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)
}