.NET MAUI Blazor Hybrid app con MudBlazor
Este artículo te muestra cómo crear y ejecutar una aplicación .NET MAUI Blazor Hybrid con MudBlazor.
Qué es MudBlazor?
MudBlazor es una biblioteca de componentes de interfaz de usuario de código abierto para aplicaciones Blazor. Proporciona un conjunto de componentes reutilizables y personalizables que los desarrolladores pueden utilizar para crear interfaces de usuario modernas y receptivas en sus proyectos Blazor. Estos componentes incluyen botones, formularios, cuadros de diálogo, cuadrículas de datos y más. MudBlazor tiene como objetivo simplificar el proceso de desarrollo ofreciendo una amplia gama de componentes prediseñados con estilo y funcionalidad integrados, lo que facilita a los desarrolladores la creación de aplicaciones consistentes y visualmente atractivas.
Qué es .NET MAUI Blazor Hybrid?
.NET MAUI es un framework para crear aplicaciones multiplataforma y Blazor es un marco web para crear aplicaciones web interactivas utilizando C# y .NET. Una aplicación .NET MAUI Blazor Hybrid combina el poder de ambas tecnologías, lo que permite a los desarrolladores crear aplicaciones que pueden ejecutarse en múltiples plataformas, incluidas Windows, macOS, iOS y Android.
Primeros pasos
Instalación
1. Crea un proyecto de aplicación .NET MAUI Blazor Hybrid en Visual Studio, llámalo MauiAppWithMudBlazor
2. Comenzando con MudBlazor, instala el paquete para agregar MudBlazor al proyecto
Install-package MudBlazor3. Después de agregar el paquete, debes agregar lo siguiente en tu _Imports.razor
@using MudBlazor4. Agrega referencias de fuentes y estilos a su sección de encabezado HTML en index.html
<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap" rel="stylesheet" />
<link href="_content/MudBlazor/MudBlazor.min.css" rel="stylesheet" />5. En el mismo archivo, agrega la referencia del script
<script src="_content/MudBlazor/MudBlazor.min.js"></script>6. Bootstrap no es necesario, elimine las referencias de Bootstrap en index.html
<link rel="stylesheet" href="css/bootstrap/bootstrap.min.css" />7. También elimina la carpeta Bootstrap de tu proyecto.
8. Registrar servicios, agrega lo siguiente en MauiProgram.cs
using MudBlazor.Services;
builder.Services.AddMudServices();Añadir el primer componente MudBlazor
1. Agrega un diseño básico a tu MainLayout.razor, el componente ThemeProvider es esencial para MudBlazor
@inherits LayoutComponentBase
<MudThemeProvider />
<MudDialogProvider />
<MudSnackbarProvider />
<MudLayout>
<MudAppBar Elevation="0">
<MudIconButton Icon="@Icons.Material.Filled.Menu" Color="Color.Inherit" Edge="Edge.Start" OnClick="@((e) => DrawerToggle())" />
<MudSpacer />
<MudIconButton Icon="@Icons.Custom.Brands.MudBlazor" Color="Color.Inherit" Link="https://mudblazor.com/" Target="_blank" />
<MudIconButton Icon="@Icons.Custom.Brands.GitHub" Color="Color.Inherit" Link="https://github.com/arbems/.NET-MAUI-Blazor-Hybrid-app-with-MudBlazor" Target="_blank" />
</MudAppBar>
<MudDrawer @bind-Open="_drawerOpen" Elevation="1">
<MudDrawerHeader>
<MudText Typo="Typo.h6">MyApplication</MudText>
</MudDrawerHeader>
<NavMenu />
</MudDrawer>
<MudMainContent>
<MudContainer MaxWidth="MaxWidth.Large" Class="my-5 pt-5">
@Body
</MudContainer>
</MudMainContent>
</MudLayout>
@code {
bool _drawerOpen = true;
void DrawerToggle()
{
_drawerOpen = !_drawerOpen;
}
}2. Actualiza NavMenu.razor en el menú de navegación
<MudNavMenu>
<MudNavLink Href="" Match="NavLinkMatch.All" Icon="@Icons.Material.Filled.Home">Home</MudNavLink>
<MudNavLink Href="counter" Match="NavLinkMatch.Prefix" Icon="@Icons.Material.Filled.Add">Counter</MudNavLink>
<MudNavLink Href="weather" Match="NavLinkMatch.Prefix" Icon="@Icons.Material.Filled.List">Fetch data</MudNavLink>
</MudNavMenu>3. Actualiza Home.razor
@page "/"
<PageTitle>Index</PageTitle>
<MudText Typo="Typo.h3" GutterBottom="true">Hello, world!</MudText>
<MudText Class="mb-8">Welcome to your new app, powered by MudBlazor!</MudText>
<MudAlert Severity="Severity.Normal">You can find documentation and examples on our website here: <MudLink Href="https://mudblazor.com" Typo="Typo.body2" Color="Color.Inherit"><b>www.mudblazor.com</b></MudLink></MudAlert>
4. Actualiza Counter.razor
@page "/counter"
<PageTitle>Counter</PageTitle>
<MudText Typo="Typo.h3" GutterBottom="true">Counter</MudText>
<MudText Class="mb-4">Current count: @currentCount</MudText>
<MudButton Color="Color.Primary" Variant="Variant.Filled" @onclick="IncrementCount">Click me</MudButton>
@code {
private int currentCount = 0;
private void IncrementCount()
{
currentCount++;
}
}
5. Actualiza Weather.razor
@page "/weather"
<PageTitle>Weather forecast</PageTitle>
<MudText Typo="Typo.h3" GutterBottom="true">Weather forecast</MudText>
<MudText Class="mb-8">This component demonstrates fetching data from the server.</MudText>
@if (forecasts == null)
{
<MudProgressCircular Color="Color.Default" Indeterminate="true" />
}
else
{
<MudTable Items="forecasts" Hover="true" SortLabel="Sort By" Elevation="0">
<HeaderContent>
<MudTh><MudTableSortLabel InitialDirection="SortDirection.Ascending" SortBy="new Func<WeatherForecast, object>(x=>x.Date)">Date</MudTableSortLabel></MudTh>
<MudTh><MudTableSortLabel SortBy="new Func<WeatherForecast, object>(x=>x.TemperatureC)">Temp. (C)</MudTableSortLabel></MudTh>
<MudTh><MudTableSortLabel SortBy="new Func<WeatherForecast, object>(x=>x.TemperatureF)">Temp. (F)</MudTableSortLabel></MudTh>
<MudTh><MudTableSortLabel SortBy="new Func<WeatherForecast, object>(x=>x.Summary!)">Summary</MudTableSortLabel></MudTh>
</HeaderContent>
<RowTemplate>
<MudTd DataLabel="Date">@context.Date</MudTd>
<MudTd DataLabel="Temp. (C)">@context.TemperatureC</MudTd>
<MudTd DataLabel="Temp. (F)">@context.TemperatureF</MudTd>
<MudTd DataLabel="Summary">@context.Summary</MudTd>
</RowTemplate>
<PagerContent>
<MudTablePager PageSizeOptions="new int[]{50, 100}" />
</PagerContent>
</MudTable>
}
@code {
private WeatherForecast[]? forecasts;
protected override async Task OnInitializedAsync()
{
// Simulate asynchronous loading to demonstrate a loading indicator
await Task.Delay(500);
var startDate = DateOnly.FromDateTime(DateTime.Now);
var summaries = new[] { "Freezing", "Bracing", "Chilly", "Cool", "Mild", "Warm", "Balmy", "Hot", "Sweltering", "Scorching" };
forecasts = Enumerable.Range(1, 5).Select(index => new WeatherForecast
{
Date = startDate.AddDays(index),
TemperatureC = Random.Shared.Next(-20, 55),
Summary = summaries[Random.Shared.Next(summaries.Length)]
}).ToArray();
}
private class WeatherForecast
{
public DateOnly Date { get; set; }
public int TemperatureC { get; set; }
public string? Summary { get; set; }
public int TemperatureF => 32 + (int)(TemperatureC / 0.5556);
}
}
6. Ahora tiene los primeros componentes de MudBlazor, puede ejecutar la aplicación y ver el resultado en múltiples plataformas, incluidas Windows, macOS, iOS y Android.
Ejecución en emulador Android
1. Para la ejecución de la aplicación en emulador Android desde visual studio, asegúrate de tener instaladas las versiones necesarias de Android. Ve a «Herramientas» > «Android SDK Manager».
2. Crea un nuevo emulador o usa uno existente, Ve a «Herramientas» > «Android Device Manager»
3. Después de configurar el emulador, en la barra de herramientas de Visual Studio, selecciona el emulador o dispositivo en el que deseas ejecutar la aplicación.
Ejecución desde un dispositivo Android físico
1. Habilitar la depuración USB en el dispositivo:
- En el dispositivo Android, ve a «Configuración» > «Acerca del teléfono» y toca repetidamente el número de compilación hasta que aparezca el mensaje «Ahora eres un desarrollador».
- En las opciones de desarrollador, habilita «Depuración USB».
2. Con un cable USB, conecta el dispositivo Android a tu ordenador.
3. En el dispositivo, es posible que se te pida que aceptes la conexión USB y permitas la depuración.
4. Y por último, en Visual Studio, selecciona el dispositivo Android conectado como destino de ejecución antes de iniciar la depuración.
Ejecución desde un dispositivo IOS
El desarrollo y la ejecución de aplicaciones iOS desde una máquina con Windows presentan limitaciones debido a las restricciones de Apple y las herramientas disponibles. Ejecutar una aplicación en iOS desde Visual Studio en una máquina con Windows puede ser un poco más complicado. Sin embargo, puedes configurar un entorno de compilación remota con una Mac para realizar pruebas y depuración en un dispositivo iOS.
Código de ejemplo
.NET MAUI Blazor Hybrid app with MudBlazor
Leer más
Theme Manager / Generator for MudBlazor
Blazor Template pre configured with MudBlazor
2
