Creando un control de usuario reutilizable : El mapa de México en XAML en acción – Parte I

Hace algunas semanas creé el primer mapa de México en XAML.  Esta iniciativa animó a unos buenos amigos a perfeccionar esta primer aproximación del mapa de México en XAML para poder utilizarlo en nuestras aplicaciones Silverlight / WPF.  En este artículo veremos cómo crear un control de usuario reutilizable a partir de este XAML para poder usarlo en la plataforma Silverlight.

Para iniciar, es buena idea mostrar el mapa de XAML que usaremos.  El mapa de México en XAML lo pueden descargar del sitio de contenido de La Liga Silverlight.  Para mostrar el mapa estoy usando KaXaml, una excelente herramienta para edición de XAML alternativa a las ya conocidas herramientas como Visual Studio .NET 2008 o Expression Blend.

Muy bien, para iniciar debemos hacer notar los siguiente:

  • Cada estado de la república es un Path, el cual está envuelto en un contenedor <Canvas> con el nombre de cada estado en la propiedad x:Name, esto para poder tener control sobre cada uno de los estados (al darle click sobre cada uno de ellos o al mover el mouse encima de él). 32 estados = 32 Path = 32 Canvas.
  • El <Canvas> raíz de todo el mapa se llama MapaMexico.  Este <Canvas> es el contenedor de los 32 estados del país

Comenzando

Crearemos una aplicación de tipo Silverlight por medio de Visual Studio .NET 2008 y usando las plantillas.  A esta aplicación le llamaremos PortalMexico como a continuación se muestra en la ilustración:

Posteriormente seleccionamos la opción de crear una aplicación Web y cerramos la ventana de diálogo.  Una vez descargado el mapa de México en XAML, agregamos los dos archivos Mexico.xaml y Mexico.xaml.cs al proyecto de Silverlight.  Estos archivos son el diseño en XAML y el code-behind relacionado a ese XAML respectivamente.

El mapa de México en XAML ya incluye código preconstruído el cual colorea el estado de la república Mexicana que esté seleccionado a través del cursor del mouse.  Este código es bastante sencillo y se logra de la siguiente manera:

Vale la pena notar que el código itera sobre todos los estados (Canvas) que están en el Canvas raíz (MapaMexico) y por cada uno ejecuta el método RegisterEvents() que a continuación se muestra:

Como podrás notar, para los eventos MouseEnter (al entrar el cursor del mouse sobre el Canvas), MouseLeave (al salir el cursor del mouse del Canvas) y MouseLeftButtonUp (al hacer clic completo con el mouse sobre un estado (Canvas)) se asignan los manejadores de evento:

estado_MouseEnter

estado_MouseLeave

estado_MouseLeftButtonUp

…respectivamente.  Esto quiere decir que, estos métodos (denominados manejadores de eventos por tratarse de métodos que se ejecutan cuando se dispara un evento) se comparten para los 32 estados!  librándonos de escribir más código del necesario, el cual también pudo haber sido resuelto de la siguiente manera pero menos eficiente:

O peor aún:

Asimismo, cuando haces clic sobre un estado del mapa de México, te muestra el navegador un mensaje de alerta con el nombre del estado que has seleccionado.  De hecho lo que te muestra no es más que el nombre del Canvas que envuelve el Path que representa el estado, tal y como lo podemos apreciar en el siguiente fragmento de código tomado del code-behind del mapa:

Es notable la presencia de la clase HtmlPage de Silverlight, la cual encapsula toda la funcionalidad necesaria del HTML Bridge de Silverlight.  Esta característica permite manipular el DOM del navegador con .NET dentro del plugin de Silverlight!!!  Esta es uno de los componentes que en lo personal considero bastante potente en esta plataforma y motivo suficiente para incluir Silverlight en todos nuestros proyectos Web ya que si abrimos un poco nuestra imaginación podremos darnos cuenta que tal vez, y digo, tal vez… no volvamos a necesitar crear scripts de Javascript para nuestras aplicaciones Web.  Este tema merece artículos en específico que próximamente estarán publicados en este blog y en La Liga Silverlight.

Vale la pena probar el mapa de México en XAML tal cual se puede descargar de La Liga Silverlight, sin modificaciones para poder entender lo que hemos explicado hasta el momento.  Para que la aplicación PortalMexico inicie con Mexico.xaml en vez de con Page.xaml, simplemente modifica la siguiente línea en el archivo App.xaml.cs, el cual es el archivo de código global para toda nuestra aplicación Silverlight, y posteriormente ejecuta la aplicación presionando la tecla F5 o eligiendo la opción Start Debugging del menú Debug en Visual Studio .NET 2008 (por favor toma en cuenta el nombre de espacio Mexico que contiene la clase Mexico)

Muy bien, ya que explicamos la manera de cómo se están adjuntando los manejadores de eventos a los diferentes eventos para cada estado y qué sucede cuando un usuario hace clic en algún estado es momento de implementar nuestro control de usuario en la aplicación Silverlight:  Es hora de reutilizar Mexico.xaml en Page.xaml :)

Reunión de la Comunidad Guadalajara .NET en el ITESO y premier de La Liga Silverlight

 

El próximo día 4 de diciembre, de 3:00pm a 6:00pm tendremos una reunión en el ITESO por parte de la Comunidad Guadalajara .NET, en donde –como siempre- platicaremos diversos temas de suma importancia del mundo de la plataforma Microsoft.

Por mi parte estaré platicando acerca de Silverlight!… Así que para todos aquellos que estén interesados en asistir revisen la página de la comunidad en donde publicaremos más información al respecto y la agenda final en los próximos días.

Asimismo, dentro de la misma reunión tendremos la premier de La Liga Silverlight:  La primer comunidad MSDN de habla hispana acerca de Silverlight.  Si quieres conocer de qué se trata y/o cuál es el objetivo de este gremio !no faltes!, habrá una sesión de preguntas y respuestas y algunos regalillos sorpresas.  Ojo: no es una reunión de La Liga Silverlight, esa la tendremos próximamente! ;)

Así que no hay pretextos!  Nos vemos en el ITESO !!!

Otro mapa de México en XAML

Siguiendo la iniciativa que mencioné hace algunos días, mi buen amigo y colega Martín Uresti me pasó otro mapa de la República Mexicano en XAML más detallado y preciso para usarlo en nuestras aplicaciones Silverlight / WPF.  Muchas gracias Martín por tu colaboración y por compartirnos este gran recurso que será sin duda alguna de mucha ayuda para más de una persona.

El mapa lo pueden descargar de La Liga Silverlight en su sección “Contenido” o haciendo clic directamente aquí.

Haz clic en la foto para verla más grande

Espero les sea de ayuda!

Mapa de México en XAML

Acabo de terminar la primer versión del mapa de mi querido país México en versión XAML (de hecho, creo que es el primer mapa de México con sus estados en XAML :) ) para todos aquellos desarrolladores y entusiastas de las tecnologías Silverlight o Windows Presentation Foundation –principalmente mexicanos- que deseen incorporarlo en sus soluciones.  Este mapa puede ser punto de inicio para nuevas y emocionantes interfaces de usuario para brindar a los usuarios de nuestras aplicaciones una mejor experiencia en su uso.  Incluso para aplicaciones didácticas novedosas que deseen mostrar información relacionada con cada estado de la República, o para aplicaciones que necesiten filtrar información para cada estado, etc.  (Atención INEGI) ;) .  Crearlo me llevó algunas horas de trabajo y el uso de diversas herramientas como Expression Design, Photoshop y Expression Blend.

El mapa incluye los 32 estados de la República Mexicana, cada uno implementado en un <Canvas> con el nombre de estado para poder identificarlos apropiadamente cuando deseemos programar algún tipo de comportamiento o funcionalidad en ellos.

Visual Studio .NET 2008 mostrando el mapa de México hecho XAML

Haz clic en la imagen para ver la versión completa

Asimismo, para aquellos desarrolladores que deseen tener un código de ejemplo de cómo podemos utilizar este mapa, aquí les dejo a continuación el código necesario para identificar por medio de un color diferente el estado que esté seleccionado (que esté obteniendo el foco por medio del cursor del mouse):

Y claro está, no olviden modificar la propiedad RootVisual de la aplicación para ejecutar correctamente Mexico.xaml:

El mapa de México en XAML lo pueden descargar aquí

Próximamente estaré escribiendo un artículo de cómo podemos hacer un control reutilizable para Silverlight utilizando este mapa de México hecho XAML.

Espero les sea de utilidad.

Salu2!

Presentando: La Liga Silverlight

Es para mí un verdadero honor y orgullo comunicarles de manera oficial el lanzamiento de La Liga Silverlight:  Un gremio de habla hispana para desarrolladores profesionales y entusiastas acerca de la tecnología Silverlight de Microsoft.  Esta comunidad es el resultado de una serie de ideas y sueños en donde la principal meta es el establecimiento de un gremio no necesariamente reducido a un espacio físico (como sucede con la mayoría de comunidades MSDN) en donde todas las personas interesadas y apasionadas con la tecnología puedan participar y aprender de los demás.  Estamos totalmente convencidos de que todos podemos aprender de todos y que las distancias geográficas deben desaparecer para poder llegar a todas aquellos lugares y rincones del planeta:  y qué mejor que hacerlo ahora que la tecnología nos lo permite de una manera barata y rápida.

La Liga Silverlight es una comunidad 90% virtual y 10% presencial enfocada a discutir, enseñar y aprender todo de Silverlight y sus tecnologías íntimamente ligadas como XAML, Expression Blend y WPF.  A continuación les presento el Manifiesto de La Liga Silverlight para que todos conozcan más acerca de este gremio:

Manifiesto

Somos un gremio auto-organizado y participativo de habla hispana enfocado a la tecnología Silverlight deMicrosoft (y tecnologías íntimamente relacionadas como XAML, ASP.NET, ADO.NET Data Services)

Creemos que la especialización y enfoque en las comunidades y sus contenidos es la única manera de aprender con más detalle cualquier tipo de tecnología

Nuestra comunidad es de origen mexicano, con miras a agrupar a cualquier persona que esté dispuesta a participar en nuestras iniciativas sin importar su nacionalidad o posición geográfica

Creemos que nuestro idioma y pasión por la tecnología son los comunes denominadores para alcanzar nuestros objetivos

Nuestras iniciativas y esfuerzos no tienen fines de lucro y por lo tanto no estamos atados, amarrados, vinculados u obligados con ningún tipo de empresa ni mexicana ni extranjera

La participación de todos sus integrantes es la única manera de producir contenido global y útil para todos

Si bien las reuniones presenciales son importantes, la disponibilidad del contenido y participación en línea son aún más importantes para poder llegar a todas aquellas personas que por su disposición geográfica les es imposible unirse a una reunión física

El tiempo de las personas es lo más valioso que hay, y por ello trataremos que todos nuestros esfuerzos sean para aprender más en menos tiempo, utilizando el tiempo de manera eficaz y eficientemente

Creemos en la privacidad de todos los integrantes y es por ello que toda información personal (como correos electrónicos o nombres) no será distribuida de ninguna manera a terceros con fines de lucro

-La Liga Silverlight

El día de hoy sin duda alguna es un gran día lleno de honor para todos los que conformamos La Liga Silverlight ya que estamos seguros que será un gremio de alta importancia para todos los desarrolladores de Silverlight de habla hispana, y además porque en ella se ve y verá reflejada nuestra pasión por la tecnología y por aprender más de todos y de todas.

Sean ustedes bienvenidos/as a La Liga Silverlight!

– Guadalajara, Jalisco, México, 20 de noviembre 2008

Vínculos y Direcciones

La Liga Silverlight

La Liga Silverlight – Manifiesto

La Liga Silverlight – Preguntas Frecuentemente Preguntadas (FAQ)

La Liga Silverlight – Blogs

La Liga Silverlight – Registro

Salu2!!!