Dot.Blog

C#, XAML, Xamarin, UWP/Android/iOS

Xamarin.Forms : Les Bindable Layouts

La version 3.5 des Xamarin.Forms apportent son lot de nouveautés mais surtout les BindableLayouts… Qu’est-ce donc et qu’apportent-ils ?

Version 3.5

Oui je le sais, la version  3.5 n’est qu’en preview stade 2, c’est à dire proche de la release (car d’ailleurs la version 4.0 est elle aussi en preview, ça bosse chez Microsoft !). Pour profiter de ce dont je vais vous parler il faudra donc installer la pre-2 de la version 3.5 au lieu de la version stable actuelle. Mais le temps que vous lisiez ces lignes il est fort possible, surtout dans un avenir proche, que la 3.5 soit déjà releasée… Donc pas de souci.

Bindable Layouts

D’après le nom on comprend que cela va parler de Layout<T>, comme le StackLayout par exemple, et de binding… Deux sujets importants. Le premier est une des briques de base utilisée dans presque toute mise en page Xamarin.Forms et XAML de façon plus générale (même sous d’autres noms), et le second est carrément l’âme de XAML, de WPF, UWP, de MVVM et des Xamarin.Forms ! Enlevez le binding et c’est tout cet édifice qui s’écroule.

Donc à la base c’est du lourd… Mais encore…

Les Bindable Layouts décrit un procédé qui se rapproche de celui des Behaviors, c’est un comportement attaché à un Layout<T>. Quel comportement ? Celui de supporter automatiquement une liste d’items.

Un Layout<T> qui supporte une liste d’Items, on connait déjà ça, ça s’appelle une ListView !

C’est vrai. Mais une ListView c’est beaucoup plus que ça, elle optimise la gestion des items, elle peut en gérer des centaines, elle gère le scrolling, et plein d’autres choses.

Parfois on aurait besoin d’une solution plus simple. D’autres fois on aimerait dans une ListView qu’un item puisse afficher une courte liste de sous-items. Mais n’essayez pas de mettre des ListView dans une ListView… Y’en a qui ont essayé, ils ont eu des problèmes… En réalité la façon dont la ListView gère le scrolling fait qu’il est impossible de faire la différence entre votre doigt qui se déplace pour faire défiler la liste principale ou la liste secondaire.. Donc ça ne marche pas. Pourtant une petite liste de sous-items dans un item cela n’a rien de farfelu.

Vous l’avez compris les Bindable Layouts sont tout simplement des Layout<T> qui vont – par un procédé que je vais vous expliquer – supporter par “magie” la création automatique d’items comme s’ils étaient des ListView (en moins sophistiqué).

Ces Layouts, comme le StackLayout qui s’y prête très bien, une fois branché à un BindableLayout, nouvelle classe de XF 3.5, vous ainsi devenir des conteneurs de liste capable d’afficher automatiquement des items. Le procédé n’est pas fait pour en afficher des centaines, pas de scrolling notamment, mais il est parfait pour imbriquer des listes dans des listes…

Une liste de client avec sous chaque nom de client la liste des 5 dernières commandes par exemple. Tout bête, pas farfelu du tout. Et pourquoi pas pour chaque commande la liste des 2 articles les plus chers ? etc.

Les bindable Layouts permettent ainsi non pas des fantaisies de mise en page mais une souplesse accrue qui ne pourra que nous simplifier la vie et ouvrir de nouvelles possibilités de mise en page !

Les Layouts

Un bref rappel de ce que sont les Layouts et leur généalogie :

image

La classe Layout<T> définit une spécialisation de Layout qui expose une collection de vues enfants. On peut ainsi ajouter ou supprimer ou même remplacer des vues enfants pour coller au design de la page.

Avec un StackLayout on peut écrire en C# le code suivant qui met en évidence cette propriété Children :

myStackLayout.Children.Add(new Label {Text=”toto”});

Layout<T> se trouve en réalité à la base de presque tous les Layouts que nous utilisons. Le StackLayout ou la Grid sont de bons exemples.

L’idée des Bindable Layouts est juste de se dire que puisque les Layout<T> ont une liste d’enfants pourquoi ne pas la rendre bindable, ce qui ouvre plein de possibilités intéressantes…

Mais comme à la base Layout<T> n’est pas prévu pour cela, c’est par le biais d’une classe particulière qu’on va ajouter cette possibilité de binding… Bien entendu l’effet va dépendre de la capacité du layout de base sur lequel on va greffer le binding. Partir d’un StackLayout ne donnera pas le même résultat qu’avec une Grid aux lignes et colonnes définies spécifiquement. Je vous laisse tester pour voir ce que cela donne !

Mais revenons à cette classe spéciale qui ajoute le binding à Layout<T> qui n’en disposait pas…

BindableLayout,  la classe !

Oui c’est la “classe” ces listes imbriquées, mais pas seulement. Et cela fonctionne grâce à une classe principale, BindableLayout qu’on peut voir comme une sorte Behavior ou plus exactement de propriété attachée qui confère un comportement particulier, celui de supporter une liste d’items.

Les principales propriétés définies par cette classe sont :

  • ItemsSource, la source des items vous l’aviez compris
  • ItemTemplate, heuu le template des items à afficher (un DataTemplate)
  • ItemTemplateSelector, le sélecteur de template s’il y en a un

Du code !

Dans la pratique comme cela marche ?

Pour ce petit exemple imaginez qu’on veuille présenter une liste d’objets sans pour autant faire appel à lune ListView. Ici l’objet de base venant du Modèle sera un Synthétiseur. On souhaite afficher la liste de quelques synthés de légende à la suite de la mise en page.

Le Model

Voici la classe unique du Model, la classe Synthesizer :

image

Rien de spécial donc on passe au provider de données :

Le DataProvider est ici une classe statique qui retourne une liste de synthétiseurs. Dans une App plus réel cela serait un service très certainement, les données seraient lue depuis une base de données ou bien depuis un serveur Web.

image

Le ViewModel

Même pour un petit exemple tout bête il ne faut pas oublier les bonnes manières ! Ze ViewModel qui va vous killer :

image

J’avais prévenu, c’est du ViewModel de haute voltige !

La View

On sent bien que c’est là que tout va se passer … surtout vu le niveau du code qui précède, il est temps qu’il se passe quelque chose !

image

Vous savez qu’en cliquant sur une image Dot.Blog vous donne la version à 100%. Je le redis pour les celles et les ceux qui non content d’avoir une vue déficiente seraient aussi affublés d’un trouble de la mémoire (étant donné que je le répète dans chaque billet ou presque). Ah ces gaulois réfractaires, fainéants et oublieux en plus ! Et ça coûte un pognon de dingue toutes ces lignes à écrire ! Smile

Donc ici nous voyons un StackLayout contenant l’essentiel de la mise en page de cette App. Il contient en effet quelques labels, des BoxView pour faire tracer des lignes, et un autre StackLayout à la fin.

C’est ici que les choses se passent. A l’intérieur de la balise du StackLayout on voir le premier appel à BindableLayout et sa propriété ItemsSource, en toute logique bindée à la collection exposée par le ViewModel.

A l’intérieur du StackLayout on ouvre d’autres balises permettant de préciser la valeur d’autres propriétés du Bindablelayout, notamment l’ItemTemplate.

S’ensuit un contenu très classique, celui de la définition d’un DataTemplate faisant usage d’une Grid à 3 colonnes pour afficher les 3 champs sur une seule ligne.

On trouve les balises fermantes de tout ce petit monde et c’est tout…

A quoi cela ressemble ?

Une image valant mille mots :

image

Conclusion

Les Bindable Layouts sont une nouvelle corde à notre arc. Un ajout bienvenu offrant la souplesse des listes à tous les Layouts ou presque. Listes et sous-listes deviennent ainsi bien plus faciles à créer. Même si le procédé n’est pas conçu pour gérer de grandes listes (pas de scrolling comme la ListView) il n’est pas interdit non plus de penser à des listes de quelques dizaines d’éléments, ou à des listes imbriquées et de mettre tout cela dans une ScrollView pour en autoriser le balayage … Pourquoi pas une ListView alors ? Mais elle peut très bien servir de liste principale dans ce montage, rien ne l’interdit. C’est à vous de voir en fonction du contexte et de vos besoins !

La version 4.0 déjà en preview (en même temps que la 3.5 donc) va offrir la CollectionView, plus puissante que la ListView pour gérer de nombreux items surtout lorsque la présentation de chacun peut différer. Mais nous aurons le temps d’en parler !

Pour l’instant intéressez-vous aux nouveautés de la 3.5 qui sera bientôt releasée (ou déjà selon quand vous lirez ces lignes), et notamment aux Bindable Layouts !

Stay Tuned !

blog comments powered by Disqus