Dot.Blog

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

Xamarin.Forms 4 : Le Shell Partie 1/4

Xamarin.Forms évolue sans cesse, difficile parfois de cerner toutes les avancées. Mais une semble se dégager par son impact : Le Shell. Dans cette série de 4 articles je vous emmène à la découverte de ce nouveau paradigme qui change la façon de naviguer…

Introduction

Apparu dans les Xamarin.Forms 3.6 en version “expérimentale”, le “Shell” (“coquille”) fait partie officiellement des Xamarin.Forms 4.0 et des versions qui suivent. Shell est avant tout un changement de point de vue sur … les Vues ! Et principalement sur la navigation qui a toujours été un casse-tête sur les mobiles malgré des tentatives diverses et variées plus ou moins heureuses visuellement ou complexes à mettre en œuvre.

Qu'est-ce que Shell?

Le Shell est ainsi nouveau paradigme pour la navigation dans les applications qui réduit considérablement la complexité de développement qu’on pouvait rencontrer jusqu’à lors, en particulier dans les scénarios nécessitant des menus déroulants. En outre, les applications utilisant Shell bénéficieront des améliorations apportées en termes de vitesse de rendu et de réduction de la consommation de mémoire ce qui est toujours bon à prendre !

La hiérarchie de navigation

Lorsque vous utilisez Shell, vous définissez le contenu et la structure de navigation de votre application dans une classe XAML / C # de la même manière que vous définissez des objets Pages ou d’autres types de vues. En fonction de la manière dont vous définissez cette structure, vous pouvez obtenir une application contenant un menu déroulant, chacun des éléments de ce menu pouvant être une page à onglet, chacun des onglets de cette page pouvant avoir de nombreuses pages de contenu affichées avec une barre d’onglet supérieure. Je ne conseille pas d’utiliser des structure de navigation aussi complexe dans des Apps mobiles, mais c’est possible…

clip_image001


Shell représente essentiellement une hiérarchie d'éléments de navigation:

  • Shell - représente l’application dans son ensemble
  • ShellItem - ce sont les pages de premier niveau de l'application. Actuellement, si plusieurs ShellItem sont définis, ils apparaîtront automatiquement dans un flyout.
  • ShellSection - une page peut être divisée en sections qui correspondent essentiellement aux onglets inférieurs. Si un ShellItem n'a qu'une seule ShellSection, aucun onglet ne s'affichera.
  • ShellContent - il s'agit du contenu de la page qui sera affiché dans les onglets du bas. Si une ShellSection a plusieurs ShellContent, des onglets apparaîtront en haut de l'onglet pour vous donner un affichage en sandwich.

image

Utiliser le template

image

Le plus simple pour créer une App utilisant Shell est de partir du template proposé par Visual Studio. Il reste toutefois possible d’ajouter le support de Shell parès coup. Mais ce n’est pas aussi simple que ça. Non pas à cause de Shell lui-même mais bien parce que la navigation c’est un peu le “cœur de la maison” là où se structure tous les chemins possibles et que supprimer un modèle de navigation en place pour en mettre un autre est toujours une opération délicate !

On notera au passage qu'intégré aux templates au départ puis enlever pour être remis, Shell pour UWP n'est pas encore opérationnel pour l'instant… mais peut être qu'au moment de lire ces lignes la case à cocher sera de nouveau active !

Comment configurer Shell ?

La bonne nouvelle est qu’il existe un nouveau template dans Visual Studio 2019 qui peut vous aider à démarrer très rapidement avec Shell (voir ci-dessus) mais vous attendez certainement un peu plus d’explication de ma part que juste “utilisez le template” … De toute façon la meilleure façon de comprendre ce qui se passe est de commencer avec un modèle vierge et de tout configurer à partir de la base.

Préparons ainsi une application vierge prête à utiliser le nouveau Shell. Je n’utiliserai donc pas ici le Template.

image

La première chose à faire est de vous assurer que vos projets référencent un package Xamarin Forms de version 4 ou supérieure. Dans la solution, vérifiez les dossiers des packages (et de NuGet) vous pouvez alors cliquer avec le bouton droit sur le paquet et choisir mettre à jour si la version est inférieure à la 4 (dans les versions 3.6x Shell n’était qu’expérimental et nécessitait le set d’un attribut pour fonctionner, ce qui n’est bien entendu plus le cas maintenant qu’il est officiellement disponible).

Créer le Shell

Une fois que vous avez une configuration vierge et à jour, vous pouvez commencer à utiliser la classe Shell afin de créer votre propre sous-classe qui fera exactement ce dont vous avez besoin. Dans la réalité vous partirez le plus souvent du Template et certaines étapes seront déjà réalisées, mais il est essentiel de les comprendre toutes pour utiliser correctement le template qui ne doit pas être une boîte noire “magique”… Vous pouvez alors commencer par créer une nouvelle classe à l'aide du modèle ContentPage (XAML), qui crée un fichier C # ET un fichier XAML pour une nouvelle page. Immédiatement, vous devrez changer la classe dont hérite votre nouvelle classe car nous ne voulons pas d’une ContentPage, le Shell est écrit en XAML mais ce n’est pas un visuel en lui-même, juste une classe dérivant de la classe mère Shell (n’oubliez pas qu’un changement de classe se fait à la fois dans le code C# et le code XAML !) :

image


image

image


La classe s’appelle désormais “MainShell” mais le nom est libre bien entendu. Ce n’est plus une ContentPage mais un Shell, les déclarations C# et XAML ont été modifiées et le code XAML mis par défaut (contenu) a été supprimé.

Nous voici prêts à travailler ! Nous avons désormais un Shell, et nous pouvons l'utiliser pour définir la page principale l'application, comme vous utiliseriez une page de navigation lorsque vous utilisez le paradigme push-pop, mais cette fois, vous n'avez pas besoin de définir une racine, car toute la navigation sera définie à partir du fichier XAML du Shell :

image

Compiler à ce stade ne donnera pas grand chose il faut l’avouer, donc nous allons continuer un peu avant de lancer l’application…

Material design

Étant donné que Shell agit désormais comme le conteneur de l’ensemble de l’application, vous pouvez en tirer parti et utiliser Material Design en définissant simplement la propriété Visual de Shell (dernière ligne de la balise Shell) :

image

Pour obtenir un rendu Material Design il convient d’ajouter un paquet Nuget qui contient les définitions de styles nécessaires (Paquet Xamarin.Forms.Visual.Material) :

image

Remplir la coquille !

En amateur de fruits de mer j’ai plutôt tendance à vider les coquilles qu’à les remplir, mais ici c’est pour la bonne cause ! En effet pour l’instant il n’y a rien dans notre coquille, notre Shell est défini mais sans rien dedans.

Même si vous avez compris que les navigations créées avec Shell peuvent être très complexes, nous allons pour l’instant nous contenter de faire apparaître la page principale qui n’est même plus visible.

Pour cela nous allons remplir la coquille ! Avec plein de choses d’ailleurs, car le système est subtile, bien fait et complet, et forcément pour n’afficher qu’une seule page cela va sembler un peu lourd. Mais l’exemple va se compliquer… Commençons simplement :

image

Vous remarquerez comment j'ai défini une référence à un espace de noms local pour pouvoir accéder à MainPage. En dehors de cela, la définition du contenu est très simple. C'est tout ce qui est nécessaire pour afficher cet élément dans la vue.

Comme je le disais cela peut sembler un peu lourd pour afficher la MainPage qui était déjà affichée par défaut rien qu’en créer un projet vide Xamarin.Forms ! Mais la puissance et la simplicité de Shell vont bien au-delà de ce que nous avons avec la navigation « classique ». Prenons l'exemple suivant, où la définition d'un «TabbedPage» est maintenant aussi simple que l'édition du ShellItem afin qu'il contienne maintenant une nouvelle ShellSection:

image

On s’aperçoit un peu mieux de l’intérêt dès qu’on ajoute une ou deux pages de plus… Toute l’arborescence de navigation de votre application sera visible et contrôlable depuis un seul fichier descriptif écrit en XAML !

Certes pour l’instant si nous compilons nous ne verrons pas encore les titres et les icônes, il faut ajouter ces informations elles ne peuvent pas être “inventées” par Shell…

Screenshot_1565728861


Ci-dessus on voit l’affichage de notre App avec ses tabulations de navigation en bas de page (Accueil et Page 2) qui ne sont que la propriété “Title” des deux ShellSection du Shell actuel. L’ajout d’icône serait un plus mais nous nous satisferont de cela pour le moment. On remarquera d’ailleurs que dans le coin supérieur gauche apparait un Hamburger laissant penser qu’un menu peut s’ouvrir… Ca marche mais là encore faute d’avoir saisi toutes les informations le menu sera vide, en tout cas sans texte visible. Mais nous verrons cela plus tard.

Résumons

Cela semble bien assez pour une prise en main et une première partie sur quatre ! Mais résumons un peu de façon pratique les syntaxes des cas les plus courants. Notez que nous reviendrons sur toutes ces syntaxes dans les épisodes à suivre.

Application à une seule page

Pour un seul ShellContent, il n'est pas nécessaire d'inclure un élément Tab, insérez-le simplement sous FlyoutItem.

L'attribut FlyoutBehavior peut être utilisé pour masquer ou afficher le survol sur différentes pages de l'application ou (comme dans ce cas) dans l'ensemble de l'application. Utilisez Shell.FlyoutBehavior sur des éléments FlyoutItem individuels pour masquer le survol sur ces pages.

<Shell… FlyoutBehavior = ”Disabled”>
     <FlyoutItem…>
         <ShellContent… />
     </ FlyoutItem>
</ Shell>

Application à deux pages et Flyout

<Shell…>
     <FlyoutItem Title = ”Home”…>
         <ShellContent… />
     </ FlyoutItem>
     <FlyoutItem Title = ”Une seule page”… >
        <ShellContent… />
     </ FlyoutItem>
</ Shell>

Onglets en bas de page

<FlyoutItem Title = ”Onglets du bas”…>
     <Tab Title = ”Home”>
         <ShellContent… />
     </ Tab>
     <Onglet Title = ”Activité”…>
         <ShellContent… />
     </ Tab>
</ FlyoutItem>

Onglets en haut de page

<FlyoutItem Title = ”Onglets supérieurs”…>
     <Tab Title = ”Activité”…>
         <ShellContent Title = ”Partagé”… />
         <ShellContent Title = ”Notifications”… />
     </ Tab>
</ FlyoutItem>

Onglet avec hamburger

<FlyoutItem Title = ”Onglet Sandwich”…>

     <Tab Title = ”Activité”…>
         <ShellContent Title = ”Partagé”… />
         <ShellContent Title = ”Notifications”… />
     </ Tab>
     <Tab Title = ”Mises à jour” …>
         <ShellContent Title = ”Updates”… />
         <ShellContent Title = ”Home”… />
     </ Tab>
</ FlyoutItem>

Conclusion de la partie 1/4

Il y a beaucoup plus de choses à faire avec le Shell que ce que nous venons de voir et j'en parlerai dans les prochains articles, mais il faut bien commencer quelque part… Et j’espère que cette première approche vous aura au moins aidé à comprendre ce qu’est Shell et ce qu’il peut vous apporter.

Dans les prochaines parties nous verrons comment utiliser le menu Flyout (vide pour l’instant), utiliser des onglets secondaires, puis nous aborderons le principes des Routes et comment les définir et fixer des itinéraires dans l’application, comment naviguer vers une page hors du Shell et y revenir, naviguer en arrière, enfin comment passer des données entre les pages ce qui est souvent essentiel.

Cela nous laisse pas mal de chose à dire alors…

Stay Tuned !

blog comments powered by Disqus