XAML (acrónimo de eXtensible Application Markup Language) nació hace más de 5 años y es pieza fundamental en diversas tecnologías, como por ejemplo Windows Presentation Foundation (WPF), Silverlight, Silverlight para Windows Phone, Microsoft Surface e incluso Workflow Foundation.  Este lenguaje declarativo basado en XML nos permite declarar estructuras de objetos –generalmente visuales pero en realidad, prácticamente podemos instanciar cualquier objeto desde este lenguaje-.  Desde el .NET Framework 3.0 contamos en Windows con un intérprete (parser) bastante eficiente y poderoso, el cual ha sido mejorado con cada versión del Framework.  Además, a XAML lo respaldan herramientas de desarrollo y diseño súmamente sofisticadas como Visual Studio y Expression Blend.  Inclusive hay herramientas de terceros que también cuentan con la opción de exportar hacia XAML (Adobe Photoshop e Illustrator por ejemplo).

Esto quiere decir, que si tu objetivo hoy en día es construir Aplicaciones para Windows, muy probablemente tengas que conocer XAML.

Claramente, XAML es una tecnología de vital importancia también para el futuro.  Microsoft durante el evento //Build/ mostró al mundo entero el próximo Windows 8 y su plataforma de desarrollo, y pudimos apreciar una cualidad única que por primera vez aparece en un sistema operativo Windows: el parser de XAML es parte del core del sistema operativo para las nuevas aplicaciones Metro en Windows 8.

El significado de esta importante incorporación en Windows 8 es que podemos utilizar XAML como tecnología para la creación de Interfaces de Usuario. Es la primera vez que en un sistema operativo Windows sucede esto, ya que generalmente tenemos que instalar el .NET Framework para poder ejecutar aplicaciones que hagan uso de XAML.

Las Aplicaciones Metro son aquellas que tienen como enfoque principal su uso en dispositivos táctiles como tablets.  Las Aplicaciones de Escritorio que usamos día con día y que generalmente están expresadas con ventanas, seguirán funcionando como tal en Windows 8 y podrán ser construidas con las plataformas de desarrollo como Silverlight o WPF (en donde podemos asimismo encontrar XAML como comenté anteriormente).

Muchos ven esto como una muestra clara de la importancia de XAML para Microsoft, otros tantos ven esto como el “Silverlight Nativo” o el “Silverlight 6”, lo cierto es que hay concordancia con la plataforma de desarrollo que desde hace mucho tiempo se ha ido perfilando: XAML como tecnología de Interfaz de Usuario y alguno de los lenguajes disponibles en la plataforma para dar funcionalidad y vida a dicha IU (C, C++, C# o VB).

XAML entonces toca un amplio espectro de tecnologías, y este hecho debería ser un “abrir de ojos” para todos aquellos desarrolladores que deseen construir soluciones nativas para Windows.  Aprender XAML no es complicado y una vez comprendido el paradigma adecuado de programación, podrás apreciar lo robusto y poderosa que es esta tecnología.

Salu2!

¡Son un total de 27 tutoriales!

Este material de entrenamiento completamente gratuito y en español te servirá para iniciar en el mundo de la programación de la nueva versión del sistema operativo móvil de Microsoft: Windows Phone 7, o si ya eres desarrollador para este dispositivo estos tutoriales sin duda alguna te ayudarán a reforzar tus conocimientos.

Cada tutorial trata un tema específico, por lo que no están vinculados directamente uno con otro pero definitivamente les recomiendo que los sigan en el orden establecido.  Los tutoriales comienzan con temas básicos de XAML y Silverlight, y posteriormente se van analizando conceptos más a detalle acerca de esta plataforma de desarrollo.

La lista completa de tutoriales es la siguiente:

Iniciando y Fundamentos

1. Empezar a crear una aplicación de Windows Phone
2. Creando la interfaz de usuario de Windows Phone (XAML)
3. Usando controles
4. Tipo de Controles
5. Controles Panorama y Pivot
6. Trabajando con texto en Windows Phone
7. Distribución en la pantalla
8. Orientaciones de la pantalla
9. Entrada táctil
10. Navegación
11. Ejecutando un aplicación en segundo plano (tombstoning)
12. Notificaciones de empuje para el desarrollo de Windows Phone
13. Publicando tu aplicación en el Marketplace

Visuales y Medios

1. Imágenes
2. Animaciones
3. Video y Audio
4. Gráficos
5. Brochas

Trabajando con Datos

1. Obteniendo datos en tus aplicaciones de Windows Phone
2. Enlazando a controles
3. Almacenamiento Aislado
4. Accediendo a un servicio web REST
5. Consumiendo el servicio de datos de Windows Azure utilizando el cliente OData

Sensores y otras características específicas del teléfono

1. Lanzadores y Selectores
2. Detección de movimiento (acelerómetro)
3. Desarrollando con el GPS de Windows Phone (Servicios de Ubicación)
4. Desarrollando con la cámara de Windows Phone

También pueden ver el índice completo en esta página de La Liga Silverlight.

¡Esperamos que les sean de utilidad!

Aquí se los vuelvo a poner para que lo utilicen en sus aplicativos, espero que les sirva!  Por favor comenten aquí si les sirve y para qué lo están utilizando!

El vínculo de descarga es:

http://ligasilverlight.com/codigo/Mexico.rar

Salu2!

Como mencionábamos en el artículo anterior, Silverlight puede ser hospedado en prácticamente cualquier tecnología Web del lado del Servidor.  Asimismo podemos utilizar las características de la tecnología que estemos utilizando para poder crear Xaml de manera dinámica y enviar dicho contenido a la aplicación Silverlight ya sea a través de parámetros de inicialización (parámetro InitParams en <object>) o a través de un endpoint que podamos descargar por medio de un objeto de tipo WebClient.  Es este último caso el que usaremos en este artículo para crear contenido dinámico con PHP.

Creación del proyecto

Siguiendo los mismos pasos que usamos en el artículo anterior para la creación de un Sitio Web en IIS y una aplicación Silverlight, crearemos un nuevo proyecto de tipo Silverlight Application en Visual Studio .NET con el nombre PHPDynamicXaml.  Inmediatamente después de haber creado el proyecto borraremos los archivos Default.aspx y PHPDynamixXamlTestPage.aspx y sus archivos relacionados, dejando únicamente el archivo .html.

Agreguemos ahora un archivo llamado Content.php usando la plantilla de Archivo de Texto disponible al seleccionar la opción “Agregar nuevo elemento” en el menú contextual del proyecto.  La siguiente figura muestra la ventana de Solution Explorer y la Solución actual:

Será en el archivo Content.php en donde escribiremos el código necesario para la creación dinámica de contenido Xaml.  En nuestro ejemplo el contenido será una serie de rectángulos, el cual su número será definido por medio de un parámetro en el Querystring llamado r.  El siguiente fragmento ejemplifica el código de PHP necesario para la construcción dinámica de contenido en Xaml:

<?php

header('Content-Type: text/xaml');

$cuantos = 0;

if ($_GET["r"]!=null)

  $cuantos = $_GET["r"];

echo "<Canvas xmlns='http://schemas.microsoft.com/winfx/2006/xaml/presentation' Width='800' Height='600'>";

for ($i=1; $i<=$cuantos; $i++)

{

  echo "<Rectangle Canvas.Top='" . $i * 10 . "' Canvas.Left='" . $i * 10 . "' Width='30' Height='30' Fill='Red' Stroke='Black' />";

}

echo "</Canvas>";

?>

Es importante resaltar en especial la siguiente línea:

header(‘Content-Type: text/xaml’);

la cual establece que el tipo de contenido que regresará la página .php será de tipo Xaml (también funciona con el content type text/xml ya que Xaml no es más que Xml).  Lo anterior es de suma de importancia ya que estamos redefiniendo el comportamiento predeterminado que tiene PHP de regresar HTML.

Ahora bien, como podrán darse cuenta el código obtiene el número de rectángulos a crear por medio del parámetro r del Querystring.  Lo que hacemos es simplemente hacer un bucle for para la creación dinámica del Xaml que represente el número buscado de rectángulos.  Recuerden que cuando generamos Xaml dinámico es necesario incluir el xmlns por default en el contenedor raíz, si es que interpretaremos este código Xaml utilizando XamlReader.Load().

Lo que resta será escribir el código necesario en nuestra aplicación Silverlight para ejecutar la página php y obtener el resultado de su ejecución (lo cual será efectivamente contenido Xaml).  El siguiente código muestra el manejador del evento Loaded del UserControl MainPage:

public partial class MainPage : UserControl

{

    public MainPage()

    {

        InitializeComponent();

        this.Loaded += new RoutedEventHandler(MainPage_Loaded);

    }

    void MainPage_Loaded(object sender, RoutedEventArgs e)

    {

        WebClient client = new WebClient();

        client.DownloadStringCompleted += (s, a) =>

        {

            if (a.Error == null)

            {

                string result = a.Result;

                var newElement = XamlReader.Load(result) as UIElement;

                LayoutRoot.Children.Clear();

                LayoutRoot.Children.Add(newElement);

            }

        };

        int r = 0;

        try

        {

            if (HtmlPage.Document.QueryString["r"] != null)

            {

                r = int.Parse(HtmlPage.Document.QueryString["r"]);

            }

        }

        catch (Exception)

        {

            r = 0;

        }

        string url = string.Format("/Content.php?r={0}", r);

        client.DownloadStringAsync(new Uri(url, UriKind.RelativeOrAbsolute));

    }

}

La propiedad HtmlPage.Document.QueryString (parte del Puente HTML) permite leer el parámetro r que puede establecer el usuario en la página .html y que a su vez será utilizado para la invocación de la página Content.php.  El resto del código se encarga de obtener el resultado de la descarga del endpoint (Content.php) e interpretar el resultado por medio del método XamlReader.Load().

La siguiente figura muestra el resultado de ejecutar la siguiente página:

http://localhost:9050/PHPDynamicXamlTestPage.html?r=12

Lo anterior demuestra que PHP, además de permitirnos hospedar las aplicaciones Silverlight, lo podemos usar para la creación dinámica de contenido Xaml.

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!

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.

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):

namespace Rodrigo.Maps

{

    public partial class Mexico : UserControl

    {

        Brush original;

        public Mexico()

        {

            InitializeComponent();

            original = (Brush)this.Resources["brochaVerde"];

            foreach (UIElement estado in this.mexico.Children)

            {

                if (estado is Canvas)

                {

                    RegisterEvents(estado as Canvas);

                }

            }

            //Español: También podemos hacer esto:

            //English: We could do this as well:

            //RegisterEvents(Aguascalientes);

            //RegisterEvents(BC);

            //RegisterEvents(NuevoLeon);

            //...

        }

        /// <summary>

        /// Español: Registra los manejadores de eventos para el estado especificado en el parámetro

        /// English: Register the event handlers for the state specified in the parameter

        /// </summary>

        /// <param name="estado"></param>

        void RegisterEvents(Canvas estado)

        {

            estado.MouseEnter += new MouseEventHandler(this.Estado_MouseEnter);

            estado.MouseLeave += new MouseEventHandler(this.Estado_MouseLeave);

            estado.MouseLeftButtonUp += new MouseButtonEventHandler(this.Estado_MouseButtonUp);

        }

        /// <summary>

        /// Español: Muestra el nombre del estado en una alerta al hacer clic

        /// English: Displays the state name when clicked

        /// </summary>

        /// <param name="sender"></param>

        /// <param name="e"></param>

        void Estado_MouseButtonUp(object sender, MouseButtonEventArgs e)

        {

            HtmlPage.Window.Alert(((Canvas)sender).Name);

        }

        /// <summary>

        /// Español: Cambia el color del estado que está recibiendo el foco

        /// English: Changes the state color when the mouse cursor hovers

        /// </summary>

        /// <param name="sender"></param>

        /// <param name="e"></param>

        void Estado_MouseEnter(object sender, MouseEventArgs e)

        {

            ((Path)((Canvas)sender).Children[0]).Fill = new SolidColorBrush(Colors.Magenta);

        }

        /// <summary>

        /// Español: Regresa el color original del estado al perder el foco

        /// English: Rolls back to the original color when the mouse cursor leaves

        /// </summary>

        /// <param name="sender"></param>

        /// <param name="e"></param>

        void Estado_MouseLeave(object sender, MouseEventArgs e)

        {

            ((Path)((Canvas)sender).Children[0]).Fill = original;

        }

    }

}

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

private void Application_Startup(object sender, StartupEventArgs e)

{

    this.RootVisual = new Rodrigo.Maps.Mexico();

}

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!