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

Introduction

Voici une série d'articles (comme ceux que j'ai fait avec Vala), mais cette fois avec une application pour Ubuntu tactile, l'application est initialement la "même" que dans le messages de Vala, c'est-à-dire une sorte de jeu où nous avons une question et 4 réponses sous forme de test, puis nous avons trois boutons, un pour éliminer deux des réponses possibles (50%), un autre pour figer le temps et le dernier pour passer de la question.

Pour savoir comment commencer à créer un projet, vous pouvez visiter ce poster (documentation, création de projet ...), puisque nous commencerons par le projet déjà créé.

Notions de base

Pour créer l'application, nous utiliserons les composants de UbuntuBien que nous puissions créer nos propres composants, nous ne le ferons pas dans ce cas.

Les composants Ubuntu sont des composants que nous utiliserons pour notre application:

Pour les utiliser de la même manière, nous devons importer le module:

importer Ubuntu.Components 0.1

Nous pouvons trouver différents éléments dans les composants, tels que des boutons, des barres de progression, etc. Nous pouvons télécharger un projet où ils nous montrent la plupart de ces composants:

succursale bzr lp: ubuntu-ui-toolkit 

Conception de l'application

Nous partons de l'image où nous avons l'application faite avec GTK, dans ce cas nous utiliserons QML, en fait nous allons créer toute l'application avec Qt rapide (QML + JavaScript).

L'application, comme l'image, comprendra une question, une heure, des réponses, des options et des points. La seule différence (à part le "style"), sera que ci-dessus nous aurons des onglets.

Pour cela, nous utiliserons les éléments button, label et progressBar. Pour la structure, nous utiliserons l'élément Colonne y Rangée.

Conception de la disposition de l'écran principal:

Nous commençons avec un MainView, où différents onglets seront trouvés, dans ce cas nous allons travailler sur la mise en page de l'écran initial de notre application.

MainView {objectName: "mainView" // ...}

Dimensions (pour Ubuntu Touch):

width: units.gu (50) hauteur: units.gu (75)

Nous définissons la longueur et la largeur de notre application, où la largeur sera de 50 (unités) et la longueur de 75, maintenant nous allons lui donner de la couleur:

headerColor: "# 57365E" backgroundColor: "# A55263" footerColor: "# D75669"

Nous avons la couleur de l'en-tête, du corps et du pied de page:

Comme je l'ai mentionné précédemment, l'application sera structurée par onglets:

    Onglets {id: tabs Set {objectName: "jocTab"} / * Ajouter {objectName: "addQuestions"} * /}

Comme nous pouvons le voir, nous avons deux onglets, un commenté (nous ne l'avons pas encore créé) et un autre à jouer (que nous allons maintenant créer). Pour créer ledit onglet, nous allons créer un nouveau fichier qml (Ajouter nouveau -> Qt -> Fichier QML ->…), le nom dudit fichier sera Game.qml.

Eh bien, modifions Game.qml de telle manière que nous le transformions en un onglet, qui à l'intérieur a une page (Page):

import QtQuick 2.0 importation Ubuntu.Components 0.1 Tab {title: i18n.tr ("Jeu") Page {}}

Dans la page, nous commencerons à structurer les éléments que nous mentionnons dans la conception. Une colonne qui comprendra tous les éléments à l'intérieur (elle les mettra verticalement), puis nous mettrons les éléments dans l'ordre: Label, ProgressBar, les 4 boutons; et pour mettre les options, nous utiliserons l'élément Row pour les mettre horizontalement.

Colonne {anchors.top: Gamepage.top anchors.topMargin: 50 espacement: 15 largeur: parent.width hauteur: parent.height - 50 Label {id: question anchors.topMargin: 500 texte: "Question?" anchors.horizontalCenter: parent.horizontalCenter fontSize: "large" font.bold: true} ProgressBar {id: time anchors.horizontalCenter: parent.horizontalCenter} Button {id: resp1 text: "Response 1" anchors.horizontalCenter: parent.horizontalCenter} Button {id: texte resp2: "Response 2" anchors.horizontalCenter: parent.horizontalCenter} Bouton {id: resp3 text: "Response 3" anchors.horizontalCenter: parent.horizontalCenter} Bouton {id: resp4 text: ancres "Response 4" .horizontalCenter: parent.horizontalCenter} Ligne {espacement: 15 anchors.horizontalCenter: parent.horizontalCenter Button {id: b50 text: "50%"} Button {id: bCon text: "Freeze"} Button {id: bNext text: " Next "}} Ligne {espacement: 15 anchors.horizontalCenter: parent.horizontalCenter Libellé {id: failures text:" Failures: 0 "color:" red "} Libellé {id: hits text:" Hit: 0 "} Libellé {id : points texte: "Points: 0" fontSize: "medium"}}

Voyons comment dans chaque élément délimité par son {} nous avons différentes propriétés, dans le cas de l'étiquette et des boutons, nous pouvons voir que la propriété "text" est le texte qu'elle montre, une propriété non visuelle importante est le identifiant "id", ce qui nous aidera lorsque nous implémenterons la logique d'application.

À la fin, nous pouvons voir le résultat: