Hello World - comment fonctionne-t-il ?

  • Article

Important

Ce projet est une version expérimentale. Nous espérons que vous essayez experimental Mobile Blazor Bindings et fournissez des commentaires à l’adresse https://github.com/xamarin/MobileBlazorBindings.

Notes

Cette page est une continuation de la procédure pas à pas Créer votre première application . Nous vous recommandons de suivre cette procédure pas à pas avant de continuer.

Jetons un coup d’œil au projet initial qui a été créé dans la procédure pas à pas précédente pour en savoir plus sur l’utilisation des liaisons expérimentales de blazor mobile.

Le projet main à examiner est le projet partagé qui contient les .razor fichiers. Les projets Android et iOS ne contiennent aucun code spécifique aux liaisons Expérimentales Blazor Mobile.

Voici les fichiers du projet partagé :

  • _Imports.razor - Contient des directives courantes qui sont appliquées à tous les autres .razor fichiers de ce dossier et à ses sous-dossiers. Les sous-dossiers peuvent avoir leurs propres _Imports.razor fichiers avec des directives supplémentaires. Le type de directive le plus courant dans ce fichier est la @using directive, qui est utilisée pour importer un espace de noms dans .razor des fichiers, exactement de la même façon qu’une instruction C using #.
  • App.cs- Contient le point d’entrée d’interface utilisateur main de l’application, représenté par une classe qui dérive de la Xamarin.Forms.Application classe de base. Le constructeur de cette classe instancie un hôte générique, ajoute des services à l’hôte (le projet par défaut n’en a aucun), puis utilise l’hôte pour ajouter un composant Blazor nommé HelloWorld à l’élément d’application (this).
  • Counter.razor - Contient un composant Blazor nommé Counter.
  • HelloWorld.razor - Contient un composant Blazor nommé HelloWorld.

Examinons les deux composants Blazor pour voir comment ils fonctionnent.

Composant Counter Blazor

Ce composant contient deux sections :

  1. Balisage qui définit les éléments d’interface utilisateur et leurs propriétés et gestionnaires d’événements associés :

    <Frame CornerRadius="10" BackgroundColor="Color.LightBlue">

    <StackLayout Orientation="StackOrientation.Horizontal" HorizontalOptions="LayoutOptions.Center">

        <Button Text="Increment" OnClick="IncrementCount" />

        <Label Text="@("The button was clicked " + count + " times")"
            FontAttributes="FontAttributes.Bold"
            VerticalTextAlignment="TextAlignment.Center" />

    </StackLayout>

</Frame>

    Les balises de type HTML représentent des composants d’interface utilisateur qui correspondent aux composants Xamarin.Forms, ainsi qu’à leurs propriétés et événements. Certaines propriétés ont des valeurs calculées, telles que la propriété du Text composant, dont la Label valeur est définie sur une valeur calculée par du code C#, qui est indiquée par le bloc d’expression@( ... ).

    Lorsqu’un gestionnaire d’événements est exécuté, tel que l’événement Button du OnClick composant, le composant est automatiquement restitué, ce qui permet à l’interface utilisateur de se mettre à jour sans logique supplémentaire. Des scénarios plus avancés peuvent contrôler quels composants sont restitués et quand.

  2. Code qui implémente des gestionnaires d’événements ou d’autres fonctionnalités de composant, encapsulé dans un @code { ... } bloc :

    int count;

void IncrementCount()
{
    count++;
}

    Ce code incrémente le count champ, qui est également utilisé comme valeur calculée de la Label propriété du Text composant. Une fois le IncrementCount() gestionnaire d’événements exécuté, la nouvelle valeur de est utilisée lors du rendu de count l’interface utilisateur.

Composant HelloWorld Blazor

Le composant HelloWorld contient uniquement le balisage :

<ContentView>
    <StackLayout Margin="new Thickness(20)">

        <Label Text="Hello, World!"
               FontSize="40" />

        <Counter />

    </StackLayout>
</ContentView>

Notez que le Counter composant est référencé dans ce composant en le référençant en tant que balise <Counter />.

Chaque composant Blazor est compilé dans une classe portant le même nom que le fichier. L’espace de noms est l’espace de noms racine du projet, ainsi que les noms de dossiers, le cas échéant, séparés par des points (.). Le type peut être référencé par un autre code C# via son nom de type (non courant) ou dans un .razor fichier en l’utilisant comme balise.