La Escuela del Programador

Silverlight

Para el desarrollador, Silverlight es una plataforma de desarrollo para crear aplicaciones ricas en multimedia, aplicaciones de negocio para la web, de escritorio y cada vez más, aplicaciones para dispositivos móviles, todo basado en un subconjunto de. NET Framework. Para el usuario final, Silverlight es un plug-in que es compatible con múltiples navegadores, dispositivos y sistemas operativos. Además, también es posible ejecutar aplicaciones Silverlight fuera del navegador, en el escritorio. Silverlight es un plug-in gratuito que funciona como Adobe Flash Player. Se puede redistribuir con sus aplicaciones de forma libre y gratuita a través del programa de redistribución de Silverlight. Alternativamente, los usuarios pueden elegir descargarlo desde el sitio web de Microsoft.

Historial de versiones de Silverlight

Septiembre de 2007: Silverlight 1
Octubre de 2008: Silverlight 2
Julio de 2009: Silverlight 3
Abril de 2010: Silverlight 4
Diciembre de 2011: Silverlight 5

Se pueden crear aplicaciones de Silverlight con un editor muy básico, como por ejemplo el Bloc de Notas, pero es mucho más fácil, más rápido y productivo utilizar Visual Studio 2010 o Visual Web Developer 2010 Express (o las versiones beta Visual Studio 11: Visual Studio 11 Beta o Visual Studio 11 Express Beta for Web), además de las Herramientas de Silverlight para Visual Studio . Para instalar las herramientas de Silverlight 4 para Visual Studio, haga click aquí, o, para instalar las herramientas de Silverlight 5 para Visual Studio aquí. Otra herramienta que puede ser útil es Microsoft Expression Blend, (una potente herramienta de diseño, del tipo WYSIWYG), pero yo no la utilizaré en los ejemplos de este sitio.

Hola Mundo! en Silverlight

Lo primero que tiene que hacer es abrir el Visual Studio y crear un nuevo proyecto, eligiendo la opción del menú "New Project": File->New->Project, como se ve en la figura 1:

Creando una nueva aplicación de Silverlight

Figura 1 - Creando una nueva aplicación Silverlight con Visual Studio 11 Beta

Como se ve en la figura 1, yo estaré usando la versión Beta de Visual Studio 11, pero usted tranquilamente puede seguir este artículo usando la version 2010 de Visual Studio.

El siguiente cuadro de diálogo que se abre, le pregunta si desea crear un sitio Web para que sirva de anfitrión a la aplicación Silverlight que estamos creando. Para este ejemplo, desactivamos la opcion "Alojar la aplicación Silverlight en un nuevo sitio Web". Vamos a utilizar la opción de crear una página de prueba html para alojar la aplicación. En el desarrollo de aplicaciones Silverlight, hay algunas ventajas en el uso de la opción de sitio Web, pero para este ejemplo, utilizaremos la opción de crear una simple página html de prueba:

Elegir si queremos alojar la aplicación Silverlight en un nuevo sitio web o simplemente alojarla en una página html

Figura 2 - Podemos elegir entre alojar la aplicación dentro de un sitio web nuevo o utilizar una ágina de prueba

Creación de un nuevo proyecto de tipo aplicación Silverlight

Figura 3 - Visual Studio crea un nuevo proyecto Silverlight y abre el archivo "MainPage.xaml"

XAML (acrónimo pronunciado xamel del inglés eXtensible Application Markup Language, en español Lenguaje Extensible de Formato de Aplicaciones) es el lenguaje de formato para la interfaz de usuario para Windows Presentation Foundation (WPF) y Silverlight, y también es usado en Windows Workflow Foundation (WWF), para describir lógica declarativa potencialmente larga, como aquellos creados en el proceso de sistemas de modelado y herramientas. El formato de serialización para Workflows había sido llamado previamente XOML, para diferenciarlo del uso de XAML en IU , pero esa diferenciación ya no existe. Sin embargo las extensiones de los archivos que contienen marcado de workflow es todavía XOML. XAML es un lenguaje declarativo basado en XML, optimizado para describir gráficamente interfaces de usuarios visuales ricas desde el punto de vista gráfico, tales como las creadas por medio de Adobe Flash. XUL y UIML son otros ejemplos de lenguajes de interfaz basados en XML.

En la caja de herramientas, encontramos los controles nativos de Silverlight, como se ve en la figura 4:

Creacion de un nuevo proyecto de tipo aplicación Silverlight

Figura 4 - La caja de herramientas contiene los controles que podemos agregar a la interfaz gráfica, definida en el archivo xaml

Para nuestro ejemplo, vamos a agregar un control Label y mediante la ventana de Propiedades, definimos sus propiedades, para cambiar su apariencia. Ver figura 5:

Modificación de algunas propiedades del control label para cambiar su apariencia

Figura 5 - La ventana propiedades, permite modificar la apariencia del control label.

Una vez cambiadas algunas propiedades el archivo MainPage.xml queda modificado como se ve en la figura 6:

Figura 6 - El archivo MainPage.xml, en diseño.

Como se ve en la figura 6, el código XAML cambia al cambiar las propiedades. He aquí como queda la parte del código que representa el label:

<sdk:Label x:Name="lbl1" HorizontalAlignment="Left" Height="165" 
              Margin="19,21,0,0" VerticalAlignment="Top" 
              Width="637" FontFamily="Berlin Sans FB" 
              FontWeight="Normal" FontSize="42" 
              Content="Hola Mundo! desde Silverlight...."
              Foreground="#FFE2D01A" BorderBrush="#FFEC2B2B" 
              Background="#FF08105F" Grid.RowSpan="2">
            <sdk:Label.Effect>
                <DropShadowEffect Color="Red" BlurRadius="19" 
                                     ShadowDepth="20"/>
            </sdk:Label.Effect>
        </sdk:Label>

Al correr la aplicación, se carga en el browser por defecto la página "HolaMundoTestPage.html", generada automáticamente por Visual Studio, como se ve en la figura 7:

La página de prueba cargada en Internet Explorer.

Figura 7 - Al ejecutarse la aplicación se carga una página HTML de prueba, que contiene la aplicación Silverlight.

En importante observar el código html de esta página de prueba. Para ello vamos al menú Ver->Codigo Fuente, en el IE y observamos el bloque <body> que será el siguiente:

<body>
    <form id="form1" runat="server" style="height:100%">
    <div id="silverlightControlHost">
        <object data="data:application/x-silverlight-2," 
              type="application/x-silverlight-2" 
              width="100%" height="100%">
	    <param name="source" value="HolaMundo.xap"/>
	    <param name="onError" value="onSilverlightError" />
	    <param name="background" value="white" />
	    <param name="minRuntimeVersion" value="5.0.61118.0" />
	    <param name="autoUpgrade" value="true" />
	    <a 
                  href="http://go.microsoft.com/fwlink/?LinkID=
                                       149156&v=5.0.61118.0" 
                     style="text-decoration:none">
 		  <img src="http://go.microsoft.com/fwlink/?LinkId=
                                              161376" 
                                   alt="Get Microsoft Silverlight" 
                                  style="border-style:none"/>
		  </a>
	</object>
          <iframe id="_sl_historyFrame" 
            style="visibility:hidden;height:0px;width:0px;border:0px">
          </iframe>
      </div>
    </form>
</body>

Como puede ver en el código de arriba, la página html, tiene embebida la aplicación Silverlight que hemos creado, utilizando el tag "<object>", de una manera similar a si se tratara de una applet de java Desde hace muchos años, siempre fué un anhelo construir una aplicación que tanto corra como una aplicación Web, como una aplicación de escritorio, sin hacer cambios en el código fuente. Con Silverligth esto se ha logrado y para hacer que nuestra aplicación corra como una aplicación desktop, ¡sólo hace falta seleccionar algunas opciones con el mouse! Vayamos al Solution Explorer de Visual Basic, hagamos click con el botón derecho en el nombre de nuestra aplicación y seleccionemos la opción "Propiedades" en el menú desplegable que aparece, como se ve en la figura 8:

Haciendo que la aplicación Silverliht, corra como una aplicación de escritorio.

Figura 8 - Haciendo que la aplicación Silverlight, corra como una aplicación de escritorio.

Esto abrirá la ventana de propiedades del proyecto y como se ve en la figura 9, seleccionamos el check box y luego el boton

Figura 9 - Seleccionando el cuadro de chequeo "Habilitar correr la aplicacion fuera del browser", ya logramos la maravilla que el mismo código se ejecute ahora como una aplicación Windows.

Si bien ya con este simple procedimiento lograríamos que la aplicación corra como una aplicación desktop, vamos a configurar la altura y el ancho de la ventana, para que corra de manera que la ventana luzca lo mejor posible. Para ello, hacemos click en el botón "Out-of-Browser Settings" (que está debajo del check box que seleccionamos recién). Aparecerá la ventana "Out-of-Browser Settings" y la configuramos como se ve en la figura 10:

Figura 10- Cambiamos el título de la ventana (Ponemos "Hola Mundo!"), y establecemos un ancho a la ventana de 720 y una altura de 220.

Ahora volvemos a correr la aplicación y veremso que esta vez se ejecuta ya no dentro de una página html, si no como una aplicación windows independiente. Ver figura 11:

Figura 11 - Al correr de nuevo la aplicación, vemos que ahora corre como una aplicación desktop.

En este artículo hemos creado nuestra primera y muy sencilla aplicación Silverlight y hemos visto con que facilidad puede correrse en un un browser o fuera del mismo, como una aplicación de escritorio. En otros artículos iremos viendo como agregar gráficos o hacer aplicaciones RIA (Rich Internet Applications) con Silverlight.