Introduction à Xamarin.Forms Shell

Le nouveau shell Xamarin.Forms est conçu pour améliorer la productivité des développeurs mobiles. Le contenu de Shell simplifie bien l’organisation et la navigation du contenu des applications, ce qui laisse plus de temps aux développeurs pour se concentrer sur le contenu des applications. Cet article explore les bases de Xamarin.Forms Shell et comment commencer.

Le développement d'applications mobiles devrait être amusant. Mais les réalités du développement d'applications d'entreprise placent souvent les développeurs mobiles dans des délais serrés. Les développeurs indépendants qui créent des applications mobiles tentent souvent de tirer le meilleur parti des nuits et des week-ends. Tout framework, outil ou technique permettant aux développeurs mobiles d’augmenter leur productivité est donc le bienvenu.

Maintenant, la plupart des gourmands seront d’accord: un bon burrito est un pur bonheur. Vous devez choisir un emballage qui convient à vos goûts et ce qui est à l'intérieur est ce que votre coeur désire. Et oui, tous les burritos devraient être personnalisables. Mais qu'est-ce qu'une référence alimentaire a à voir avec le développement mobile?

Les développeurs mobiles recherchent souvent des raccourcis – un bon point de départ en vaut vraiment la peine. Ce ne serait pas bien si nous pouvions obtenir certaines fonctionnalités standard et pouvoir nous concentrer sur les fonctionnalités des applications? La plupart des applications suivent une structure d'organisation du contenu et de navigation. Ne serait-il pas agréable de disposer de quelque chose de beau, prêt à l'emploi, qui fonctionne de manière transparente entre plates-formes? Ce que les développeurs d'applications veulent, c'est un shell burrito – et pouvoir ensuite le remplir avec le contenu des applications.

Xamarin.Forms permet aux développeurs .NET de créer des applications pour iOS, Android et bien plus facilement. Xamarin.Forms permet de créer des applications véritablement natives à partir d'une seule base de code partagé – des applications avec une belle interface utilisateur native .

Xamarin.Forms 4.0 a été envoyé plus tôt cette année et a considérablement amélioré le jeu de l'interface utilisateur avec l'introduction du shell Shell . Tout comme Xamarin.Forms synthétise les éléments de l’interface utilisateur dans une API facile à utiliser, Shell élimine l’architecture des applications et la complexité de la navigation.

Shell fournit un conteneur pour votre application. Ce conteneur comprend un MasterDetailPage un TabbedPage et un NavigationPage ou une combinaison des deux. Shell fournit également une fonctionnalité de recherche rudimentaire. Et, pour couronner le tout, la navigation basée sur URI a été intégrée. C'est presque comme si la coquille était la tortilla de notre burrito app et que les pages étaient des garnitures délicieuses! Maintenant que la métaphore du burrito est ancrée au sol, plongeons-nous et créons une application Xamarin.Forms basée sur Shell!

Notre application de démonstration

Tout d'abord, voici l'application que nous créerons aujourd'hui.

C'est comme un guide touristique de Seattle – à l'exception d'une application de démonstration. Il a un MasterDetailPage avec 2 enfants – l'un est un TabbedPage l'autre est un vieux ContentPage normal. Ce TabbedPage a 2 onglets. Chaque page de ces onglets a un ListView et un appui sur les éléments ListView permet de naviguer dans l'application. Vous pouvez récupérer tout le code de démonstration pour cette application sur GitHub, le cloner et le suivre! Cool? Cool.

Bases de Shell

Pour créer une application dans une application Shell, vous avez besoin d'une page Shell . Et cela ressemble à ceci:

Ensuite, dans le constructeur de votre page Application :

 app publique ()
{
InitializeComponent ();
MainPage = new ShellPage ();
} 

La documentation de Xamarin.Forms Shell contient une tonne d'informations détaillées sur l'amorçage d'une application Shell. Maintenant, faisons en sorte que le shell contienne quelque chose!

Composants de shell

Comme indiqué, il existe 3 composants principaux d’une application Shell: le MasterDetailPage (ou flyout), le TabbedPage . et le NavigationPage . Vous pouvez les utiliser tous ensemble ou les sélectionner à votre guise. Commençons par le MasterDetailPage .

The Flyout

En regardant l'application ci-dessus, il existe deux pages de "détail" pour le MasterDetailPage . L'un est un TabbedPage et l'autre est un ContentPage . Voyons donc comment vous ajouteriez ceci: ContentPage :

C'est assez simple. Dans l'élément nous avons inséré un élément . Et dans ce cadre, référence à votre page personnalisée.

Prenons maintenant une minute pour nous arrêter et examiner quelques raccourcis lors de la création du shell. Il existe d'autres éléments tels que qui pourraient entrer dans cette hiérarchie. Mais l’équipe Xamarin.Forms l’a conçue pour que l’analyseur XAML les mette si vous les omettez. Xamarin.Forms sait déjà que devrait être dans . Nous pouvons donc omettre cela et laisser les formulaires faire le travail. Vous pouvez plonger profondément dans la mécanique de Flyout dans les documents ou en savoir plus sur que fait encore Forms pour vous.

The Tabs

La prochaine étape consiste à ajouter le TabbedPage . Ou Tabs comme Shell aime les appeler. Puisqu'il fait également partie de MasterDetailPage il ira également dans un FlyoutItem . Et ensuite, dire à Xamarin.Forms de transformer ce FlyoutItem en onglets, vous y mettez des éléments .

La syntaxe est la suivante:

Nous allons quelque part. A MasterDetailPage terminant un TabbedPage avec deux onglets et une ContentPage .

Que faire si vous ne voulez pas de ContentPage .

Que faire si vous ne voulez pas de MasterDetailPage du tout? Laissez de côté les éléments FlyoutItem . Ne mettez que dans éléments. Et si vous le souhaitez, vous pouvez également envelopper tous ces éléments dans un élément . Et voici la meilleure chose: par défaut, toutes les pages en bas se trouvent déjà dans un NavigationPage .

Vous savez ce que cela signifie, il est temps de faire de la navigation!

Navigation

Shell nous donne quelque chose appelé routage basé sur URI. Cela signifie que vous attribuez un identifiant de chaîne à une page, puis appelez Shell.Current.GoToAsync en indiquant l'identifiant de cette page. Et .. vous transmettez des arguments à la nouvelle page en tant que paramètres de chaîne de requête.

Donc, dans le cas de la page d’arrêt de bus: comme elle n’est référencée nulle part dans le XAML de la page nous devons définir un itinéraire pour cela. . Nous faisons cela dans le constructeur de notre page Shell:

 public ShellPage ()
{
    InitializeComponent ();
    Routing.RegisterRoute ("arrêt de bus", typeof (BusStopPage));
} 

Cela va permettre à Shell d'accéder au BusStopPage . Et nous le ferons dans la liste ListView.ItemSelected de de BusRoutePage :

 async void Handle_ItemSelected (expéditeur d'objet, Arguments SelectedItemChangedEventArgs)
{
    var selectedRoute = e.SelectedItem as BusRouteInfo;

    wait Shell.Current.GoToAsync ($ "arrêt du bus = route {selectedRoute.RouteNumber}");
} 

Shell va alors remonter le BusStopPage et y accéder, en indiquant le numéro de route du bus de l'élément sélectionné. Comment obtenez-vous à celui passé en paramètre? Vous pouvez utiliser un attribut de niveau de classe. Il spécifie le nom du paramètre entrant avec une propriété de la classe à renseigner.

Voici donc à quoi cela ressemble:

 [QueryProperty("RouteNumber", "route")]
classe partielle publique BusStopPage: ContentPage 

Le paramètre route remplira la propriété RouteNumber . Il y a beaucoup beaucoup plus de navigation dans Shell. Les documents sont là pour vous aider.

Résumé

Voilà, Xamarin.Forms Shell résume certaines des complexités de la création d'applications dans une API intuitive. L'élément est la base de tout. À cela, vous ajoutez pour créer un MasterDetailPage . Dans ces éléments, vous ajoutez des éléments pour créer un TabbedPage ou vos pages personnalisées. Dans les éléments ajoutez vos pages personnalisées. Et vous pouvez naviguer partout en utilisant la toute nouvelle navigation basée sur les URI de Shell.

Shell peut faire beaucoup plus, y compris la recherche et une multitude de styles visuels. Comme toujours, les documents sont le meilleur endroit pour commencer – plus d'articles de plongée profonds Shell à venir ici. Et saviez-vous que l'interface utilisateur Telerik pour Xamarin fonctionne parfaitement avec le nouveau Shell Xamarin.Forms? Bons moments en effet. Profitez de votre burrito!