L'été apporte sa chaleur, et je suis en pleine préparation des articles pour la prochaine année scolaire. Cependant, je ne vous laisserai pas sans nouvelles ! Je vais donc vous reparler du VSM, cet ancien compagnon conçu initialement pour Silverlight et qui a été intégré par la suite dans WPF. Depuis la version 3.0, il est également présent dans Xamarin.Forms et, évidemment, dans MAUI. Qu'est-ce que le VSM ? Comment fonctionne-t-il ? Tout vous sera dévoilé à travers une série de trois vidéos !
Le Visual State Manager
C'est un outil XAML extrêmement puissant qui aligne les états de votre application avec des changements visuels dans l'interface utilisateur. Il est utile pour de nombreuses fonctions, telles que l'ajustement de la mise en page lors d'un changement d'orientation de l'appareil, l'harmonisation du design des états internes des contrôles avec votre thème en définissant une apparence pour les états Normal, Focused et Disabled, ainsi que pour fournir un feedback visuel pour la validation des champs contrôlés par votre ViewModel, parmi de nombreuses autres utilisations potentielles.
On pourrait presque affirmer que bien développer en XAML c’est forcément se servir du VSM.
D’où l’intérêt et l’importance d’en comprendre toutes les facettes.
Le cycle de trois vidéos
Je suis parti de ce qu’il fallait savoir sur le VSM, j’ai construit des démos, puis j’ai enregistré… Ce fut long… A la fin je me suis retrouvé avec du matériel pour faire un film et non une vidéo YouTube, au moins deux heures d’enregistrements….
J’ai alors décidé de segmenter tout cela en trois vidéos différentes. J’ai enregistré un message ajouté en fin des vidéos 1 et 2 pour prévenir que la suite était à chercher dans les vidéos suivantes car lorsque j’ai enregistré l’ensemble j’en parlais comme si tout n’était qu’en un seul morceau.
Après des heures (3 jours) de montage, d’astuces, d’ajout d’annotations, d’animations, d’accélération en mode time streching, l’utilisation de plusieurs logiciels différents (Camtasia pour le recording écran, Magix Vidéo Deluxe le frère de Sony Vegas pour les effets spéciaux, la compression, les montages complexes…) sans parler d’un bref passage du célèbre Jean-Claude et d’une séquence corrective insérée dans la vidéo 1, j’ai le plaisir de vous présenter ce cycle spécial VSM !
Attention : Cette série de vidéo a été tournée il y a un petit moment et j'y présentais VSM à l'aide des Xamarin.Forms. Le concept et sa mise en oeuvre sous MAUI étant restés identiques, je n'allais pas refaire tout cela juste en changeant "Xamarin.Forms" par "MAUI", cela aurait été une grande perte de temps pour zéro ajout pédagogique. Donc en visionnant ces trois vidéos, pensez à substituer mentalement "Xamarin.Forms" par "MAUI", c'est tout !
Vidéo 1 : Présentation du VSM et Les Common States
La première vidéo pose le décor et explique ce qu’est le VSM. Elle se poursuite par une première démonstration de ce que sont les Common States et comment en tirer parti.
Le lien direct pour la vidéo si le viewer ci-dessous ne marchait pas : https://youtu.be/OFcopVPrgDg
Vidéo 2 : Le VSM pour gérer les résolutions et les form factors
Prétexte pour présenter de nouveaux aspects du Visual State Manager, la seconde vidéo montre comment gérer automatiquement la mise en page en cas de changement d’orientation de la device. Certaines informations peuvent apparaitre ou disparaître selon l’orientation, la place disponible ou tout autre test à votre guise. C’est assez simple mais en comprendre toutes les possibilités au-delà de l’exemple réclamera un petit effort d’imagination !
Le lien direct : https://youtu.be/yOz89aw4K6Y
Vidéo 3 : Le VSM et les Custom States
C’est bien entendu là où le VSM est le plus puissant, dans sa capacité à accepter la définition de nouveaux groupes d’états et la création d’états correspondant à la sémantique de votre application.
Ce troisième volet est plus “trapu” et plus difficile à suivre mais tout ira bien si vous avez regardé les deux épisodes précédents !
L’exemple utilisé est celui de la représentation visuelle dans l’UI de l’état de validation de données à saisir.
Le tout en respectant MVVM ce qui complique les choses comme vous le verrez.
D’ailleurs exceptionnellement le code de l’application exemple utilisé pour la vidéo est téléchargeable ici : https://www.dropbox.com/s/k5o7j5gxmmdfcqv/VsmDemoDistrib.zip?dl=0
(N'oubliez pas que ce code est un code Xamarin.Forms et qu'il sera facile de le comprendre, voire à l'aide des outils de migration de Microsoft de le transformer en code MAUI. Mais sinon utilisez-le comme cela, c'est juste un exemple, si vous le comprenez, vous n'aurez pas besoin de le réécrire en MAUI pour arriver à la même chose...).
En général ce qui est montré dans Dot.Vlog est facilement reproductible. Là, avoir le code pourra vous être utile (notamment pour la classe helper que j’ai ajoutée).
Le lien direct : https://youtu.be/Yrf_hHqq42Q
Conclusion
Le Visual State Manager est un outil majeur de XAML, de WPF à MAUI, savoir l’utiliser et en tirer parti même dans un cadre MVVM est indispensable. Les designers avec qui vous travaillez doivent être mis au courant des possibilités que le VSM offre, de même que vous devez prendre en compte cette possibilité de visualisation des états de votre “machine à états” qu’est votre application dans la conception de vos ViewModels.
Trois vidéos, environ 2h au départ, raccourcies en post production par des coupures et l’utilisation de time stretching en trois vidéos d’une demi heure environ, c’était le minimum pour présenter correctement le VSM…
Plusieurs jours de travail ont été nécessaire à la conception, l’enregistrement et la post production de ces vidéos, puissent-elles vous rendre service, tel sera mon salaire !
Je compte sur vous pour faire abstraction du contexte Xamarin.Forms tellement proche de MAUI que tout refaire n'aurait eu aucun sens. Et puis c'est l'été, comme je le disais en intro, je bosse pour les articles de l'années à venir, et cette réutilisation astucieuse me permet à la fois de dégager mon temps pour vous, pour les prochains articles, tout en ne vous laissant pas seuls et sans article pendant le mois d'août !
Stay Tuned !