Hola mundo híbrido: ¿cómo funciona?

Importante

Este proyecto es una versión experimental. Esperamos que pruebes enlaces blazor móviles experimentales y proporciones comentarios en https://github.com/xamarin/MobileBlazorBindings.

Nota

Esta página es una continuación del tutorial Compilación de la primera aplicación híbrida . Se recomienda completar ese tutorial antes de continuar.

Sugerencia

Para obtener un ejemplo más sencillo, comience con el tutorial Compilación de la primera aplicación y el tutorial de Hola mundo posterior que muestra algunas características más básicas de Blazor.

Echemos un vistazo al proyecto inicial que se creó en el tutorial anterior para obtener más información sobre cómo usar enlaces blazor móviles experimentales para aplicaciones híbridas.

El proyecto principal que se va a examinar es el proyecto compartido que contiene los .razor archivos. Los proyectos específicos de la plataforma solo contienen código mínimo específico de enlaces blazor móviles experimentales.

Estos son los archivos y carpetas importantes del proyecto compartido:

Carpeta raíz

• _Imports.razor : contiene directivas comunes que se aplican a todos los demás .razor archivos de esta carpeta y sus subcarpetas. Las subcarpetas pueden tener sus propios _Imports.razor archivos con directivas adicionales. El tipo de directiva más común en este archivo es la @using directiva , que se usa para importar un espacio de nombres en .razor archivos, exactamente igual que una instrucción de C# using .
• App.cs : contiene el punto de entrada principal de la interfaz de usuario de la aplicación, representado por una clase que deriva de la Xamarin.Forms.Application clase base. El constructor de esta clase crea una instancia de un host, agrega servicios al host y, a continuación, usa el host para agregar un componente blazor denominado Main a la página de la aplicación principal.
• CounterState.cs : contiene un servicio que realiza un seguimiento de un valor de contador y ofrece API relacionadas. Este servicio se usa en las partes nativas y HTML de la aplicación.
• Main.razor : contiene el componente principal de la interfaz de usuario de Blazor de la aplicación. Contiene una interfaz de usuario nativa y también un BlazorWebView componente que hospeda la parte HTML de la aplicación.

Carpetas WebUI y wwwroot

Estas carpetas contienen el elemento web de la aplicación, que es lo que hace que esta sea una aplicación híbrida. Los archivos y carpetas aquí coinciden estrechamente con lo que se encuentra una aplicación web blazor.

• WebUI/_Imports.razor : contiene directivas comunes para el elemento web de la aplicación.
• WebUI/App.razor : contiene el punto de entrada principal del elemento web de la aplicación.
• WebUI/Pages folder: contiene páginas navegables creadas mediante la sintaxis web de Blazor. Los .razor archivos aquí representan HTML y comparten el estado de la aplicación con el resto de la aplicación.
• WebUI/Shared carpeta: contiene componentes de interfaz de usuario reutilizables compartidos creados mediante la sintaxis web de Blazor. Los .razor archivos aquí representan HTML y se usan en otras páginas de la aplicación. Esta carpeta también contiene el MainLayout componente que define la forma general del elemento web de la aplicación.
• wwwroot folder: contiene recursos web estáticos usados en el elemento web de la aplicación. Normalmente, se trata de archivos e imágenes CSS.

Vamos a profundizar en los archivos interesantes.

App.cs punto de entrada

El punto de entrada de la interfaz de usuario de la aplicación se encuentra en esta página. Configura los servicios de la aplicación y, a continuación, inicializa la interfaz de usuario mediante la asociación de un componente Mobile Blazor Bindings al MainPage elemento .

Se registran dos conjuntos de servicios:

1. services.AddBlazorHybrid() agrega los servicios requeridos por Mobile Blazor Bindings para hospedar componentes web de Blazor en la interfaz de usuario nativa.
2. services.AddSingleton<CounterState>() agrega un servicio específico de la aplicación que se puede consumir desde cualquier lugar de la aplicación, incluidos archivos de código, componentes de Blazor y otros servicios. Se trata de un servicio singleton, lo que significa que, como máximo, se creará una instancia de , lo que permite compartir el estado.

Obtenga más información sobre los servicios y la inserción de dependencias en el tema de inserción de dependencias.

Main.razor página nativa de la interfaz de usuario

Esta es la página principal de la interfaz de usuario nativa de la aplicación. Contiene varios componentes nativos de la interfaz de usuario, como <Label> y <Button>. También contiene un <BlazorWebView> componente que hospeda el contenido web de Blazor:

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

Algunas otras cosas interesantes:

• La <FirstBlazorHybridApp.WebUI.App /> etiqueta es cómo la parte nativa de la aplicación hace referencia al elemento web de la aplicación.
• La @inject directiva se usa para hacer referencia al CounterState servicio.
• Los OnInitialized métodos y Dispose se implementan para adjuntar o desasociar un StateChanged controlador de eventos para que esta página de interfaz de usuario se actualice cada vez que el CounterState servicio indique que el contador ha cambiado.

Servicio CounterState.cs

Esta clase define un servicio registrado en App.cs. Contiene el estado, las API y los eventos usados para realizar un seguimiento y notificar el estado del contador. Varios componentes de interfaz de usuario de la aplicación usan este servicio para mostrar su interfaz de usuario y saber cuándo actualizarla,

Obtenga más información sobre los servicios y la inserción de dependencias en el tema de inserción de dependencias.

WebUI/App.razor punto de entrada web

Este archivo es el punto de entrada principal de Blazor para el elemento web de la aplicación. Usa características estándar de Blazor, como el enrutador. Este componente determina la página web de Blazor que se va a mostrar en función de la ruta actual (o muestra un error si no se encuentra ninguna).

WebUI/Shared/MainLayout.razor diseño web

Común a la mayoría de las aplicaciones web blazor, este componente define el diseño general del elemento web de la aplicación. Aquí puede incluir elementos comunes, como navegación, encabezados y pies de página que se usan en el elemento web de la aplicación.

WebUI/Pages/Index.razor página web

Contiene una página navegable de contenido web. La Index página suele ser la página predeterminada que se carga antes de cualquier navegación.

wwwroot carpeta de recursos web estáticos

Esta carpeta contiene recursos web estáticos usados en el elemento web de la aplicación. Es decir, el componente del explorador web sirve tal cual estos archivos. Se hace referencia a ellos mediante el patrón de ruta de acceso de archivo estático blazor, que es _content/<PROJECT_NAME>/path/to/the/file.css. Por ejemplo, en este proyecto se hace referencia a un archivo CSS ubicado en wwwroot/css/bootstrap/bootstrap.min.css como _content/FirstBlazorHybridApp/css/bootstrap/bootstrap.min.css.

Estos archivos se insertan en la aplicación y los enlaces blazor móviles se controlan automáticamente. Los archivos de esta carpeta se pueden leer desde el código mediante el IFileProvider servicio y la llamada a FileProvider.GetFileInfo("_content/<PROJECT_NAME>/path/to/the/file.txt"), como se muestra en el archivo de WebUI/Pages/FetchData.razor la aplicación.

Este proyecto contiene la biblioteca CSS de Bootstrap para proporcionar estilos para escenarios comunes de la interfaz de usuario.

index.html archivo en los proyectos de Android/iOS/macOS/Windows

Cada proyecto específico de la plataforma contiene un index.html archivo que es la página contenedora de la interfaz de usuario web de Blazor e incluye referencias a los archivos CSS.

La ubicación del archivo en cada plataforma es la siguiente:

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

Otros archivos

Le recomendamos que explore todos los archivos de la aplicación para aprender su contenido y cómo interactúan.