Featured Posts

Anunciando: Taller de Silverlight 4Anunciando: Taller de Silverlight 4 Antes que otra cosa, quiero agradecer a todos y todas quienes me ayudaron a contestar la encuesta que preparé en días pasados.  Recibí más de 250 respuestas de personas...

Readmore

Silverlight Tour–Guadalajara (08 al 10 de Septiembre... El interés y difusión de Silverlight como plataforma de desarrollo está siendo cada vez más grande y muchas empresas están optando por esta tecnología para construir...

Readmore

Curso gratuito de Introducción a Silverlight 4 – 2da. ParteCurso gratuito de Introducción a Silverlight... Tengo el gusto de informarles que ya está disponible la segunda parte del Curso gratuito de Introducción a Silverlight 4 en Español, el cual ahora consta de un total...

Readmore

Silverlight Tour en Español – Ahora con controles de Telerik!Silverlight Tour en Español – Ahora con... Tengo el gusto de informar que tal como sucede con el Silverlight Tour en USA y Canadá, ahora también el Silverlight Tour en Español en asociación con Telerik incluye...

Readmore

Rodrigo Díaz Concha Rss

Creando contenido dinámico en PHP para Silverlight

Posted on : 12-08-2009 | By : Rodrigo | In : Silverlight, Silverlight 3

Tags: , ,

9

Introducción

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.

  • Share/Bookmark

Otro mapa de México en XAML

Posted on : 20-11-2008 | By : Rodrigo | In : La Liga Silverlight, Silverlight

Tags: , ,

0

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!

  • Share/Bookmark

Mapa de México en XAML !!!

Posted on : 20-11-2008 | By : Rodrigo | In : Silverlight

Tags: , ,

4

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

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!

  • Share/Bookmark