Le Shell, cette nouvelle fonction des Xamarin.Forms touche au cœur d’une App, sa navigation. Et cet aspect est l’un des plus sensibles, on retrouve donc dans Shell de nombreuses possibilités de paramétrages. Continuons le voyage débuté à l’article précédent…
Rappel
Dans la Partie 1 je vous ai proposé une première vue d’ensemble de Shell et je vous ai montré les fonctions de base de cette “coquille”. Prenant la suite de ce qui a déjà été dit je vous renvoie à ce premier article si vous ne l’avez pas encore lu.
Replaçons le décor
Dans la partie précédente nous avons mis en place tout le nécessaire pour nous lancer à la découverte de Shell et nous avions créé une vue initiale. Puis nous avons ajouté une seconde page pour donner plus de sens à notre exemple de navigation. Le code XAML de la vue Shell nécessitait quelques personnalisations comme le titre de la section ou l’icône. J’ai ajouté ce code ce qui nous donne pour l’instant un Shell comme suit :
<ShellItem>
<ShellSection Title="Accueil" Icon="homepage.png">
<ShellContent>
<testShellFromScratch:MainPage/>
</ShellContent>
</ShellSection>
<ShellSection Title="Notes" Icon="writing.png">
<ShellContent>
<testShellFromScratch:SecondaryPage/>
</ShellContent>
</ShellSection>
</ShellItem>
Le visuel avec les icônes donne alors :
Le Flyout
Comme vous l’avez remarqué Shell a déjà créé pour nous un menu Flyout avec son Hamburger et si vous swappez de gauche à droite vous verrez le menu s’afficher :
Maginfique menu en effet… Bon, il manque forcément des choses, “visiblement”, mais c’est là et ça marche ! On dirait une sorte de ListView dont les éléments seraient vides… C’est cela en fait. C’est ici que chaque ShellItem va être listé. La partie grise ce sont les cellules (deux pour l’instant donc) qui n’ont pas de texte. Mais elles sont présentes. On peut résoudre ce problème assez rapidement en définissant la propriété Title de ShellItem. On peut même ajouter une Icône tout comme pour une ShellSection.
Cela donnera quelque chose de ce type :
Comme on s’en aperçoit c’est bien le ShellItem qui porte un titre et non chaque “page” qui est en réalité dépendante du menu par onglet. Le ShellItem est le premier niveau de navigation.
Simplifions un peu
Comme on l’a vu chaque onglet Shell de la ShellSection peut contenir des onglets secondaires, ce qui peut être réalisé en définissant plusieurs ShellContent à l'intérieur, chacun avec sa propre vue. Mais lorsqu’il n’y a qu'un seul ShellContent dans ShellSection la définition peut être un peu simplifiée. Prenons notre exemple où les deux ShellSections ne contiennent qu'un seul ShellContent, notre code XAML pourrait être simplifié comme suit:
Dans ce cas le ShellContent reprend le titre et l’icône que nous avions utilisés pour la section qui elle a disparu. Bien entendu cette simplification ne doit pas être utilisée si l’App nécessite des onglets secondaires dans une ShellSection. On doit alors définir une ou plusieurs ShellSection explicitement comme dans notre exemple avant simplification.
Le Flyout, bis repetita
Tout à l’heure il était là mais vide. Nous avons vu comment le remplir (modestement). Essayons de l’étoffer un peu. Pour cela je vais utiliser une méthode très paresseuse consistant à réutiliser les mêmes pages plusieurs fois… mais que cela ne vous égare pas, c’est juste de la paresse, dans la réalité vous pouvez utiliser d’autres pages et cela sera certainement plus utile !
Le résultat sera le suivant :
Et le code (paresseux donc) sera :
On peut ajouter autant de ShellItem que nécessaire sachant que chacun contient des sections faites de pages.
Assurément pour le moment cela ne semble pas très beau, mais la liste existe et le menu fonctionne ! Si vous regardez maintenant le code XAML ci-dessus, vous pouvez en déduire ce qui se passera avec chaque élément. C’est la beauté de XAML, un langage descriptif. Toute la structure de l’App va ainsi pouvoir être décrite de façon claire quelque part et cette description nous offrira en plus et automatiquement toute la logique de navigation !
En lisant le code XAML on comprend vite que cette App est structurée autour de deux grands pôles “Les incontournables” et “Les bases” et que chaque partie contient deux pages, l’une Accueil et Notes, l’autre Accueil 2 et Notes 2. Je vous avais prévenu c’est vraiment paresseux… mais j’espère que cela vous aide à comprendre le fonctionnement de Shell !
Les onglets dans le Flyout ?
Bon là c’est un choix de design uniquement. Chacun l’utilisera comme il le veut. Mais les ShellItem peuvent ou non afficher les tabulations, les titres des pages, qu’ils renferment. Par défaut le comportement est de cacher ces éléments enfants. Mais en changeant la propriété ad hoc du ShellItem on peut afficher aussi les sous-éléments. C’est ce que j’ai fait ici dans le second ShellItem :
Le Visuel donne cela :
Et le XAML est maintenant comme cela pour le second ShellItem :
Les options du Flyout ont été précisées et j’ai choisi AsMultipleItems ce qui est assez clair : Le ShellItem avec son titre et son icône disparaît et laisse la place à ses enfants…
il y a une certaine redondance puisque les onglets seront tout de même affichés, mais cela peut rendre plus clair les options disponibles dans le logiciel pour l’utilisateur. A décider avec le designer donc !
Les onglets supplémentaires
Le Shell est plein de subtilités, je l’ai déjà mentionné. Il est donc possible d’ajouter des onglets secondaires à l’intérieur d’un onglet principal.
Le mieux c’est de voir pour comprendre…
Le menu Flyout va ressembler à cela :
J’ai ajouté “Le nécessaire” comme nouveau ShellItem mais en mode par défaut (sans l’éclater en ses sous-éléments comme le second). Toutefois j’ai défini une ShellSection cette fois-ci. Comme il n’y en a qu’une il n’y aura pas d’onglets afficher en bas de page. Mais comme j’ai défini deux pages dans la section Shell va considérer qu’il s’agit d’onglets “secondaires”. Il va les afficher en haut de l’écran quand on entrera sur la section (en cliquant sur “Le nécessaire” donc), ce qui donne :
Le code du Shell devient alors :
Bluffant non ? Le Shell facilite énormément la création d’UI de ce type puisque tout est automatique…
les plus attentifs auront remarqué sur la capture écran du menu un peu plus haut, et maintenant que nous avons trois ShellItem, qu’il se passe quelque chose d’autre visuellement : un groupage automatique.
En effet, les ShellItems sont séparé par une barre horizontale. Les deux pages du milieu ne sont pas séparées puisqu’elle appartienne au même ShellItem, je serais tenté de dire “à la même section” mais cela pourrait vous embrouiller avec le ShellSection. Mais visuellement nous avons trois sections, une pour chaque ShellItem ou pour ses enfants lorsqu’on choisit le mode “AsMultipleItems”.
Tout cela sans rien coder, ou presque…
Conclusion
Le Shell est un outil bien plus sophistiqué qu’on ne pourrait le croire de prime abord. Dans cette seconde partie nous n’avons fait qu’effleurer ses possibilités. Il nous reste à voir le menu Hamburger et son icône, le Flyout lui-même, la navigation complexe, la recherche, etc…
Mais ne mélangeons pas vitesse et précipitation ! Il reste encore deux articles à paraître. Les parties 3 et 4 vous emmèneront dans les profondeurs du Shell là où vous n’avez jamais mis les pieds !
Alors ?
Stay Tuned !