Agregar una aplicación Silverlight a SharePoint

Como anteriormente comentamos, la forma de incrustar una aplicación Silverlight en SharePoint es la misma que utiliza Visual Studio al crear el sitio huésped, es decir agregar un objeto y pasarle como parámetros el archivo .xap y lo que necesite.

Tomando esto en cuenta, diseñaremos en Expression Blend un reproductor de videos o audio Silverlight y agregaremos el archivo .xap en un web part.

Comenzamos creando el proyecto en Expression Blend, agregamos un control ExpressionMediaPlayer y definimos la ruta en donde se encuentra el archivo a reproducir. Compilamos y corremos, verificando que no haya errores.

SilverlightWebPart1

SilverlightWebPart1

Ubicamos el archivo .xap generado y entonces lo copiamos a nuestro servidor WSS.
Luego de esto, en el servidor WSS creamos un proyecto SharePoint web part, y creamos su carpeta de recursos, colocamos ahí el archivo .xap que copiamos antes, y agregamos el método Render:

protected override void Render(HtmlTextWriter writer)
{
    base.RenderContents(writer);

    string html="";
    /*Agregar el objeto silverlight a la pagina SharePoint*/
            html += "<div id="silverlightControlHost">";
            html += "</div>";

     writer.Write(html);
}

Gracias

Paso de parámetros a una aplicación Silverlight

Anteriormente creamos un ejemplo de una aplicación Silverlight y de cómo se incluía dentro de una página web mediante HTML, veíamos que uno de los parámetros del objeto es la ruta donde se encuentra su archivo .xap, entonces, ¿Es posible pasarle parámetros al proyecto Silverlight?, la respuesta es sí.

Supongamos que se desea mostrar una aplicación Silverlight en alguna pagina web, la aplicación debe mostrar una animación fija, pero también debe mostrar el nombre de usuario que esta autenticado en dicha pagina, este es dato variable, dependiendo de qué usuario este dentro de la pagina. En este contexto se tomaría del servidor el nombre de usuario actual, y este dato se pasaría como parámetro a Silverlight, para que este lo muestre.

¿Cómo se soluciona este problema?, a continuación se explica lo que se debe hacer para agregar parámetros a la llamada del objeto Silverlight.

1. Una vez creado el proyecto Silverlight, veremos en el explorador de soluciones los archivos App.xaml y MainPage.xaml, dentro de App.xaml se encuentra el archivo App.xaml.cs, en este archivo localizamos el método Application_Startup(object sender, startupEventArgs e) y dentro de el, agregar los parámetros:

private void Application_Startup(object sender, StartupEventArgs e)
{
      // parámetro llamado nombre
      string n = e.InitParams["nombre"];     
      //Pasar a la página principal como parámetro  
      this.RootVisual = new MainPage(n);   
}

2. Dentro de MainPage.xaml buscamos el archivo MainPage.xaml.cs, lo abrimos y modificamos el constructor para recibir el parámetro y dentro del constructor hacemos los cambios a la aplicación:

public MainPage(string nombre)
{
  InitializeComponent();

  //En Silverlight debemos tener un textbox para mostrar el nombre
  textbox.Items.Clear();
  textbox.Items.Add(nombre);
}

3. Al momento de incluir el objeto, agregamos el parámetro:

&lt;object data=”data:application/x-silverlight-2,” type=”application/x-silverlight-2″ width=”100%” height=”920px”>
<param name=”source” value=”../ClientBin/Calendario.xap?ignoreme=<%=System.DateTime.Now.ToUniversalTime() %>”/>
<param id=”init” name=”initParams” value=”rpe=<%=Session[“Usuario”] %>, rol=<%=Session[“Rol”] %>” />
<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=”Obtenga Microsoft Silverlight” style=”border-style:none”/>
</a>
</object><iframe id=”Iframe1″ style=”visibility:hidden;height:0px;width:0px;border:0px”></iframe&gt;

Gracias

Crear aplicaciones Silverlight

Una aplicación/animación Silverlight puede ser utilizada en SharePoint, dándole a esta plataforma otra poderosa herramienta para desarrollos más completos visualmente y de multimedia.

Silverlight utiliza un lenguaje basado en XML llamado XAML (eXtensible Application Markup Language) es el lenguaje de formato para la interfaz de usuario para la Base de Presentación de Windows (WPF).
De la compilación de este lenguaje se obtiene un paquete de archivos que son comprimidos usando ZIP y almacenados en un archivo .xap, el cual se utilizara como recurso para ser agregado a SharePoint.

Para generar una aplicación Silverlight utilizaremos Microsoft Expression Blend 3, esta herramienta nos ayudara a diseñar la aplicación gracias a su editor WYSIWYG, intellisense y herramientas de compilación y depuración. Cabe mencionar que Visual Studio también puede crear y compilar proyectos Silverlight, pero Expression Blend nos proporciona un mejor manejo de estos proyectos.

Los pasos para crear una aplicación son:

1. Abrir Expression Blend.
2. Crear un Nuevo Proyecto de tipo Silverlight.
Aquí elegiremos también si aplicación estará hospedada en un sitio web, o estará sola.
Esto es indiferente a la aplicación en sí, pero escogeremos que quede hospedada en un sitio web para darnos cuenta cómo es que la pagina hace uso de la aplicación Silverlight.
3. Elegimos el nombre, la ubicación y el lenguaje (C# o Basic). Yo escogeré C#.
4. Luego de esto, se abrirá el proyecto mostrándonos el LayoutRoot, es decir la capa sobre la cual se agregaran los controles, imágenes, textos, comportamientos, eventos, etc.
5. Como ejemplo, crearemos un círculo, y agregamos sobre él, el comportamiento MouseDragElementBehavior, quedando el código XAML de la siguiente manera:

<UserControl
	xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
	xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
	xmlns:i="clr-namespace:System.Windows.Interactivity;assembly=System.Windows.Interactivity" xmlns:il="clr-namespace:Microsoft.Expression.Interactivity.Layout;assembly=Microsoft.Expression.Interactions"
	x:Class="Efectos.MainPage"
	Width="640" Height="480">
	<Grid x:Name="LayoutRoot" Background="White">
		<Ellipse Fill="#FFA37171" Stroke="Black" HorizontalAlignment="Left" Margin="145,84,0,0" Width="104" Height="83" VerticalAlignment="Top">
			<i:Interaction.Behaviors>
				<il:MouseDragElementBehavior/>
			</i:Interaction.Behaviors>
		</Ellipse>
	</Grid>
</UserControl>

6. Compilamos y verificamos que todo esté bien.
7. Corremos la aplicación y listo.

Por último, es interesante saber como la pagina web host, incluye el proyecto Silverlight, lo podemos ver abriendo el archivo EjemploTestPage.html y en la parte del body, observamos la etiqueta y dentro de este la etiqueta . Este método es el mismo que utilizaremos para incluir Silverlight en SharePoint.


Gracias