Liaisons de blazor mobiles expérimentales

Article
08/22/2023

Les liaisons de blazor mobiles expérimentales permettent aux développeurs de créer des applications mobiles natives et hybrides à l’aide de C# et .NET pour Android, iOS, Windows, macOS et Tizen à l’aide de modèles de programmation web familiers. Les liaisons de blazor mobiles expérimentales utilisent la syntaxe Razor pour définir les composants d’interface utilisateur et les comportements d’une application. Les composants d’interface utilisateur sous-jacents sont basés sur des composants d’interface utilisateur natifs Xamarin.Forms et dans les applications hybrides, ils sont mélangés à des éléments HTML.

Blazor s’exécute sur .NET Standard 2.0 afin que vous puissiez partager votre code .NET avec la plupart des autres applications .NET.

Avec Mobile Blazor Bindings, il est facile de créer une interface utilisateur native avec des étiquettes, des boutons et d’autres composants d’interface utilisateur natifs :

<StackLayout>
    <Label FontSize="30"
           Text="@("You pressed " + count + " times")" />
    <Button Text="+1"
            OnClick="@HandleClick" />
</StackLayout>

@code {
    int count;

    void HandleClick()
    {
        count++;
    }
}

Et ici, il s’exécute dans l’émulateur Android :

Vous pouvez également créer des applications hybrides qui combinent l’interface utilisateur native et l’interface utilisateur HTML dans le même écran, partageant toutes la même logique d’application et le même état :

/Main.razor: (interface utilisateur native)

@inject CounterState CounterState

<ContentView>
    <StackLayout>

        <StackLayout Margin="new Thickness(20)">
            <Label Text="@($"You pressed {CounterState.CurrentCount} times")" FontSize="30" />
            <Button Text="Increment from native" OnClick="@CounterState.IncrementCount" Padding="10" />
        </StackLayout>

        <BlazorWebView ContentRoot="WebUI/wwwroot" VerticalOptions="LayoutOptions.FillAndExpand">
            <FirstBlazorHybridApp.WebUI.App />
        </BlazorWebView>

    </StackLayout>
</ContentView>

@code {
    // initialization code
}

/WebUI/App.razor: (interface utilisateur HTML)

@inject CounterState CounterState

<div style="text-align: center; background-color: lightblue;">
    <div>
        <span style="font-size: 30px; font-weight: bold;">
            You pressed @CounterState.CurrentCount times
        </span>
    </div>
    <div>
        <button style="margin: 20px;" @onclick="ClickMe">Increment from HTML</button>
    </div>
</div>

@code
{
    private void ClickMe()
    {
        CounterState.IncrementCount();
    }

    // initialization code
}

Ici, il s’exécute dans le simulateur iOS, avec l’interface utilisateur native en haut et l’interface utilisateur HTML en bas, partageant la logique et l’état de l’application :

Pour créer vos premières applications, case activée les rubriques suivantes :

Prise en main de la configuration de votre environnement de développement.
Créez votre première application à l’aide de composants d’interface utilisateur natifs.
Créez votre première application hybride à l’aide d’un mélange de composants d’interface utilisateur natifs et d’interface utilisateur HTML.

Et lorsque vous êtes prêt pour plus d’informations, case activée les procédures pas à pas :

Voici quelques-unes des rubriques avancées :

Injection de dépendances : inscrire et partager des services entre des parties de l’application
Écriture de composants personnalisés : créer des composants réutilisables dans vos applications
Xamarin.Essentials : fournit aux développeurs des API multiplateformes pour leurs applications mobiles

Enfin, si vous souhaitez contribuer, case activée les rubriques suivantes :

Liaisons de blazor mobiles expérimentales

Ressources supplémentaires