Uno de los Blogs a los que estoy suscrito es el de Janne Mattila quien siempre tiene cosas muy interesantes sobre Sharepoint, generalmente avanzadas y muy pero muy útiles e interesantes, en las últimas semanas Janne publicó un post sobre Silverlight y Sharepoint que va en la misma línea de trabajo que estoy siguiendo en los últimos días. Con el permiso de Janne, traduzco el contenido a continuación para todos aquellos que prefieren el español. J .

(Nota: no me considero traductor, ni espero que esto sea una traducción textual, lo importante es el sentido general, comentarios son bienvenidos como siempre)

Creando aplicaciones de Silverlight 1.1 para SharePoint con VS2008

El título lo dice todo.:-) Mi plan es crear un pequeño instructivo paso a paso de cómo crear una aplicación Silverlight 1.1 con Visual Studio 2008 y luego ejecutarla en SharePoint. Y como no quiero instalar un montón de cosas en mi ambiente de Sharepoint cree una Web part que sirva de host a la aplicación Silverlight. Todo el desarrollo se ha realizado fuera del ambiente de Sharepoint.

Si Silverlight es algo nuevo para usted le sugiero que empiece revisando silverlight.net y un ejemplo muy interesante en Coding4Fun Silverlight 8-Ball example. El primer enlace es el punto de enlace para el desarrollo usando Silverlight y el segundo enlace es un ejemplo muy interesante que muestra cómo crear un juego de 8-bolas usando Silverlight.

Ahora sabe más de Silverlight 🙂 así que empecemos con el ejemplo:

Tengo VS2008 corriendo en Vista y he descargado e instalado Microsoft Silverlight 1.1 Tools Alpha for Visual Studio 2008 para ayudarme a desarrollar las aplicaciones Silverlight. Esto agrega una nueva plantilla con toda la configuración necesaria para construir aplicaciones de Silverlight 1.1. También tengo SharePoint corriendo en Virtual PC y está configurada para conectarse directamente a mi maquina host (Ej: al escribir http://demo1:1000 en mi maquina host se conecta al SharePoint virtualizado).

Lo primero es modificar el SharePoint de forma que pueda hospedar mi nueva aplicación. Agreguemos algunas carpetas bajo el directorio _LAYOUTS:

ClientBin es la carpeta que contendrá todos los archivos .dll requeridos en el cliente por Silverlight (=Si usted compila su proyecto Silverlight automáticamente tendrá en su proyecto la carpeta ClientBin que contiene todos los ensamblados del cliente necesarios para el proyecto.).

La carpeta Silverlight es usada para almacenar los archivos .xaml (=Las páginas Silverlight). También necesito cambiar la configuración de las dos carpetas para que las cosas funcionen. Primero cambiare la configuración de la carpeta ClientBin:

Asigne solo acceso de lectura (Read) y también permisos de ejecución (Execute) a nadie (None) :

Luego adicionaré .dll para permitir tipos mime (y .pdb para propósitos de depuración en el futuro) :-):

Entonces cambiaré la configuración de la carpeta Silverlight para que soporten las extensiones .xaml:

Ahora el SharePoint está configurado… pero creemos una web part que sirva de host la aplicación Silverlight en la página. Aquí está el código que hace esto:

   1:  using System;

   2:  using System.Runtime.InteropServices;

   3:  using System.Web.UI;

   4:  using System.Web.UI.WebControls.WebParts;

   5:   

   6:  namespace Silverlight_Web_Part

   7:  {

   8:    [Guid(“fc852641-9955-433c-945e-d773f46351eb”)]

   9:    public class Silverlight_Web_Part : WebPart

  10:    {

  11:      string xamlFile;

  12:      [WebBrowsable(true), Personalizable(true)]

  13:      public string XamlFile

  14:      {

  15:        get { return xamlFile; }

  16:        set { xamlFile = value; }

  17:      }

  18:   

  19:      public Silverlight_Web_Part()

  20:      {

  21:        this.ExportMode = WebPartExportMode.All;

  22:      }

  23:   

  24:      protected override void Render(HtmlTextWriter writer)

  25:      {

  26:        if (string.IsNullOrEmpty(this.XamlFile) == false)

  27:        {

  28:          writer.Write(“<div id=’SilverlightControlHost’ “ + 

  29:            “style=’width: 640px; height: 480px;’></div>”);

  30:          writer.Write(“<script type=’text/javascript’ “ +

  31:              “language=’JavaScript’ src=’/_layouts/Silverlight.js’></script>”);

  32:          writer.Write(“<script type=’text/javascript’ “ +

  33:            “language=’JavaScript’ src=’/_layouts/SilverlightStarter.js’></script>”);

  34:          writer.Write(“<script type=’text/javascript’ “ +

  35:            “language=’JavaScript’>createSilverlight(‘” + xamlFile + “‘);</script>”);

  36:        }

  37:        else

  38:        {

  39:          writer.Write(“Xaml file is not selected.”);

  40:        }

  41:      }

  42:    }

  43:  } 

Mi web part usa los archivos Silverlight.js y SilverlightStarter.js. SilverLight.js es el mismo archivo que se incluye en el proyecto cuando se crea un proyecto Silverlight 1.1 en VS. SilverlightStarter.js es prácticamente una copia del archivo de la plantilla del proyecto pero lo he modificado un poco para que soporte que el archivo XAML sea pasado como parámetro:

   1:  function createSilverlight(filename)

   2:  {

   3:    Silverlight.createObjectEx({

   4:      source: filename,

   5:      parentElement: document.getElementById(“SilverlightControlHost”),

   6:      id: “SilverlightControl”,

   7:      properties: {

   8:        width: “100%”,

   9:        height: “100%”,

  10:        version: “1.1”,

  11:        enableHtmlAccess: “true”

  12:      },

  13:      events: {}

  14:    });

  15:     

  16:    document.body.onload = function() {

  17:     var silverlightControl = document.getElementById(‘SilverlightControl’);

  18:     if (silverlightControl)

  19:     silverlightControl.focus();

  20:    }

  21:  }

Y si verifica el código del web part en la línea 35 notará que paso como parámetro el archivo XAML que ha sido configurado en las propiedades del web part:

Ahora solo tenemos que adicionar algo de código Silverlight y estamos listos. Aquí está el contenido del archivo Page.xaml (=La Aplicación :-):

   1:  <Canvas x:Name=”parentCanvas”

   2:      xmlns=”http://schemas.microsoft.com/client/2007″ 

   3:      xmlns:x=”http://schemas.microsoft.com/winfx/2006/xaml” 

   4:      Loaded=”Page_Loaded” 

   5:      x:Class=”MySilverLight.Page;assembly=/_LAYOUTS/ClientBin/MySilverLight.dll”

   6:      Width=”640″

   7:      Height=”480″

   8:      Background=”White”    

   9:      >

  10:   

  11:   <Rectangle x:Name=”MyRectangle” 

  12:         Canvas.Top=”25″ Canvas.Left=”25″ 

  13:         Width=”50″ Height=”50″ 

  14:         Fill=”Gray” MouseLeftButtonDown=”MyMouseLeftButtonDown” />

  15:   <TextBlock x:Name=”MyText” 

  16:         Text=”Click either rectangle or me” 

  17:         MouseLeftButtonDown=”MyMouseLeftButtonDown” />

  18:  </Canvas>

Y el code behind Page.xaml.cs contiene el siguiente código:

   1:  using System;

   2:  using System.Windows.Controls;

   3:   

   4:  namespace MySilverLight

   5:  {

   6:    public partial class Page : Canvas

   7:    {

   8:      DateTime started = DateTime.Now;

   9:   

  10:      public void Page_Loaded(object o, EventArgs e)

  11:      {

  12:        // Required to initialize variables

  13:        InitializeComponent();

  14:      }

  15:   

  16:      public void MyMouseLeftButtonDown(object o, EventArgs e)

  17:      {

  18:        string runningTime = (DateTime.Now – started).TotalSeconds.ToString(“F2”);

  19:        System.Windows.Shapes.Rectangle rectangle = o as System.Windows.Shapes.Rectangle;

  20:        if (rectangle != null)

  21:        {

  22:          MyRectangle.Opacity = 1;

  23:          MyText.Text = “You clicked rectangle! Application has been running for “ + 

  24:            runningTime + ” seconds.”;

  25:        }

  26:   

  27:        System.Windows.Controls.TextBlock textBlock = o as System.Windows.Controls.TextBlock;

  28:        if (textBlock != null)

  29:        {

  30:          MyRectangle.Opacity = MyRectangle.Opacity * 0.8;

  31:          MyText.Text = “You clicked text block! Rectangle is fading away…”;

  32:        }

  33:      }

  34:    }

  35:  }

Ahora usted probablemente estará ansioso de saber lo que hace la aplicación 🙂 Aquí esta nuestra aplicación luego de un par de solicitudes (request):

Y si el usuario hace click en el rectangulo…

Si el usuario hace click en el texto…

Ahora tenemos el ambiente de desarrollo listo así que podemos construir y probar la aplicación Silverlight 1.1 y hospedarlo en SharePoint. Aquí están los pasos que tiene que seguir para probarlo usted mismo.

1) Cree un proyecto Silverlight en VS2008
2) Escriba el Código 🙂
3) Construya la solución
4) Copie el contenido del folder ClientBin*.* al folder _LAYOUTSClientBin del Sharepoint
5) Copie los archivos *.xaml de su proyecto a la carpeta Silverlight del SharePoint. (Nota: tiene que verificar que este correcto el path en x:Class! Vea mi Page.xaml y la línea 5 en el fuente)
6) Cree la página que usa el web part Silverlight y seleccione su nuevo archivo XAML

Esta fue mi pequeña introducción a Silverlight 1.1 con SharePoint. En este ejemplo yo use archivos .xaml estáticos ubicándolos en el sistema de archivos para hacer todo tan simple como sea posible… solo quería demostrar como usted puede empezar a experimentar con esta combinación. Esto puede ser ampliado y mejorado en muchas formas diferentes y probablemente volveré a este tema en futuros posts.

De todas formas… Happy hacking!
J

Hasta aqui el Post de Jane.

Espero que sea de Ayuda.

Juan Carlos Peláez

MCTS Distributed Applications

Arquitecto de Software.

Keywords: Silverlight, Sharepoint, VS2008, WSS 3.0