Componentes en Blazor - Tutorial de Blazor

Las aplicaciones Blazor se basan en componentes. Un componente puede ser cualquier fragmento de la interfaz de usuario, una página completa, un formulario, un diálogo, cualquier cosa que represente parte de nuestra interfaz. En este vídeo vamos a ver cómo crear un componente personalizado para pintar un pie de página en el que veremos un copyright, el nombre del proyecto y el año. Para ello, vamos a ir aquí, a Shared botón derecho > Add y Razor Component. Como nombre le pondremos «PageFooter». Y ahora tenemos aquí un código HTML que vamos a borrar. ¿Qué vamos a introducir dentro de nuestro componente? Pues la sección HTML que esta clase aún no existe, pero luego la crearemos. Dentro un div class="container" y dentro del div, nuestro párrafo con el texto, &copy, para el símbolo de copyright, Stories Library y el año. Podríamos ponerlo a mano, pero ¿qué pasa el año que viene? Tendríamos que desplegar en producción cada año que cambia, por lo cual, como estamos usando Razor, qué mejor que usar directamente C# para pintarlo. @DateTime.Now.Year, y ya lo tenemos. Fíjate cómo mezclamos HTML con código C# directamente. El motor de Razor es capaz de entender todo esto. Bien, cerramos el div y cerramos el footer. Esto ya lo tenemos. ¿Ahora qué hay que hacer? Bueno, pues tenemos que meter nuestra parte de estilos. ¿Cómo lo hacemos? Pues podemos crear un fichero aquí, dentro de wwwroot y css, botón derecho, Add > New Item, buscamos aquí «css», aquí lo tenemos, Style Sheet, y podemos ponerle, por ejemplo, aquí, «footer.css». Borramos el contenido y pegamos lo que ya tengo preparado en el portapapeles. Aquí lo ponemos, Control V, y ya tenemos nuestra clase que he sacado de los ejemplos de la página de Bootstrap. Espero que esto funcione. Como te imaginarás, siendo ciego, precisamente la CSS y la maquetación no son mis fuertes. Vale, pues ya lo tenemos aquí creado y ahora vamos a poner nuestro componente en la página. ¿Dónde? En la plantilla para que se refleje en todas las páginas del sitio. Pero antes, se me ha olvidado, tenemos que poner nuestra hoja de estilo, referenciarla en algún sitio. ¿Dónde? Pues en wwwroot y aquí en index.html, que es donde se carga todo el HTML, digamos, todo el esqueleto, que luego contendrá el componente app que carga el resto de componentes. Pues, por ejemplo, aquí tenemos un app.css, copiamos y la duplicamos aquí. Cambiamos esta ruta. footer.css, ya lo tenemos. Y esto ya debería cargar al arrancar nuestra aplicación. Bien, ahora en Shared tenemos nuestro MainLayout y nuestro PageFooter, exacto, perfecto. Entramos a MainLayout, y aquí, al final, en el último div, vamos a poner nuestro componente. ¿Cómo lo referenciamos? Pues, directamente, utilizando su nombre. En este caso era PageFooter, con la P y la F mayúscula. Por lo cual, como si fuera una etiqueta HTML, ponemos < PageFooter, fíjate que el autocompletado ya me lo está detectando, />, porque eso no tiene shell content, no tiene contenido dentro. Bien, vamos a Guardar, Control Shift S, compilamos, Shift F6, y vemos si esto ha funcionando, F5. Cargando. Y ahí lo tenemos, Copyright, Stories Library 2021. Ya tenemos nuestro componente que podríamos reutilizar en cualquier sitio. Pero, fíjate, hay que tener una cosa en cuenta y es el tema de los namespaces. Aquí, este PageFooter ha funcionado, ¿por qué? Porque tiene exactamente el mismo namespace que la plantilla MainLayout. Cuando compilamos una aplicación Blazor, se generan las clases CSS al vuelo; esa clase CSS tienen el namespace formado por la ruta dentro del proyecto. En este caso, tiene el namespace StoriesLibrary.Client.Shared. Y como la plantilla tiene el mismo, pues no hay que hacer nada más. Pero imagínate que ahora creamos aquí un componente y dentro de Shared, o aquí, directamente, en StoriesLibrary.Client creamos una carpeta y la llamamos «CustomComponents» y dentro creamos un componente. Componente Razor, y le decimos «MyComponent». Lo dejamos así, no importa. Y ahora, desde la plantilla, intentamos referenciarlo. Aquí, después de nuestro footer ponemos «MyComponent». ¡Oh!¿Qué ha hecho? Fíjate lo que me ha hecho el autocompletar. Me ha puesto todo el namespace. StoriesLibrary.Client. CustomComponents.MyComponent. Vale, esto funcionaría, pero queda muy feo, ¿verdad? ¿Cómo podríamos arreglarlo? Pues poniendo su using o bien, aquí, using StoriesLibrary.Client.CustomComponents y aquí ya abajo <MyComponent>. Ya nos aparece directamente porque hemos puesto el namespace. Este using podríamos trasladarlo perfectamente al _Imports.razor si vamos a utilizar el componente este en algunos otros sitios.