Concevoir la prochaine génération d'interface utilisateur multiplateforme avec Qt

L'une des caractéristiques nouvelles de Qt 4.6 est l'ensemble des nouvelles classes d'effets graphiques. La classe de base, QGraphicsEffect, forme la base d'un framework ajoutant des effets tels que le flou et les ombres projetées. Ces effets peuvent être appliqués aux éléments d'interface utilisateur comme les widgets et les éléments graphiques. Il est possible de créer des effets personnalisés qui peuvent être utilisés dans les mêmes circonstances, ce qui signifie que vous pouvez faire ce que vous voulez.

Tous les effets graphiques sont contrôlés par un certain nombre de propriétés. Cela signifie non seulement que les effets peuvent être adaptés pour chaque application, mais aussi qu'ils peuvent être modifiés par le système d'animation que nous examinerons plus tard.

Flou	Ombre projetée

L'un des effets disponibles est l'effet de flou par la classe QGraphicsBlurEffect. Elle applique un flou sur son élément source en fonction de la propriété blurRadius. Un petit rayon donne peu de flou tandis qu'un grand rayon conduit à un flou plus important. Pour appliquer l'effet graphique à un élément graphique, utilisez la méthode QGraphicsItem::setGraphicsEffect() comme indiqué ci-dessous.

QGraphicsBlurEffect *effect = new QGraphicsBlurEffect(this);
effect->setBlurRadius(0);

QGraphicsPixmapItem *item = new QGraphicsPixmapItem();
// ...
item->setGraphicsEffect(effect);

Pour obtenir plus d'effets, il est possible de les combiner. Ceci est obtenu en ajoutant une hiérarchie aux objets graphiques et en appliquant un effet sur chaque niveau. Par exemple, des effets de flou et d'opacité sont appliqués ensemble dans l'exemple suivant. La classe QGraphicsRectItem est l'élément que lequel nous voulons appliquer les effets tandis que la classe QGraphicsItemGroup est utilisé pour le second effet.

Des rectangles avec des effets de flou et d'opacité

Un des éléments clés d'une interface utilisateur moderne est d'avoir des transitions animées et fluides au lieu des changements immédiats et soudains. Cela peut aider l'utilisateur à comprendre comment les éléments sont reliés entre eux et rendre l'interface utilisateur plus réaliste. Dernier point mais non des moindres, il contribue également à améliorer l'attrait visuel de l'ensemble du système.

Qt 4.6 est livré avec un tout nouveau framework d'animation. L'animation aurait pu être implémentée en utilisant des versions antérieures de Qt mais celle-ci aurait été limitée à la fourniture de time lines pour les animations et les classes animant des transformations d'objets graphiques. Le nouveau framework rend possible d'animer n'importe quelle propriété d'un QObject.

Le framework d'animation se compose de nombreuses classes basées sur la classe QAbstractAnimation. Fondamentalement, les classes utilisaient soit des outils facilitant la synchronisations des animations, soit des animations de propriétés. La synchronisation permet aux animations d'être exécutées en série ou en parallèle. La classe QPropertyAnimation est probablement celle que vous utiliserez le plus souvent. Elle permet d'animer individuellement les propriétés des QObject.

Lors de l'animation d'une propriété, les valeurs de début et de fin doivent être précisées. Cela est obtenu en spécifiant les QPropertyAnimation::setStartValue() et QPropertyAnimation::setEndValue() pour cette propriété. Il est également possible de fixer des valeurs intermédiaires en utilisant la fonction QPropertyAnimation::setKeyValueAt(). Lorsque vous définissez la valeur de propriété, l'animation est supposée fonctionner entre 0 et 1. Ce n'est pas tout à fait vrai puisse que les animations peuvent utiliser les différentes courbes de relaxation. Ces courbes peuvent se déplacer légèrement en dehors de la gamme de 0 à 1 comme illustré ci-dessous.

Pour illustrer toutes ces techniques, le code ci-dessous montre une animation simple qui permet à un QPushButton d'apparaître dans un widget conteneur. Comme cette animation ne sera utilisée qu'une seule fois, l'argument QAbstractAnimation::DeleteWhenStopped est passé à la méthode de démarrage. Cela garantit que l'objet animation soit supprimé quand il est arrêté.

QPropertyAnimation *animation = new QPropertyAnimation(button, "geometry");
animation->setStartValue(startRect);
animation->setEndValue(endRect);
animation->setEasingCurve(QEasingCurve::OutBounce);
animation->start(QAbstractAnimation::DeleteWhenStopped);

La même technique, montrée ici pour des widgets, peut être utilisée pour n'importe quel QObject. Cependant, la classe couramment utilisée pour cela, QGraphicsItem, n'hérite pas de QObject. Pour résoudre ce problème, un élément graphique personnalisé doit être créé dans ce cas. Ce n'est pas aussi lourd qu'il n'y paraît. Tout ce que la nouvelle classe doit faire est d'hériter de QObject et d'une des classes dérivant de QGraphicsItem puis de rendre accessible la propriété voulue. Par exemple, la classe CustomRectItem ci-dessous rend accessible la propriété de rotation d'un QGraphicsRectItem pour le système d'animation. Aucun code supplémentaire n'est nécessaire, à l'exception d'un constructeur court et de la ligne Q_PROPERTY.

class CustomRectItem : public QObject, public QGraphicsRectItem
{
    Q_OBJECT
    Q_PROPERTY(qreal rotation READ rotation WRITE setRotation)

public:
    CustomRectItem(const QRectF &rect)
        : QObject(0),QGraphicsRectItem(rect)
    { }
};

Compte tenu de la définition de la classe CustomRectItem, la rotation de l'objet est aussi simple que de créer un objet QPropertyAnimation pour cette classe et de le démarrer.

QPropertyAnimation *animation = new QPropertyAnimation(item, "rotation", this);
animation->setStartValue(0);
animation->setEndValue(90);
animation->start();

Un cas habituel d'utilisation des animations est de changer entre différents états de l'interface utilisateur comme une vue en liste, une vue détaillée et un mode d'édition. La plupart des développeurs ont entendu parler, et même peut-être déjà utilisé, des machines à états. Celles-ci sont parfaites pour définir des états et les transitions entre ces états.

Qt 4.6 est livré avec un tout nouveau framework de machine à états qui vous permet de faire cela. Grâce à ce framework, la valeur des propriétés des objets peut être définie pour un ensemble d'états. Une transition peut ensuite être ajoutée entre les différents états et l'ensemble peut alors être démarré.

Un exemple simple montrant cela peut être construit à partir de nos exemples précédents. Nous prenons une scène graphique avec deux rectangles inclus dans des groupes (pour utiliser deux effets). Nous définissons ensuite deux états, le premier dans lequel le rectangle vert apparaît opaque à 100% sans flou tandis que le rectangle jaune est opaque à 50% et flou, le second état où ces effets sont appliqués au rectangle vert au lieu du jaune.

La première chose pour créer cela est de mettre en place la scène : vous pouvez voir comment faire dans le code source disponible en téléchargement à la fin de cet article. Les résultats produits sont des rectangles et des groupes appelés greenRect, yellowRect, greenGroup et yellowGroup. Nous pouvons ensuite leur appliquer des effets puis ajouter ces éléments à la scène.

QGraphicsOpacityEffect *greenOpacity = new QGraphicsOpacityEffect();
QGraphicsOpacityEffect *yellowOpacity = new QGraphicsOpacityEffect();
QGraphicsBlurEffect *greenBlur = new QGraphicsBlurEffect();
QGraphicsBlurEffect *yellowBlur = new QGraphicsBlurEffect();

greenRect->setGraphicsEffect(greenOpacity);
yellowRect->setGraphicsEffect(yellowOpacity);
greenGroup->setGraphicsEffect(greenBlur);
yellowGroup->setGraphicsEffect(yellowBlur);

Quand tout cela est en place, le framework de machine à états entre en scène. Nous créons deux états, nommés greenState et yellowState. L'initialisation de l'état greenState est indiquée ci-dessous. Notez que les propriétés modifiées par cet état sont définies à l'aide de la méthode assignProperty() qui prend un pointeur d'objet, un nom de propriété et une valeur. La valeur est traitée comme un QVariant, donc vous pouvez utiliser ce que vous voulez dedans. Vous pouvez même ajouter le support de vos propres types en utilisant le système de type de Qt, mais je m'égare.

QState *greenState = new QState();
greenState->assignProperty(greenOpacity, "opacity", 1);
greenState->assignProperty(greenBlur, "blurRadius", 0);
greenState->assignProperty(yellowOpacity, "opacity", 0.5);
greenState->assignProperty(yellowBlur, "blurRadius", 5);

Pour chaque état, une série de transitions doit être ajoutée. Ces transitions permettent de passer de l'état actuel vers un autre état. Comme nous n'avons que deux états, ça nous laisse avec une transition par état.

Avant de regarder le code, nous allons discuter des transitions. Toutes les transitions héritent de la classe QAbstractTransition. À ce niveau, les états d'origine et de fin peuvent être spécifiés. Il y a donc des spécialisations de cette classe abstraite représentant une transition en fonction de la façon dont la transition est déclenchée. Par exemple, il y a des transitions déclenchées par un événement (QEventTransition) qui peut intercepter différents événements : l'appui sur une touche spécifique du clavier (QKeyEventTransition) ou une action de la souris (QMouseEventTransition). Il y a également la classe QSignalTransition qui implémente une transition déclenchée par un signal spécifique. C'est la classe que nous utilisons dans le code ci-dessous.

QSignalTransition *t = new QSignalTransition(this, SIGNAL(yellowClicked()));
t->setTargetState(yellowState);
greenState->addTransition(t);

Maintenant que tous les états sont créés, ils doivent être ajoutés à l'objet QStateMachine qui gère l'ensemble. Comme vous pouvez le voir, nous ajoutons tous les états dans la machine à états mais un seul comme étant l'état initial. Cela est nécessaire pour donner à la machine à états de point de départ (n'oubliez pas que toutes les transitions ont un état d'origine).

QStateMachine *machine = new QStateMachine(this);
machine->addState(greenState);
machine->addState(yellowState);
machine->setInitialState(greenState);

Maintenant, il est temps de dire à la machine à états comment changer d'un état à un autre. C'est là que les classes d'animation que vous avez vu plus tôt entrent en jeu. Il est possible de préciser exactement quelle animation utiliser pour chaque objet, propriété et transition. Mais pour faire avancer les choses, vous pouvez également spécifier une animation par défaut pour chaque objet et propriété à un niveau de la machine à états.

machine->addDefaultAnimation(new QPropertyAnimation(greenBlur, "blurRadius"));
machine->addDefaultAnimation(new QPropertyAnimation(yellowBlur, "blurRadius"));
machine->addDefaultAnimation(new QPropertyAnimation(greenOpacity, "opacity"));
machine->addDefaultAnimation(new QPropertyAnimation(yellowOpacity, "opacity"));

Avant de pouvoir démarrer l'application et profiter des transitions amusantes, il reste une étape finale : démarrer la machine à états.

machine->start();