Summary

Este documento explica el código de una aplicación que imita la interfaz de WhatsApp. Se analizan conceptos de diseño de interfaz de usuario, como Shell, TabBar, y Tab, así como diferentes componentes y estructuras de datos, incluidos los tipos de datos record. Se introducen también conceptos de programación con C#.

Full Transcript

CARPETA: Pages: 1) AppShell.xaml: -Shell: El Shell de interfaz de usuario de aplicaciones multiplataforma de.NET (.NET MAUI) reduce la complejidad del desarrollo de aplicaciones al proporcionar las características fundamentales que requieren la mayoría de...

CARPETA: Pages: 1) AppShell.xaml: -Shell: El Shell de interfaz de usuario de aplicaciones multiplataforma de.NET (.NET MAUI) reduce la complejidad del desarrollo de aplicaciones al proporcionar las características fundamentales que requieren la mayoría de las aplicaciones, entre las que se incluyen: Un único lugar para describir la jerarquía visual de una aplicación. Una interfaz de usuario de navegación común. Un esquema de navegación basado en URI que permite la navegación a cualquier página de la aplicación. Un controlador de búsqueda integrado. : Es una barra de navegación que se coloca en la parte inferior de la pantalla y contiene varias pestañas. Cada pestaña representa una vista o sección diferente dentro de la aplicación, Permite a los usuarios cambiar entre diferentes partes de la aplicación de manera rápida y fácil, tocando las pestañas correspondientes. Tab: Es un componente dentro de la TabBar que representa una sección específica de la aplicación. Cada Tab tiene un ícono y un título, y está asociado con un contenido específico que se muestra cuando el usuario selecciona esa pestaña. ShellContent: Define qué contenido se mostrará cuando el usuario seleccione esta pestaña. Cada ShellContent puede tener su propio diseño y funcionalidad. ContentTemplate: Es un atributo en ShellContent que define la plantilla para el contenido que se mostrará en esa sección específica. Utiliza un DataTemplate para describir cómo se debe construir y mostrar la vista asociada con ese ShellContent. Es decir ContenTemplate asocia un diseño específico (definido por un DataTemplate) con el ShellContent (sin ContentTemplate, ShellContent no sabe qué vista mostrar). DataTemplate: Define una plantilla para la presentación de datos. pages: xmlns:pages="clr-namespace:WHATSAPP_REPLICA.Pages" {DataTemplate pages:StatusPage}: Indica que para la sección o pestaña en la aplicación, la vista se construirá usando la clase StatusPage como plantilla. Esto significa que el diseño y la estructura visual de esa sección estarán basados en cómo está definida la clase StatusPage. Analogía de Recetas de Cocina Imaginemos que estás preparando una comida y necesitas seguir una receta para cocinar un plato específico. En esta analogía: ChatsPage es el diseño específico (plato). DataTemplate es la receta que define cómo construir el diseño (receta). ShellContent es la sección del menú que muestra la vista usando la receta (ContentTemplate). CARPETA MODELS: CallsModels.cs: Using System; ///Importa el espacio de nombres System, que contiene clases básicas fundamentales para trabajar con.NET, como tipos primitivos (e.g., int, string) y funciones comunes como Console.WriteLine(). using System.Collections.Generic; /// proporciona clases para colecciones genéricas como listas (List) Using System.Linq; // Importa el espacio de nombres System.Linq, que permite trabajar con consultas LINQ (Language-Integrated Query) para filtrar, proyectar y manipular colecciones de datos. using System.Text; //Importa el espacio de nombres System.Text, que proporciona clases y métodos para manejar texto, incluyendo la codificación y manipulación de cadenas Using System.Threading.Tasks; /// Importa el espacio de nombres System.Threading.Tasks, que incluye tipos y métodos para trabajar con tareas asíncronas y programación paralela. public record CallsModel(string Nombre, String Hora, string imagen); } public: Especifica que el récord es accesible desde cualquier otro código que lo refiera. record: en C# Es una forma especial de definir una clase que está enfocada principalmente en almacenar datos. Los records son útiles cuando quieres representar un objeto cuyos valores se consideran inmutables (es decir, no cambian después de que el objeto se ha creado) el record juega el papel de definir un tipo de dato ligero y especializado para almacenar un conjunto de datos relacionados. CallsModel es el nombre del record. registro o modelo de datos que guarda información sobre una llamada. (string Nombre, string Hora, string imagen) Esta parte define un constructor implícito que toma tres parámetros: Nombre: Un parámetro de tipo string, que probablemente representa el nombre de una persona asociada con la llamada. Hora: Otro parámetro de tipo string, que parece representar la hora en la que ocurrió la llamada. imagen: También de tipo string, que podría representar una URL o la ruta a una imagen relacionada con la llamada. Estos tres parámetros se convertirán automáticamente en propiedades de sólo lectura (readonly) del record. En este caso, el record CallsModel tendrá tres propiedades públicas llamadas Nombre, Hora e imagen. Explicación General La línea de código define un record en C# llamado CallsModel con tres propiedades: Nombre, Hora, e Imagen. Este record se usa para almacenar datos relacionados con llamadas, como el nombre de la persona, la hora de la llamada y una imagen asociada. La ventaja de usar un record en lugar de una clase convencional es que los record proporcionan automáticamente características como la igualdad de valores y un constructor, además de ser inmutables, lo que puede ser útil para manejar datos en aplicaciones de manera más segura y predecible. Chats Models.cs: Using System; //Proporciona clases fundamentales y tipos básicos (como String, DateTime, etc.). using System.Collections.Generic; //Contiene interfaces y clases que definen colecciones genéricas(estructuras de datos que permiten almacenar y manipular grupos de objetos), como List, Dictionary, etc. using System.Linq; // Ofrece funcionalidades de consulta para colecciones de datos de manera directa y expresiva dentro del lenguaje C#, como Where, Select, FirstOrDefault, etc. Son métodos que forman parte de LINQ (Language Integrated Query) en C# Using System.Text; //Proporciona clases que representan codificaciones de caracteres y manipulación de cadenas. Nos referimos a la manipulación de texto y cómo C# maneja los caracteres y cadenas de caracteres (strings) using System.Threading.Tasks; //Ofrece tipos que admiten la programación asincrónica, como Task, Task, etc. Realizar operaciones que pueden tardar en completarse (como leer un archivo, acceder a una base de datos, o hacer una solicitud a un servidor) sin bloquear el hilo principal de ejecución namespace WHATSAPP_REPLICA.Models { public record ChatsModels(string Perfil, string Nombre, DateTime UltimoMensajeAt, string UltimoMensaje, int MensajesNoLeidos, List Mensajes) { public string UltimoMensajeEnPantalla => $"{UltimoMensajeAt:hh:mm tt}"; } } Define un espacio de nombres, que es una forma de organizar y agrupar clases y otros tipos dentro del código. En este caso, se están agrupando modelos que son usados en una aplicación que replica la interfaz de WhatsApp. Los espacios de nombres ayudan a evitar conflictos de nombres entre diferentes partes del código y a mantener el código estructurado y fácil de navegar. public record ChatsModels(string Perfil, string Nombre, DateTime UltimoMensajeAt, string UltimoMensaje, int MensajesNoLeidos, List Mensajes) Record: ChatsModels es un record en C#. Un record es similar a una clase, pero está diseñado principalmente para almacenar datos inmutables. Los records generan automáticamente miembros como Equals, GetHashCode, y ToString, basándose en los valores de las propiedades. Parámetros del constructor: string Perfil: Representa la imagen de perfil o una URL que apunta a la imagen del perfil de la persona con la que estás chateando. string Nombre: El nombre de la persona con la que estás chateando. DateTime UltimoMensajeAt: La fecha y hora en que se envió el último mensaje. string UltimoMensaje: El contenido del último mensaje que fue enviado o recibido. int MensajesNoLeidos: La cantidad de mensajes que no han sido leídos en este chat. List Mensajes: Una lista de mensajes (MessageModels) asociados con este chat. MessageModels es otro tipo que probablemente contiene la estructura de un mensaje individual. Una vez que creas una instancia de ChatsModels, las propiedades que has definido (como Perfil, Nombre, UltimoMensajeAt, etc.) no pueden cambiar, asegurando que los datos permanezcan constantes después de la inicialización. El record facilita la comparación de objetos. Dos instancias de ChatsModels se consideran iguales si todas sus propiedades tienen los mismos valores. Puedes desestructurar fácilmente una instancia de ChatsModels para extraer sus propiedades de manera individual. También puedes usar este record como un parámetro en métodos que requieran todos esos datos sobre un chat. MessageModels.cs namespace WHATSAPP_REPLICA.Models { public record MessageModels(string Emisor, string Receptor, string Contenido, DateTime Hora) { public string HoraEnPantalla => $"{Hora:hh:mm tt}"; } } Este código define un modelo llamado MessageModels en el que se almacenan mensajes, para una réplica de WhatsApp. string Emisor: El nombre o identificador de la persona que envía el mensaje. string Receptor: El nombre o identificador de la persona que recibe el mensaje. string Contenido: El texto o contenido del mensaje. DateTime Hora: El momento en que se envió el mensaje, con la fecha y la hora. public string HoraEnPantalla => $"{Hora:hh:mm tt}"; Public string: Indica que esta propiedad es de tipo cadena de texto (string), y su valor será el resultado de convertir la fecha y hora en un formato específico. HoraEnPantalla => =>: Permite escribir funciones de manera más compacta, sin necesidad de definir un método completo De manera fácil: El símbolo =>(expresiones lambda) en C# simplemente define una forma rápida de escribir una función o propiedad. Se usa para decir "cuando llames a esto, quiero que hagas esto otro". Antes del => están los datos de entrada o la variable que necesitas. Después del => está lo que quieres hacer o devolver. en nuestro caso, $"{Hora:hh:mm tt}" es una manera rápida de combinar texto y valores. El $ permite poner variables dentro de una cadena de texto, como si estuvieras creando un mensaje personalizado. Hora es una variable que tiene una hora guardada. hh:mm tt le dice cómo mostrar la hora: hh: muestra la hora en formato de 12 horas (de 1 a 12). mm: muestra los minutos. tt: añade AM o PM, dependiendo si es mañana o tarde. CARPETA PAGES: CallPages.xaml: 1. Este es el contenedor que agrupa todos los ítems de la barra de herramientas que serán utilizados dentro de esta página (ContentPage). Piensa en esto como un área reservada en la interfaz donde se van a definir todos los botones o iconos que aparecerán en la barra superior de la aplicación. 2. Este ítem añade un botón a la barra de herramientas que muestra un icono de cámara. IconImageSource: Esta propiedad especifica la imagen que se utilizará como icono del botón. En este caso, el archivo de imagen es "camara.png". Esta imagen debe estar almacenada en los recursos de la aplicación. Este ítem se muestra directamente en la barra de herramientas, ya que no se especifica ninguna orden (Order), lo que significa que es un ítem principal. 3. Este es otro ítem en la barra de herramientas, que en este caso muestra un icono de búsqueda. IconImageSource: Similar al ítem anterior, esta propiedad apunta a una imagen llamada "busqueda.png". Al igual que el ítem de la cámara, este también es un ítem principal que aparece directamente en la barra de herramientas. 4. Este ítem agrega una opción con el texto "Borrar registro de llamadas". Text: En lugar de un icono, este ítem muestra texto. Esto puede ser útil para acciones donde el texto proporciona una mayor claridad que un icono. Order="Secondary": Este es un punto crucial. Al definir Order="Secondary", estás indicando que este ítem no debe mostrarse directamente en la barra de herramientas principal. En su lugar, aparecerá en un menú desplegable o en un área secundaria de la barra de herramientas. En plataformas como Android, estos ítems secundarios suelen agruparse bajo un botón de menú (a menudo representado por tres puntos verticales). 5. Similar al ítem anterior, este añade una opción de "Ajustes". Order="Secondary": Al igual que el ítem "Borrar registro de llamadas", este ítem es secundario y se ubicará en el menú desplegable, no en la barra de herramientas principal. 6. : Este ítem agrega un botón que muestra un icono de "opciones" (una imagen llamada "opciones.png"). Order="Secondary": A pesar de ser un ítem con un icono, se define como Secondary, por lo que también se incluirá en el menú desplegable junto con los otros ítems secundarios. CallsPages.cs namespace WHATSAPP_REPLICA.Pages; using System.Collections.ObjectModel; using WHATSAPP_REPLICA.Models; public partial class CallsPage : ContentPage { public ObservableCollection LlamadasRecientes { get; set; } public CallsPage() { InitializeComponent(); LlamadasRecientes = new ObservableCollection(CargarLlamadas()); // Se establece el BindingContext en la inicialización BindingContext = this; } private static IEnumerable CargarLlamadas() { return new List { new CallsModel("Yulianis", DateTime.Now.AddDays(-20), "yulii.png"), new CallsModel("Lizilizeth",DateTime.Now.AddDays(-23), "lizz.png"), new CallsModel("Depende", DateTime.Now.AddDays(-24), "ximenaa.png"), new CallsModel("Roger persona", DateTime.Now.AddDays(-24), "rogerr.png"), new CallsModel("Vargas", DateTime.Now.AddDays(-27), "jorgee.png"), }; } } 1. namespace WHATSAPP_REPLICA.Pages; Un namespace es una forma de organizar el código. Aquí, se agrupan todas las clases que pertenecen a la página de llamadas de la aplicación dentro del namespace WHATSAPP_REPLICA.Pages. Facilita la organización y la agrupación lógica del código, evitando conflictos de nombres con otras clases o funciones. 2. using System.Collections.ObjectModel; System.Collections.ObjectModel es una librería de.NET que proporciona colecciones observables. Permite el uso de ObservableCollection, que es una colección que notifica automáticamente a la interfaz de usuario cuando los datos cambian (por ejemplo, al agregar o eliminar llamadas). Esto es útil para mantener la UI actualizada sin intervención manual. 3. using WHATSAPP_REPLICA.Models; Esté using importa el namespace donde están definidos los modelos de datos, como CallsModel, que se utiliza para representar la información de una llamada. Hace posible que la página acceda a las clases del modelo, en este caso a CallsModel, que describe las propiedades de una llamada. 4. public partial class CallsPage : ContentPage ContentPage es una clase base en Xamarin.Forms que representa una página con contenido. Define una nueva página de la aplicación llamada CallsPage, que hereda de ContentPage. Al ser partial, su definición está dividida en varios archivos, como el archivo XAML asociado que define la interfaz gráfica. 5. public ObservableCollection LlamadasRecientes { get; set; } ObservableCollection es una clase que permite crear listas cuyos cambios (como agregar o eliminar elementos) se reflejan automáticamente en la interfaz de usuario. Define una propiedad LlamadasRecientes que almacena una colección observable de objetos CallsModel (cada uno representando una llamada). Esta colección se actualizará dinámicamente y se reflejará en la UI cuando haya cambios. 6. public CallsPage() Este es el constructor de la clase CallsPage. Se ejecuta cuando la página se crea e inicializa los componentes y las propiedades de la página. 7. InitializeComponent(); Este método se genera automáticamente cuando se utiliza un archivo XAML asociado con la página. Inicializa los elementos definidos en el archivo XAML asociado con CallsPage, como botones, etiquetas o listas visuales. Es esencial para conectar la lógica en el código detrás (C#) con la interfaz gráfica (XAML). 8. LlamadasRecientes = new ObservableCollection(CargarLlamadas()); Aquí se crea una instancia de ObservableCollection y se inicializa con el resultado del método CargarLlamadas(). Esto llena la lista LlamadasRecientes con datos predefinidos (varias llamadas ficticias) para mostrar en la página. Esto permite que la página tenga una lista de llamadas recientes que se puede mostrar en la UI. 9. BindingContext = this; Este código establece el BindingContext de la página, lo que permite que los datos de la página (LlamadasRecientes) estén vinculados a la interfaz gráfica (normalmente definida en XAML). En resumen, conecta los datos del código con lo que se muestra en pantalla. Permite que los controles de la interfaz (por ejemplo, listas o etiquetas) se actualicen automáticamente con los datos de LlamadasRecientes. ChatsGeneralPage.xaml ToolBarItems: ToolbarItems es una propiedad de ContentPage. En MAUI (y en Xamarin.Forms), ContentPage representa una página en la aplicación, y ToolbarItems es una colección de elementos de la barra de herramientas que puedes agregar a esta página para proporcionar accesos directos a ciertas funciones o acciones. IconImageSource: Define el ícono que se mostrará en la barra de herramientas. : es un control de interfaz de usuario en XAML que se utiliza para mostrar una colección de datos en una vista. ItemsSource: especifica la fuente de datos para el CollectionView. Es decir, le dice al CollectionView qué datos debe mostrar. {Binding}: Es una forma de decir "Conéctame con los datos que tengo en mi código CollectionView.ItemTemplate: El propósito de es proporcionar un diseño específico para los elementos que se muestran en el CollectionView DataTemplate: Define la plantilla de diseño para un elemento de una colección. x:DataType: Especifica el tipo de datos que se espera en la plantilla. models:MessageModels: models es un espacio de nombres que contiene la clase MessageModels, que define la estructura de los datos para cada elemento en la colección.

Use Quizgecko on...
Browser
Browser