Qué es silverlight?

Silverlight, es una poderosa plataforma de desarrollo que nos permite crear sitios interactivos. Muchos lo verán como algo semejante a Flash, pero en realidad, es mucho más que eso.

Qué herramientas utilizaremos?

1. Requerimos Visual Studio 2008/2010.

2. Tener Silverlight instalado en nuestro equipo.

3. Expression Blend 4 (opcional)

4. Y el gran Deep Zoom Composer, que pueden descargar de: Deep Zoom

Nuestro Objetivo

Esta vez será crear una galería de imágenes interactiva. Donde los usuarios podrán a través del explorador acercar, alejar, mover, mostrar en pantalla completa las imágenes de la galería.

Como funciona Deep Zoom

Deep Zoom nos permitirá crear una galería de imágenes en silverlight, con muchas ventajas.

La primera de ella se marca en su capacidad para dividir imágenes de gran tamaño en imágenes mas pequeñas.

La segunda, es que una vez en ejecución Deep Zoom descarga únicamente el contenido que es requerido, así que, aunque tengamos miles de imágenes

en nuestro servidor, el usuario únicamente verá pequeñas fracciones de estas.

Creando la galería

Una vez que hemos Instalado Deep Zoom lo vamos a ejecutar, una vez que ha iniciado veremos que se mostrara una pantalla vacía, la cual en su parte superior tiene tres botones:

1. Import

2. Compose

3. Export

Para iniciar, nos enfocaremos en el botón de import, el cual nos permitirá seleccionar las imágenes que utilizaremos. Así que realicémoslo, demos click a import y seleccionemos varias imágenes y le damos al botón abrir. En este momento Deep Zoom empezara a importarlas a nuestro medio de trabajo.

 

Una vez que todas las imágenes se hayan agregado al proyecto, estas serán mostradas en el panel izquierdo del mismo

Echo esto, pasamos a nuestro segundo paso. La utilización de la opción Compose.

Hacemos click en ella para cambiar el modo de trabajo e inmediatamente notaremos varias cosas:

1. En la parte inferior, Deep Zoom nos muestra una lista horizontal con todas la imágenes que se encuentran en el proyecto

2. A la derecha un panel Llamado Layers en el cual podemos jugar con nuestras imágenes para desplazarlas de posición.

3. Un entorno de trabajo vacío.

Así que, una vez visto esto. Vamos a tomar cada una de las imágenes que se encuentran en la lista inferior y la vamos a trasladar al entorno de trabajo que teníamos vacío. No debemos preocuparnos por la alineación de las mismas ya que Deep Zoom nos mostrara una línea roja cuando estén alineadas correctamente.

Podemos jugar con las posiciones y cantidades de imágenes que deseamos.

Una vez que nuestras imágenes fueron agregadas (quedando como la imagen superior) es hora de utilizar nuestra ultima opción, Export

Con ella, Deep Zoom nos mostrará nuevamente todas las imágenes, tal y como las colocamos en el paso anterior, pero además agregará una nueva barra a la derecha con todas las opciones de exportación que hay disponibles. Estas opciones las configuraremos por ahora, de la siguiente forma y presionamos export.

Cuando el proceso de exportación haya terminado, Deep Zoom nos mostrará la siguiente ventana

En este punto haremos click en Preview in browser, para ver nuestro proyecto funcionando. Así que, podemos jugar con nuestra galería para ver todas las opciones que brinda.

Si hemos puesto atención habremos notado que en la ejecución es una pagina html, pero…. como hacemos para integrarla en Asp.Net. Es mas sencillo de lo que imaginamos.

Vamos a navegar a la carpeta donde guardamos el proyecto\Exported Data\nombredelproyecto, ahí veremos que que existe un proyecto de tipo sln, es decir, un proyecto completamente compatible con Visual Studio.

Así que, abriremos el proyecto con VS y veremos dos proyectos. El primero el proyecto de tipo web con el control silverlight compilado y la pagina html preparada para funcionar, el segundo, el proyecto de silverlight.

Si abrimos la página HTML, veremos varias cosas en ella.

1. Que existe CSS registrado en el Head de la página.

2. Que hay varios scripts registrados

3. Que existe el control de silverlight.

Son esos tres elementos, los que requerimos para nuestra pagina asp.net

En una pagina nueva, en el head agregaremos el siguiente CSS

<style type="text/css">
      html, body
      {
          height: 100%;
          overflow: auto;
          font-family: Verdana;
          color: #111111;
      }
      body
      {
          padding: 0;
          margin-top: 0;
          margin-bottom: 0;
      }
      #silverlightControlHost
      {
          height: 100%;
      }
      #container
      {
          background-color: #0a0a0a;
      }
      a
      {
          font-family: Verdana;
          font-size: small;
          text-decoration: none;
          line-height: 24px;
          color: #1111a0;
      }
      .style1
      {
          color: #1F4D72;
      }
      .style2
      {
          font-size: large;
          background-color: #F0F0F0;
      }
      .style3
      {
          font-size: small;
      }
      .style4
      {
          background-color: #F0F0F0;
      }
  </style>

 

El javascript

<script type="text/javascript" src="Silverlight.js"></script>
    <script type="text/javascript">
        function onSilverlightError(sender, args) {
 
            var appSource = "";
            if (sender != null && sender != 0) {
                appSource = sender.getHost().Source;
            }
            var errorType = args.ErrorType;
            var iErrorCode = args.ErrorCode;
 
            var errMsg = "Unhandled Error in Silverlight 2 Application " + appSource + "\n";
 
            errMsg += "Code: " + iErrorCode + "    \n";
            errMsg += "Category: " + errorType + "       \n";
            errMsg += "Message: " + args.ErrorMessage + "     \n";
 
            if (errorType == "ParserError") {
                errMsg += "File: " + args.xamlFile + "     \n";
                errMsg += "Line: " + args.lineNumber + "     \n";
                errMsg += "Position: " + args.charPosition + "     \n";
            }
            else if (errorType == "RuntimeError") {
                if (args.lineNumber != 0) {
                    errMsg += "Line: " + args.lineNumber + "     \n";
                    errMsg += "Position: " + args.charPosition + "     \n";
                }
                errMsg += "MethodName: " + args.methodName + "     \n";
            }
 
            throw new Error(errMsg);
        }
    </script>

Y por último, registraremos nuestro control Silverlight (por supuesto, que este código puede variar para cada proyecto creado)

<object data="data:application/x-silverlight-2," type="application/x-silverlight-2"
            width="800px" height="600px">
            <param name="source" value="ClientBin/DeepZoomProject.xap" />
            <param name="onerror" value="onSilverlightError" />
            <param name="background" value="white" />
            <param name="initparams" value="path=GeneratedImages/dzc_output.xml,zoomIn=3" />
            <param name="minRuntimeVersion" value="3.0.40624.0" />
            <param name="autoUpgrade" value="true" />
            <a href="http://go.microsoft.com/fwlink/?LinkID=149156&v=3.0.40624.0" style="text-decoration: none">
                <img src="http://go.microsoft.com/fwlink/?LinkId=108181" alt="Get Microsoft Silverlight"
                    style="border-style: none" />
            </a>
        </object>
        <iframe style='visibility: hidden; height: 0; width: 0; border: 0px'></iframe>

 

Con esto, únicamente nos queda ejecutar nuestro proyecto y verificar que realmente funcione.

Espero, les agrade.

 

Pd: Me hubiese gustado colocar el ejemplo, pero pesas mas de 200 MB, así que es un poco complicado. Pero de igual forma pueden preguntar sobre cualquier duda.