Compilación de una aplicación de .NET MAUIBlazor Hybrid con una aplicación web de Blazor
En este artículo se muestra cómo compilar una aplicación de .NET MAUIBlazor Hybrid con una aplicación web de Blazor que usa una interfaz de usuario compartida a través de una biblioteca de clases (RCL) de Razor.
Requisitos previos y pasos preliminares
Para conocer los requisitos previos y los pasos preliminares, consulte Compilación de una aplicación de .NET MAUIBlazor Hybrid. Se recomienda usar el tutorial de .NET MAUIBlazor Hybrid para configurar el sistema local para el desarrollo de .NET MAUI antes de usar las instrucciones de este artículo.
.NET MAUIBlazor Hybrid y plantilla de solución de aplicación web
El .NET MAUIBlazor Hybrid y la plantilla de solución de aplicación web configura una solución destinada a Android, iOS, Mac, Windows y Web que reutiliza la interfaz de usuario. Puede elegir un modo de representación interactivo Blazor para la aplicación web y crea los proyectos adecuados para la aplicación, incluida una aplicación web Blazor y una aplicación .NET MAUIBlazor Hybrid. Una biblioteca de clases compartida Razor (RCL) mantiene los componentes Razor de la interfaz de usuario de la aplicación. La plantilla también proporciona código de ejemplo para mostrar cómo usar la inserción de dependencias para proporcionar diferentes implementaciones de interfaz para el Blazor Hybrid y la aplicación web Blazor, que se trata en la sección Uso de interfaces para admitir diferentes implementaciones de dispositivos de este artículo.
Si aún no ha instalado la carga de trabajo .NET MAUI, instálela ahora. La carga de trabajo .NET MAUI proporciona la plantilla de proyecto:
dotnet workload install maui
Cree una solución a partir de la plantilla de proyecto con el siguiente comando de la CLI de .NET:
dotnet new maui-blazor-web -o MauiBlazorWeb -I Server
En el comando anterior:
- La opción
-o|--output
crea una nueva carpeta para la aplicación denominadaMauiBlazorWeb
. - La opción
-I|--InteractivityPlatform
establece el modo de representación de interactividad en Servidor interactivo (InteractiveServer
). Los tres modos de representación interactivos Blazor (Server
,WebAssembly
yAuto
) son compatibles con la plantilla de proyecto. Para obtener más información, consulte la sección Usar modos de representación Blazor.
La aplicación adopta automáticamente la interactividad global, lo que es importante porque las aplicaciones MAUI siempre se ejecutan de forma interactiva y arrojan errores en páginas de componentes Razor que especifican explícitamente un modo de representación. Para obtener más información, vea BlazorWebView necesita una manera de habilitar la invalidación de ResolveComponentForRenderMode (dotnet/aspnetcore
#51235).
.NET MAUIBlazor Hybrid y aplicación de ejemplo de aplicación web
Obtener la aplicación de ejemplo denominada MauiBlazorWeb
del repositorio de GitHub de ejemplos de Blazor (dotnet/blazor-samples
) (.NET 8 o posterior).
La aplicación de ejemplo es una solución de inicio que contiene una aplicación de .NET MAUIBlazor Hybrid (nativa, multiplataforma), una aplicación web de Blazor y una biblioteca de clases de Razor (RCL) que contiene la interfaz de usuario compartida (componentes Razor) usada por las aplicaciones web y nativas.
Migración de una solución de .NET MAUIBlazor Hybrid
En lugar de usar la aplicación de ejemplo, puede migrar una aplicación .NET MAUIBlazor Hybrid existente con la guía de esta sección utilizando Visual Studio.
Agregue un nuevo proyecto a la solución con la plantilla de proyecto Blazor Aplicación Web. Seleccione las opciones siguientes:
- Nombre del proyecto: use el nombre de la solución con
.Web
anexado. En los ejemplos de este artículo se supone la siguiente nomenclatura:- Solución:
MauiBlazorWeb
- Proyecto MAUI:
MauiBlazorWeb.Maui
- Aplicación web Blazor:
MauiBlazorWeb.Web
- Biblioteca de clases (RCL) Razor (agregada en un paso posterior):
MauiBlazorWeb.Shared
- Solución:
- Tipo de autenticación: Ninguno
- Configuración para https: Seleccionado (habilitado)
- Modo de representación interactiva: Servidor
- Ubicación de interactividad: Global
- Páginas de ejemplo: No seleccionado (deshabilitado)
La configuración de Ubicación de interactividad en Global es importante porque las aplicaciones MAUI siempre se ejecutan de forma interactiva y arrojan errores en páginas de componentes Razor que especifican explícitamente un modo de representación. Si no usa un modo de representación global, deberá aplicar el enfoque descrito en la sección Uso de Blazor modos de representación después de seguir las instrucciones de esta sección. Para obtener más información, vea BlazorWebView necesita una manera de habilitar la invalidación de ResolveComponentForRenderMode (dotnet/aspnetcore
#51235).
Agregue un nuevo proyecto de Razor biblioteca de clases (RCL) a la solución. En los ejemplos de este artículo se supone que el proyecto se denomina MauiBlazorWeb.Shared
. No seleccione Páginas y vistas de soporte técnico al agregar el proyecto a la solución.
Agregue referencias de proyecto al RCL desde el proyecto MAUI y el proyecto de aplicación web Blazor.
Mueva la carpeta Components
y todo su contenido desde el proyecto MAUI a la RCL. Confirme que la carpeta Components
se elimina del proyecto MAUI.
Sugerencia
Al mover una carpeta o un archivo en Visual Studio, use comandos de teclado o el menú contextual haciendo clic con el botón derecho para una operación de cortar y pegar. Arrastrar la carpeta en Visual Studio solo copia de una ubicación a otra, lo que requiere un paso adicional para eliminar el original.
Mueva la carpeta css
de la carpeta wwwroot
del proyecto MAUI a la carpeta wwwroot
de la RCL.
Elimine los siguientes archivos de la carpeta wwwroot
de la RCL:
background.png
exampleJsInterop.js
En la RCL, reemplace el archivo raíz _Imports.razor
por el del Components
de la RCL, sobrescribir el archivo existente en la RCL y eliminar el original en la carpeta Components
. Después de mover el archivo, ábralo y cambie el nombre de las dos últimas instrucciones @using
para que coincidan con el espacio de nombres del RCL. En el ejemplo siguiente, el espacio de nombres de la RCL es MauiBlazorWeb.Shared
:
@using MauiBlazorWeb.Shared
@using MauiBlazorWeb.Shared.Components
En la raíz del proyecto RCL, elimine los siguientes archivos:
Component1.razor
ExampleJsInterop.cs
En la RCL, abra el archivo Components/Routes.razor
y cambie MauiProgram
a Routes
:
- <Router AppAssembly="@typeof(MauiProgram).Assembly">
+ <Router AppAssembly="@typeof(Routes).Assembly">
Abra el archivo MainPage.xaml
en la raíz del proyecto. Agregue una referencia xmlns:shared
a la RCL en los atributos ContentPage. En el ejemplo siguiente, el espacio de nombres de la RCL es MauiBlazorWeb.Shared
. Establezca el valor correcto para el clr-namespace
y el assembly
:
xmlns:shared="clr-namespace:MauiBlazorWeb.Shared;assembly=MauiBlazorWeb.Shared"
Además, en el archivo MainPage.xaml
, actualice el componente raíz BlazorWebView ComponentType de local
a shared
:
- <RootComponent Selector="#app" ComponentType="{x:Type local:Components.Routes}" />
+ <RootComponent Selector="#app" ComponentType="{x:Type shared:Components.Routes}" />
En el proyecto MAUI, abra el archivo wwwroot/index.html
y cambie las hojas de estilos para que apunten a la ruta de acceso del recurso estático de la RCL.
Quite las siguientes líneas:
- <link rel="stylesheet" href="css/bootstrap/bootstrap.min.css" />
- <link rel="stylesheet" href="css/app.css" />
Reemplace las líneas anteriores por el marcado siguiente. En el ejemplo siguiente, la ruta de acceso del recurso estático de la RCL es _content/MauiBlazorWeb.Shared/
:
<link rel="stylesheet" href="_content/MauiBlazorWeb.Shared/css/bootstrap/bootstrap.min.css" />
<link rel="stylesheet" href="_content/MauiBlazorWeb.Shared/css/app.css" />
En la Aplicación web Blazor, abra el archivo _Imports.razor
y añada las dos sentencias @using
siguientes para la RCL. En el ejemplo siguiente, el espacio de nombres de la RCL es MauiBlazorWeb.Shared
:
@using MauiBlazorWeb.Shared
@using MauiBlazorWeb.Shared.Components
En el proyecto Blazor de la Aplicación web, abra el componente App
(Components/App.razor
). Quite la hoja de estilos app.css
:
- <link rel="stylesheet" href="app.css" />
Reemplace la línea anterior por las referencias de hoja de estilos de recursos estáticos de RCL. En el ejemplo siguiente, la ruta de acceso del recurso estático de la RCL es _content/MauiBlazorWeb.Shared/
:
<link rel="stylesheet" href="_content/MauiBlazorWeb.Shared/css/bootstrap/bootstrap.min.css" />
<link rel="stylesheet" href="_content/MauiBlazorWeb.Shared/css/app.css" />
En el proyecto Blazor de la Aplicación web, elimine la carpeta y los archivos siguientes:
Components/Layout
Components/Routes.razor
Components/Pages/Home.razor
wwwroot/app.css
Abra el archivo Program.cs
de la Aplicación web Blazor y agregue un ensamblado adicional para la RCL a la aplicación. En el ejemplo siguiente, el espacio de nombres de la RCL es MauiBlazorWeb.Shared
:
app.MapRazorComponents<App>()
.AddInteractiveServerRenderMode()
.AddAdditionalAssemblies(typeof(MauiBlazorWeb.Shared._Imports).Assembly);
Ejecute el proyecto MAUI seleccionando el proyecto en Explorador de soluciones y mediante el botón inicio de Visual Studio.
Ejecute el proyecto Blazor de la Aplicación web seleccionando el proyecto de aplicación web de Blazor en explorador de soluciones y usando el botón inicio de Visual Studio con la configuración de compilación de https
.
Si recibe un error de compilación que el ensamblado de la RCL no se puede resolver, compile primero el proyecto RCL. Si se producen errores de recursos del proyecto MAUI en la compilación, recompile el proyecto MAUI para borrar los errores.
Uso de los modos de representación de Blazor
Use las instrucciones de una de las siguientes subsecciones que coincidan con las especificaciones de la aplicación para aplicar Blazormodos de representación en la aplicación web Blazor, pero omita las asignaciones de modo de representación en el proyecto MAUI.
Subsecciones de especificación del modo de representación:
Use las instrucciones de una de las siguientes subsecciones que coincidan con las especificaciones de la aplicación para aplicar Blazormodos de representación para una ubicación de interactividad determinada en la aplicación web Blazor, pero omita las asignaciones de modo de representación en el proyecto MAUI.
Subsecciones del modo de representación e interactividad:
Interactividad del servidor global
- Modo de representación interactiva: Servidor
- Ubicación de interactividad: Global
- Proyectos de solución
- MAUI (
MauiBlazorWeb
) - Aplicación web Blazor (
MauiBlazorWeb.Web
) - RCL (
MauiBlazorWeb.Shared
): contiene los componentes de Razor compartidos sin establecer los modos de representación en cada componente.
- MAUI (
Referencias de proyecto: MauiBlazorWeb
y MauiBlazorWeb.Web
tienen una referencia de proyecto a MauiBlazorWeb.Shared
.
- Modo de representación interactiva: Servidor
- Ubicación de interactividad: Global
- Proyectos de solución
- MAUI (
MauiBlazorWeb.Maui
) - Aplicación web Blazor (
MauiBlazorWeb.Web
) - RCL (
MauiBlazorWeb.Shared
): contiene los componentes de Razor compartidos sin establecer los modos de representación en cada componente.
- MAUI (
Referencias de proyecto: MauiBlazorWeb.Maui
y MauiBlazorWeb.Web
tienen una referencia de proyecto a MauiBlazorWeb.Shared
.
Interactividad global o WebAssembly
- Modo de representación interactiva: auto o WebAssembly
- Ubicación de interactividad: Global
- Proyectos de solución
- MAUI (
MauiBlazorWeb
) - Blazor Aplicación web
- Proyecto de servidor:
MauiBlazorWeb.Web
- Proyecto de cliente:
MauiBlazorWeb.Web.Client
- Proyecto de servidor:
- RCL (
MauiBlazorWeb.Shared
): contiene los componentes de Razor compartidos sin establecer los modos de representación en cada componente.
- MAUI (
Referencias de proyecto:
- Los proyectos
MauiBlazorWeb
,MauiBlazorWeb.Web
yMauiBlazorWeb.Web.Client
tienen una referencia de proyecto aMauiBlazorWeb.Shared
. MauiBlazorWeb.Web
tiene una referencia de proyecto aMauiBlazorWeb.Web.Client
.
- Modo de representación interactiva: auto o WebAssembly
- Ubicación de interactividad: Global
- Proyectos de solución
- MAUI (
MauiBlazorWeb.Maui
) - Blazor Aplicación web
- Proyecto de servidor:
MauiBlazorWeb.Web
- Proyecto de cliente:
MauiBlazorWeb.Web.Client
- Proyecto de servidor:
- RCL (
MauiBlazorWeb.Shared
): contiene los componentes de Razor compartidos sin establecer los modos de representación en cada componente.
- MAUI (
Referencias de proyecto:
- Los proyectos
MauiBlazorWeb.Maui
,MauiBlazorWeb.Web
yMauiBlazorWeb.Web.Client
tienen una referencia de proyecto aMauiBlazorWeb.Shared
. MauiBlazorWeb.Web
tiene una referencia de proyecto aMauiBlazorWeb.Web.Client
.
Interactividad del servidor por página o componente
- Modo de representación interactiva: Servidor
- Ubicación de la interactividad: Por página o componente
- Proyectos de solución
- MAUI (
MauiBlazorWeb.Maui
): llama aInteractiveRenderSettings.ConfigureBlazorHybridRenderModes
enMauiProgram.cs
. - Aplicación web Blazor (
MauiBlazorWeb.Web
): no establece un atributo de directiva@rendermode
en los componentesHeadOutlet
yRoutes
del componenteApp
(Components/App.razor
). - RCL (
MauiBlazorWeb.Shared
): contiene los componentes de Razor compartidos que establecen el modo de representaciónInteractiveServer
en cada componente.
- MAUI (
MauiBlazorWeb.Maui
y MauiBlazorWeb.Web
tienen una referencia de proyecto a MauiBlazorWeb.Shared
.
Agregue la siguiente clase InteractiveRenderSettings
a la RCL. Las propiedades de clase se usan para establecer los modos de representación de componentes.
El proyecto MAUI es interactivo de forma predeterminada, por lo que no se realiza ninguna acción en el nivel de proyecto del proyecto MAUI que no sea llamar a InteractiveRenderSettings.ConfigureBlazorHybridRenderModes
.
Para la aplicación web Blazor en el cliente web, los valores de propiedad se asignan desde RenderMode. Cuando los componentes se cargan en un BlazorWebView para el cliente nativo del proyecto MAUI, los modos de representación no se asignan (null
) porque el proyecto MAUI establece explícitamente las propiedades del modo de representación en null
cuando se llama a ConfigureBlazorHybridRenderModes
.
InteractiveRenderSettings.cs
:
using Microsoft.AspNetCore.Components;
using Microsoft.AspNetCore.Components.Web;
namespace MauiBlazorWeb.Shared;
public static class InteractiveRenderSettings
{
public static IComponentRenderMode? InteractiveServer { get; set; } =
RenderMode.InteractiveServer;
public static IComponentRenderMode? InteractiveAuto { get; set; } =
RenderMode.InteractiveAuto;
public static IComponentRenderMode? InteractiveWebAssembly { get; set; } =
RenderMode.InteractiveWebAssembly;
public static void ConfigureBlazorHybridRenderModes()
{
InteractiveServer = null;
InteractiveAuto = null;
InteractiveWebAssembly = null;
}
}
En MauiProgram.CreateMauiApp
de MauiProgram.cs
, llame a ConfigureBlazorHybridRenderModes
:
InteractiveRenderSettings.ConfigureBlazorHybridRenderModes();
En el archivo _Imports.razor
de la RCL, agregue la siguiente directiva estática global @using
para que las propiedades de la clase estén disponibles para los componentes:
@using static InteractiveRenderSettings
Nota:
La asignación de modos de representación a través de las propiedades de clase InteractiveRenderSettings
RCL difiere de una aplicación web Blazor independiente típica. En una aplicación web Blazor, los modos de representación normalmente se proporcionan mediante RenderMode a través de la instrucción @using static Microsoft.AspNetCore.Components.Web.RenderMode
del archivo _Import
de la Aplicación web Blazor.
Interactividad automática por página o componente
- Modo de representación interactiva: auto
- Ubicación de la interactividad: Por página o componente
- Proyectos de solución
- MAUI (
MauiBlazorWeb.Maui
): llama aInteractiveRenderSettings.ConfigureBlazorHybridRenderModes
enMauiProgram.cs
. - Blazor Aplicación web
- Proyecto de servidor:
MauiBlazorWeb.Web
: no establece un atributo de directiva@rendermode
en los componentesHeadOutlet
yRoutes
del componente deApp
(Components/App.razor
). - Proyecto de cliente:
MauiBlazorWeb.Web.Client
- Proyecto de servidor:
- RCL (
MauiBlazorWeb.Shared
): contiene los componentes de Razor compartidos que establecen el modo de representaciónInteractiveAuto
en cada componente.
- MAUI (
Referencias de proyecto:
MauiBlazorWeb.Maui
,MauiBlazorWeb.Web
yMauiBlazorWeb.Web.Client
tienen una referencia de proyecto aMauiBlazorWeb.Shared
.MauiBlazorWeb.Web
tiene una referencia de proyecto aMauiBlazorWeb.Web.Client
.
Agregue la siguiente clase InteractiveRenderSettings
se agrega a la RCL. Las propiedades de clase se usan para establecer los modos de representación de componentes.
El proyecto MAUI es interactivo de forma predeterminada, por lo que no se realiza ninguna acción en el nivel de proyecto del proyecto MAUI que no sea llamar a InteractiveRenderSettings.ConfigureBlazorHybridRenderModes
.
Para la aplicación web Blazor en el cliente web, los valores de propiedad se asignan desde RenderMode. Cuando los componentes se cargan en un BlazorWebView para el cliente nativo del proyecto MAUI, los modos de representación no se asignan (null
) porque el proyecto MAUI establece explícitamente las propiedades del modo de representación en null
cuando se llama a ConfigureBlazorHybridRenderModes
.
InteractiveRenderSettings.cs
:
using Microsoft.AspNetCore.Components;
using Microsoft.AspNetCore.Components.Web;
namespace MauiBlazorWeb.Shared;
public static class InteractiveRenderSettings
{
public static IComponentRenderMode? InteractiveServer { get; set; } =
RenderMode.InteractiveServer;
public static IComponentRenderMode? InteractiveAuto { get; set; } =
RenderMode.InteractiveAuto;
public static IComponentRenderMode? InteractiveWebAssembly { get; set; } =
RenderMode.InteractiveWebAssembly;
public static void ConfigureBlazorHybridRenderModes()
{
InteractiveServer = null;
InteractiveAuto = null;
InteractiveWebAssembly = null;
}
}
En MauiProgram.CreateMauiApp
de MauiProgram.cs
, llame a ConfigureBlazorHybridRenderModes
:
InteractiveRenderSettings.ConfigureBlazorHybridRenderModes();
En el archivo _Imports.razor
de la RCL, agregue la siguiente directiva estática global @using
para que las propiedades de la clase estén disponibles para los componentes:
@using static InteractiveRenderSettings
Nota:
La asignación de modos de representación a través de las propiedades de clase InteractiveRenderSettings
RCL difiere de una aplicación web Blazor independiente típica. En una aplicación web Blazor, los modos de representación normalmente se proporcionan mediante RenderMode a través de la instrucción @using static Microsoft.AspNetCore.Components.Web.RenderMode
del archivo _Import
de la Aplicación web Blazor.
Interactividad por página o componente de WebAssembly
- Modo de representación interactiva: WebAssembly
- Ubicación de la interactividad: Por página o componente
- Proyectos de solución
- MAUI (
MauiBlazorWeb.Maui
) - Blazor Aplicación web
- Proyecto de servidor:
MauiBlazorWeb.Web
: no establece un atributo de directiva@rendermode
en los componentesHeadOutlet
yRoutes
del componente deApp
(Components/App.razor
). - Proyecto de cliente:
MauiBlazorWeb.Web.Client
- Proyecto de servidor:
- RCL
MauiBlazorWeb.Shared
MauiBlazorWeb.Shared.Client
: contiene los componentes de Razor compartidos que establecen el modo de representaciónInteractiveWebAssembly
en cada componente. El RCL.Shared.Client
se mantiene por separado de la RCL.Shared
porque la aplicación debe mantener los componentes necesarios para ejecutarse en WebAssembly por separado de los componentes que se ejecutan en el servidor y que permanecen en el servidor.
- MAUI (
Referencias de proyecto:
MauiBlazorWeb.Maui
yMauiBlazorWeb.Web
tienen referencias de proyecto aMauiBlazorWeb.Shared
.MauiBlazorWeb.Web
tiene una referencia de proyecto aMauiBlazorWeb.Web.Client
.MauiBlazorWeb.Web.Client
yMauiBlazorWeb.Shared
tienen una referencia de proyecto aMauiBlazorWeb.Shared.Client
.
Agregue el siguiente parámetro AdditionalAssemblies a la instancia del componente Router
para el ensamblado del proyecto de MauiBlazorWeb.Shared.Client
(a través de su archivo _Imports
) en el archivo Routes.razor
del proyecto de MauiBlazorWeb.Shared
:
<Router AppAssembly="@typeof(Routes).Assembly"
AdditionalAssemblies="new [] { typeof(MauiBlazorWeb.Shared.Client._Imports).Assembly }">
<Found Context="routeData">
<RouteView RouteData="@routeData" DefaultLayout="@typeof(Components.Layout.MainLayout)" />
<FocusOnNavigate RouteData="@routeData" Selector="h1" />
</Found>
</Router>
Agregue el ensamblado del proyecto de MauiBlazorWeb.Shared.Client
(a través de su archivo _Imports
) con la siguiente llamada AddAdditionalAssemblies en el archivo Program.cs
del proyecto MauiBlazorWeb.Web
:
app.MapRazorComponents<App>()
.AddInteractiveWebAssemblyRenderMode()
.AddAdditionalAssemblies(typeof(MauiBlazorWeb.Shared._Imports).Assembly)
.AddAdditionalAssemblies(typeof(MauiBlazorWeb.Shared.Client._Imports).Assembly);
Agregue la siguiente clase InteractiveRenderSettings
se agrega a la RCL .Shared.Client
. Las propiedades de clase se usan para establecer los modos de representación de componentes para los componentes basados en servidor.
El proyecto MAUI es interactivo de forma predeterminada, por lo que no se realiza ninguna acción en el nivel de proyecto del proyecto MAUI que no sea llamar a InteractiveRenderSettings.ConfigureBlazorHybridRenderModes
.
Para la aplicación web Blazor en el cliente web, los valores de propiedad se asignan desde RenderMode. Cuando los componentes se cargan en un BlazorWebView para el cliente nativo del proyecto MAUI, los modos de representación no se asignan (null
) porque el proyecto MAUI establece explícitamente las propiedades del modo de representación en null
cuando se llama a ConfigureBlazorHybridRenderModes
.
InteractiveRenderSettings.cs
(RCL .Shared.Client
):
using Microsoft.AspNetCore.Components;
using Microsoft.AspNetCore.Components.Web;
namespace MauiBlazorWeb.Shared;
public static class InteractiveRenderSettings
{
public static IComponentRenderMode? InteractiveServer { get; set; } =
RenderMode.InteractiveServer;
public static IComponentRenderMode? InteractiveAuto { get; set; } =
RenderMode.InteractiveAuto;
public static IComponentRenderMode? InteractiveWebAssembly { get; set; } =
RenderMode.InteractiveWebAssembly;
public static void ConfigureBlazorHybridRenderModes()
{
InteractiveServer = null;
InteractiveAuto = null;
InteractiveWebAssembly = null;
}
}
Se agrega una versión ligeramente diferente de la clase InteractiveRenderSettings
a la RCL .Shared
. En la clase agregada a la RCL .Shared
, se llama a InteractiveRenderSettings.ConfigureBlazorHybridRenderModes
de la RCL .Shared.Client
. Esto garantiza que el modo de representación de los componentes de WebAssembly representados en el cliente MAUI no estén asignados (null
) porque son interactivos de forma predeterminada en el cliente nativo.
InteractiveRenderSettings.cs
(RCL .Shared
):
using Microsoft.AspNetCore.Components;
using Microsoft.AspNetCore.Components.Web;
namespace MauiBlazorWeb.Shared
{
public static class InteractiveRenderSettings
{
public static IComponentRenderMode? InteractiveServer { get; set; } =
RenderMode.InteractiveServer;
public static IComponentRenderMode? InteractiveAuto { get; set; } =
RenderMode.InteractiveAuto;
public static IComponentRenderMode? InteractiveWebAssembly { get; set; } =
RenderMode.InteractiveWebAssembly;
public static void ConfigureBlazorHybridRenderModes()
{
InteractiveServer = null;
InteractiveAuto = null;
InteractiveWebAssembly = null;
MauiBlazorWeb.Shared.Client.InteractiveRenderSettings
.ConfigureBlazorHybridRenderModes();
}
}
}
En MauiProgram.CreateMauiApp
de MauiProgram.cs
, llame a ConfigureBlazorHybridRenderModes
:
InteractiveRenderSettings.ConfigureBlazorHybridRenderModes();
En el archivo _Imports.razor
de la RCL .Shared.Client
, agregue @using static InteractiveRenderSettings
para que las propiedades de la clase InteractiveRenderSettings
estén disponibles para los componentes:
@using static InteractiveRenderSettings
Nota:
La asignación de modos de representación a través de las propiedades de clase InteractiveRenderSettings
RCL difiere de una aplicación web Blazor independiente típica. En una aplicación web Blazor, los modos de representación normalmente se proporcionan mediante RenderMode a través de la instrucción @using static Microsoft.AspNetCore.Components.Web.RenderMode
del archivo _Import
de la Aplicación web Blazor.
Uso de interfaces para admitir diferentes implementaciones de dispositivos
En el ejemplo siguiente se muestra cómo usar una interfaz para llamar a diferentes implementaciones en toda la aplicación web y la aplicación nativa (MAUI). En el ejemplo siguiente se crea un componente que muestra el factor de forma del dispositivo. Use la capa de abstracción MAUI para las aplicaciones nativas y proporcione una implementación para la aplicación web.
En la biblioteca de clases (RCL) Razor, una carpeta Interfaces
contiene una interfaz IFormFactor
.
Interfaces/IFormFactor.cs
:
namespace MauiBlazorWeb.Shared.Interfaces;
public interface IFormFactor
{
public string GetFormFactor();
public string GetPlatform();
}
El componente Home
(Components/Pages/Home.razor
) de la RCL muestra el factor de forma y la plataforma.
Components/Pages/Home.razor
:
@page "/"
@using MyApp.Shared.Services
@inject IFormFactor FormFactor
<PageTitle>Home</PageTitle>
<h1>Hello, world!</h1>
Welcome to your new app running on <em>@factor</em> using <em>@platform</em>.
@code {
private string factor => FormFactor.GetFormFactor();
private string platform => FormFactor.GetPlatform();
}
El siguiente componente DeviceFormFactor
está presente en la carpeta Components
de la RCL.
Components/Pages/DeviceFormFactor.razor
:
@page "/device-form-factor"
@using MauiBlazorWeb.Shared.Interfaces
@inject IFormFactor FormFactor
<PageTitle>Form Factor</PageTitle>
<h1>Device Form Factor</h1>
<p>You are running on:</p>
<ul>
<li>Form Factor: @factor</li>
<li>Platform: @platform</li>
</ul>
<p>
<em>This component is defined in the MauiBlazorWeb.Shared library.</em>
</p>
@code {
private string factor => FormFactor.GetFormFactor();
private string platform => FormFactor.GetPlatform();
}
En la RCL, una entrada para el componente DeviceFormFactor
forma parte del menú de navegación del componente NavMenu
.
En Components/Layout/NavMenu.razor
:
<div class="nav-item px-3">
<NavLink class="nav-link" href="device-form-factor">
<span class="bi bi-list-nested-nav-menu" aria-hidden="true"></span> Form Factor
</NavLink>
</div>
Las aplicaciones web y nativas contienen las implementaciones de IFormFactor
.
En la aplicación web Blazor, una carpeta denominada Services
contiene el siguiente archivo FormFactor.cs
con la implementación FormFactor
para el uso de la aplicación web.
Services/FormFactor.cs
( proyecto Blazor de la Aplicación web):
using MauiBlazorWeb.Shared.Interfaces;
namespace MauiBlazorWeb.Web.Services;
public class FormFactor : IFormFactor
{
public string GetFormFactor()
{
return "Web";
}
public string GetPlatform()
{
return Environment.OSVersion.ToString();
}
}
En el proyecto MAUI, una carpeta denominada Services
contiene el siguiente archivo FormFactor.cs
con la implementación FormFactor
para uso nativo. La capa de abstracciones MAUI se usa para escribir código que funciona en todas las plataformas de dispositivos nativas.
Services/FormFactor.cs
(proyecto MAUI):
using MauiBlazorWeb.Shared.Interfaces;
namespace MauiBlazorWeb.Services;
public class FormFactor : IFormFactor
{
public string GetFormFactor()
{
return DeviceInfo.Idiom.ToString();
}
public string GetPlatform()
{
return DeviceInfo.Platform.ToString() + " - " + DeviceInfo.VersionString;
}
}
using MauiBlazorWeb.Shared.Interfaces;
namespace MauiBlazorWeb.Maui.Services;
public class FormFactor : IFormFactor
{
public string GetFormFactor()
{
return DeviceInfo.Idiom.ToString();
}
public string GetPlatform()
{
return DeviceInfo.Platform.ToString() + " - " + DeviceInfo.VersionString;
}
}
La inserción de dependencias se usa para obtener las implementaciones de estos servicios.
En el proyecto MAUI, el archivo MauiProgram.cs
tiene las siguientes instrucciones using
en la parte superior del archivo:
using MauiBlazorWeb.Services;
using MauiBlazorWeb.Shared.Interfaces;
using MauiBlazorWeb.Maui.Services;
using MauiBlazorWeb.Shared.Interfaces;
Inmediatamente antes de la llamada a builder.Build()
, FormFactor
se registra para agregar servicios específicos del dispositivo utilizados por la RCL:
builder.Services.AddSingleton<IFormFactor, FormFactor>();
En la aplicación web Blazor, el archivo Program
tiene las siguientes instrucciones using
en la parte superior del archivo:
using MauiBlazorWeb.Shared.Interfaces;
using MauiBlazorWeb.Web.Services;
Inmediatamente antes de la llamada a builder.Build()
, FormFactor
se registra para agregar servicios específicos del dispositivo utilizados por la aplicación web Blazor:
builder.Services.AddScoped<IFormFactor, FormFactor>();
Si la solución también tiene como destino WebAssembly a través de un proyecto .Web.Client
, también se requiere una implementación de la API anterior en el proyecto .Web.Client
.
También puede usar directivas de preprocesador del compilador en la RCL para implementar una interfaz de usuario diferente en función del dispositivo en el que se ejecuta la aplicación. En este escenario, la aplicación debe tener como destino múltiple la RCL igual que la aplicación MAUI. Para obtener un ejemplo, consulte el repositorio de GitHub BethMassi/BethTimeUntil
.