Le VSM est un vieil ami créé pour Silverlight puis adopter par WPF, on le retrouve depuis la V 3.0 dans les Xamarin.Forms. Qui est-il ? Comment fonctionne-t-il ? Vous saurez tout en regardant ce cycle de 3 vidéos !
Le Visual State Manager
Il s’agit d’un outil XAML très puissant permettant de faire correspondre les états de votre application à des modifications visuelles de l’UI. Il peut ainsi servir à une infinité de choses comme gérer la mise en page en cas de changement d’orientation de la device, mettre en accord le visuel des états internes des contrôles avec votre thème en spécifiant un look pour les états Normal, Focused et Disabled, il peut servir aussi à mettre en place un retour visuel pour la validation des champs gérés par votre ViewModel… et bien d’autres applications possibles !
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 des 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 de 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 !
Vidéo 1 : Présentation du VSM et Les Common States
La première vidéo pose le décors 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
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, 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 !
Stay Tuned !