Silverlight Streaming Service Parte 2
Invocando la aplicación Silverlight alojada en http://silverlight.live.com .
Bien... una ves que subieron una aplicación al server pueden invocarla desde cualquiero sitio web. Hay dos formas de invocarla.
- Utilizando IFrame
- Utilizando el control de silverlight streaming, el mismo provee el paso de data a la aplicación silverlight, al igual que eventos para mayor control programacional.
Para alojar una aplicación utilizando IFrame, cuando suban la aplicación al host, se les proveerá un código similar al siguiente:
<iframe src="http://silverlight.services.live.com/invoke/32/SlLogo/iframe.html" frameborder="0" width="258" height="100" scrolling="no"></iframe>
El mismo solo deben colocarlo dentro del html de su sitio y ya está incovando al servicio. (el código anterior llama a este banner de silverlight que ven abajo).
Para invocar una aplicación utilizando Control, para habilitar el control en su web hagan lo siguiente. Deben modificar el tag <html> de la siguiente forma.
<html xmlns:devlive="http://dev.live.com">
Agregá la siguiente referencia al header.
<script type="text/javascript"
src="http://controls.services.live.com/scripts/base/v0.3/live.js">
</script>
<script type="text/javascript"
src="http://controls.services.live.com/scripts/base/v0.3/controls.js">
</script>
Agregá el control silverlight a la web de esta forma:
<devlive:slscontrol
silverlightVersion="1.0"
src="/accountID/appName/" mce_src="/accountID/appName/"
installationMode="popup"
initParams="myKey=theValue">
</devlive:slscontrol>
El control tiene los siguientes atributos.
| Atributo |
Descripción |
id |
El nombre del control, único al hosting del sitio web. |
|
silverlightVersion
|
La máxima versión del Silverlight Runtime requerida para correr la aplicación. El valor debería 2.0. Si deja este valor en blanco, el usuario se verá forzado a bajar la última versión para correr la aplicación. |
src |
El nombre del servicio para esta aplicación, consiste en el identificador de cuenta y el nombre del empaquedato de la aplicación en el formado /accountID/NombreAplicacion. |
installationMode |
Especifica como muestra el cartel de Instalar Silverlight si aún no está instalado en el browser del cliente. Valores posibles son: popup, inline o none. El popup muestra un popup que dice install silvelright. El inline muestra un cartel en donde el control silverlight aparece. (210 x 130 px), El none no muestra nada. |
initParams |
Un string de usuario para pasar para inicializar data a la aplicación silverlight cuando esta es instanciada en el server. Especifica calores como pares key-value, y serparados por comas, ej "key01=valor1, key02=valor2". No deben contener espacio los valores. |
El control tiene también eventos.
| Evento |
Descripción |
onAbort |
Se dispara cuando el instalador silverlight no es instalado en el browser. |
onInit |
Se dispara antes que los atributos del control sean procesados. Útiles para colocar initParams . |
onLoad |
Se dispara cuando el frame de silverlight a sido cargado. |
onError |
Se dispara cuando un error ocurre durante la instalación del control. |
Una vez que tenemos la aplicación y ya hemos llamado a la misma desde nuestro sitio web. Podemos pasar datos a la aplicación silverlight por medio del atributo initParams. Como mencionamos antes especificamos uno o más valores páres separados por comas, un ejemplo es el siguiente código.
<devlive:slscontrol
silverlightVersion="1.0"
src="/32/HolaMundo/"
installationMode="popup"
initParams="Key1=textString,Key2=dateString">
</devlive:slscontrol>
Para colocar el valor en tiempo de ejecución, utilizamos el evento del control OnInit para llamar a una función que coloque los valores a los atributos. ejemplo.
<html xmlns:devlive="http://dev.live.com">
<head>
<script type="text/javascript"
src="http://controls.services.live.com/scripts/base/v0.3/live.js">
</script>
<script type="text/javascript"
src="http://controls.services.live.com/scripts/base/v0.3/controls.js"></script>
</head>
<body>
<script type="text/javascript">
function OnInit()
{
document.getElementById('c').setAttribute("initParams", "x=1;y=2");
}
</script>
<devlive:slscontrol
id="c"
onInit="OnInit"
silverlightVersion="1.0"
src="/32/MySilverlightApp/"
installationMode="popup">
</devlive:slscontrol>
</body>
</html>
Para dar valores, manejamos el evento OnLoad para manejar la data cuando se carga la aplicación Silverlight en el servidor. Se especifica el nombre del evento en el Loaded del root <Canvas> (para silverlight 1.1) <UserControl> (Para silverlight 2.0), ejemplo.
function hwOnLoad(sender)
{
// Recibe una referencia a la aplicación Silverlight.
var sl = sender.getHost();
// Toma el parámetro.
var params = sl.initParams;
// Define el fragmento XAML y lo crea.
var xamlFragment = '<TextBlock Canvas.Left="20" Canvas.Top="200" Text="' + params + '" />';
textBlock = sl.content.createFromXaml(xamlFragment);
// Agrega el fragmenteo XAML como hijo del root objeto principal.
sender.children.add(textBlock);
}