Micaela 30 de marzo de 2009 a las 10.57
   Imprimir artículo
elWebmaster.com

Silverlight para desarrolladores PHP


silverlightSi bien un plugin para navegadores de Microsoft puede que resulte algo extra√Īo para un desarrollador PHP, existen muchas caracter√≠sticas de Microsoft Silverlight que lo hacen una buena alternativa para estas tecnolog√≠as.

Por empezar, est√° dise√Īado para funcionar no s√≥lo en Internet Explorer sino tambi√©n en todos los grandes navegadores. Adem√°s es una herramienta poderosa para crear aplicaciones que pueden ir mucho m√°s all√° de las capacidades est√°ndares del CSS y el HTML.

Silverlight soporta un amplio rango de efectos visuales y posee más de 30 controles de interfaces de usuario incorporados, incluyendo no sólo botones, cajas de listas y sliders sino también una grilla de datos y un calendario. Puedes mostrar tanto imágenes PNG como JPE, y reproducir media en formato WMV, WMA y MP3 con soporte para modos de demostración de 720p HDTV.

Adentro de una aplicación Silverlight

Defines la aplicaci√≥n que deseas que Silverlight presente utilizando XMAL. Esto est√° basado en especificaciones XML y fue dise√Īado por Microsoft para valores y objetos inicialmente estructurados. El siguiente documento XAML declara un objeto Canvas que contiene un bloque de texto, el cual es un elemento liviano para mostrar texto:

1

Los elementos visuales que hacen a una aplicación Silverlight necesitan ser ubicados dentro de un objeto contenedor, y esto provee una referencia en la cual pueden ser posicionados.

En nuestro ejemplo estamos usando un objeto Canvas que mide 300×100 pixeles como el contenedor y hemos programado su propiedad de Fondo para que se muestre con un color celeste. Dentro de esto hemos colocado un objeto de bloque de texto sencillo que mostrar√° el tradicional texto “Hello World!” en una fuente Verdana de 30px y 10px m√°s abajo y a la derecha de la esquina izquierda superior del objeto Canvas. Noten la sintaxis de puntos que hemos empleado para referencias las propiedades del objeto Canvas.

Ubicando el plugin de Silverlight

En verdad, mostrar una aplicación Silverlight en una página HTML necesita involucrar un poco más que una etiqueta de objeto estándar. De la forma más simple, lo siguiente muestra nuestro ejemplo dentro de un navegador:

2

Aqu√≠ hemos definido un espacio de 300 y 100 p√≠xeles en donde ubicamos el plug-in Silverlight, como se debe hacer de acuerdo a su topo MIME. Tambi√©n hemos definido un atributo de informaci√≥n para el plug-in. En la pr√°ctica esto usualmente es ignorado pero puede mejorar el desempe√Īo en algunos navegadores. Finalmente, si el cliente no posee Silverlight 2.0 instalado, el elemento anchor mostrar√° una imagen de la web de Microsoft que diga “Obtener Silverlight” y estar√° linkeada al sitio para que el usuario pueda descargar el plug-in.

El plugin Silverlight toma un gran n√ļmero de par√°metros pero en este contexto el m√°s importante es “c√≥digo”, el cual le dice al plugin donde encontrar la aplicaci√≥n. En este caso estamos dirigi√©ndolo al archivo “silverlightapp.xml”. Si esto contuviera el XAML de nuestro ejemplo anterior en simple formato de texto, y ambos de estos archivos fueran subidos a un directorio de tu servidor web, abrir la p√°gina HTML llevar√≠a a la aparici√≥n de nuestra aplicaci√≥n “Hello World!” en la esquina superior izquierda de tu navegador.

El XAML que define la aplicaci√≥n Silverlight no reside en un archivo separado. Puede ser definido dentro de la p√°gina que hace instant√°neo el plug-in usando un bloque de script especial. Por ejemplo, podemos insertar el siguiente inmediatamente antes del bloque div “pluginHost” en nuestra p√°gina HTML de arriba, la cual tambi√©n muestra algunos de los efectos especiales soportados por Silverlight.

3

Referenciamos este bloque XAML cambiando el par√°metro “fuente” para el objeto Silverlight1, de esta manera:

4

El # indica que lo que sigue las referencias es un bloque de script en la p√°gina actual. La otra diferencia principal entre este y nuestro ejemplo XMAL anterior es que hemos colocado un objeto rect√°ngulo en el Canvas. Este es un elemento de forma, como la l√≠nea, la elipse, el pol√≠gono, y como tal, soporta un rango m√°s amplio de opciones de demostraci√≥n. Los atributos RadiusX y RadiosY redondean las esquinas del rect√°ngulo, mientras que la propiedad Fill nos permite especificar un pincel. En este caso, hemos utilizado el pincel “LinearGradient” para darle sombra al rect√°ngulo en una mezcla gradual de amarillo y celeste.

La mayor√≠a de los par√°metros populares soportados por Silverlight pueden ser ignorados en esta etapa. Sin embargo, ‘minRuntimeVersion’ puede resultar √ļtil si deseas asegurarte, por ejemplo, que la versi√≥n 2.0 est√° instalada en lugar de la 1.0. Esto puede ser acompa√Īado por “autoUpgrade” que significa que se deber√≠a hacer un intento de actualizar autom√°ticamente de encontrarse una nueva versi√≥n del producto. Tambi√©n existe el par√°metro “OnLoad” que nos permite especificar una funci√≥n JavaScript que deber√≠a ejercerse una vez que se cargue el plug-in.

Utilizando PHP con Silverlight

Para el desarrollador PHP, el punto importante es que la fuente del objeto Silverlight puede ser cualquier cosa que devuelva XAML, y eso incluye un script PHP. Esto abre muchas posibilidades. Por ejemplo, la siguiente página PHP utiliza Silverlight para desplegar información extraída de una base de datos MySQL:

5
Asumiendo que esto es parte de la p√°gina “customers.php” en nuestro servidor PHP, al llamarlo con la siguiente URL har√≠a que Silverlight muestre el nombre, la ciudad y el c√≥digo postal del cliente n√ļmero 134 de la base de datos.

Habiendo extraído el valor de ID del string en cuestión, el código abre una conexión a la base de datos y luego ejerce una pregunta que obtiene la información para el cliente especificado y la coloca en el objeto $result.

La función mysqli_fetch_array() extrae la información de $result dentro de la serie $row, desde donde puede ser leido e insertado en el XAML utilizando el comando eco.

Esto está lejos del código de producción, con poco chequeo de error, pero sirve para demostrar cómo PHP puede usarse para integrar una aplicación Silverlight. De la misma manera que hicimos esto, podrías especificar una página PHP como fuente del control propio de Silverlight como en el siguiente snippet:

6

Todo lo que se necesita aquí es que la página clients.php devuelva código XAML válido que pueda ser dado por Silverlight.

A√Īadiendo interacci√≥n con JavaScript

El plugin de Silverlight expone una API JavaScript que permite que cualquier elemento XAML pueda ser manipulado con JavaScript, casi de la misma forma en que programarías en contra del DOM HTML expuesto por la página. Además, Silverlight se jacta de un amplio rango de eventos programables que abren muchas posibilidades para la interacción del usuario.

Por ejemplo, en el siguiente se agreg√≥ un atributo “x:Name” al elemento de bloque de texto. Esto permite al JavaScript acceder y manipular el elemento utilizando la funci√≥n findName. Tambi√©n hemos adjuntado una declaraci√≥n de manejador de eventos que hace que la funci√≥n de JavaScript changeText deba ser ejecutada si el usuario deja de presionar el bot√≥n izquierdo del mouse mientras el puntero est√° sobre el elemento Canvas:

7

Ahora podemos definir la funci√≥n changeText a√Īadiendo lo siguiente a la p√°gina que inicia el objeto Silverlight:

8

El script localiza el elemento que deseamos manipular utilizando la funci√≥n findName, y luego programa su atributo texto para cambiar de ‘Hello World!’ a ‘Goodbye!’ cuando el Canvas es cliqueado. Un punto importante a notar aqu√≠ es que el JavaScript es interpretado por el navegador y no por el plug-in de Silverlight. El atributo x:Name permite que la funci√≥n findName busque dentro de Silverlight aquellos objetos declarados dentro del c√≥digo XAML.

Puedes utilizar estas técnicas para responder a un amplio rango de eventos. La API te permite responder a simples movimientos del mouse, o cuando el puntero del mouse entra o sale de un objeto. Puedes responder cada vez que se presiona el botón izquierdo del mouse y cuando se suelta. La mayoría de los objetos responden también a eventos de tecla arriba o abajo, y hay facilidades para determinar la combinación de teclas. El control de TextBox soporta el evento TextChanged, mientras que el control PasswordBox soporta el evento PasswordChanged y el control de botón soporta un evento de clic.

Una de las grandes fortalezas de Silverlight es la capacidad de manipular todo lo que declares en tu código XAML a través de objeto modelo coherente.

Interactuando con un servicio web PHP

La mayoría de las técnicas discutidas hasta ahora funcionan con ambas versiones de Silverlight. Sin embargo, Silverlight 2.0 abre nuevas posibilidades para el procesamiento del lado del cliente al incluir una versión del framework .NET y el Common Language Runtime (CLR), el cual le permite correr código del lado del cliente escrito en C#, Visual Basic y muchos otros lenguajes.

El código para esos programas está comprimido en un archivo ZIP junto con la definición XAML y un manifiesto. El resultado incluye la extensión XAP y es referenciado a través del parámetro de la fuente del plugin de la misma forma en que referenciamos nuestro archivo XAML en el ejemplo anterior. Cuando el cliente abre la página que contiene el plugin, el archivo XAP se descarga y descomprime, y luego el código es compilado y ejecutado.

Esto abre nuevas posibilidades para el programador PHP ya que tales aplicaciones pueden hacer llamadas a servicios web y esos servicios pueden ser definidos en PHP.

También vale la pena notar que Silverlight 2.0 incluye Dynamic Language Runtime (DLR) que soporta IronPython, IronRuby yJScript manejado.

Eligiendo las herramientas correctas

Microsoft ha lanzado un gran n√ļmero de herramientas que podr√≠an resultar √ļtiles a cualquier programador PHP que est√© buscando trabajar con Silverlight.

Microsoft Visual Web Developer 2008 Express Edition es un dise√Īador de sitios web que soporta CSS, Javascript y AJAX.Tambi√©n se puede utilizar la herramienta Visual Studio 2008 para automatizar la producci√≥n de mucha de la infraestructura que se encuentra bajo la aplicaci√≥n Silverlight. Ambas pueden descargarse gratuitamente desde el sitio de Microsoft.

Microsoft Expression Blend 2 es una herramienta de dise√Īo gr√°fico profesional que da salida XAML, permitiendo a los dise√Īadores crear interfaces de usuarios atractivas y generar autom√°ticamente el c√≥digo requerido por Silverlight para su demostraci√≥n.

Microsoft Expression Web 2, es un dise√Īador web professional que posee muchas propiedades dise√Īadas especificamente para desarrolladores PHP. Hay opciones de men√ļ para insertar snippets PHP comunes, incluir formas predefinidas, URL, variables de sesiones, y otras estructuras. Adem√°s podremos ver toda la p√°gina en vista de dise√Īo, a pesar de que todo el c√≥digo se encuentre en un s√≥lo archivo, permiti√©ndonos ver nuestro c√≥digo en acci√≥n sin tener que dejar el editor.

Expression Web 2 entiende PHP por lo que coloreará construcciones del código del lenguaje de forma inteligente, y posee soporte completo para auto-relleno, de modo que puedas ver qué funciones y parámetros están disponibles a medida que escribes el código.

En definitiva, Silverlight posee una gran cantidad de cosas que ofrecerle a un desarrollador PHP.

Fuente: Think Vitamin


Enviar a Del.icio.us Enviar a Meneame Enviar a Digg Enviar a Fresqui Enviar a Enchilame

Comentarios (2)

  1. Max dice:

    Muy interesante el post

  2. Edwin dice:

    Esta muy interesante tu articulo te felicito pero tengo una duda, intente hacer una ligera practica con el codigo donde tienes el enlace a una base de datos, seguro esta bien la sintaxis?? porque me marca error en la version del script y si comento esa seccion, me sale un error en el canvas, la verdad si estoy muy interesado en aprender y la forma como lo tienes me parece excelente, nada mas te pido ayuda, para poderlo ejecutar, saludos

Deja tu opinión

© 2007 - 2008 elWebmaster.com | Powered by Wordpress | Diseño CSS y XHTML válido. | Algunos íconos basados en FamFamFam Mini
Acceder