Creant una app per Ubuntu Touch [QML] - [Part 3]

Creant una app per Ubuntu Touch

Tercera part d'aquesta sèrie de post (primera part, segona part) On estem construint una aplicació per Ubuntu Touch o per al mateix Ubuntu d'escriptori. Vaig afegir una part que em va passar en l'anterior post, i és que encara que incrementem les variables dels errors, encerts i punts, després no es mostraven en pantalla, això es degut a que no canviem la propietat text dels Labels:

                Label {id: fallades text: "Fallades:" + nfallos color: "xarxa"} Label {id: encerts text: "Encerts:" + naciertos} Label {id: punts text: "Punts:" + npuntos fontsize: "medium "}

Continuació de la lògica de el joc

Temps

Bé, com ja sabem, el ProgressBar mostra el transcurs de el temps que tenim per contestar una pregunta. Per gestionar el temps farem ús d'un Timer, el timer és un element que es va repetint a un interval de x milisegons, en aquest cas cada interval li direm que augmenti el progrés de la ProgressBar; però abans que miri si ha arribat a la fi o no d'el temps, en cas que arribi a al final, haurem de restar una vida.

Podreu veure una línia de codi que encara no hem implementat (PopupUtils.open (dialog)), Aquesta línia és per obrir el diàleg de cap de joc en cas que no tinguem més vides (3 errors eliminats), més endavant en aquest mateix POSR veurem com fer dit diàleg.

Codi de l'Timer (el podem posar sota de l'ProgressBar):

       ProgressBar {id: temps anchors.horizontalCenter: parent.horizontalCenter minimumValue: 0 maximumValue: 300} Timer {id: simpletimer c: 100 repeat: true running: true onTriggered: {if (tiempo.value <tiempo.maximumValue) tiempo.value + = 1.0 else {nfallos = nfallos +1 if (nfallos <3) {num = num +1 Logica.nextPregunta (num) tiempo.value = tiempo.minimumValue} else {simpletimer.stop () PopupUtils.open (dialog)}} }}

Com veiem, en onTriggered posem el codi que augmentarà el ProgressBar sumant 1 unitat cada 100 (interval) Mili-segons. Observar que hem afegit dos atributs a l'ProgressBar, minimumValue i maximumValue, que com ja es veu, es tracta del valor màxim i el valor mínim.

Per iniciar i aturar el timer:

simpletimer.start () simpletimer.stop ()

Opcions (50%, Congelar i Next)

Primer creiem tres variables que controlin que les opcions només poden ser usades 1 cop:

    property int per cent: 0 property int amb: 0 property int next: 0

50%

Button {id: B50 text: "50%" onClicked: {if (per cent == 0) {var correct = aDocument.contents.preguntas [num] .correcta if (correct == 1) {resp2.enabled = false resp3. enabled = false} else if (correct == 2) {resp1.enabled = false resp4.enabled = false} else if (correct == 3) {resp1.enabled = false resp4.enabled = false} else {resp2.enabled = false resp1.enabled = false} per cent = 1}}

Amb enabled = false el que fem és posar el botó de manera que no pot ser pressionat, de manera que obtenim la resposta correcta amb aDocument.contents.preguntas [num] .correcta ia partir d'aquí depenent de la qual sigui correcta «eliminem »dos botons que no ho siguin.

congelar

                Button {id: bCon text: "Congelar" onClicked: {if (amb == 0) simpletimer.stop () amb = 1}}

Aquest és dels fàcils, només hem d'aturar el timer amb simpletimer.stop (), això sí, hem de tornar a engegar (i posar el ProgressBar a 0) quan passem de pregunta.

Següent

                 Button {id: bNext text: "Next" onClicked: {if (next == 0) {num = num +1 Logica.nextPregunta (num) next = 1}}}

Fem servir la funció que ja vam crear per passar de pregunta (nextPregunta).

diàlegs

Per finalitzar la partida farem servir un Dialog, ja sigui per que hem guanyat (no hi ha més preguntes) o perquè hem perdut (hem fet 3 errors), per usar els diàlegs hem d'importar el mòdul:

import Ubuntu.Components.Popups 0.1

Crearem el diàleg que ens diu que hem perdut:

        Component {id: dialog Dialog {id: dialogui title: "Cap de l'Joc!" text: "Hs perdut totes les vides :(" Button {text: "Sortir" onClicked: Qt.quit ()} Button {text: "Tornar a començar" color: UbuntuColors.orange onClicked: {num = 0; Logica.nextPregunta ( num) npuntos = 0 naciertos = 0 PopupUtils.close (dialogui)}}}}

Tenim dos botons, un per tancar l'aplicació (Qt.quit ()) i un altre per tornar a començar la partida. Inicialitzem les variables a 0 i tanquem el diàleg.

Per obrir el diàleg:

PopupUtils.open (dialog)

Per tancar-lo:

PopupUtils.close (dialogue)

Vegem el diàleg a l'acabar la partida:

Podem crear un diàleg exactament igual canviant l'identificador i el text on posi que hem guanyat.

Dissenyant l'agregat de preguntes

Quan ho vam dissenyar a GTK, Vam crear un diàleg, però aquest cop ho farem en un Tab, de totes maneres tindrà la mateixa estructura:

Com veiem, farem servir un Label, 4 Textarea per escriure la pregunta, 4 TextField i XNUMX Switch; finalment, un Button per afegir la pregunta. Sense més vegem el codi:

import QtQuick 2.0 import Ubuntu.Components 0.1 Tab {title: i18n.tr ( "+ Preguntes") Page {id: pageAdd Column {anchors.top: pageAdd.top anchors.topMargin: 50 spacing: 15 width: parent.width height: parent.height - 50 Label {id: pregunta text: "Afegeix una pregunta a la base de dades:" anchors.horizontalCenter: parent.horizontalCenter fontsize: "large"} Textarea {width: parent.width - 20 height: units.gu (12) contentWidth: units.gu (30) contentHeight: units.gu (60) anchors.horizontalCenter: parent.horizontalCenter} Row {spacing: 15 anchors.horizontalCenter: parent.horizontalCenter TextField {placeholderText: "Resposta 1" width: 300} Switch {checked: false}} Row {spacing: 15 anchors.horizontalCenter: parent.horizontalCenter TextField {placeholderText: "Resposta 2" width: 300} Switch {checked: false}} Row {spacing: 15 anchors.horizontalCenter: parent. horizontalCenter TextField {placeholderText: "Resposta 3" width: 300} Switch {checked: false}} Row {spacing: 15 anchors.horizontalCenter: parent.horizontalCenter TextField {placeholderText: "Resposta 4" width: 300} Switch {checked: false}} Button {text: "Add +" anchors.horizontalCenter: parent.horizontalCenter width: parent.width - 20}}}}

Vegem com queda:

Si ara provem els Switch, veurem que podem marcar-a tots com a pregunta correcta, i naturalment sols una pot ser-ho, per tant farem el següent: podrem un identificador a cada switch (també als TextField ja que haurem d'obtenir el contingut per guardar-ho a la base de dades) d'acord amb la seva resposta, i quan li donem clic posarem tots els altres en mode checked = false:

             Row {spacing: 15 anchors.horizontalCenter: parent.horizontalCenter TextField {id: RES1 placeholderText: "Resposta 1" width: 300} Switch {id: SW1 checked: false onClicked: {if (sw1.checked == true) {SW2. checked = false sw3.checked = false sw4.checked = false}}}}

Si ho provem ara veurem com només podem marcar un.