Creación y Uso de Componentes en Glaceau para Formularios Reutilizables
Resumen
¿Cómo crear y organizar componentes en Glaceau?
Crear componentes es una de las bases fundamentales en Glaceau, ya que permiten reutilizar código y estructurar mejor nuestras aplicaciones. En esta guía te mostraremos cómo iniciar la organización de componentes y cómo construirlos correctamente en tu proyecto.
¿Cómo organizar tus carpetas de trabajo?
La organización es clave al trabajar con componentes. Debemos comenzar por crear una carpeta específica para almacenarlos.
Crear la carpeta de componentes:
Dentro de tu repositorio, crea un directorio llamado components. Esta carpeta contendrá todos los trabajos actuales y futuros relacionados con componentes.
Crear subcarpetas para ejercicios:
Dentro de components, crea una subcarpeta denominada Ejercicios.
Clasificar por clase:
Adicionalmente, crea estructuras dentro de Ejercicios que correspondan a diferentes clases o temas en los que estés trabajando.
¿Cómo construir un componente en Glaceau?
Crear un nuevo componente:
Selecciona la opción "Agregar nuevo ítem" y elige crear un componente.
El componente base tendrá una estructura similar a una página web, pero inicialmente mostrará solo un <h3>.
Organizar el contenido:
Copia elementos necesarios del componente y pégalos en su lugar correspondiente para estructurarlo adecuadamente.
<h3>Formulario componente</h3><!-- Inicia creando un componente básico para un formulario -->
Llamar al componente desde tu aplicación:
Muchas veces necesitarás integrar tu componente en diferentes partes de tu aplicación.
Asegúrate de importar el componente correctamente usando la estructura de visualización de rutas de tu aplicación.
¿Cómo gestionar parámetros en tus componentes?
Los parámetros son poderosos en la personalización de componentes, ya que permiten modificar dinámicamente lo que se muestra.
Definir un parámetro:
Los parámetros en Glaceau se definen como públicos para permitir la modificación externa.
publicstring Mensaje {get;set;}
Inicializar componentes con parámetros:
Usa métodos de ciclos de vida del componente como OnInitializedAsync para establecer valores iniciales.
protectedoverrideasyncTaskOnInitializedAsync(){ Mensaje = Mensaje ??"Mensaje por defecto";}
¿Cómo personalizar la carga inicial y el ciclo de vida de un componente?
El comportamiento de inicio de un componente debe personalizarse para mejorar la experiencia de usuario al cargar los datos necesarios al inicio.
Utilizar métodos del ciclo de vida:
Métodos como OnInitializedAsync permiten configurar acciones iniciales de los componentes.
Desplegar información diferenciada:
Al llamar repetidamente un componente con diferentes parámetros, podrás obtener diferentes resultados sin cambiar el código interno del componente.
<!-- Ejemplo de uso de un componente con diversas inicializaciones --><Form001 Mensaje="¡Hola Mundo!"/><Form001 Mensaje="¡Bonjour le monde!"/>
¿Por qué es ventajoso trabajar con componentes reutilizables?
Las mayores ventajas de trabajar con componentes en Glaceau son:
Reutilización de código: Permite mantener un código más limpio y eficiente al evitar la repetición.
Modularidad: Facilita el mantenimiento y la actualización de partes específicas de tu aplicación.
Consistencia: Asegura una presentación uniforme de los elementos en diversas partes de la aplicación.
En resumen, la correcta creación y gestión de componentes no solo te brinda un código más organizado, sino también aplicaciones más robustas y escalables. Si sigues estos pasos, estarás en camino de ser un experto en el desarrollo modular y eficaz con Glaceau. ¡Adelante con tus proyectos y sigue aprendiendo!
La palabra clave async lo que indica es que este método se quiere sincronizar con métodos que se ejecutarán de forma asíncrona.
Si quieren entender un poco mejor les dejo el siguiente video donde lo explican con JS.
https://www.youtube.com/watch?v=bWvnWhVCHAc
Gracias por el aporte bro!
Si usan .NET 8 y tienen problemas haciendo que se dispare el evento del button, necesitan agregar el siguiente using al principio del Form component:
@rendermode InteractiveServer
Se me hizo similar a Angular
ACTUALIZEN EL CURSO
No se cual fue el error que tuve, estaba en Visual Studio 2022 y al agregar el directorio en el _Imports no me reconocía la carpeta Components, probé de muchas formas, reiniciando el IDE, reparándolo moviendo la carpeta, finalmente pude resolverlo borrando la carpeta y creando una nueva con el mismo nombre. Imagino que abra sido un error del IDE, ya que cuando lo hice por primera ves en el 2019 no tuve ningún problema
me paso lo mismo pero aparte de eso yo tube descar la netcore 3.1 ala hora de ejecutar me marcaba un error que no se encontraban archivos 3.1.1 ya que el programa del profe se basa en esa version yo tuve que cerrar visual 2022 y desargar la version una vez hecho todo abri visual para tambien hacer lo que hiciste amigo por que tambien no abria la carpeta y yo nuevo en esto
Tuve muchos problemas al momento de añadir mi espacio de trabajo en _Imports, no se porque me marcaba error, me aparecía que no lo encontraba, pensé que era un error del IDE ya que estoy con Visual Studio 2022, y no había tenido problemas con el 2019, finalmente como lo resolví fue eliminando la carpeta y creando una nueva con el mismo nombre
Esta es otra forma en la que pueden agregar un componente por si tiene problemas con la primera.
En general cualquier funcion o metodo dentro de un namespace dentro de C3 lo puedes usar escribiendo el namespace completo, pero se vuelve mas tedioso tener que estarlo escribiendo cada que lo necesites en lugar solo usar el using
Algo que noté es que me da error si utilizo var para variables en las páginas.razor, tengo que utilizar el tipo de dato, es eso normal?
Hola Didier, en que área de código estás trabajando esa parte, si lo estas haciendo dentro del HTML sí es necesario colocar el tipo de dato. Lo mismo ocurre cuando crear variables globales dentro del área @code{}
Por otra parte, dentro de una función o método, si puedes crearlas con var.
El detalle es que tal vez estés intentando declararla como si fuera un atributo de la clase. Sólo puedes usar var dentro de métodos y fuera de ellos siempre debes usar el tipo de dato que va a almacenar.
Cuando paso los parámetros solo aparece un elemento, antes de pasar los parámetros si aparecían los tres, aparecen los mensajes que pongo, pero no el input text ni el botón salvo el primero, ¿Por qué ocurre esto, y como se resolvería?
¿Entonces en que se diferencia los archivos .cshtml de los .razor?
cshtml son archivos Razor, mientras que .razor hace parte de los componentes de Blazor, es un poco enredado al inicio, pero podría tomarse de la siguiente manera:
En ambos se toma código del lado del servidor y ambos utilizan el motor razor por detrás, pero mientras que la estructura de los cshtml hace que todo el proceso se vaya al servidor y requiere refrescar la página para procesar la respuesta del servidor.
Blazor tiene una estructura que permite trabajar sin rfrescar la página y con un manejo rápido similar al que se tiene cuando se trabaja con javascript y ajax, pero solo utilizando código del lado de servidor que en nuestro caso sería C#.
Como te mencioné, en ambos casos utiliza motor razor, que permite integrar código y llamados de código en el html de manera cómoda.
Pareciera que se inspiraron en angular y en react jaja.
metodos asincronos no usan un void o no esperarían no recibir nada, en vez de eso se define como tarea o "Task"
[Parameter] parametro
Blazor no se puede trabajar con el lenguaje Visual Basic?
A la fecha blazor esta creado para ser trabajado con C# y no se tienen noticias relacionadas con Visual Basic, al menos no en un futuro cercano.
hola no me sale las carpetas cuando escribí @using INVENTARY00
Quiza estoy respondiendo muy tarde
La imagen no es muy clara, pero para cada version que ha pasasdo han cambiado algunas cosas en mi caso estoy usando net7.0 cambia un poco algunas palabras pero es lo mismo y hasta más facil el using que use es:
@using Inventory.Components.Ejercicios.Pages