Création d'une application pour Ubuntu Touch [QML] - [Partie 3]

Créer une application pour Ubuntu Touch

Troisième partie de cette série d'articles (Partie, deuxième) où nous construisons une application pour Ubuntu tactile ou pour le même Ubuntu bureau. Je vais ajouter une partie qui m'est arrivée dans le post précédent, à savoir que bien que nous ayons augmenté les variables des échecs, des hits et des points, elles n'étaient pas affichées à l'écran, c'est parce que nous n'avons pas changé la propriété text des étiquettes:

                Label {id: failures text: "Failures:" + nfaults color: "red"} Label {id: hits text: "hits:" + born} Label {id: points text: "Points:" + npoints fontSize: "medium "}

Poursuite de la logique du jeu

Temps

Eh bien, comme nous le savons déjà, la barre de progression indique le temps dont nous disposons pour répondre à une question. Pour gérer le temps que nous utiliserons un Timer, le timer est un élément qui se répète à un intervalle de x millisecondes, dans ce cas à chaque intervalle nous lui dirons d'augmenter la progression de ProgressBar; Mais avant de regarder si elle a atteint la fin des temps ou non, si elle atteint la fin, nous devons soustraire une vie.

Vous pouvez voir une ligne de code que nous n'avons pas encore implémentée (PopupUtils.open (boîte de dialogue)), cette ligne sert à ouvrir le dialogue de fin de partie au cas où nous n'aurions plus de vies (3 bugs éliminés), plus loin dans cet article, nous verrons comment faire ce dialogue.

Code du minuteur (nous pouvons le mettre sous ProgressBar):

       ProgressBar {id: time anchors.horizontalCenter: parent.horizontalCenter minimumValue: 0 maximumValue: 300} Timer {id: simpletimer c: 100 repeat: true en cours d'exécution: true onTriggered: {if (time.value <time.maximumValue) time.value + = 1.0 else {nfaults = nfaults + 1 if (nfaults <3) {num = num + 1 Logic.nextQuestion (num) time.value = time.minimumValue} else {simpletimer.stop () PopupUtils.open (dialog)}} }}

Comme nous pouvons le voir, dans onTriggered nous mettons le code qui augmentera la barre de progression en ajoutant 1 unité toutes les 100 (intervalle) milli-secondes. Notez que nous avons ajouté deux attributs à ProgressBar, minimumValue et maximumValue, qui, comme vous pouvez le voir, est la valeur maximale et la valeur minimale.

Pour démarrer et arrêter le chronomètre:

simpletimer.start () simpletimer.stop ()

Options (50%, Figer et Suivant)

Commençons par créer trois variables qui contrôlent que les options ne peuvent être utilisées qu'une seule fois:

    propriété int pour cent: 0 propriété int avec: 0 propriété int suivant: 0

50%

Bouton {id: b50 text: "50%" onClicked: {if (percent == 0) {var correct = aDocument.contents.questions [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} pour cent = 1}}

Avec enabled = false ce que nous faisons est de mettre le bouton de sorte qu'il ne puisse pas être pressé, de manière à obtenir la bonne réponse avec aDocument.contents.questions [num]. Correct et à partir d'ici en fonction de celui qui est correct éliminer »Deux boutons qui ne le sont pas.

Geler

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

C'est l'un des plus simples, il suffit d'arrêter le chronomètre avec simpletimer.stop (), oui, nous devons le rallumer (et mettre le progressBar à 0) lorsque nous passons en revue la question.

Suivant

                 Bouton {id: bNext text: "Next" onClicked: {if (next == 0) {num = num + 1 Logic.nextQuestion (num) next = 1}}}

Nous utilisons la fonction que nous avons déjà créée pour passer la question (nextQuestion).

dialogues

Pour terminer le jeu, nous utiliserons une boîte de dialogue, soit parce que nous avons gagné (il n'y a plus de questions), soit parce que nous avons perdu (nous avons fait 3 erreurs), pour utiliser les boîtes de dialogue nous devons importer le module:

importer Ubuntu.Components.Popups 0.1

Nous allons créer le dialogue qui nous dit que nous avons perdu:

        Composant {id: dialog Dialog {id: dialogue title: "Game Over!" text: "Vous avez perdu toutes les vies :(" Button {text: "Quit" onClicked: Qt.quit ()} Button {text: "Recommencer" couleur: UbuntuColors.orange onClicked: {num = 0; Logica.nextQuestion (num ) npoints = 0 naissance = 0 PopupUtils.close (dialogue)}}}}

Nous avons deux boutons, un pour fermer l'application (Qt.quit ()) et un autre pour recommencer le jeu. Nous initialisons les variables à 0 et fermons la boîte de dialogue.

Pour ouvrir la boîte de dialogue:

PopupUtils.open (boîte de dialogue)

Pour la fermer:

PopupUtils.close (dialogue)

Voyons le dialogue à la fin du jeu:

Nous pouvons créer un dialogue exactement le même en changeant l'identifiant et le texte où il dit que nous avons gagné.

Conception de l'agrégat de questions

Quand nous le concevons en GTK, nous créons un dialogue, mais cette fois nous le ferons dans un onglet, de toute façon il aura la même structure:

Comme nous pouvons le voir, nous utiliserons un Label, un TextArea pour écrire la question, 4 TextField et 4 Switch; enfin, un bouton pour ajouter la question. Regardons simplement le code:

import QtQuick 2.0 import Ubuntu.Components 0.1 Tab {title: i18n.tr ("+ Questions") Page {id: pageAdd Column {anchors.top: pageAdd.top anchors.topMargin: 50 espacement: 15 largeur: parent.width hauteur: parent.height - 50 Label {id: texte de la question: "Ajouter une question à la base de données:" 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} Ligne {espacement: 15 anchors.horizontalCenter: parent.horizontalCenter TextField {placeholderText: "Réponse 1" largeur: 300} Commutateur {vérifié: false}} Ligne {espacement: 15 anchors.horizontalCenter: parent.horizontalCenter TextField {placeholderText: "Réponse 2" largeur: 300} Commutateur {vérifié: faux}} Ligne {espacement: 15 ancres.horizontalCenter: parent. horizontalCenter TextField {placeholderText: "Response 3" width: 300} Switch {vérifié: false}} Row {spacing: 15 anchors.horizontalCenter: parent.horizontalCenter TextField {placeholderText: "Response 4" width: 300} Switch {vérifié: false}} Bouton {texte: "Ajouter +" anchors.horizontalCenter: parent.horizontalCenter width: parent.width - 20}}}}

Voyons à quoi ça ressemble:

Si nous testons maintenant les commutateurs, nous verrons que nous pouvons tous les marquer comme la bonne question, et naturellement un seul peut l'être, nous allons donc faire ce qui suit: nous pourrons fournir un identifiant à chaque commutateur (également au textfields puisque nous devons obtenir le contenu pour le sauvegarder dans la base de données) en fonction de votre réponse, et lorsque nous cliquons dessus, nous mettrons tous les autres en mode coché = faux:

             Row {espacement: 15 anchors.horizontalCenter: parent.horizontalCenter TextField {id: res1 placeholderText: "Response 1" width: 300} Switch {id: sw1 checked: false onClicked: {if (sw1.checked == true) {sw2. vérifié = faux sw3.checked = faux sw4.checked = faux}}}}

Si nous essayons maintenant, nous verrons comment nous ne pouvons en marquer qu'un.