Ejercicio: Creación de la primera página XAML

Completado

Los ingenieros de su compañía eléctrica realizan habitualmente visitas a los clientes para reparar electrodomésticos y realizar otras tareas de mantenimiento eléctrico. Parte de la aplicación permite al ingeniero tomar notas sobre la visita. Muestra un editor sencillo en el que el ingeniero puede escribir los detalles y guardarlos.

En Android, la aplicación tiene este aspecto:

Se le ha pedido que agregue algunas características adicionales a esta página. Antes de empezar, quiere comprender cómo se ha creado la página, por lo que debe consultar el código fuente. Observa que toda la interfaz de usuario se ha creado con código de C#. Aunque este enfoque funciona, intercala el código que controla el diseño con el código que controla la forma en que funciona la interfaz de usuario. Se da cuenta de que, al poco tiempo, hay un peligro de que los dos aspectos de la aplicación se bloqueen juntos, lo que dificulta el mantenimiento futuro y tal vez hace que la aplicación sea más frágil a medida que se agregan más características. Para separar el diseño de la interfaz de usuario de su lógica, extrae el código de C# que define el diseño de la aplicación y lo reemplaza con una página XAML.

En este módulo se usa el SDK de .NET 8.0. Asegúrese de que tiene instalado .NET 8.0 mediante la ejecución del siguiente comando en el terminal de comandos que prefiera:

dotnet --list-sdks

Aparecerá un resultado similar al del ejemplo siguiente:

6.0.317 [C:\Program Files\dotnet\sdk]
7.0.401 [C:\Program Files\dotnet\sdk]
8.0.100 [C:\Program Files\dotnet\sdk]

Asegúrese de que aparezca una versión que comience en 8. Si no aparece ninguna o no se encuentra el comando, instale el SDK más reciente de .NET 8.0.

Revisión de la aplicación existente

1. Clone el repositorio de GitHub para este ejercicio localmente en el equipo.

   Nota:

   Es mejor clonar o descargar el contenido del ejercicio en una ruta de acceso de carpeta corta, como C:\dev, para evitar que los archivos generados por la compilación superen la longitud máxima de la ruta de acceso.

2. Vaya a la carpeta exercise1 de su copia local del repositorio.

3. Abra el archivo de solución Notes.sln de Visual Studio en esta carpeta o en la carpeta de Visual Studio Code.

4. En la ventana Explorador de soluciones, expanda el proyecto Notas, luego el archivo MainPage.xaml y abra el archivo MainPage.xaml.cs.

5. Revise la clase MainPage definida en este archivo. El constructor contiene el código siguiente que crea la interfaz de usuario:

   public MainPage()
   {
       var notesHeading = new Label() { Text = "Notes", HorizontalOptions = LayoutOptions.Center, FontAttributes = FontAttributes.Bold };
   
       editor = new Editor() { Placeholder = "Enter your note", HeightRequest = 100 };
       editor.Text = File.Exists(_fileName) ? File.ReadAllText(_fileName) : string.Empty;
   
       var buttonsGrid = new Grid() { HeightRequest = 40.0 };
       buttonsGrid.ColumnDefinitions.Add(new ColumnDefinition() { Width = new GridLength(1.0, GridUnitType.Auto) });
       buttonsGrid.ColumnDefinitions.Add(new ColumnDefinition() { Width = new GridLength(30.0, GridUnitType.Absolute) });
       buttonsGrid.ColumnDefinitions.Add(new ColumnDefinition() { Width = new GridLength(1.0, GridUnitType.Auto) });
   
       var saveButton = new Button() { WidthRequest = 100, Text = "Save" };
       saveButton.Clicked += OnSaveButtonClicked;
       Grid.SetColumn(saveButton, 0);
       buttonsGrid.Children.Add(saveButton);
   
       var deleteButton = new Button() { WidthRequest = 100, Text = "Delete" };
       deleteButton.Clicked += OnDeleteButtonClicked;
       Grid.SetColumn(deleteButton, 2);
       buttonsGrid.Children.Add(deleteButton);
   
       var stackLayout = new VerticalStackLayout 
       { 
           Padding = new Thickness(30, 60, 30, 30),
           Children = { notesHeading, editor, buttonsGrid }
       };
   
       this.Content = stackLayout;
   }
   

   La interfaz de usuario consta de un elemento VerticalStackLayout, que contiene un elemento Label, otro Editor y otro Grid con tres columnas. La primera columna contiene el control saveButton, la segunda es un espaciador y la tercera columna tiene el control deleteButton.

   En el siguiente diagrama se muestra la estructura de la interfaz de usuario:

   

   Tenga en cuenta que la clase MainPage también contiene métodos de control de eventos para los botones y algún código que inicializa el control Editor. Este código no se distingue de la definición de la interfaz de usuario.

6. Compile y ejecute la aplicación en Windows, solo para ver su apariencia. Selecciona F5 para crear y ejecutar la aplicación.

7. Cierre la aplicación y vuelva a Visual Studio o Visual Studio Code cuando haya terminado.

Creación de una versión XAML de la interfaz de usuario

1. Abra el archivo MainPage.xaml. El marcado de esta página representa una página de contenido MAUI vacía:

   <ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
                xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
                x:Class="Notes.MainPage">
   
   </ContentPage>
   

2. Agregue un control VerticalStackLayout a la página de contenido:

   <ContentPage ...>
       <VerticalStackLayout Margin="30,60,30,30">
   
       </VerticalStackLayout>
   </ContentPage>
   

3. Agregue un control Label a VerticalStackLayout. Establezca las propiedades Text, HorizontalTextAlignment y FontAttributes de este control tal como se muestra a continuación:

   <ContentPage ...>
       <VerticalStackLayout ...>
           <Label Text="Notes"
                  HorizontalOptions="Center"
                  FontAttributes="Bold" />
       </VerticalStackLayout>
   </ContentPage>
   

4. Agregue un control Editor a VerticalStackLayout:

   <ContentPage ...>
       <VerticalStackLayout ...>
           <Label .../>
   
           <Editor x:Name="editor"
                   Placeholder="Enter your note"
                   HeightRequest="100" />
       </VerticalStackLayout>
   </ContentPage>
   

5. Agregue un elemento secundario Grid a VerticalStackLayout. Este elemento Grid debería tener tres columnas; el tamaño de la primera y la tercera se determina automáticamente, mientras que la segunda tiene un ancho de 30:

   <ContentPage ...>
       <VerticalStackLayout ...>
           <Label .../>
   
           <Editor .../>
   
           <Grid ColumnDefinitions="Auto, 30, Auto">
   
           </Grid>
       </VerticalStackLayout>
   </ContentPage>
   

6. Agregue un elemento Button a la primera columna del elemento secundario Grid. Este es el botón Guardar:

   <ContentPage ...>
       <VerticalStackLayout ...>
           <Label .../>
   
           <Editor .../>
   
           <Grid ...>                    
               <Button Grid.Column="0"
                       Text="Save" 
                       WidthRequest="100"
                       Clicked="OnSaveButtonClicked" />
           </Grid>
       </VerticalStackLayout>
   </ContentPage>
   

7. Agregue otro elemento Button a la tercera columna del elemento secundario Grid. Este es el botón Eliminar:

   <ContentPage ...>
       <VerticalStackLayout ...>
           <Label .../>
   
           <Editor .../>
   
           <Grid ...>                    
               <Button ... />
   
               <Button Grid.Column="2"
                       Text="Delete" 
                        WidthRequest="100"
                       Clicked="OnDeleteButtonClicked" />
           </Grid>
       </VerticalStackLayout>
   </ContentPage>
   

Eliminación del código de diseño del archivo de código subyacente

1. En la ventana Explorador de soluciones, expanda el proyecto MainPage.xaml y abra el archivo MainPage.xaml.cs.

2. Quite el campo Editor de la clase MainPage.

3. En el archivo MainPage.xaml.cs, en el constructor MainPage, quite todo el código que crea los elementos de la interfaz de usuario y reemplácelo por una llamada al método InitializeComponent. Agregue código que compruebe si el archivo usado para almacenar las notas existe y, si es así, lee el contenido y rellena el campo del Editorcontrol de Texto. El constructor debe tener el siguiente aspecto:

   public partial class MainPage : ContentPage
   {
       string _fileName = Path.Combine(FileSystem.AppDataDirectory, "notes.txt");
   
       public MainPage()
       {
           InitializeComponent();
   
           if (File.Exists(_fileName))
           {
               editor.Text = File.ReadAllText(_fileName);
           }
       }
   
       ...
   }
   

4. En el menú Compilar, seleccione Recompilar solución. Compruebe que la aplicación se compila sin errores.

5. Ejecute la aplicación. Debería funcionar exactamente como antes.

6. Si tiene tiempo, implemente y ejecute la aplicación con el emulador de Android. La interfaz de usuario de la aplicación debe ser similar a la que se muestra en la imagen al comienzo de este ejercicio.