Une fois que nous avons appris à lire et à enregistrer des fichiers dans le chapitre précédent, il est temps d'ajouter une nouvelle fonctionnalité à notre exemple d'application : créer un graphique qui nous permet de voir visuellement les dépenses effectuées dans chacune des catégories.
Pour cela nous allons utiliser une classe très puissante parmi celles disponibles dans la librairie Xojo : Canvas.
Comme son nom l'indique, le Canvas est un type de contrôle très particulier puisqu'il nous fournit un "canevas" sur lequel nous pouvons dessiner librement ce dont chacune de nos applications a besoin, non seulement via les propriétés disponibles dans la classe elle-même mais aussi en utilisant toutes les fonctions fournies d'une autre classe étroitement liée à celle-ci : Graphics.
Plus précisément, le dessin sur le canevas se fait via le code écrit dans son gestionnaire d'événements Paint, qui peut être invoqué automatiquement par le système d'exploitation chaque fois qu'il est nécessaire de mettre à jour le contenu du canevas (rappelez-vous que Xojo est multiplateforme natif) , soit on force le rafraîchissement en invoquant les méthodes Refresh (immédiat) ou Invalidate (déléguant le rafraîchissement du champ quand c'est plus approprié pour le système d'exploitation).
Tout au long du didacticiel, nous créerons également une classe auxiliaire qui nous permettra de dessiner des graphiques statistiques (dépenses cumulées par catégorie) avec une plus grande flexibilité.
De plus, la création de cette classe auxiliaire nous permet également d'abstraire le type de valeurs à représenter. Autrement dit, dans ce cas, nous savons qu'il s'agit de représenter des valeurs correspondant à des dépenses personnelles à l'aide du graphique à barres, mais fournir ce niveau d'abstraction signifie que vous pouvez continuer à utiliser les nouvelles classes abordées dans ce chapitre également pour représenter tout autre type de valeur numérique dans d'autres applications que vous pouvez créer.
D'autre part, et pour voir dans une certaine mesure la flexibilité apportée par la classe Graphics, nous allons créer notre objet graphique statistique afin qu'il soit vraiment facile de contrôler la façon dont nous voulons présenter les barres : en utilisant des couleurs unies ou des dégradés de couleurs, également décidez des couleurs que nous voulons attribuer à chaque barre, et aussi si nous voulons appliquer un effet d'ombre à chacune d'elles ou non ; ainsi que la largeur avec laquelle on veut dessiner chacune des barres.
Le code de dessin aura également pour tâche de calculer proportionnellement la hauteur de dessin de chacune des barres, non seulement sur la valeur présentée par le reste, mais également sur la hauteur maximale disponible dans la fenêtre ou le panneau qui comprendra le champ graphique.
Cela signifie qu'en modifiant la taille de la fenêtre, vous verrez comment le contrôle graphique recalcule et redessine chacune des barres en temps réel, en conservant toujours la proportion correspondant à la valeur représentée par chacune d'elles.
Et si dans cet exemple nous utilisons le contrôle Canvas pour dessiner des graphiques, il est très intéressant que vous sachiez que c'est également le contrôle que vous devez utiliser lorsque vous devez créer, à partir de zéro, un contrôle d'interface utilisateur entièrement personnalisé.
En fait, les gestionnaires d'événements disponibles vous permettront de contrôler tous les aspects généralement associés à l'interaction de l'utilisateur : lorsque le curseur entre ou sort de la surface, lorsqu'il est cliqué, lorsque des objets sont glissés ou déposés sur sa surface, ainsi que répondre à événements clavier.
En bref, via Canvas, vous pouvez créer n'importe quel widget de contrôle ou interface utilisateur que vous pouvez imaginer et que vous souhaitez ajouter à votre application.
Je vous invite non seulement à reproduire le tutoriel dans l'IDE Xojo (bien sûr vous pouvez aussi télécharger le projet Xojo utilisé dans l'exemple, mais à essayer vos premiers pas avec la classe Graphics en conjonction avec Canvas.
Si vous avez des questions ou des problèmes, les commentaires sont ouverts,
