{
"alumno": [
{
"id": 1,
"nombre": "Ana Pie",
"nota": 7
},
{
"id": 2,
"nombre": "Eva Buja",
"nota": 8
},
{
"id": 3,
"nombre": "Juan Ra",
"nota": 4
},
{
"id": 4,
"nombre": "Rosa",
"nota": 4
}
]
}
npx json-server –port 3001 –watch db.json
Utilizando la API random user hacer una app MAUI que nos muestre 5 usuarios:
https://randomuser.me/api/?results=5
Con una página de lista de usuarios y una de detalle.
Tened en cuenta que la API da muchos datos, no hace falta que los usemos todos.
¡Suerte!
MVVM significa Modelo-Vista-ViewModel y es un patrón arquitectónico utilizado en el desarrollo de aplicaciones de software. Este patrón se utiliza en combinación con la plataforma de desarrollo de aplicaciones móviles de Microsoft, MAUI (Multi-platform App UI).
El patrón MVVM se utiliza para separar las preocupaciones de la lógica empresarial y la interfaz de usuario en diferentes capas de la aplicación. Esto significa que los desarrolladores pueden trabajar en diferentes partes de la aplicación sin interferir en el trabajo de los demás.
En MVVM, el modelo representa los datos y la lógica empresarial de la aplicación. La vista representa la interfaz de usuario y el ViewModel es el enlace entre el modelo y la vista. El ViewModel se utiliza para presentar los datos del modelo en la vista y para actualizar los datos del modelo cuando se realizan cambios en la vista.
MAUI proporciona una arquitectura que permite utilizar el patrón MVVM de manera eficiente. La arquitectura de MAUI permite que la lógica empresarial y la interfaz de usuario se separen de manera efectiva. Los desarrolladores pueden crear modelos que contengan datos y lógica empresarial, vistas que muestren información al usuario y ViewModels que conecten los dos.
El uso de MVVM en MAUI permite a los desarrolladores crear aplicaciones móviles más fáciles de mantener y escalar. La separación de la lógica empresarial y la interfaz de usuario permite a los desarrolladores trabajar en diferentes partes de la aplicación sin interferir en el trabajo de los demás. Además, el uso de ViewModel permite que la lógica empresarial se mantenga independiente de la vista, lo que facilita la prueba y la depuración.
A continuación te proporciono un ejemplo básico de cómo implementar una aplicación de MAUI con el patrón MVVM en C#:
Modelo (Model.cs):
public class Model
{
public string Text { get; set; }
}
ViewModel (ViewModel.cs):
public class ViewModel
{
private readonly Model model;
public ViewModel(Model model)
{
this.model = model;
}
public string Text
{
get => model.Text;
set => model.Text = value;
}
}
Vista (MainPage.xaml):
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:viewModels="clr-namespace:MvvmDemo.ViewModels;assembly=MvvmDemo"
x:Class="MvvmDemo.MainPage">
<StackLayout>
<Entry Text="{Binding Text}" />
<Button Text="Guardar" Clicked="OnSaveClicked" />
</StackLayout>
</ContentPage>
Vista (MainPage.xaml.cs):
public partial class MainPage : ContentPage
{
private readonly ViewModel viewModel;
public MainPage(Model model)
{
InitializeComponent();
viewModel = new ViewModel(model);
BindingContext = viewModel;
}
private void OnSaveClicked(object sender, EventArgs e)
{
// Aquí se pueden guardar los cambios realizados en el modelo
}
}
En este ejemplo, el modelo (Model) contiene una única propiedad (Text) que se puede establecer y recuperar. El ViewModel (ViewModel) se utiliza para conectar el modelo y la vista, exponiendo una única propiedad (Text) que se puede enlazar a la vista (MainPage.xaml). La vista (MainPage.xaml) muestra una entrada de texto y un botón, y se enlaza a la propiedad Text del ViewModel. Cuando se hace clic en el botón, se puede guardar el valor del modelo actualizado.
Este ejemplo es muy básico, pero debería darte una idea de cómo funciona el patrón MVVM en una aplicación de MAUI.
https://learn.microsoft.com/es-es/dotnet/maui/xaml/fundamentals/mvvm?view=net-maui-7.0
De microsoft:
https://learn.microsoft.com/es-es/dotnet/maui/tutorials/notes-app/?view=net-maui-7.0
https://learn.microsoft.com/es-es/dotnet/maui/tutorials/notes-mvvm/?view=net-maui-7.0
https://learn.microsoft.com/es-es/samples/browse/?expanded=dotnet&products=dotnet-maui
O Really:
https://github.com/PacktPublishing/.NET-MAUI-Cross-Platform-Application-Development
Vamos a modificar el programa de las notas para que tenga un título y un contenido. En la lista se verá el título, algo del contenido y la fecha.
Para ello, además de modificar la app tendremos que modificar la manera de guardarlo. Mi consejo es que guardemos titulo+contenido dentro del fichero separados por una cadena (p.ej. ##|##) y al recuperar guardemos cada una de las cosas en su sitio.
¡Suerte!
dotnet maui-samples main 7.0-Tutorials_CreateNetMauiApp_step4
Label
Label is used to display single-line or multi-line text. It can display text with a certain format, such as color, space, text decorations, and even HTML text. To create a Label, we can use the simplest format, like so:
<Label Text="Hello world" />
Image
In the user interface design, we usually use icons to decorate other controls or display images as backgrounds. The Image control can display an image from a local file, a URI, an embedded resource, or a stream. The following code shows an example of how to create an Image control in the simplest form:
<Image Source="dotnet_bot.png" />
Editor
In our app, the users need to enter or edit a single line of text or multiple lines of text. We have two controls to serve this purpose: Editor and Entry.
Editor can be used to enter or edit multiple lines of text. The following is an example of the Editor control:
<Editor Placeholder="Enter your description here" />
Entry
Entry can be used to enter or edit a single line of text. To design a login page, we can use Entry controls to enter a username and password. When users interact with an Entry, the behavior of the keyboard can be customized through the Keyboard property. When users enter their passwords, the IsPassword property can be set to reflect the typical behavior on a login page. The following is an example of a password entry:
<Entry Placeholder="Enter your password" Keyboard="Text" IsPassword="True" />
ListView
In the user interface design, a common use case is to display a collection of data. In .NET MAUI, a few controls can be used to display a collection of data, such as CollectionView, ListView, and CarouselView. In our app, we will use ListView to display password entries, groups, and the content of an entry. We will introduce the usage of ListView when we introduce ItemsPage.
StackLayout
StackLayout organizes elements in a one-dimensional stack, either horizontally or vertically. It is often used as a parent layout, which contains other child layouts. The default orientation is vertical. However, we should not use StackLayout to generate a layout similar to a table by using nested StackLayout horizontally and vertically. The following code shows an example of bad practice:
<StackLayout>
<StackLayout Orientation="Horizontal">
<Label Text="Name:" />
<Entry Placeholder="Enter your name" />
</StackLayout>
<StackLayout Orientation="Horizontal">
<Label Text="Age:" />
<Entry Placeholder="Enter your age" />
</StackLayout>
<StackLayout Orientation="Horizontal">
<Label Text="Address:" />
<Entry Placeholder="Enter your address" />
</StackLayout>
</StackLayout>
In the preceding code, we used a StackLayout as the parent layout, where the default orientation is vertical. Then, we nested multiple StackLayout controls with a horizontal orientation to generate a form to fill in. We should use the Grid control to do this.
StackLayout is a frequently used layout control. There are two sub-types of StackLayout that help us directly design the layout horizontally or vertically.
HorizontalStackLayout
HorizontalStackLayout is a one-dimensional horizontal stack. For example, we can generate a row like so:
<HorizontalStackLayout>
<Label Text="Name:" />
<Entry Placeholder="Enter your name" />
</HorizontalStackLayout>
VerticalStackLayout
VerticalStackLayout is a one-dimensional vertical stack. For example, we can display an error message after a form is submitted with an error like so:
<VerticalStackLayout> <Label Text="The Form Is Invalid" /> <Button Text="OK"/> </VerticalStackLayout>
Grid
Grid organizes elements in rows and columns. We can specify rows and columns with the RowDefinitions and ColumnDefinitions properties. In the previous example, we created a form where the user can enter their name, age, and address using a nested StackLayout. We can do this in the Grid layout like so:
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="50" />
<RowDefinition Height="50" />
<RowDefinition Height="50" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition />
</Grid.ColumnDefinitions>
<Label Text="Name:" />
<Entry Grid.Column="1"
Placeholder="Enter your name" />
<Label Grid.Row="1" Text="Age:" />
<Entry Grid.Row="1" Grid.Column="1"
Placeholder="Enter your age" />
<Label Grid.Row="2" Text="Address:" />
<Entry Grid.Row="2"
Grid.Column="1"
Placeholder="Enter your address" />
</Grid>
In the preceding example, we created a Grid layout with two columns and three rows.
FlexLayout
FlexLayout is similar to a StackLayout in that it displays child elements either horizontally or vertically in a stack. The difference is a FlexLayout can also wrap its children if there are too many to fit in a single row or column. As an example, we can create a FlexLayout with five labels in a row. If we specify the Direction property as Row, these labels will be displayed in one row. We can also specify the Wrap property, which can cause the items to wrap to the next row if there are too many items to fit in a row:
<FlexLayout Direction="Row" Wrap="Wrap">
<Label Text="Item 1" Padding="10"/>
<Label Text="Item 2" Padding="10"/>
<Label Text="Item 3" Padding="10"/>
<Label Text="Item 4" Padding="10"/>
<Label Text="Item 5" Padding="10"/>
</FlexLayout>
AbsoluteLayout
AbsoluteLayout is a layout type that we can use to position elements using X, Y, width, and height.
The X and Y positions are relative to the top-left corner of the parent element. Width and height are concerned with the size of the child element.
In the following example, we are creating a BoxView control in the layout at (0, 0) with both width and height equal to 10:
<AbsoluteLayout Margin="20">
<BoxView Color="Silver"
AbsoluteLayout.LayoutBounds="0, 0, 10, 10" />
</AbsoluteLayout>
Layouts: MAUI utiliza diferentes tipos de diseños para organizar los elementos de la interfaz de usuario (UI). Algunos de los diseños comunes incluyen:
StackLayout: organiza los elementos en una pila vertical o horizontal.
GridLayout: organiza los elementos en una cuadrícula.
FlexLayout: organiza los elementos utilizando flexbox.
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="YourNamespace.MainPage">
<GridLayout>
<GridColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="2*" />
<ColumnDefinition Width="3*" />
</GridColumnDefinitions>
<GridRowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
</GridRowDefinitions>
<Label Text="Grid Layout Example"
Grid.Row="0"
Grid.Column="0"
Grid.ColumnSpan="3"
HorizontalOptions="Center" />
<Label Text="Column 1"
Grid.Row="1"
Grid.Column="0" />
<Label Text="Column 2"
Grid.Row="1"
Grid.Column="1" />
<Label Text="Column 3"
Grid.Row="1"
Grid.Column="2" />
<Label Text="Row 2"
Grid.Row="2"
Grid.Column="0"
Grid.ColumnSpan="3" />
</GridLayout>
</ContentPage>
En este ejemplo, GridLayout tiene tres columnas y dos filas. La primera fila contiene una etiqueta que se extiende por las tres columnas. La segunda fila contiene tres etiquetas, una para cada columna. Finalmente, hay una etiqueta más que ocupa toda la tercera fila.
Controles de entrada de usuario: Los controles de entrada permiten al usuario interactuar con la aplicación. Algunos de los controles comunes incluyen:
Entry: para ingresar texto.
Switch: para alternar entre dos opciones.
Slider: para seleccionar un valor dentro de un rango.
<?xml version="1.0" encoding="UTF-8" ?>
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="MyApp.MyPage"
Title="My Page">
<StackLayout Padding="20">
<Entry Placeholder="Ingresa tu nombre" />
<Label Text="Selecciona tu edad" />
<Slider Minimum="18" Maximum="100" Value="25" />
</StackLayout>
</ContentPage>
Supongamos que queremos crear una página con tres cuadrados, donde el cuadrado del medio es el doble de ancho que los otros dos. Podríamos utilizar el siguiente código XAML:
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:flex="clr-namespace:Microsoft.Maui.Controls;assembly=Microsoft.Maui.Controls.FlexLayout">
<flex:FlexLayout Direction="Row" JustifyContent="Center" AlignItems="Center">
<BoxView BackgroundColor="Red" HeightRequest="50" WidthRequest="50" />
<BoxView BackgroundColor="Blue" HeightRequest="50" WidthRequest="100" />
<BoxView BackgroundColor="Green" HeightRequest="50" WidthRequest="50" />
</flex:FlexLayout>
</ContentPage>
Aquí, hemos utilizado un FlexLayout con dirección “Row” (para que los elementos se alineen en una fila), y hemos establecido la propiedad JustifyContent en “Center” y AlignItems en “Center” para que los cuadrados se centren tanto horizontal como verticalmente.
Luego, hemos agregado tres BoxView (cada uno con un color diferente), y hemos establecido las propiedades HeightRequest y WidthRequest para cada uno. El cuadrado del medio tiene un ancho de 100, mientras que los otros dos tienen un ancho de 50.
Esto creará una página con tres cuadrados, donde el cuadrado del medio es el doble de ancho que los otros dos, y los tres cuadrados estarán centrados en la pantalla.
Controles de entrada de usuario: Los controles de entrada permiten al usuario interactuar con la aplicación. Algunos de los controles comunes incluyen:
Entrada de texto
El control de entrada de texto en MAUI es Entry. Aquí hay un ejemplo de cómo crear un Entry en XAML:
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml">
<Entry Placeholder="Ingresa tu nombre" />
</ContentPage>
En este ejemplo, estamos creando un Entry con un marcador de posición (placeholder) que dice “Ingresa tu nombre”.
Selector de fecha
El control de selector de fecha en MAUI es DatePicker. Aquí hay un ejemplo de cómo crear un DatePicker en XAML:
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml">
<DatePicker />
</ContentPage>
En este ejemplo, estamos creando un DatePicker básico sin ninguna propiedad adicional.
Selector de hora
El control de selector de hora en MAUI es TimePicker. Aquí hay un ejemplo de cómo crear un TimePicker en XAML:
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml">
<TimePicker />
</ContentPage>
En este ejemplo, estamos creando un TimePicker básico sin ninguna propiedad adicional.
Controles de selección de usuario: Los controles de selección permiten al usuario elegir una o varias opciones de un conjunto de opciones. Algunos de los controles comunes incluyen:
ComboBox: permite al usuario seleccionar una opción de una lista desplegable.
ListView: permite al usuario seleccionar una o varias opciones de una lista.
RadioButton: permite al usuario seleccionar una opción de varias opciones.
Gráficos y multimedia: Las vistas de MAUI también permiten mostrar gráficos y multimedia, como imágenes y videos. Algunos de los controles comunes incluyen:
Image: muestra una imagen.
VideoView: reproduce un video.
Controles de navegación: Los controles de navegación permiten al usuario moverse entre diferentes vistas de la aplicación. Algunos de los controles comunes incluyen:
NavigationView: proporciona un área de navegación para acceder a diferentes partes de la aplicación.
TabView: permite al usuario alternar entre diferentes pestañas que contienen diferentes vistas.
Estos son solo algunos ejemplos de las vistas y controles que se pueden utilizar en MAUI. La lista completa de elementos disponibles dependerá de la plataforma de destino y la versión de MAUI que se esté utilizando.