Contrôles Xamarin personnalisés avec liaisons Blazor Mobile

Blazor Mobile Bindings est passionnant, mais encourage également la réutilisation. Nous examinons comment encapsuler l'interface utilisateur Xamarin.Forms personnalisée en tant que composants Blazor.

Blazor est l'une des technologies les plus intéressantes pour les développeurs Web sur la pile .NET et permet de créer des applications Web côté client / serveur entièrement en C #. Blazor invite les développeurs dans un écosystème riche et voit des innovations continues en matière d'outillage / performance. Blazor n'est pas seulement pour les applications Web et a des implications claires pour les ordinateurs de bureau / mobiles .

Bien qu'expérimental, Blazor Mobile Bindings pique l'intérêt de nombreux développeurs mobiles, pour la création d'applications mobiles natives en utilisant C # / .NET pour cibler iOS, Android et d'autres plates-formes. L'attrait est simple: utilisez la syntaxe Razor et le modèle de composant Blazor bien connu pour créer des applications mobiles. Mais que faire si vous êtes déjà investi dans la pile Xamarin? Peut-être avez-vous déjà des applications Xamarin.Forms dans lesquelles vous souhaitez maintenant inviter les développeurs Blazor? Peut-être avez-vous une interface utilisateur Xamarin.Forms existante pour iOS / Android – devriez-vous tout jeter et recommencer à zéro?

Heureusement que non. Voyons comment exposer l'interface utilisateur Xamarin.Forms personnalisée, avec toutes les fonctionnalités, dans les composants Blazor. Les développeurs peuvent avoir le confort d'utiliser la syntaxe Blazor, tout en réutilisant les contrôles personnalisés existants en tant que wrappers.

Why Wrappers

De réels progrès sont souvent accomplis lorsque nous nous tenons sur l'épaule de géants. Xamarin.Forms était et continue d'être une excellente pile technologique, permettant aux développeurs .NET de créer des applications mobiles multiplateformes véritablement natives. La plupart des développeurs .NET trouvent productif de pouvoir écrire en C # / XAML et de faire en sorte que Xamarin.Forms rende l'interface utilisateur native correspondante sur iOS, Android, Mac OS, Tizen et plus encore. Bien sûr, chaque pile technologique a des faiblesses et les outils des développeurs peuvent toujours s'améliorer. Mais il est indéniable à quel point Xamarin.Forms a mûri en tant que pile technologique, bénéficiant d'un écosystème riche et d'une communauté de développeurs passionnés.

Xamarin.Forms favorise cependant les développeurs .NET qui connaissent bien l'utilisation de XAML ou du C # déclaratif pour créer des arborescences visuelles. Sinon, et comme c'est le cas avec les développeurs Web .NET, Xamarin.Forms nécessite une courbe d'apprentissage raide pour la productivité des développeurs. Les développeurs Web ASP.NET sont clairement enthousiasmés par Blazor, et c'est peut-être le moment opportun pour inviter les développeurs Web à venir créer des applications mobiles natives. Et pourquoi réinventer la roue alors que Xamarin.Forms sait déjà comment faire le gros du travail?

Avec Blazor Mobile Bindings, l'objectif est de bénéficier de l'expertise du vétéran et de s'asseoir au sommet de la pile technologique Xamarin.Forms. Les développeurs seraient en mesure d'écrire du balisage / code d'interface utilisateur dans la syntaxe Razor et le modèle de composant Blazor, tous deux familiers aux développeurs Web .NET. Un peu de magie et l'interface utilisateur de Blazor est traduite en interface utilisateur Xamarin.Forms sous les couvertures, avant de rendre l'interface utilisateur native sur différentes plates-formes. Cette magie se présente sous la forme de simples wrappers, du code qui traduit l'interface utilisateur Xamarin.Forms en code Blazor plus convivial.

Bubble Up the Goodness

Alors, que faut-il pour exposer un contrôle d'interface utilisateur Xamarin.Forms en tant que wrapper du balisage Blazor? Il s'avère que nous devons faire remonter deux choses à propos de chaque composant de l'interface utilisateur: les propriétés pertinentes et les gestionnaires d'événements . Cela garantit que les développeurs utilisant le composant d'interface utilisateur d'un fichier .razor utilisant la syntaxe Blazor ont accès aux mêmes avantages que les homologues XAML / C #.

Cet encapsulation des contrôles Xamarin.Forms dans Blazor-land est obtenu en implémentant deux types de classes:

1. Un composant doit dériver de NativeControlComponentBase .
2. Un gestionnaire d'élément représentant le composant d'interface utilisateur qui implémente l'interface IXamarinFormsElementHandler .

Gift Wrap for Custom UI

La plupart des composants d'interface utilisateur Xamarin.Forms par défaut sont encapsulés en tant que composants Blazor utilisant les mêmes principes de base. Le dépôt Blazor Mobile Bindings GitHub a également un exemple de encapsulant le composant PancakeView Xamarin.Forms populaire comme interface utilisateur Blazor. Mais les développeurs pourraient-ils y parvenir avec des composants Xamarin.Forms personnalisés? Essayons avec quelques contrôles Xamarin.Forms de la suite Telerik UI pour Xamarin en particulier les contrôles populaires NumericInput et Calendar .

La première étape consisterait à créer un nouveau projet en utilisant l'outil Blazor Mobile Bindings CLI et à insérer Telerik UI pour Xamarin via le package NuGet . Les dépendances du projet sont comme ci-dessous. Tout le code à écrire se trouve dans la bibliothèque partagée .NET Standard – rien de spécifique à la plate-forme.

Voici notre code _Imports.razor – rien d'extraordinaire ici. Notez que nous ne tirons PAS d'espaces de noms Telerik. La plupart des interfaces utilisateur de Telerik Xamarin.Forms sont livrées avec des wrappers intégrés – l'objectif est de le faire manuellement!

 @using Microsoft.MobileBlazorBindings
@utilisation de Microsoft.MobileBlazorBindings.Elements
@utilisation de Xamarin.Essentials
@using Xamarin.Forms 

Dans App.cs rien de différent à propos du démarrage de l'application non plus— HelloWorld est le seul composant Blazor et il est chargé dans le MainPage comme ceci:

 namespace TelerikBlazorMobile
{
    Application de classe publique: Application
    {
        Application publique ()
        {
            var hôte = MobileBlazorBindingsHost.CreateDefaultBuilder ()
                .ConfigureServices ((hostContext, services) =>
                {

                })
                .Construire();

            MainPage = nouveau ContentPage ();
            host.AddComponent  (parent: MainPage);
        }
        ...
        ...
    }
} 

Maintenant, écrivons les deux morceaux de code nécessaires pour encapsuler un contrôle Xamarin.Forms Telerik UI en tant que composant Blazor. Le code de base affiché ici est pour NumericInput – celui du calendrier est identique. Tout d'abord, nous récupérons l'espace de noms du contrôle et enregistrons le moteur de rendu du contrôle Xamarin.Forms avec le ElementHandlerRegistry comme ci-dessous. Notez que la propriété Step est exposée pour le composant Blazor – elle serait utilisée pour cartographier une propriété du terrain Xamarin au terrain Blazor.

 utilisant System;
using Microsoft.MobileBlazorBindings.Core;
en utilisant Microsoft.AspNetCore.Components;
using Microsoft.MobileBlazorBindings.Elements;
en utilisant Telerik.XamarinForms.Input;

espace de noms TelerikBlazorMobile
{
    classe publique RadNumericInput: View
    {
        statique RadNumericInput ()
        {
            ElementHandlerRegistry.RegisterElementHandler  (renderer => nouveau RadNumericInputHandler (rendu, nouveau Telerik.XamarinForms.Input.RadNumericInput ()));
        }

        [Parameter] public int Step {get; ensemble; }

        protected override void RenderAttributes (générateur AttributesBuilder)
        {
            base.RenderAttributes (constructeur);
            builder.AddAttribute (nom de (étape), étape);
        }
    }
} 

Ensuite, nous connectons la propriété Step sous-jacente du moteur de rendu NumericInput à la propriété Step correspondante du composant Blazor, comme ci-dessous. Cette même technique doit être utilisée pour exposer au composant Blazor, chaque gestionnaire de propriété / événement sous-jacent comme souhaité à partir du contrôle Xamarin.Forms.

 utilisant System;
using Microsoft.MobileBlazorBindings.Core;
using Microsoft.MobileBlazorBindings.Elements;
using Microsoft.MobileBlazorBindings.Elements.Handlers;

espace de noms TelerikBlazorMobile
{
    classe publique RadNumericInputHandler: ViewHandler
    {
        public RadNumericInputHandler (moteur de rendu NativeComponentRenderer, Telerik.XamarinForms.Input.RadNumericInput numericUI): base (rendu, numericUI)
        {
            NumericUI = numericUI ?? throw new ArgumentNullException (nameof (numericUI));
        }

        public Telerik.XamarinForms.Input.RadNumericInput NumericUI {get; }

        public override void ApplyAttribute (ulong attributeEventHandlerId, string attributeName, object attributeValue, string attributeEventUpdatesAttributeName)
        {
            commutateur (attributName)
            {
                nom de cas de (Telerik.XamarinForms.Input.RadNumericInput.Step):
                    NumericUI.Step = AttributeHelper.GetInt (attributeValue);
                    Pause;
                défaut:
                    base.ApplyAttribute (attributeEventHandlerId, attributeName, attributeValue, attributeEventUpdatesAttributeName);
                    Pause;
            }
        }
    }
} 

C'est tout. Avec les deux contrôles d'interface utilisateur Telerik Xamarin.Forms câblés en tant que composants Blazor et propriétés clés exposées, il est temps d'essayer les choses. De retour dans notre composant HelloWorld Blazor, nous pouvons faire référence aux composants du wrapper par leur nom et les écrire en tant que syntaxe Razor. Notez comment la propriété Step de NumerInput est définie dans le code Blazor classique – cela indique la valeur d'incrémentation / décrémentation pas à pas, comme suit:

    

    
    




 @code
{
    pas à pas int = 20;
} 

Avec les doigts croisés, il est temps de lancer le simulateur mobile et le tour est joué!

Et bien sûr avec le contrôle NumericInput , le pas à pas haut / bas saute de 20 comme souhaité par le paramètre passé dans le composant Blazor. La propriété du composant Blazor est mappée correctement vers la propriété correspondante de l'interface utilisateur Xamarin.Forms sous-jacente. Nous pouvons la définir à partir du code "Web".

Prêt à l'emploi

En fait, création de wrappers de composants Blazor pour des Xamarin.Forms personnalisés Les contrôles de l'interface utilisateur ne sont pas si difficiles. Mais c'est vraiment fastidieux. Envision des contrôles de l'interface utilisateur avec une tonne de propriétés et de gestionnaires d'événements – chacun doit être câblé à ses homologues Blazor à la main. Ne serait-il pas agréable que de tels emballages Blazor soient prêts à l'emploi? L'interface utilisateur Telerik pour Xamarin peut vous aider. Plusieurs Xamarin.Forms populaires et percutants Telerik UI sont désormais pré-construits avec des wrappers de composants Blazor comme indiqué dans la liste ci-dessous. Il vous suffit de récupérer le package Nuget Telerik UI pour Xamarin Blazor et vous pourrez écrire du code Blazor pour rendre l'interface utilisateur Xamarin.Forms – toutes les propriétés d'interface utilisateur / gestionnaires d'événements nécessaires sont déjà câblés.

Pour de nombreux développeurs, voir c'est croire. Pour l'interface utilisateur Telerik pour Xamarin, il existe un exemple d'application appelé SDK Browser . Il s'agit d'une application Xamarin.Forms qui montre des exemples axés sur les développeurs sur la façon d'utiliser l'interface utilisateur dans divers scénarios. Découvrez la même application désormais écrite de manière complètement différente: chaque élément de l'interface utilisateur Xamarin.Forms est rendu en tant que composants Blazor.

Emballage de l'interface utilisateur Xamarin.Forms personnalisée en tant que composants Blazor? Il s'avère que vous n'avez pas besoin de la main -codez tout. Le référentiel GitHub de Blazor Mobile Bindings dispose d'un ComponentWrapperGenerator qui est destiné à automatiser une grande partie du processus. L'objectif est de parcourir les propriétés des composants de l'interface utilisateur et de les encapsuler pour la syntaxe Blazor. Aucun outil n'est parfait, mais c'est un excellent point de départ.

Conclusion

Blazor est naturellement passionnant pour les développeurs Web .NET, mais a également de belles implications pour les ordinateurs de bureau / mobiles. Bien qu'expérimental, Blazor Mobile Bindings pique l'intérêt de nombreux mobiles développeurs. Mobile Blazor Bindings permet aux développeurs de créer des applications mobiles natives ou hybrides à l'aide de C # /. NET pour cibler iOS, Android et d'autres plates-formes.

Xamarin.Forms a longtemps été un moyen élégant d'écrire C # / XAML pour créer une croix vraiment native -application de plates-formes s. Et pour les applications natives avec Blazor, Blazor Mobile Bindings se trouve juste au-dessus de la pile technologique Xamarin.Forms. La plupart des contrôles d'interface utilisateur personnalisés écrits pour Xamarin.Forms peuvent être assez facilement encapsulés et exposés en tant que composant Blazor. Cela présente l'avantage évident de la réutilisabilité et de la possibilité d'utiliser un composant d'interface utilisateur de Blazor comme on le ferait avec Xamarin.Forms. La même interface utilisateur exacte peut être rendue dans les deux sens, ce qui permet aux développeurs d'être flexibles. Jusqu'à ce que Blazor Mobile Bindings soit prêt pour la production, les développeurs mobiles et de bureau peuvent expérimenter et se réjouir des possibilités.