sábado, 20 de noviembre de 2010

Tutorial: Cargar el Plug-In Silverlight en PHP

Microsoft Silverlight4 por ser un tecnología de gran poder para correr aplicaciones RIA (Rich Internet Applications) tanto del lado Cliente como Servidor, básicamente es una tecnología multiplataforma y multinavegador.

Actualmente Silverlight 4 puede ejecutarse en las plataformas Windows, Mac y Linux con el plug-in Moonlight con los navegadores web más populares como Internet Explorer, Mozilla Firefox, Google Chrome, Safari.


El ciclo de vida del plug-in Silverlight comienza con la apertura de una página web que albergan un plug-in de Silverlight valga la redundancia. Si Silverlight no está presente, entonces la página web, automáticamente le pide al usuario instalar el plug-in. Luego activa el navegador web y empezar a descargar el paquete de solicitud. Luego en los servicios de carga esta ejecuta el núcleo de Silverlight o el (Silverlight core), seguido de CLR (Common Language Runtime) que no es más que el framework .NET en el cual la aplicación de tipo Silverlight toma y crea un dominio de aplicación para su aplicación. Después de descargar el paquete de aplicaciones CLR crea un objeto de clase de aplicación en la que se cargan las UI principales que vienen definidas en clases Heredadas del CLR y el Core de Silverlight para tener la aplicación base de ejecución Silverlight.

Como único requisito para correr aplicaciones de tipo Silverlight basta solo con descargar el Plug-in en el navegador y este podrá ejecutarse en el navegador web (similar al plug-in Adobe Flash, pero ya este es otro mundo, sigamos con Silverlight).

Silverlight viene preestablecido para iniciar en páginas de tipo ASP.NET en Visual Studio 2010 pero en este caso para los desarrolladores de PHP para poder trabajar cómodamente en Silverlight puesto que por ser un plug-in este debe de ser cargado en una página HTML a través de en los que podemos invocar al XAP de silverlight (es como el SWF de Flash que debemos cargar para poder ver las películas o animaciones).

Ahora bien básicamente en este tutorial cargaremos una aplicación de tipo Silverlight en una página PHP en la que pueda ver claramente un botón y con este al hacer click me muestre un mensaje en la aplicación,

Nota: no voy a especificar lenguaje XAML por lo que más adelante en futuras entregas si lo explicare más a fondo y a detalle, pero en este caso lo fundamental es ver como corre el plug-in de Silverlight y como invoco mi aplicación en una página PHP.

Para empezar creo mi aplicación Silverlight colocando un botón y una etiqueta oculta, a través del evento OnClick del Botón creado le asigno la cadena de texto a la etiqueta colocando “Hello PHP Developers” compilo mi aplicación y en la carpeta del proyecto se crea un archivo de tipo XAP llamado “HelloPHPdevelopers.xap” lo copio y lo pego a la carpeta donde vaya a correr mi pagina en PHP, en mi caso en la carpeta WWW del servidor Apache donde coloque ejemplo.




Luego de tener nuestro XAP en el servidor abrimos nuestra pagina PHP, en este caso Default.php en cualquier editor PHP o Web que soporte este tipo de tecnología web por ejemplo (Adobe DreamWeaver, Bluefish, Eclipse, Notepad++) y encontramos el siguiente código HTML:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />

</head>

<body>

<?php echo "Hello PHP Developers" ?>

<br/><br/>

</body>

</html>

Ahora bien dentro dentro del tag <body> y </body> procederemos a invocar el XAP de la siguiente forma con el tag <object>


<object data="data:application/x-silverlight," type="application/x-silverlight-2" width="640" height="480">


<param name="source" value="HelloPHPdevelopers.xap"/>

<param name="background" value="white" />

<param name="minRuntimeVersion" value="2.0.31005.0" />

<param name="autoUpgrade" value="true" />

<a href="http://go.microsoft.com/fwlink/?LinkID=124807" style="text-decoration: none;">

<img src="http://go.microsoft.com/fwlink/?LinkId=108181" alt="Get Microsoft Silverlight" style="border-style: none"/>

</a>

</object>


Donde el invocamos que es un “data:application/x-silverlight“ de tipo “application/x-silverlight-2” (noten que al final del nombre de tipo de aplicación dice x-silverlight-2: no quiere decir que sea conforme con la versión 2 de Silverlight, sino que es solo el nombre del tipo de aplicación puesto que esto tiende a confundir al desarrollador), también definimos el ancho y alto ( por defecto estos valores vienen en 100% respectivamente inicialmente para que el plug-in ocupe todo el espacio de la pagina pero vamos a darle un valor de tamaño 640 x 480 respectivamente).

Luego definimos los parámetros necesarios para que la aplicación corra según nuestro criterio y necesidad en el que la regla es <param(tag) seguido por el nombre del parámetro name=”nombre del parámetro” y el valor Value=”valor del nombre del parametro” />para ello necesitamos especificar el nombre del XAP con esta línea

<param name=”source” value=”HelloPHPdevelopers.xap”/>

donde colocamos el nombre del archivo que colocamos en la carpeta de prueba del servidor anteriormente citado, también necesitamos darle atributos de inicialización como el color de fondo, aunque por defecto viene en color Blanco vamos dejarlo así pero el desarrollador es libre de elegir el color en el cual el fondo se puede mostrar, el siguiente parámetro es de definición de versión del Runtime de Silverlight que ejecuta actualmente el plugin en el navegador, con estas líneas

<param name="autoUpgrade" value="true" />

<a href="http://go.microsoft.com/fwlink/?LinkID=124807" style="text-decoration: none;">

<img src="http://go.microsoft.com/fwlink/?LinkId=108181" alt="Get Microsoft Silverlight" style="border-style: none"/>


La primera es para establecer si el plug-in nos permite auto actualizar el Runtime, las otras líneas es la ruta en la cual está establecida la última versión del runtime de Microsoft silverlight, dependiendo si está instalada o no en el navegador o si necesita aplicar una actualización, dicho esto es necesario para que automáticamente al liberar una nueva versión del Runtime de Silverlight requiera una actualización este plug-in automáticamente muestra al usuario que hay una actualización y que debe de instalar y reemplazar la versión anterior.

Al explicar los parámetros básicos de invocación del plug-in para mostrar en nuestra página PHP, ya podemos contar con la tecnología Silverlight en nuestras páginas PHP.

Abrimos el navegador web, en este caso con Firefox escribimos la siguiente dirección URL

Http://127.0.0.1/nombredelacarpetaenelservidor/nombredelarchivo.php



Una vez cargado el XAP en la pagina PHP ya podemos interactuar con la aplicación Silverlight“Hello PHP Developers” en nuestra página que al hacer click en el botón coloque visible la etiqueta que muestra



Vemos así la interoperabilidad entre varias tecnologías de programación, hasta involucrando la plataforma .Net en aplicaciones web ya sean soportadas en PHP bajo esta nueva tecnología que está marcando mucha tendencia a lo que son las aplicaciones RIA en la web.

Espero les sirva de gran ayuda el conocimiento e implementación del Plug-in para que las aplicaciones Silverlight puedan correr en cualquier tecnología web de libre elección para el desarrollador, próximamente estare explicando a fondo los fundamentos del lenguaje XAML para diseñar y crear aplicaciones Silverlight.

Salu2 :D