Partager via

Hello World hybride : comment fonctionne-t-il ?

  • Article

Important

Ce projet est une version expérimentale. Nous espérons que vous essayez experimental Mobile Blazor Bindings et que vous envoyez vos 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 hybride . Nous vous recommandons de suivre cette procédure pas à pas avant de continuer.

Conseil

Pour un exemple plus simple, commencez par la procédure pas à pas créer votre première application et la procédure Hello World suivante qui montre certaines fonctionnalités de base de Blazor.

Examinons le projet initial qui a été créé dans la procédure pas à pas précédente pour en savoir plus sur l’utilisation des liaisons de blazor mobiles expérimentales pour les applications hybrides.

Le main projet à examiner est le projet partagé qui contient les .razor fichiers. Les projets spécifiques à la plateforme contiennent uniquement un code minimal spécifique aux liaisons d’blazor mobile expérimental.

Voici les fichiers et dossiers notables du projet partagé :

Dossier racine

  • _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 comme une instruction C# using .
  • App.cs- Contient le main point d’entrée de l’interface utilisateur 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, ajoute des services à l’hôte, puis utilise l’hôte pour ajouter un composant Blazor nommé Main à la page d’application main.
  • CounterState.cs - Contient un service qui effectue le suivi d’une valeur de compteur et propose des API associées. Ce service est utilisé à la fois dans les parties native et HTML de l’application.
  • Main.razor- Contient le composant d’interface utilisateur Blazor main de l’application. Il contient une interface utilisateur native et également un BlazorWebView composant qui héberge la partie HTML de l’application.

Dossiers WebUI et wwwroot

Ces dossiers contiennent le composant WebPart de l’application, ce qui en fait une application hybride. Les fichiers et dossiers ici correspondent étroitement à ce que l’on trouve dans une application web Blazor.

  • WebUI/_Imports.razor - Contient des directives courantes pour le composant WebPart de l’application.
  • WebUI/App.razor- Contient le point d’entrée main pour le composant WebPart de l’application.
  • WebUI/Pages dossier : contient des pages navigables créées à l’aide de la syntaxe web Blazor. Ici, .razor les fichiers affichent tous le code HTML et partagent l’état de l’application avec le reste de l’application.
  • WebUI/Shared dossier : contient des composants d’interface utilisateur réutilisables partagés créés à l’aide de la syntaxe web Blazor. Les .razor fichiers ici affichent tous du CODE HTML et sont utilisés dans d’autres pages de l’application. Ce dossier contient également le MainLayout composant qui définit la forme globale du composant WebPart de l’application.
  • wwwroot dossier : contient des ressources web statiques utilisées dans le composant WebPart de l’application. Il s’agit généralement de fichiers et d’images CSS.

Examinons les fichiers intéressants.

App.cs point d’entrée

Le point d’entrée de l’interface utilisateur de l’application se trouve dans cette page. Il configure les services de l’application, puis initialise l’interface utilisateur en attachant un composant Liaisons d’blazor mobile à l’élément MainPage .

Deux ensembles de services sont inscrits :

  1. services.AddBlazorHybrid() ajoute les services requis par Mobile Blazor Bindings pour héberger des composants Web Blazor dans l’interface utilisateur native.
  2. services.AddSingleton<CounterState>() ajoute un service spécifique à l’application qui peut être consommé à partir de n’importe où dans l’application, y compris les fichiers de code, les composants Blazor et d’autres services. Il s’agit d’un service singleton, ce qui signifie qu’au plus un instance de celui-ci sera créé, ce qui permettra de partager l’état.

En savoir plus sur les services et l’DI dans la rubrique injection de dépendances.

Main.razor page d’interface utilisateur native

Il s’agit de la main page d’interface utilisateur native de l’application. Il contient plusieurs composants d’interface utilisateur natifs, tels que <Label> et <Button>. Il contient également un <BlazorWebView> composant qui héberge le contenu web Blazor :

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

Quelques autres choses intéressantes :

  • La <FirstBlazorHybridApp.WebUI.App /> balise est la façon dont la partie native de l’application fait référence au composant WebPart de l’application.
  • La @inject directive est utilisée pour référencer le CounterState service.
  • Les OnInitialized méthodes et Dispose sont implémentées pour attacher/détacher un gestionnaire d’événements StateChanged afin que cette page d’interface utilisateur s’actualise chaque fois que le CounterState service indique que le compteur a changé.

Service CounterState.cs

Cette classe définit un service inscrit dans App.cs. Il contient l’état, les API et les événements utilisés pour suivre et signaler l’état du compteur. Différents composants de l’interface utilisateur dans l’application utilisent ce service pour afficher leur interface utilisateur et savoir quand l’actualiser,

En savoir plus sur les services et l’DI dans la rubrique injection de dépendances.

WebUI/App.razor point d’entrée web

Ce fichier est le point d’entrée Blazor main pour le composant WebPart de l’application. Il utilise des fonctionnalités Blazor standard, telles que le routeur. Ce composant détermine la page web Blazor à afficher en fonction de l’itinéraire actuel (ou affiche une erreur si aucune erreur n’est trouvée).

WebUI/Shared/MainLayout.razor disposition web

Commun à la plupart des applications web Blazor, ce composant définit la disposition globale du composant WebPart de l’application. Ici, vous pouvez inclure des éléments courants tels que la navigation, les en-têtes et les pieds de page qui sont utilisés dans le composant WebPart de l’application.

WebUI/Pages/Index.razor page web

Contient une page navigable de contenu web. La Index page est généralement la page par défaut qui est chargée avant toute navigation

wwwroot dossier des ressources web statiques

Ce dossier contient des ressources web statiques utilisées dans le composant WebPart de l’application. Autrement dit, ces fichiers sont utilisés en l’état par le composant de navigateur web. Ils sont référencés à l’aide du modèle de chemin de fichier statique Blazor, qui est _content/<PROJECT_NAME>/path/to/the/file.css. Par exemple, dans ce projet, un fichier CSS situé dans wwwroot/css/bootstrap/bootstrap.min.css est référencé en tant que _content/FirstBlazorHybridApp/css/bootstrap/bootstrap.min.css.

Ces fichiers sont incorporés dans l’application et sont gérés automatiquement par Mobile Blazor Bindings. Les fichiers de ce dossier peuvent être lus à partir du code à l’aide du IFileProvider service et en appelant FileProvider.GetFileInfo("_content/<PROJECT_NAME>/path/to/the/file.txt"), comme indiqué dans le fichier de WebUI/Pages/FetchData.razor l’application.

Ce projet contient la bibliothèque CSS Bootstrap pour fournir des styles pour les scénarios d’interface utilisateur courants.

index.html dans les projets Android/iOS/macOS/Windows

Chaque projet spécifique à la plateforme contient un index.html fichier qui est la page conteneur de l’interface utilisateur web Blazor et inclut des références aux fichiers CSS.

L’emplacement du fichier sur chaque plateforme est le suivant :

  • Android : wwwroot/index.html
  • iOS : Resources/wwwroot/index.html
  • MacOS : Resources/wwwroot/index.html
  • Windows : wwwroot/index.html

Autres fichiers

Nous vous encourageons à explorer tous les fichiers de l’application pour découvrir leur contenu et leur interaction.