1tgD67B

Label {
id: result
text: " "
font.pixelSize: Theme.fontSizeHuge
horizontalAlignment: Text.AlignHCenter
width: parent.width
}
Label {
id: dice_rolls
text: " "
font.pixelSize: Theme.fontSizeExtraSmall
horizontalAlignment: Text.AlignHCenter
width: parent.width
height: 20
wrapMode: Text.Wrap
maximumLineCount: 2
}
Slider {
id: nod
label: "Number of dice"
minimumValue: 1
maximumValue: 10
stepSize: 1
value: 1
valueText: value
width: parent.width
}
Listaus 3. Sovelluksen pääsivun Label- ja Sliderkomponenttien
sisältö.
kymmeneen. Nykyinen arvo kerrotaan
sovelluksen käyttäjälle valueText-ominaisuuden
avulla. Sen arvo viittaa suoraan
value-ominaisuuteen, jonka arvo puolestaan
päivittyy automaattisesti, kun liukua
siirretään.
Loput pääsivun toiminnot ovat listauksessa
4. Grid-komponentin avulla
napit sijoitetaan ruudukkoon, jossa on
kaksi saraketta ja neljä riviä. Grid sijoittaa
alikomponenttinsa järjestyksessä
vasemman ylänurkan solusta alkaen.
Koska ruudukossa on yhteensä kahdeksan
solua, pitää Grid-komponentilla olla
kahdeksan alikomponenttia. Listauksesta
kuitenkin nähdään, että niitä on vain
kolme. Ruudukko täytetäänkin Repeaterkomponentin
avulla.
Repeater luo jokaista mallin alkiota
kohden yhden edustajan (delegate). Mallin
dataan päästään käsiksi modelDataominaisuuden
avulla, jota voi käyttää
edustajan määrittelyssä. Lisäksi edustajassa
voi käyttää ominaisuutta index,
joka kertoo data-alkion sijoituksen mallissa.
Repeater-komponentti käytännössä
korvaa sen, että painikekomponentti
Button olisi toistettu kuusi kertaa hieman
erilaisella nopan sivumäärällä.
Button-komponentti on Silican painike.
Yleensä sille asetetaan kolme ominaisuutta:
leveys, teksti ja suoritettava
toiminto, kun painallus havaitaan. Tässä
tapauksessa painalluksen seurauksena
kutsutaan funktiota roll_dice, joka arpoo
noppien silmäluvut ja sijoittaa arvot
Label-komponentteihin. Funktio näkyy
listauksessa 5.
Listauksessa 4 olevat kaksi viimeistä
komponenttia muodostavat käyttäjän
määrittämän nopan. Button-komponentti
on muuten samanlainen kuin edelläkin,
mutta nopan sivumäärä haetaan tällä
kertaa erillisestä TextField-komponentista
ja sen text-ominaisuudesta.
TextField perii QML:n peruskomponentin
TextInput, joten niiden ominaisuudet
vastaavat pääosin toisiaan. Esimerkiksi
syötteentarkistus voidaan hoitaa
samalla tavalla eli käyttämällä IntValidator-,
DoubleValidator- tai RegExpValidator-komponenttia.
Noppasovelluksessa
halutaan kokonaislukuja, joten käytetään
IntValidatoria ja määritellään lukualueeksi
2–10 000.
TextField-komponentin hyödyllisiä
ominaisuuksia ovat myös inputMethodHints
ja placeholderText. Näistä
ensimmäinen antaa virtuaalinäppäimistölle
ohjeita, millaista syötettä odotetaan.
Esimerkkisovelluksessa käytetty
Qt.ImhDigitsOnly kertoo, että tekstikenttä
hyväksyy vain numeroita, joten Sailfish
tuo esiin numeronäppäimistön, kun
tekstikenttä aktivoidaan. Ominaisuus
placeholderText puolestaan asettaa tekstin,
joka näytetään tekstikentän ollessa
tyhjänä. Sen avulla voi vihjata käyttäjälle,
mitä sisältöä kenttään halutaan.
Sovelluskansi – vuorovaikutteinen
kiiltokuva
Katsotaan seuraavaksi, miten sovelluskansi
toteutetaan. Kansi otetaan käyttöön
ApplicationWindow-komponentin coverominaisuuden
avulla. Suositeltavaa on
käyttää kannen toteutuksessa Cover-
Background-komponenttia, joka sisältää
esimerkiksi logiikkaa kannen sijoittamiseen
kotinäkymässä.
Noppasovelluksen kanteen haluamme
viimeisimmän nopanheiton tuloksen
sekä pyyhkäisytoiminnon, jolla noppaa
voi heittää suoraan kannesta käsin. Listauksessa
6 on varsinainen kannen määrittely.
Listauksen alussa määritellään
pari ominaisuutta ja signaali, jotka auttavat
pyyhkäisytoiminnon toteutuksessa.
Kannessa näytettävät tekstit on toteutettu
Label-komponenteilla, jotka puolestaan
ovat sijoittelusta vastaavan Columnkomponentin
sisällä.
Kannen pyyhkäisytoiminnot määritellään
CoverActionList-komponentin
alikomponentteina, joita voi olla enintään
kaksi. Ensimmäinen CoverActionalikomponentti
tulee näkyviin kannen
Grid {
columns: 2
rows: 4
spacing: Theme.paddingLarge
rowSpacing: Theme.paddingLarge
Repeater {
model: [4, 6, 8, 10, 12, 20]
delegate: Button {
text: "D" + modelData
onClicked: roll_dice(modelData)
width: base.button_width
}
}
TextField {
id: custom_dice
text: "100"
placeholderText: "Sides count"
validator: IntValidator { bottom: 2; top: 10000 }
inputMethodHints: Qt.ImhDigitsOnly
width: base.button_width
}
Button {
text: "D" + custom_dice.text
onClicked: roll_dice(custom_dice.text)
width: base.button_width
}
}
Listaus 4. Sovelluksen pääsivun loppuosa eli Grid-komponentti ja sen alikomponentit.
function roll_dice (max) {
root.lastDiceMax = max
var sum = 0
var all_rolls = " "
for (var i = 1; i 1) {
if (i == 1) {
all_rolls = roll.toString()
} else {
all_rolls = all_rolls + " + " + roll
}
}
}
result.text = sum
root.lastThrow = nod.sliderValue + "d" + max + ": " + sum
dice_rolls.text = all_rolls
if(root.diceIsThrown === false) {
root.diceIsThrown = true
}
return 0
}
Listaus 5. Nopan silmäluvun arvonnasta vastaava roll_dice-funktio.
44 2014.2