Configurar Silverlight 3 en nuestro servidor SharePoint

Para empezar a desarrollar y utilizar Silverlight 3 debemos descargar los siguientes componentes:

  1. Silverlight 3 Windows Developer Runtime y presionamos sobre Windows Runtime como podemos observer en al imagen.

     

     1

     

  2. Silverlight 3 SDK, solo está disponible en inglés por lo que deberemos de disponer de Visual Studio en el correspondiente idioma.

Si además queremos desarrollar aplicaciones de Silverlight 3 en el servidor, tendremos que descargarnos e instalar los siguientes componentes:

  1. Silverlight 3 Tools para Visual Studio 2008 SP1 con este complemento nos será de ayuda en la parte de desarrollo del proyecto.
  2. Microsoft Expression Blend 3 + SketchFlow, si lo que queremos es una herramienta que nos facilite el diseño de aplicaciones deberemos instalar el citado elemento.
  3. Microsoft .NET RIA Services proporciona un patrón para la escritura lógica de la aplicación que se ejecuta en el nivel intermedio y controla el acceso a datos para las consultas, los cambios y operaciones personalizadas.
  4. Documentación de Microsoft Silverlight 3 sin conexión.

Ahora vamos a pasar a configurar nuestro servidor SharePoint para que se puedan ejecutar aplicaciones de Silverlight 3.

  1. Vamos a acceder al SDK de Silverlight 3 para obtener la System.Web.Silverlight.dll que es necesaria en nuestro servidor SharePoint. Esta se encuentra en c:Program FilesMicrosoft SDKsSilverlightv3.0LibrariesServer 
  2. Para ejecutar dicha dll debemos ejecutar el siguiente comando GACUTIL /if «C:Program FilesMicrosoft SDKsSilverlightv3.0LibrariesServerSystem.Web.Silverlight.dll» en una consola de comandos.

Si en el servidor no disponemos de Visual Studio 2008 deberemos realizar las siguientes acciones:

  1. Accederemos a el archivo web.config de Sharepoint utilizando el explorador de Windows, generalmente está situado en C:Archivos de programaArchivos comunesMicrosoft Sharedweb server extensions12CONFIG.
  2. Hacemos una copia de seguridad del web.config para poder recuperar el original en cualquier momento.
  3. Dentro del web.config nos situaremos en la secciones <configuration> y después en <configSections>, añadiendo:

    <sectionGroup name=«system.web.extensions« type=«System.Web.Configuration.SystemWebExtensionsSectionGroup, System.Web.Extensions, Version=3.5.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35«>

    <sectionGroup name=«scripting« type=«System.Web.Configuration.ScriptingSectionGroup, System.Web.Extensions, Version=3.5.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35«>

    <section name=«scriptResourceHandler« type=«System.Web.Configuration.ScriptingScriptResourceHandlerSection, System.Web.Extensions, Version=3.5.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35« requirePermission=«false« allowDefinition=«MachineToApplication«/>

    <sectionGroup name=«webServices« type=«System.Web.Configuration.ScriptingWebServicesSectionGroup, System.Web.Extensions, Version=3.5.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35«>

    <section name=«jsonSerialization« type=«System.Web.Configuration.ScriptingJsonSerializationSection, System.Web.Extensions, Version=3.5.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35« requirePermission=«false« allowDefinition=«Everywhere« />

    <section name=«profileService« type=«System.Web.Configuration.ScriptingProfileServiceSection, System.Web.Extensions, Version=3.5.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35« requirePermission=«false« allowDefinition=«MachineToApplication« />

    <section name=«authenticationService« type=«System.Web.Configuration.ScriptingAuthenticationServiceSection, System.Web.Extensions, Version=3.5.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35« requirePermission=«false« allowDefinition=«MachineToApplication« />

    <section name=«roleService« type=«System.Web.Configuration.ScriptingRoleServiceSection, System.Web.Extensions, Version=3.5.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35« requirePermission=«false« allowDefinition=«MachineToApplication« />

    </sectionGroup>

    </sectionGroup>

     

  4. Dentro de la sección <assemblies> perteneciente al area <compilation> añadiremos el siguiente código:

    <add assembly=«System.Core, Version=3.5.0.0, Culture=neutral, PublicKeyToken=B77A5C561934E089«/>

    <add assembly=«System.Web.Extensions, Version=3.5.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35«/>

    <add assembly=«System.Data.DataSetExtensions, Version=3.5.0.0, Culture=neutral, PublicKeyToken=B77A5C561934E089«/>

    <add assembly=«System.Xml.Linq, Version=3.5.0.0, Culture=neutral, PublicKeyToken=B77A5C561934E089«/>

    <add assembly=«System.Web.Silverlight, Version=3.0.0.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35« />

     

  5. Dentro de las etiquetas <system.web>..<pages>..<controls> introducimos el siguiente código:

    <add tagPrefix=«asp« namespace=«System.Web.UI« assembly=«System.Web.Extensions, Version=3.5.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35«/>

    <add tagPrefix=«asp« namespace=«System.Web.UI.WebControls« assembly=«System.Web.Extensions, Version=3.5.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35«/>

    <add tagPrefix=asp namespace=«System.Web.UI.SilverlightControls« assembly=«System.Web.Silverlight, Version=3.0.0.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35« />

     

  6. En <system.web>..<httpHandlers> incluimos:

    <remove verb=«*« path=«*.asmx«/>

    <add verb=«*« path=«*.asmx« validate=«false« type=«System.Web.Script.Services.ScriptHandlerFactory, System.Web.Extensions, Version=3.5.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35«/>

    <add verb=«*« path=«*_AppService.axd« validate=«false« type=«System.Web.Script.Services.ScriptHandlerFactory, System.Web.Extensions, Version=3.5.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35«/>

    <add verb=«GET,HEAD« path=«ScriptResource.axd« type=«System.Web.Handlers.ScriptResourceHandler, System.Web.Extensions, Version=3.5.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35« validate=«false«/>

     

  7. Por último en <system.web><httpModules> añadimos:

    <add name=«ScriptModule« type=«System.Web.Handlers.ScriptModule, System.Web.Extensions, Version=3.5.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35«/>

     

  8. Solo para la utilización IIS 7 añadiremos en siguiente código en la sección
    <configuration>:

     

    <system.webServer>

    <validation validateIntegratedModeConfiguration=«false«/>

    <modules>

    <remove name=«ScriptModule« />

    <add name=«ScriptModule« preCondition=«managedHandler« type=«System.Web.Handlers.ScriptModule, System.Web.Extensions, Version=3.5.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35«/>

    </modules>

    <handlers>

    <remove name=«WebServiceHandlerFactory-Integrated«/>

    <remove name=«ScriptHandlerFactory« />

    <remove name=«ScriptHandlerFactoryAppServices« />

    <remove name=«ScriptResource« />

    <add name=«ScriptHandlerFactory« verb=«*« path=«*.asmx« preCondition=«integratedMode« type=«System.Web.Script.Services.ScriptHandlerFactory, System.Web.Extensions, Version=3.5.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35«/>

    <add name=«ScriptHandlerFactoryAppServices« verb=«*« path=«*_AppService.axd« preCondition=«integratedMode« type=«System.Web.Script.Services.ScriptHandlerFactory, System.Web.Extensions, Version=3.5.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35«/>

    <add name=«ScriptResource« preCondition=«integratedMode« verb=«GET,HEAD« path=«ScriptResource.axd« type=«System.Web.Handlers.ScriptResourceHandler, System.Web.Extensions, Version=3.5.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35« />

    </handlers>

    </system.webServer>10. Add an AssemblyBinding element to the <configuration>

    <runtime>

    node: <assemblyBinding xmlns=«urn:schemas-microsoft-com:asm.v1«>

    <dependentAssembly>

    <assemblyIdentity name=«System.Web.Extensions« publicKeyToken=«31bf3856ad364e35«/>

    <bindingRedirect oldVersion=«1.0.0.0-1.1.0.0« newVersion=«3.5.0.0«/>

    </dependentAssembly>

    <dependentAssembly>

    <assemblyIdentity name=«System.Web.Extensions.Design« publicKeyToken=«31bf3856ad364e35«/>

    <bindingRedirect oldVersion=«1.0.0.0-1.1.0.0« newVersion=«3.5.0.0«/>

    </dependentAssembly>

     

    </assemblyBinding>

     

 

 

 

Al trabajar con IIS 7 evitamos la configuración de los MIME TYPE. Por otro lado si utilizamos versiones anteriores, tenemos que configurar manualmente cada Web Application en la raíz de IIS siguiendo estos pasos:

 

  1. Abrir el IIS.
  2. Presionamos con el botón derecho sobre la raíz de nuestra aplicación web
  3. Activa la casilla HTTP HEADERS.

    2


     

  4. Haremos clic en el botón MIME TYPES.

    3


     

  5. Presionaremos sobre NUEVO.

    4


     

  6. Para definir un nuevo MIME TYPE la extensión la deberemos configurar como .xap y el tipo será application/x-silverlight.

    5


     

  7. Para guardar los diferentes cambios presionamos en el botón OK

 

 

 

Utilizando los Pixel Shaders de WPF en Silverlight 3

Windows Presentation Foundation a partir del Framework 3.5 SP1 nos ofrece una serie de efectos Pixel Shaders. Vamos a provechar esta funcionalidad para aplicarla a Silverlight 3.

Lo primero que debemos hacer es descargar la última versión de WPF-FX, esta aplicación se compone de una serie de ejemplos y librerías basadas en los pixel Shaders que utilizaremos más adelante.

Abrimos un nuevo proyecto de Silverlight 3 con Visual Studio. Presionamos con el botón derecho del ratón sobre la solución situada en el explorador de soluciones. Seleccionamos añadir y proyecto existente.

 1

El proyecto que hemos descargado con anterioridad en codeplex es el que tenemos que añadir al actual proyecto. Este estará situado en WPFSLFx->SL-> SLShaderEffectLibrary-> SLShaderEffectLibrary.csproj.

Seguidamente tenemos que agregar la correspondiente librería (SLShaderEffectLibrary.dll) para poder utilizar los distintos efectos WPF. Para ello nos situamos en el explorador de soluciones, presionamos con el botón derecho sobre referencias, luego añadir referencia. En la ventana emergente, seleccionamos proyectos y encontraremos la citada librería.

 2

Para empezar a trabajar con la librería debemos referenciarla a través de el código behind, en mi caso C#. Para ello nos situamos en MainPage.Xaml.cs y lo referenciamos como se muestra en la imagen:

 3

Una vez realizados todos estos pasos, abrimos el proyecto con Expression Blend 3, podemos añadir una serie de imágenes. Seleccionando cualquier imagen, en el área de propiedades. En la sección de apariencia, añadiremos un nuevo efecto presionando sobre el botón nuevo de la propiedad efecto. En la ventana emergente expandiremos la librería SLShaderEffectLibrary.dll y elegimos el efecto deseado.

 4

De este modo ampliamos los escasos dos efectos que Silverlight 3 incorpora (Blur y Shadow). Otorgando con ello un efecto diferente a los controles y no solo a imágenes como en versiones anteriores de Silverlight, como podemos ver en la siguiente imagen:

5

Elegir diferentes fuentes en WPF

Si queremos dar un paso más, otorgando un añadido a la aplicación que estamos desarrollando, podemos dar diferentes formatos de texto a un informe, cartas, currículos etc… Para mostrar esta característica voy a elaborar una simple aplicación en la que introduciremos un texto y podremos elegir las diferentes fuentes, así como cambiar el texto a negrita o cursiva.

 1

El texto original en el que voy a realizar los diferentes cambios, cada uno de estos valores cambiará gracias a la utilización de elemento Binding que obtendrá los valores de los dos combo Box.

<TextBox FontFamily="{Binding ElementName=ElegirFuente,Path=SelectedValue}"

<!—Toma la fuente de el Item elegido en el Combo Box de Fuentes"ElegirFuentes"–>

FontWeight="{Binding ElementName=FormatoFuentes,Path=SelectedValue.Weight}"

FontStretch="{Binding ElementName=FormatoFuentes,Path=SelectedValue.Stretch}"

FontStyle="{Binding ElementName=FormatoFuentes,Path=SelectedValue.Style}"/>

<!—El formato de la letra es obtenido del Item selccionado del segundo Combo Box–>

 

El combo Box de elección de las diferentes fuentes se cargará de estas a través de la propiedad estática del Framework Fonts.SystemFontFamilies. Cada uno de los Items tomará su fuente de la citada propiedad, Tomando cada uno de los ítems la fuente correspondiente. De este modo ya puedo ver los diferentes Items formateados dándome una elección del tipo de letra más sencilla.

<ComboBox x:Name=" ElegirFuente "

ItemsSource="{Binding Source={x:Static Member=Fonts.SystemFontFamilies}}">

<ComboBox.ItemTemplate>

<DataTemplate>

<!—Se crea una plantilla para la presentación de los diferentes fuentes–>

<TextBlock FontFamily="{Binding .}" Text="{Binding Source}"/>

</DataTemplate>

</ComboBox.ItemTemplate>

</ComboBox>

 

El segundo Combo Box se encargará de dar formato a nuestra fuente (cursiva, negrita, etc.), este formato lo obtendrá de la propiedad estática FamilyTypefaces

<ComboBox

x:Name="FormatoFuentes"

ItemsSource="{Binding ElementName= FormatoFuentes,Path=SelectedValue.FamilyTypefaces}">

<ComboBox.ItemTemplate>

<DataTemplate>

<ListBox ItemsSource="{Binding AdjustedFaceNames}">

<ListBox.ItemTemplate>

<DataTemplate>

<TextBlock Text="{Binding Value}"/>

</DataTemplate>

</ListBox.ItemTemplate>

</ListBox>

</DataTemplate>

</ComboBox.ItemTemplate>

</ComboBox>

 

Como podéis observar la aplicación de las distintas fuentes y sus correspondientes formatos no requiere un gran esfuerzo de desarrollo, por el contrario si otorga una mayor calidad a nuestras aplicaciones.

Gráficas en Silverlight 3

La representación de datos de una forma atractiva a la par que funcional, es uno de las metas que Microsoft viene logrando en los últimos años. Además de las conocidas formas de creación de graficas del paquete ofimático de Office, ofreciéndonos un plus en cuanto a interfaz se refiere en su última versión. Ahora Microsoft nos ofrece la posibilidad de crear diversas gráficas en Silverlight 3.

Para empezar debemos de descargar el Silverlight 3 Toolkit, para más tarde crear una nueva aplicación Silverlight 3. La interfaz de usuario la elaboraremos a través de Page.xaml introduciendo en siguiente código:

 

<UserControl

    xmlns=»http://schemas.microsoft.com/winfx/2006/xaml/presentation»

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

    xmlns:chartingToolkit=»clr-namespace:System.Windows.Controls.DataVisualization.Charting;

assembly=System.Windows.Controls.DataVisualization.Toolkit» xmlns:d=»http://schemas.microsoft.com/expression/blend/2008″ xmlns:mc=»http://schemas.openxmlformats.org/markup-compatibility/2006″

    x:Class=»piechart.MainPage»

    Width=»640″ Height=»480″ mc:Ignorable=»d»>

 

<Grid x:Name=»LayoutRoot» Background=»White»>

<Grid.RowDefinitions>

<RowDefinition Height=»50″ />

<RowDefinition Height=»*» />

</Grid.RowDefinitions>

<TextBlock Text=»Cursos Microsoft»

Margin=»20,10,0,0″

Grid.Row=»0″

FontFamily=»Georgia»

FontSize=»18″

Foreground=»Blue» />

<chartingToolkit:Chart x:Name=»ActivityChart»

Margin=»20″

Grid.Row=»1″>

<chartingToolkit:Chart.Series>

<chartingToolkit:PieSeries Title=»Primer Trimestre»

IndependentValueBinding=»{Binding Name

DependentValueBinding=»{Binding Value}» />

</chartingToolkit:Chart.Series>

</chartingToolkit:Chart>

</Grid>

</UserControl>

Como podemos observar, he incluido un control para crear gráficos sectoriales, dentro del cual hay una serie que tiene dos propiedades una independiente y otra dependiente de los valores que se mostrarán en los diferentes sectores.

Seguidamente crearemos una nueva clase que la llamaremos Cursos en la que debemos tener en cuenta tres propiedades Name que es utilizada en el valor independiente, Value que es usada en el valor dependiente y Activities que devuelve la lista de Objetos de la clase Cursos.

using System;

using System.Net;

using System.Windows;

using System.Windows.Controls;

using System.Windows.Documents;

using System.Windows.Ink;

using System.Windows.Input;

using System.Windows.Media;

using System.Windows.Media.Animation;

using System.Windows.Shapes;

using System.Collections.Generic;

 

namespace piechart

{

public class cursos

{

public string Name { get; set; }

 

public double Value { get; set; }

 

// Lista de objetos de cursos

 

public static List<cursos> Activities

 

{

 

get

 

{

 

// se crear la lista de 5 elementos

 

    // cada valor del elemento es un número aleatorio entre o y 1 que la suma de los 5 elementos suman 1

var percentages = FillPercentages(5);

 

var activitiesList = new List<cursos>()

 

{

new cursos() {Name = «WPF», Value = percentages[0]},

 

new cursos() {Name = «Silverlight 3», Value = percentages[1]},

 

new cursos() {Name = «SharePoint», Value = percentages[2]},

 

new cursos() {Name = «Windows 7», Value = percentages[3]},

 

new cursos() {Name = «Windows Server 2008 R2», Value = percentages[4]}

 

};

 

return activitiesList;

    // devuelve la lista de objetos con sus correspondientes valores

 

}

 

}

 

 

private static List<Double> FillPercentages(int numDoubles)

 

{

 

var pctgs = new List< Double >();

 

var r = new Random();

 

double total = 0.0;

 

 

 

for (int i = 0; i < numDoubles-1;)

 

{

 

 

double val = r.NextDouble();

 

if ( val + total < 1.0)

{

 

pctgs.Add(val);

 

++i;

}

 

}

 

pctgs.Add( 1.0 – total ); // valor final

 

return pctgs;

 

}

 

}

}

Seguidamente nos situaremos en el código behind de nuestro proyecto MainPage.xaml.cs, donde debemos unir la propiedad ItemSource de nuestro objeto grafico «PieChart» con la propiedad Activities de la clase cursos. De este modo se sincronizarán los datos introducidos en la lista, con los sectores que nos mostrará la aplicación en pantalla.

using System;

using System.Windows;

using System.Windows.Controls;

using System.Windows.Documents;

using System.Windows.Ink;

using System.Windows.Input;

using System.Windows.Media;

using System.Windows.Media.Animation;

using System.Windows.Shapes;

using System.Windows.Controls.DataVisualization.Charting;

using System.Windows.Threading;

namespace piechart

{

    public partial class MainPage : UserControl

    {

        public MainPage()

        {

            InitializeComponent();

Animate();

        }

private void Animate()

 

{

 

var timer = new DispatcherTimer();

 

timer.Start(); // temporizador que llamará cada 4 segundos a el método FillPie

// cambiará los correspondientes valores

 

timer.Tick +=

 

( ( s, args ) => FillPie() );

 

timer.Interval = new TimeSpan( 0, 0, 4 ); //intervalo de 4 segundos

 

timer.Start();

 

}

private void FillPie()

 

{

 

var cs = ActivityChart.Series[0] as PieSeries;

 

if ( cs != null )

 

{

 

// genera los datos y los incluye en la propiedad del objeto    

// utilizado para crear la gráfica sectorial

 

 

cs.ItemsSource = cursos.Activities;

 

}

 

else

 

{

 

throw new InvalidCastException( «Expected Series[0] to be a column» );

 

}

 

}

}

}

La introducción de este último código será la llave para que nuestra aplicación represente una gráfica sectorial, que cambia durante un periodo de tiempo, siendo que la lectura y compresión de los datos que queremos mostrar se haga de una forma sencilla y ágil