­

DÉVELOPPEMENT

Qt pour des applications desktop et mobiles simplement (5/7)

Suite de la découverte de la programmation desktop et mobile avec Qt.

L’application de base

  1. Prérequis
  2. Créer un projet Qt Quick
  3. Découverte rapide
  1. 2048.c
  2. 2048 en Qt

Interface QML

  1. Affichage du plateau
  2. Un peu de style
  3. Déplacement et jeu

Et pour les mobiles

 

Score et status

Le plateau est là, le jeu fonctionne. Il serait sympa désormais d’afficher le score et l’état du jeu (gagné / perdu).

On va commencer par afficher deux composants textes qui vont contenir le résultat pour le premier et le score pour le deuxième.
L’ensemble va être placé au dessus du plateau et les deux champs sur la même ligne.
On va donc utiliser un ColumnLayout et un RowLayout.

Pour ça, commencez par ajouter QtQuick.Layouts à votre qml :

import QtQtuick.Layouts 1.1

Puis les layouts et les champs textes :

Rectangle {
  //...
  ColumnLayout {
    anchors.fill: parent
    RowLayout {
      Text {
        text: "status"
        color: "#f3eaea"
        opacity: 0.3
        font.pointSize: 30
        font.family: "Verdana"
        Layout.fillWidth: true
      }
      Text {
        text: "score"
        color: "#f3eaea"
        opacity: 0.3
        font.pointSize: 30
        font.family: "Verdana"
      }
    }
  }
  Grid {
    //...
  }
}

Bon comme vous le voyez, rien de très spécial ici ça reste simple et logique.

Côté C++ il faut pouvoir récupérer la valeur du score et celle des status.

La première idée est de créer une méthode (je le fais pour le score, vous le ferez pour le reste 😉 ) score qui va interroger board_.

// boardmodel.h
public:
  int score() const;

// boardmodel.cpp
int BoardModel::score() const {
  return board_.score();
}

Si vous vous souvenez bien de l’étape précédente, les méthodes de déplacement avaient été préfixées de Q_INVOKABLE. Ici pas besoin, nous allons faire autrement et transformer le tout en une propriété. Une propriété va être accessible par le QML comme une variable (et non une méthode), et nous allons définir 4 choses :

  • le nom de la variable avec son type
  • la méthode à appeler pour lire la variable
  • la méthode à appeler pour écrire la variable (optionnel)
  • le signal utilisé comme notification de mise à jour de la valeur (comme le
    dataChanged vu précédemment)

Dans notre cas il n’y a pas de méthode d’écriture mais vous noterez que cela vous permet d’avoir un binding bi-directionnel, ce qui est quand même vraiment agréable.

On va donc appeler la variable score, son type est int, la méthode à appeler pour lire la valeur est score et comme signal on va faire original, scoreChanged.

// boardmodel.h
class BoardModel : public QAbstractListModel
{
  Q_OBJECT
  Q_PROPERTY(int score READ score NOTIFY scoreChanged)

  //...

signals:
  void scoreChanged();

  //...
}

Et voilà, vous pouvez maintenant remplacer "score" dans votre fichier qml par board.score. Trop facile, non ?

Par contre, vous pouvez constater que la valeur ne change pas… en effet, comme avant, il faut émettre le signal lorsque la valeur change pour demander son rafraichissement. De la même manière, un signal va être émit par la classe Board lorsque le score change, et nous allons juste propager ce signal vers le signal
scoreChanged que nous venons de créer.

// board.h
signals:
  void scoreChanged();

// board.cpp
bool Board::slide(t_value array[kSize]) {
  //...
  score_ += mergeValue;
  emit scoreChanged();
  //...
}

// boardmodel.cpp
BoardModel::BoardModel(QObject *parent) :
  QAbstractListModel(parent)
{
  connect(&board_, &Board::boardChangedAfterMovement, this, &BoardModel::onDataChanged);
  connect(&board_, &Board::scoreChanged, this, &BoardModel::scoreChanged);
}

Et voilà, rien de plus à faire, ça fonctionne déjà ! Agréable, non ?

Je vous laisse faire la suite pour les états de jeux (gagné / perdu).

 

 

git: tag 05_score_statuses

Yves

Tags : #c++ #mobile #qt #qt quick

13 mai 2014
  • Partager

Commenter cet article

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.