Acceso a listas de SharePoint 2010 a través de Silverlight

La unión hace la fuerza, basándome en esta celebre frase, vamos a unir la capacidad de respuesta y la interactividad de SharePoint 2010, con el amplio abanico de posibilidades que ofrece Silverlight en cuanto a la creación de experiencias de usuario se refiere.

Para demostrar la productividad de esta unión, vamos a crear un Webpart de basado en Silverlight.Este leerá el contenido de las diferentes listas, que contiene el sitio de SharePoint 2010 que usaremos para este artículo.

Comenzaremos accediendo a el sitio de SharePoint 2010 sobre el que vamos a trabajar a lo largo de este artículo. Dentro del mismo vamos a crear una biblioteca de documentos, en la que guardaremos el archivo .XAP. Resultante de implementar la solución desarrollada en Silverlight.

La creación de la biblioteca de documentos la realizaremos accediendo a Acciones de Sitio->Nueva Biblioteca de Documentos, como podemos observar en la siguiente imagen:

image

Al realizar dicha acción, nos surgirá una ventana emergente en la que introduciremos el nombre de la biblioteca de documentos.En este caso la nombraremos como StoreSilverlight el resto de opciones las dejaremos como en la siguiente imagen:

image

Ahora vamos a añadir una nueva WebPart con formato Silverlight. Nos situamos en Acciones del Sitio y elegimos la acción de Editar Página.

image

Al elegir está acción, nuestra página pasará a estado de edición. En la sección Herramientas de edición elegimos la pestana Insertar. Seguidamente seleccionamos la opción Elemento Web(Webpart).

image

Ahora en la sección Categorías seleccionamos Medios y Contenidos y por último elegimos Elemento Web de Silverlight y elegimos Aceptar.

image

Realizando la anterior acción, nos aparecerá una ventana emergente donde se pedirá la url donde vamos a situar el archivo .XAP. Elegiremos la url de la biblioteca de documentos StoreSilverlight, creada con anterioridad. En la parte final de este artículo, indicaremos al webpart el lugar y nombre exacto del archivo .XAP.

image

Como podéis observar se a creado el WebPart pero no tiene contenido, así que manos a la obra para crear ese contenido. Creamos un nuevo proyecto en Visual Studio 2010, la plantilla que vamos a utilizar es Visual C#->SharePoint->2010->Empty SharePoint Project. El nombre del proyecto será ImplementarSolSP.

Al crear este proyecto, se pide que apunte hacia el sitio web con el que estamos trabajando:

image

El siguiente paso es incluir un nuevo proyecto Silverlight, para ello nos situamos en la solución(ImplementarSolSP) con el botón derecho y elegimos Añadir nuevo proyecto. Elegimos la siguiente plantilla Visual C#->Silverlight->Silverlight Application. El nombre de el proyecto será AplicacionSilverlight. Al crear el proyecto debemos deseleccionar, la opción de crear un alojamiento de prueba para el proyecto creado como podemos observar en la siguiente imagen:

image

El último paso que realizaremos en nuestro proyecto Silverlight es cambiar el fondo de nuestro proyecto, para que este se distinga cuando sea implementado en el WebPart.

Accedemos al archivo MainPage.Xaml y dentro de la etiqueta Grid incluiremos el siguiente fragmento de código:

  1.     <Grid.Background>
  2.         <LinearGradientBrush EndPoint=»0.5,1″ StartPoint=»0.5,0″>
  3.             <GradientStop Color=»Black» Offset=»0″ />
  4.             <GradientStop Color=»White» Offset=»1″ />
  5.         </LinearGradientBrush>
  6.     </Grid.Background>
  7. </Grid>

 

Ahora añadimos a ImplementarSolSP el módulo que consigue incluir el archivo .Xap de Silverlight en SharePoint 2010. Presionamos con el botón derecho sobre la solución ImplementarSolSP, elegimos añadir nuevo elemento y elegimos la plantilla Visual C#->SharePoint->2010->Module. El nombre del módulo será ModuloSilverlight.

Seguidamente en el explorador de soluciones de Visual Studio 2010, vamos a situarnos con el botón derecho sobre el archivo Sample.txt y elegiremos la opción borrar.

Ahora vamos a decir a nuestro proyecto SharePoint que implemente la solución a través de el modulo de Silverlight que hemos creado con anterioridad. Para ello, hacemos Click sobre ModuloSilverlight y en la sección propiedades de Visual Studio 2010, seleccionamos el botón desplegable de la propiedad Project Output References como podemos observar en la siguiente imagen:

image

Al presionar dicho botón aparecerá una ventana emergente en la que presionaremos sobre añadir.Al añadir un nuevo miembro debemos de elegir el tipo de implementación como ElementFile y el nombre del proyecto será AplicacionSilverlight como podemos observar en la siguiente imagen:

image

Presionamos Ok para realizar la correspondiente acción.

Ahora nos situamos en el archivo Elements.xml, dejando su contenido del siguiente modo:

  1. <?xml version=«1.0« encoding=«utf-8«?>
  2. <Elements xmlns=«http://schemas.microsoft.com/sharepoint/«>
  3.   <Module Name=«ModuloSilverlight« Url=«StoreSilverlight«>
  4.     <File Path=«ModuloSilverlightAplicacionSilverlight.xap« Url=«AplicacionSilverlight.xap« Type=«GhostableInLibrary«/>
  5.   </Module>
  6. </Elements>

Como podemos observar le decimos al módulo de carga que guarde el archivo .Xap en nuestra biblioteca de documentos StoreSilverlight.

Ahora solo queda construir la solución (F6 en Visual Studio 2010), después implementaremos la solución:

image

Finalmente comprobaremos que la solución a través del archivo AplicacionSilverlight.xap a sido añadida a la biblioteca de documentos StoreSilverlight.

image

Para que se cargue AplicacionSilverlight.xap en el Webpart deberemos situarnos en el WebPart y elegir la opción abre el panel de herramientas, al realizar dicha acción se desplegará el cuadro de opciones del WebPart como podemos observar a continuación:

image

Al presionar configurar nos pedirá una url donde está situado el archivo que va ser mostrado en la WebPart:

image

De esta forma podremos ver que efectivamente la solución de Silverlight se ha implementado en el WebPart:

image 

 

Vamos a pasar a la segunda parte del artículo que es poder acceder a las listas de nuestro sitio  SharePoint 2010 y trabajar con su contenido a través del WebPart de Silverlight creado con anterioridad.

Abrimos la solución  ImplementarSolSP con Visual Studio 2010 y accedemos al proyecto AplicacionSilverlight. Presionando sobre referencias con el botón derecho, elegimos añadir nueva referencia.En la ventana emergente elegiremos la pestaña examinar, las librerías que queremos usar son Microsoft.SharePoint.Client.Silverlight y Microsoft.SharePoint.Client.Silverlight.Runtime, que están situadas en C:Archivos de ProgramaCommon FilesMicrosoft SharedWeb Server Extensions14TEMPLATELAYOUTSClientBin .

Ahora debemos de referenciar dichas librerías en el proyecto. Abrimos AplicacionSilverlight.xaml.cs y las referenciamos añadiendo el siguiente código:

  1. using Microsoft.SharePoint.Client;

Abriremos el archivo App.xaml.cs y referenciamos nuevamente las librerías añadiendo el siguiente código:

  1. using System.Windows.Shapes;
  2. using Microsoft.SharePoint.Client;

Nos situamos en el método Application_Startup incluyendo el siguiente código en el mismo:

  1. private void Application_Startup(object sender, StartupEventArgs e)
  2. {
  3.     ApplicationContext.Init(e.InitParams, SynchronizationContext.Current);
  4.     this.RootVisual = new MainPage();
  5. }

De esta forma sincronizaremos SharePoint con el proyecto Silverlight.

Ahora vamos a modificar la interfaz del proyecto Silverlight. Abrimos AplicacionSilverlight.xaml e incluimos el siguiente código:

  1. <Grid x:Name=»LayoutRoot»>
  2.         <Grid.Background>
  3.             <LinearGradientBrush EndPoint=»0.5,1″ StartPoint=»0.5,0″>
  4.                 <GradientStop Color=»Black» Offset=»0″ />
  5.                 <GradientStop Color=»White» Offset=»1″ />
  6.             </LinearGradientBrush>
  7.         </Grid.Background>
  8.         <StackPanel Orientation=»Horizontal» >
  9.             <ListBox Name=»lbLists» Width=»300″ Height=»400″ ScrollViewer.VerticalScrollBarVisibility=»Auto» Margin=»20,20,20,20″ />
  10.             <TextBox Name=»txtDetails» Width=»200″ Height=»400″ TextWrapping=»Wrap» />
  11.         </StackPanel>
  12.     </Grid>

Como podemos observar hemos introducido dentro de Grid principal un objeto ListBox que cargará las diferentes listas de SharePoint y un objeto TextBox que se encargará de cargar los detalles de cada una de las listas.

Ahora situándonos en AplicacionSilverlight.xaml.cs vamos a incluir dos variables, _sitio se encarga de cargar el sitio y _list se encarga de cargar las diferentes listas del sitio.

  1. private Microsoft.SharePoint.Client.Web _sitio;
  2. private Microsoft.SharePoint.Client.List _list;

 

El siguiente paso es la creación del contexto basado en el sitio que utilizamos para este artículo y cargarle las listas de este sitio. Para ello debemos introducir el siguiente código en el constructor:

  1. public MainPage()
  2. {
  3.     InitializeComponent();
  4.     ClientContext context = new ClientContext(ApplicationContext.Current.Url);
  5.     // creamos un nuevo contexto sobre el sitio que vamos a trabajar
  6.  
  7.     _sitio = context.Web;//cargamos el contexto en la variable
  8.     //cuando carga el contexto cargará las listas y el sitio
  9.     context.Load(_sitio);
  10.     context.Load(_sitio.Lists);
  11.     //la llamada del contexto ha de hacerse de forma asincrona
  12.     context.ExecuteQueryAsync(new ClientRequestSucceededEventHandler(OnRequestSucceeded), new ClientRequestFailedEventHandler(OnRequestFailed));
  13. }

A continuación vamos a agregar los dos métodos que hemos nombrado en la llamada asincrona utilizada con anterioridad:

  1. private void OnRequestSucceeded(Object sender, ClientRequestSucceededEventArgs args)
  2. { //si la petición se a realizada correctamente se llama al método FillList
  3.     Dispatcher.BeginInvoke(FillList);
  4. }
  5.  
  6. private void OnRequestFailed(Object sender, ClientRequestFailedEventArgs args)
  7. {
  8. }
  9. private void FillList()
  10. {
  11.     //borra el listbox con los contenidos que tenia anteriormente
  12.     lbLists.Items.Clear();
  13.     lbLists.ItemsSource = _sitio.Lists;
  14.     //se carga en el listBox las diferentes listas
  15.     lbLists.DisplayMemberPath = «Title»;
  16.     //se muestra el campo de la lista que se va mostrar
  17. }

 

Situándonos en el área de diseño de AplicacionSilverlight.xaml, haremos doble clic sobre el ListBox, para generar el evento de cambio de selección de Item. Al realizar dicha acción accederemos directamente a AplicacionSilverlight.xaml.cs e incluiremos el siguiente código:

  1. private void lbLists_SelectionChanged(object sender, SelectionChangedEventArgs e)
  2. {
  3.     using (ClientContext context = new ClientContext(ApplicationContext.Current.Url))
  4.     {
  5.         _list = context.Web.Lists.GetByTitle(((Microsoft.SharePoint.Client.List)lbLists.SelectedItem).Title);
  6.         context.Load(_list);
  7.         context.ExecuteQueryAsync(new ClientRequestSucceededEventHandler(OnListDetailsRequestSucceeded), null);
  8.     }
  9. }
  10. private void OnListDetailsRequestSucceeded(Object sender, ClientRequestSucceededEventArgs args)
  11. { //Añadimos la  rutina de devolución de llamada para la consulta asincrónica:
  12.     Dispatcher.BeginInvoke(ShowListDetails);
  13. }

Por último añado el método que mostrará los detalles de la lista seleccionada en el ListBox en el TextBox:

  1.         private void ShowListDetails()
  2. {
  3.     string infoAboutList =
  4.         string.Format(«List Details:» + Environment.NewLine + «Title: {0}» + «Description: {1}» + «Item Count: {2}» + «Base Template: {3}» + «Base Type: {4}» + «Content Types Enabled?: {5}» + «Hidden?: {6}»,
  5.         _list.Title + Environment.NewLine,
  6.         _list.Description + Environment.NewLine,
  7.         _list.ItemCount + Environment.NewLine,
  8.         _list.BaseTemplate + Environment.NewLine,
  9.         _list.BaseType + Environment.NewLine,
  10.         _list.ContentTypesEnabled + Environment.NewLine,
  11.         _list.Hidden + Environment.NewLine);
  12.  
  13.     txtDetails.Text = infoAboutList;
  14. }

 

 

Para ver el efecto de todos los cambios que hemos realizado, construimos nuevamente la solución(F6 en Visual Studio 2010) e implementamos la solución. El paso definitivo es refrescar la página en la que hemos introducido la WebPart de Silverlight. El resultado es el de la siguiente imagen:

image

En conclusión, uniendo las dos plataformas de Microsoft podemos crear unas experiencias de usuario muy dinámicas, donde tenemos un nivel de productividad muy alto. Ahora solo queda que le deis una vuelta de tuerca a la idea inicial y conseguiréis proyectos realmente profesionales.

Material MSBREAK 2010

image

Después de realizar la charla del MSBREAK 2010 solo me queda agradecer la asistencia a toda las personas que me escuchasteis y el personal que colaboró conmigo en la charla. Deciros que podéis descargaros la presentación aquí. Las diferentes demos utilizadas en el evento las podréis obtener aquí. Espero veros pronto en próximas charlas, un saludo!!

Cambios API de Impresión en Silverlight 4 RC

Con la puesta en marcha de la versión RC de la plataforma Silverlight 4, se han producido una serie de cambios en ciertas novedades de la versión Beta de Silverlight 4 ya presentaba. Voy a reseñar los cambios que presenta la API de impresión.

En la versión Beta cuando deseabas introducir el nombre del  documento se realizaba del siguiente modo:

  1. PrintDocument docToPrint = new PrintDocument();
  2. docToPrint.DocumentName = "Nombre del documento";

En la versión RC es obligatorio introducir el nombre del documento y forma parte del método Print() como podemos observar:

  1. PrintDocument docToPrint = new PrintDocument();
  2. docToPrint.Print( "Demostración API de Impresión");

Otro de los cambios es que ha desaparecido el método StartPrint() por el método BeginPrint como podemos observar en los siguientes fragmentos de código:

En la versión Beta

  1. docToPrint.StartPrint += (s, args) =>
  2.               {
  3.                   ActivityDisplay.IsActive = true;
  4.               };

En la versión RC

  1. docToPrint.BeginPrint += (s, args) =>
  2.     {
  3.         ActivityDisplay.IsActive = true;
  4.         
  5.     };

En conclusión, si hemos realizado proyectos con la versión Beta de Silverlight 4, podemos encontrarnos que en las versión RC fallen los citados elemento.De este modo introduciendo los nuevos métodos, podemos disfrutar plenamente de la funcionalidad de impresión de la plataforma.

MICROSOFT BREAK 2010

msBreak10

El próximo 19 de abril de 2010 en la Universidad Pública de Navarra se celebrará el evento Microsoft Break en el que gracias a la invitación de Microsoft impartiré una charla sobre Silverlight. Dicho evento contará de dos charlas, la primera tratará sobre Windows Azure será impartida por Elisa (integrante del equipo de desarrollo de Microsoft) se tratarán temas como la definición de la nube y los distintos tipos de servicios que se pueden ofrecer.
En adición, se presentará Windows Azure, un sistema operativo de servicios en la nube que trabaja como entorno de desarrollo, hospedando servicios y controlándolos, con soporte a todo tipo de lenguajes y entornos, además de los propios de Microsoft.

En cuanto a la charla de Silverlight se tratará  las aplicaciones ricas en Internet consistentes en el aprovechamiento de la experiencia de usuario en herramientas y funciones de escritorios naturales. La integración del diseñador en el ciclo de desarrollo del Software, las distintas novedades que se han incluido en la versión 4 de la citada plataforma y por último como sacar un rendimiento productivo a las aplicaciones de Silverlight desarrolladas en entornos móviles.

Os animo a que asistáis a este evento registrándose  aquí.

Elaborar un Lector de RSS en Silverlight 4

Hoy voy a proponer un proyecto que en si tiene gran utilidad, un lector de Rss en Silverlight 4, en vuestras manos queda darle un toque sofisticado y de ingenio a esta idea inicial.

Vamos a empezar creando un nuevo proyecto de Silverlight 4 en Visual Studio 2010. Una vez realizado nuestro proyecto por defecto, tenemos que extraer un Rss de la página que deseemos. Leer ese Rss, ya que es un archivo XML, transformar cada nodo de ese archivo XML en una cadena y presentarla en el interfaz de usuario.

El primer paso para conseguir nuestra meta, es crear una clase con las propiedades que obtendremos del Rss y que vamos a presentar en cada una de las entradas de la interfaz de usuario. Para ello añadiremos a nuestro proyecto del lado del cliente la siguiente clase(ElementosRSS):

image

  1. using System;
  2. using System.Net;
  3. using System.Windows;
  4. using System.Windows.Controls;
  5. using System.Windows.Documents;
  6. using System.Windows.Ink;
  7. using System.Windows.Input;
  8. using System.Windows.Media;
  9. using System.Windows.Media.Animation;
  10. using System.Windows.Shapes;
  11.  
  12. namespace LeerRSS
  13. {
  14.     public class ElementosRSS
  15.     {
  16.         #region Properties
  17.         public string RSSTitulo { get; set; }
  18.         public Uri RSSEnlace { get; set; }
  19.         #endregion
  20.     }
  21. }

Seguidamente tenemos que añadir una referencia a nuestro proyecto para que pueda leer el archivo XML de la RSS de la página que nosotros decidamos. Presionamos con el botón derecho sobre Referencias y elegimos Agregar Referencia. En la pestaña .NET seleccionamos la referencia System.ServicesModel.Syndication como podemos observar en la siguiente imagen:

image

No debemos de olvidarnos de añadir las referencia a la librería mencionada con anterioridad en MainPage.xaml.cs, que es el código Behind de la interfaz de usuario de Silverlight:

 

  1. using System.Xml;
  2. using System.ServiceModel.Syndication;

 

Dentro del mismo archivo donde hemos incluido las referencia vamos a incluir tres variables. RSSUrl tendrá el valor de la URL de la página de cada una de las entradas del RSS. LectorXML será el encargado de leer el archivo XML que nos ofrece el RSS de la página. Feed que es la encargada de obtener la fuente de sindicación de las diferentes entradas del RSS.

  1. private Uri RSSUrl;
  2. private XmlReader LectorXML;
  3. private SyndicationFeed Feed;

 

 

 

En el constructor(inmediatamente después de InitializaComponent)  deberemos añadir el siguiente fragmento de código:

  1. RSSUrl = new Uri(«http://geeks.ms/blogs/rmayo/rss.aspx»);
  2. WebClient client = new WebClient();
  3. client.DownloadStringCompleted += new DownloadStringCompletedEventHandler(client_DownloadStringCompleted);
  4. client.DownloadStringAsync(RSSUrl);

Como podemos observar introducimos la url de la página de la que queremos absorber el RSS. La clase WebClient de Silverlight es la encargada de abrir el RSS(XML).Puesto que la operación se realiza de forma asincrónica se llama al método de devolución de llamada (DownloadStringCompleted) después de realiza dicha operación.

Ahora vamos a encargarnos de crear la interfaz de usuario, para ello nos situamos en MainPage.xaml, e introducimos el siguiente fragmento de código XAML:

  1. <UserControl x:Class=»LectorRSS.MainPage»
  2.     xmlns=»http://schemas.microsoft.com/winfx/2006/xaml/presentation»
  3.     xmlns:x=»http://schemas.microsoft.com/winfx/2006/xaml»
  4.     xmlns:d=»http://schemas.microsoft.com/expression/blend/2008″
  5.     xmlns:mc=»http://schemas.openxmlformats.org/markup-compatibility/2006″
  6.     mc:Ignorable=»d»
  7.     d:DesignHeight=»300″ d:DesignWidth=»400″>
  8.  
  9.     <Grid x:Name=»LayoutRoot»>
  10.         <Grid.Background>
  11.             <LinearGradientBrush EndPoint=»0.5,1″ StartPoint=»0.5,0″>
  12.                 <GradientStop Color=»Black» Offset=»0″/>
  13.                 <GradientStop Color=»#FFBBB9B9″ Offset=»0.943″/>
  14.             </LinearGradientBrush>
  15.         </Grid.Background>
  16.         <ItemsControl x:Name=»RSS» ItemsSource=»{Binding}« Margin=»163,62,150,113″ >
  17.             <ItemsControl.ItemTemplate>
  18.                 <DataTemplate>
  19.                     <HyperlinkButton x:Name=»Title» NavigateUri=»{Binding RSSLink}«
  20.              Width=»305″ Margin=»0,22,0,15″ Foreground=»#FFD5C214″
  21.              FontSize=»12″ FontWeight=»Bold»>
  22.                         <!–cada una de las entradas de RSS son introducidas en un hyperlink–>
  23.                         <TextBlock Text=»{Binding RSSTitle}« TextWrapping=»Wrap» FontSize=»18.667″ FontFamily=»Times New Roman» Foreground=»#FF0CB8DC» />
  24.                         <!–cada uno de los hyperlinks mostrará el txto de cada una de las entradas–>
  25.                     </HyperlinkButton>
  26.  
  27.                 </DataTemplate>
  28.             </ItemsControl.ItemTemplate>
  29.         </ItemsControl>
  30.     </Grid>
  31. </UserControl>

Lo que hemos introducido en la interfaz de usuario es una plantilla de datos que nos mostrará cada una de las entradas del RSS,en forma de un Hyperlink.Cada Hyperlink  tendrá el titulo de cada una de las entradas de la página de la que obtenemos el RSS.De forma que el usuario al ver cada una de las entradas pueda acceder inmediatamente a ellas.

Ahora, nos centraremos en la creación del método DownloadStringCompleted en MainPage.xaml.cs podemos recuperar el RSS en forma de una cadena. A continuación, podemos crear nuestra XmlReader y cargarlo a una variable de SyndicationFeed que trata el XML como un ‘RSS’ y nos permite utilizar sus propiedades:

  1. private void client_DownloadStringCompleted(object sender, DownloadStringCompletedEventArgs e)
  2.         {
  3.             if (e.Error == null)
  4.             {
  5.                 int itemsCount = 5;//número de entradas del RSS
  6.                 LectorXML = XmlReader.Create(new StringReader(e.Result));//lector de XML
  7.                 Feed = SyndicationFeed.Load(LectorXML); //se introduce el XML en una variable
  8.                 //de tipo SyndicationFeed
  9.  
  10.                 List<ElementosRSS> itemsList = new List<ElementosRSS>();//creamos una colección
  11.                 //para introducir los 5 elementos del RSS
  12.  
  13.                 if (Feed.Items.Count() < 5)
  14.                 {
  15.                     itemsCount = Feed.Items.Count();
  16.                 }
  17.  
  18.                 for (int i = 0; i <= itemsCount; i++)
  19.                 {
  20.                     ElementosRSS rssitem = new ElementosRSS();
  21.                     rssitem.RSSTitulo = Feed.Items.ToList()[i].Title.Text;
  22.                     rssitem.RSSEnlace = Feed.Items.ToList()[i].Links[0].Uri;
  23.                     //introducimos cada una de las propiedades en cada uno de los items de la colección de objetos
  24.                 }
  25.                 RSS.ItemsSource = itemsList;
  26.             }
  27.         }

El último paso es introducir una referencia a nuestro proyecto, para que este consiga leer el archivo xml, podemos introducir la referencia de dos formas:

1-introduciendo de forma manual la referencia

 

  1. using System.IO;

 

 

 

2-Situandonos sobre el elemento que demanda dicha librería  y eligiendo la opción de añadirla que nos ofrece el Itelligence de Visual Studio 2010 como podemos observar en la siguiente imagen:

image

Ahora ya tenemos creado un simple lector de RSS, que nos muestra las diferentes entradas de mi blog. Presionando sobre ellas accederéis al artículo en concreto como podéis observar en la siguiente imagen:

image

Aunque sea un proyecto simple podemos ampliar sus posibilidades, mostrando un resumen de cada uno de los artículos o utilizando dicho proyecto para formar parte de un Webpar en SharePoint, así que la elección la dejo en vuestras manos.

Implementar R.I.A. Services a tu web con Silverlight 4

Cada vez más se tiende a enriquecer nuestras aplicaciones, de forma que deseamos tener todas aplicaciones de negocio en el mundo web. Para lograr una experiencia de usuario enriquecedora a la par que productiva vamos a utilizar Silverlight 4 y los servicios R.I.A que esta plataforma nos ofrece.

Pero para empezar a trabajar con estos elementos lo mejor es que comencemos por comprender el termino R.I.A de Silverlight 4. Que mejor forma de comenzar el aprendizaje que saber el significado de R.I.A. (Rich Internet Application) en definitiva aplicaciones enriquecidas de internet. Pero nos nos vamos a quedar en el termino de la parte visible y bonita de este concepto, si no que vamos a entrar en la parte funcional y productiva del mismo.

El siguiente paso es la visualización de la estructura de las webs tradicionales y las web que utilizan R.I.A Services:

Web tradicionales

1

Las webs tradicionales por un lado tenían el navegador basado exclusivamente en HTML alojado en el navegador y por el otro las diferentes capas de la aplicación( Presentación, lógica y de Acceso a Datos). Lo que conlleva pesados desarrollos del lado del servidor, además del retardo en el tiempo de respuesta a la hora de trabajar con los datos contenidos en el servidor.

Aplicaciones R.I.A

2

Las aplicaciones R.I.A lo que hacen es separar la capa de presentación al lado del cliente, consiguiendo con ello un cliente mucho más versátil, eso si, también más pesado. La mayor dificultad la encontramos en que las comunicaciones con las fuentes de datos no se realizan de manera directa y ¿cómo resolvemos este problema?

3

En Silverlight 4 se introducen dos nuevos elementos (Domain Context y el Data Services) que nos ayudan a resolver el problema mencionado con anterioridad, convirtiendo nuestra aplicación en una web tradicional pero aprovechando todas posibilidades que nos ofrecen los servicios RIA.

Vamos a entrar en detalles, el elemento Data Services está situado del lado del servidor y nos va servir de nexo entre el cliente y la fuente de datos. El elemento Domain Context está situado del lado del cliente. Nos permite trabajar con los datos del servidor y utilizarlos en la capa de presentación. Estos dos elementos se asemejan a los conocidos DataSources de ASP.Net. Pudiendo realizar inserciones, actualizaciones, borrados, filtros, etc.

Una vez que hemos comprendido el concepto de los servicios R.I.A vamos aplicarlos en un proyecto de Silverlight 4. Para este ejemplo hemos utilizado Visual Studio 2010 Beta 2 y Silverlight 4 Beta.

Abrimos Visual Studio 2010 para crear un nuevo proyecto Silverlight 4 eligiendo como plantilla “Silverlight Business Application”como podemos observar en la siguiente imagen:

4

Ahora vamos a implementar los servicios R.I.A para poder disfrutar trabajando con ellos. Lo primero es agregar la fuente de datos con la que vamos a trabajar, para ello nos situamos del lado del servidor (nombre del proyecto.Web) y presionando con el botón derecho sobre la carpeta Models elegimos Añadir->Nuevo Elemento.

5

En mi caso voy a utilizar como modelo de obtención de datos ADO:NET Entity Data Model pero podríais utilizar el modelo que más se adapte a vuestras necesidades.

6

Una vez seleccionado el elemento, elegimos un nombre representativo y presionamos aceptar. En la siguiente ventana emergente elegimos Generar desde una base de datos, ya que esta va ser el tipo de fuente de datos.

7

En la siguiente ventana emergente, seleccionamos Nueva Conexión, nos aparecerá una nueva ventana en la que debemos hacer clic en el área fuente de datos sobre el botón Cambiar.

 

 

 

8

Nos surge una nueva ventana, en la que elegimos el tipo de base de datos con la que queremos trabajar. En mi caso voy a trabajar con una base de datos propia, así que elijo Microsoft SQL Server Database File, pero podéis utilizar la conocida Northwind, eligiendo la misma opción que yo he elegido.

9

Presionamos Aceptar, hacemos clic sobre el botón Buscar y elegimos la base de datos sobre la que queremos trabajar, presionamos Aceptar y Siguiente.

En la siguiente ventana emergente aparecen los elementos sobre los que queremos trabajar, en nuestro ejemplo vamos a trabajar sobre la tabla Productos.

10

 

 

Presionamos Finalizar e inmediatamente Visual Studio nos muestra el diagrama de la fuente de datos seleccionada.

11

Como ultima acción que realizaremos es construir nuestra solución (F6 en Visual Studio), para que podemos utilizar la fuente de datos.

Ahora vamos a centrarnos en el Domain Context, dicho elemento nos permitirá trabajar con las distintas entidades de la base de datos de nuestro proyecto. Para ello a desde el lado del servidor vamos añadir un nuevo elemento en la carpeta Services. En este caso vamos agregar el objeto Domain Service Class, que se encuentra situado en las plantillas web como podemos en la siguiente imagen:

12

Elegimos un nombre representativo del objeto (en mi caso StockProDomainService.cs, ya que vamos a representar una serie de productos) y finalmente presionamos sobre el botón Añadir para crear el objeto.

Al realizar dicha acción nos aparecerá una ventana emergente.En dicha ventana aparece el nombre del DomainService, además tendremos la opción de permitir acceso a dicho servicio desde el lado del cliente, opción que deberemos dejar seleccionada. Por otro lado te permite seleccionar la fuente de datos sobre la vamos a manipular las distintas entidades. En nuestro caso la fuente de datos será la creada con anterioridad, pero podríamos crear un servicio para cada fuente de datos. Además aparecerá un área donde estarán las diferentes entidades sobre las que vamos a trabajar.Deberemos seleccionar las que deseemos, así como la opción de permitir la edición de dichas entidades. Por último tenemos la opción de generar las clases correspondiente para generar metadatos, dicha opción es aconsejable seleccionarla para validar datos de entrada. En el proyecto que nos ocupa no tiene relevancia, pero si que podrá utilizarse en posteriores proyectos, así que la seleccionaremos. Este será el aspecto que tendrá nuestra ventana emergente:

13

Presionamos el botón aceptar y podemos ver como nuestro servicio de dominio está formado por los métodos de edición(Insertar, Actualizar y Borrar) de la entidad Productos. También podemos ver como nuestra clase (StockProDomainService), se encuentra instanciada a través de LINQ debido a que cualquier lectura o escritura de la fuente de datos se va a realizar a través de LINQ.

Para obtener los datos de la fuente de datos y utilizarlos del lado del cliente tenemos el método

 

 

  1. public IQueryable<Productos> GetProductos()
  2.         {
  3.             
  4.             //query que obtiene los datos indicados de la fuente de datos
  5.             return this.ObjectContext.Productos;
  6.                 
  7.         }

que nos permite realizar una consulta obteniendo los datos que deseemos, aplicándole los filtros correspondientes. En nuestro caso vamos a obtener los 30 primeros productos y los vamos a ordenar por el identificador del producto(IDPRODUCTO), de manera que nuestro método quedará del siguiente modo:

  1. public IQueryable<Productos> GetProductos()
  2.         {
  3.             
  4.             //query que obtiene los datos indicados de la fuente de datos
  5.             return this.ObjectContext.Productos
  6.                   .OrderBy(orden => orden.IDProducto)
  7.                   .Where(emp => emp.IDProducto >= 1 & emp.IDProducto <= 30);
  8.                 
  9.         }

Ahora vamos a trasladar los datos obtenidos a la interfaz de usuario.Para ello abrimos Home.Xaml, que es el archivo encargado de gestionar lo referente a la interfaz de usuario en nuestra página principal.Este elemento está situado en la carpeta Views de nuestro proyecto del lado del cliente. En la barra de herramientas de Visual Studio 2010, escogeremos el objeto DataGrid y lo desplazaremos a el área de diseño. Como podemos observar en la siguiente imagen le hemos dado el tamaño y situación de dicho objeto a nuestro criterio.

14

Seguidamente vamos a enlazar la base de datos con el DataGrid. En esta nueva versión de Silverlight y Visual Studio conseguimos realizar este paso a un solo clic, sin necesidad de escribir código como en visual Studio 2008. Para ello vamos a menú Datos y elegimos mostrar fuentes de datos.

15

Al realizar dicha acción aparecerá un nuevo menú, en el se presentan las distintas fuentes de datos como el registro de usuarios, registro del contenido de cada usuario, etc.. Pero la parte que nos interesa  es nuestro StockProDomainContext y su entidad Productos.

16

Seleccionamos la entidad Productos y la arrastramos al interior de el objeto DataGrid que se añadió con anterioridad. Al realizar este paso se a generado en Home.xaml el siguiente código:

  1. <riaControls:DomainDataSource AutoLoad=»True» Height=»0″ LoadedData=»productoDomainDataSource_LoadedData» Name=»productoDomainDataSource» QueryName=»GetProductosQuery» Width=»0″>
  2.     <riaControls:DomainDataSource.DomainContext>
  3.         <my:StockProDomainContext />
  4.     </riaControls:DomainDataSource.DomainContext>
  5. </riaControls:DomainDataSource>

 

Dicho código realiza la carga de los diferentes datos de la fuente de datos a través del método GetProductosQuery perteneciente al StockProDomainContext.

Ahora lo que tenemos que realizar es adaptar de forma correcta nuestro DataGrid para que muestre los datos de forma correcta. Seleccionamos dicho objeto en el área de diseño y modificamos las siguientes propiedades:

  • Width:Auto
  • Height:Auto
  • AutoGenerateColumns:True, esta propiedad permitirá la creación de columnas correspondientes a los campos de la entidad.

Ejecutamos el proyecto F5 y podemos comprobar como se cargan los 30 primero productos ordenados por IDProducto de la Base de datos.

17

Para no quedarnos solo con la simple carga de datos en nuestro DataGrid, vamos a cargar todos los elementos de la fuente de datos. Para filtrar los elementos en paginas de 20 elementos cada una.

Lo primero de todo nos desplazaremos StockProDomainService.cs y accedemos a el método GetProductos() y eliminamos parte de la consulta para que se carguen todos los datos, siendo el código resultante del método el siguiente:

  1. public IQueryable<Productos> GetProductos()
  2.         {
  3.             
  4.             //query que obtiene los datos indicados de la fuente de datos
  5.             return this.ObjectContext.Productos
  6.                 
  7.                 .OrderBy(orden => orden.IDProducto);
  8.                 
  9.         }

 

 

Ahora volvemos a la interfaz de usuario (Home.Xaml) para introducir en esta un nuevo elemento. Nos situamos en la barra de herramientas y sobre el área General presionamos con el botón derecho sobre dicha área, para seleccionar Elegir Elemento, como podemos ver en la siguiente imagen:

18

Al elegir esta opción surgirá una ventana emergente en la que elegiremos DataPager dentro del área de búsqueda:

19

De este modo ya tenemos agregado dicho elemento a nuestra barra de herramientas, ahora debemos arrastrarlo a la inferior del DataGrid y establecemos las siguientes propiedades para el objeto DataPager:

  • Width:Auto
  • PageSize:20 para cargar 20 elementos en cada página

El siguiente paso es volver a el menú Fuente de datos y seleccionar la entidad Productos e incluirla dentro del control DataPager (este paso es similar al que hemos hecho con el DataGrid). Ahora para ver la agrupación de todos los datos de 20 en 20 elementos deberemos ejecutar el proyecto y el resultado será el de la siguiente imagen:

20

Como podemos observar gracias a los servicios R.I.A. de Silverlight 4 y Visual Studio 2010 podemos exprimir al máximo todas las características que nos ofrecen nuestras bases de datos y todo a unos simples clics de ratón. Esta solo es una pequeña muestra del potencial de esta parte de la plataforma, debido a que hay infinidad de características que puedes agregar a tus aplicaciones Silverlight, iremos poco a poco descubriéndolas en posteriores artículos.

Ampliar la perspectiva de tu Web con Deep Zoom Composer & Silverlight 3

Todos hemos visitado alguna web, en busca de un catálogo de productos. Cierto es, que a veces, nos gustaría tener de un solo vistazo todos los productos, para que más tarde pudiéramos seleccionar el deseado. Pero esto supondría tener un catálogo de dimensiones considerables.

En este artículo propongo una idea para conseguir que todo un catálogo de artículos esté disponible a la vista del usuario, eso sí, sin ocuparnos la pantalla por completo. Además dando la posibilidad de ver al detalle la imagen de cada uno de los artículos, simplemente con el scroll del ratón. Pero para conseguir este objetivo necesitamos la ayuda de dos brazos fuertes y ágiles, informáticamente hablando claro. Usaremos Silverlight 3 y Deep Zoom Composer.

Comenzamos abriendo Deep Zoom Composer, en la ventana inicial del programa elegimos nuevo proyecto, otorgando el nombre y la ubicación del mismo como podemos observar en la imagen:

 

1

 

Ahora importamos las imágenes, que van a ser el catálogo de los distintos artículos que vamos a ofrecer al usuario. En mi caso he elegido como artículos bicicletas y accesorios de las mismas. Para importar elegimos de las tres pestañas situadas en la parte superior la de Importar.

2

Luego haremos clic sobre añadir imágenes y seleccionamos las diferentes imágenes.

3

Una vez tengamos las imágenes seleccionadas vamos a componer nuestra imagen final. Para ellos seleccionamos la pestaña Componer. Seleccionamos las imágenes que se encuentran en la parte inferior de la pantalla y las arrastramos al área de diseño como podemos observar en la siguiente imagen:

4

Al importar las imágenes al área de diseño de la imagen final, estas se encuentran de forma desorganizada. Afortunadamente las podemos ordenar haciendo clic con el botón derecho sobre ellas y eligiendo Organizar->Organizar en un Grid.

5

Nos aparecerá una nueva ventana emergente en la que se ofrece la posibilidad de alinear las distintas fotografías. En mi caso elegiré la opción restringir por filas puesto que deseo alinear las diferentes imágenes de forma vertical. El número de filas que utilizo son cinco y el Pading tomará el valor cero, debido que no quiero que haya separación entre las diferentes columnas. Esta configuración la podéis variar a vuestro antojo, además antes de confirmar podéis aplicar las distintas configuraciones y ver de forma previa la composición de las distintas imágenes.

6

Presionamos ok y se realizarán los correspondientes cambios.

Es hora de realizar la exportación de nuestra composición de imágenes. Seleccionamos la pestaña Exportar de la parte superior del programa. Elegimos la pestaña personalizado en la parte derecha del programa y elegimos el formato Silverlight Deep Zoom. Introducimos un nombre para la composición y la ubicación de la misma. Por otro lado elegimos la plantilla Deep Zoom Navigation, que es la plantilla por defecto del programa. El formato es JPG la calidad 95 y el tamaño es de 800. Presionamos OK y se exportará nuestra composición de imágenes.

7

También tenemos la posibilidad de pre visualizar la composición final antes de exportarla, si la pre visualización de la composición es correcta, presionamos Exportar y se realizará la acción.

Ahora vamos a realizar la segunda parte del proyecto, que es la creación de una aplicación Silverlight en la que vamos a incluir la composición de imágenes creada con anterioridad. A su vez le otorgaremos las funcionalidades para que el usuario pueda visionar con todo detalle cada producto.

Abrimos Visual Studio 2008, seleccionamos Proyecto->Nuevo Proyecto. En la ventana emergente seleccionamos Silverlight en el área Tipo de Proyecto. Seguidamente en el área de plantillas elegimos Aplicación Silverlight. Introducimos el nombre del proyecto y la ubicación presionamos Aceptar y se creará un nuevo proyecto Silverlight 3.

8

Una vez construido nuestro proyecto debemos construir una nueva solución F6. De este modo se cargará el archivo .xap del lado del cliente, dentro de la carpeta BIN. Nos situamos en el proyecto creado con anterioridad de Deep Zoom Composer. Copiamos la carpeta GeneratedImages en la carpeta BIN.

9

 

 

Ahora vamos a introducir el objeto que nos permite en .Net escalar las imágenes. Para ello abrimos el archivo MainPage.xaml e introducimos el citado objeto como podemos observar en el siguiente fragmento de código:

Code Snippet
  1. <UserControl x:Class=»CatalogoArticulos.MainPage»
  2.    xmlns=»http://schemas.microsoft.com/winfx/2006/xaml/presentation»
  3.    xmlns:x=»http://schemas.microsoft.com/winfx/2006/xaml»
  4.    xmlns:d=»http://schemas.microsoft.com/expression/blend/2008″ xmlns:mc=»http://schemas.openxmlformats.org/markup-compatibility/2006″
  5.    mc:Ignorable=»d» d:DesignWidth=»640″ d:DesignHeight=»480″>
  6.         <Grid x:Name=»LayoutRoot»>
  7.             <MultiScaleImage x:Name=»Escalar» Source=»../GeneratedImages/dzc_output.xml»/>
  8.         </Grid>
  9.     </UserControl>

Como podemos observar el origen del objeto que nos permite escalar las diferentes imágenes, lo obtenemos de la carpeta previamente copiada. En concreto del archivo dzc_output.xml. Que es la composición de imágenes exportadas en la primera parte de este artículo.

Si ejecutamos el proyecto (F5), podemos observar como se cargan las imágenes pero lamentablemente no tenemos control sobre los eventos del ratón para poder aumentar las imágenes y verlas con todo detalle.

Es por esta razón que debemos abrir el archivo MainPage.xaml.cs e incluir el  siguiente fragmento de código para poder controlar los distintos comportamientos del objetos escalar:

 

Code Snippet
  1. using System;
  2. using System.Collections.Generic;
  3. using System.Linq;
  4. using System.Net;
  5. using System.Windows;
  6. using System.Windows.Controls;
  7. using System.Windows.Documents;
  8. using System.Windows.Input;
  9. using System.Windows.Media;
  10. using System.Windows.Media.Animation;
  11. using System.Windows.Shapes;
  12.  
  13. namespace CatalogoArticulos
  14. {
  15.     public partial class MainPage : UserControl
  16.     {
  17.         double zoom = 1;
  18.         bool duringDrag = false;
  19.         bool mouseDown = false;
  20.         Point lastMouseDownPos = new Point();
  21.         Point lastMousePos = new Point();
  22.         Point lastMouseViewPort = new Point();
  23.  
  24.  
  25.         public double ZoomFactor
  26.         {
  27.             //establecimiento del valor de ampliación
  28.             get { return zoom; }
  29.             set { zoom = value; }
  30.         }
  31.         public MainPage()
  32.         {
  33.             InitializeComponent();
  34.             //controlar el movimiento decendente del ratón
  35.             //al presionar el botón izquierdo
  36.             this.MouseLeftButtonDown +=
  37.         delegate(object sender, MouseButtonEventArgs e)
  38.         {
  39.             lastMouseDownPos = e.GetPosition(Escalar);
  40.             lastMouseViewPort = Escalar.ViewportOrigin;
  41.  
  42.             mouseDown = true;
  43.  
  44.             Escalar.CaptureMouse();
  45.         };
  46.             //controlar el movimiento ascendente del ratón
  47.             //al presionar el botón izquierdo
  48.             this.MouseLeftButtonUp += delegate(object sender, MouseButtonEventArgs e)
  49.             {
  50.                 if (!duringDrag)
  51.                 {
  52.                     bool shiftDown =
  53.                       (Keyboard.Modifiers & ModifierKeys.Shift) == ModifierKeys.Shift;
  54.                     double newzoom = zoom;
  55.  
  56.                     if (shiftDown)
  57.                     {
  58.                         newzoom /= 2;
  59.                     }
  60.                     else
  61.                     {
  62.                         newzoom *= 2;
  63.                     }
  64.  
  65.                     Zoom(newzoom, Escalar.ElementToLogicalPoint(this.lastMousePos));
  66.                 }
  67.                 duringDrag = false;
  68.                 mouseDown = false;
  69.  
  70.                 Escalar.ReleaseMouseCapture();//actualización del objeto que nos permite escalar las imagenes
  71.             };
  72.             //localizamos la posición del puntero
  73.             //a trevés del evento MouseMove
  74.             this.MouseMove += delegate(object sender, MouseEventArgs e)
  75.             {
  76.                 lastMousePos = e.GetPosition(Escalar);
  77.                 if (mouseDown && !duringDrag)
  78.                 {
  79.                     duringDrag = true;
  80.                     double w = Escalar.ViewportWidth;
  81.                     Point o = new Point(Escalar.ViewportOrigin.X, Escalar.ViewportOrigin.Y);
  82.                     Escalar.UseSprings = false;
  83.                     Escalar.ViewportOrigin = new Point(o.X, o.Y);
  84.                     Escalar.ViewportWidth = w;
  85.                     zoom = 1 / w;
  86.                     Escalar.UseSprings = true;
  87.                 }
  88.  
  89.                 if (duringDrag)
  90.                 {
  91.                     Point newPoint = lastMouseViewPort;
  92.                     newPoint.X += (lastMouseDownPos.X – lastMousePos.X) /
  93.                       Escalar.ActualWidth * Escalar.ViewportWidth;
  94.                     newPoint.Y += (lastMouseDownPos.Y – lastMousePos.Y) /
  95.                       Escalar.ActualWidth * Escalar.ViewportWidth;
  96.                     Escalar.ViewportOrigin = newPoint;
  97.                 }
  98.             };
  99.             //llamada a la clase Helper con los paremetros de aumento
  100.             new MouseWheelHelper(this).Moved +=
  101.               delegate(object sender, MouseWheelEventArgs e)
  102.               {
  103.                   e.Handled = true;
  104.  
  105.                   double newzoom = zoom;
  106.  
  107.                   if (e.Delta < 0)
  108.                       newzoom /= 1.3;
  109.                   else
  110.                       newzoom *= 1.3;
  111.  
  112.                   Zoom(newzoom, Escalar.ElementToLogicalPoint(this.lastMousePos));
  113.                   Escalar.CaptureMouse();
  114.               };
  115.         }
  116.         //rango de aumento
  117.         private void Zoom(double newzoom, Point p)
  118.         {
  119.             if (newzoom < 0.5)
  120.             {
  121.                 newzoom = 0.5;
  122.             }
  123.  
  124.             Escalar.ZoomAboutLogicalPoint(newzoom / zoom, p.X, p.Y);
  125.             zoom = newzoom;
  126.         }
  127.     }
  128. }

 

 

 

En este fragmento de código se hace una llamada a la clase MouseWheelHelper, que permite realizar el escalado de las diferentes imágenes. El contenido de esta clase lo podéis descargar aquí. Ahora solo tenemos que situarnos en nuestro proyecto, presionar sobre él con el botón derecho y elegir Añadir->Nuevo elemento.

10

Seguidamente en la ventana emergente en el área de plantillas elegimos la plantilla clase y la nombramos como MouseWheelHelper.cs.

11

Dentro de la misma incluiremos  el contenido de la clase que hemos descargado con anterioridad. De esto modo conseguiremos que nuestro proyecto controle los eventos del ratón de forma correcta.

Finalmente ejecutamos nuestra aplicación F5, podemos observar tenemos todo el catálogo de artículos en una sola vista, si bien es cierto que podemos aumentar cada articulo y verlo con detalle sin perder calidad a la hora de realizar dicha acción.

12   13

De este modo podemos crear aplicaciones, en las que necesitemos un reducido espacio a la hora de situarlo en nuestra web. Sin embargo no ofreceremos posibilidad al usuario para poder tener una vista diferente de los distintos artículos que se ofertan en la misma. Todo utilizando la eficiencia de Silverlight 3 y la flexibilidad y creatividad de Deep Zoom Composer.

Problema Al actualizar Silverlight 3 “unable to start debugging Silverlight”

Recientemente he tenido un problema al actualizar Silverlight 2 a Silverlight 3. He instalado todos los programas y complementos que requiere Microsoft desde la página de inicio de Silverlight 3 get started. He creado diversos proyectos y hasta aquí no tengo ningún problema pero cuando trato de depurar mis proyectos me ocurre el error “unable to start debugging Silverlight”

1 

El problema radicaba en que tenía distintas versiones del SDK instaladas en mi equipo.

2

La solución pasa por desinstalar el SDK de Silverlight 2 y el plugin de la misma versión e instalar las Silverlight 3 Tools for visual Studio 2008 sp1, de este modo la próxima vez que depure mi proyecto no tuve ningún problema.

Como restaurar la plantilla Directorio de Sitios en Sharepoint 2010

SharePoint 2010 por defecto no aparece la plantilla Site Directory, esto nos causa un grave problema a la hora haber realizado una migración de 2007, ya que debemos tener visible esta plantilla si queremos crear un nuevo sitio basándonos en alguna plantilla de SharePoint 2007.

Restaurar

La plantilla Site Directory no es que no esté en SharePoint 2010 si no que está oculta. ¿Cómo solucionamos este problema?

  1. Deberemos entrar en el directorio donde está situado el ejecutable stsadm a trevés de una consola de comandos
  2. Activamos la característica "PublishingLayout" a trevés del siguiente comando:

    stsadm.exe -o activatefeature -id 5F3B0127-2F1D-4cfd-8DD2-85AD1FB00BFC

  3. Seguidamente ya puedes crear el directorio de sitios:

    stsadm.exe -o createweb -url http://sitedirectory -sitetemplate spssites#0 -title "Site Directory"
    

     

Silverlight 4

El PDC de este año ha estado cargado de un gran número de novedades (Office 2010, SharePoint2010,Visual Studio 2010,etc.). Personalmente me quedo con el lanzamiento de Silverlight 4. ¿Por qué? Porque cada vez está al mismo nivel que sus competidores, porque es una plataforma en la que cada vez se incluyen más características de su hermano de escritorio (WPF). Esta versión de Silverlight viene cargadita de controles y características nuevas:

  1. Integración completa del diseñador en Visual Studio 2010, gracia a la existencia de un área de diseño que no solo está disponible para Silverlight 4 si no que en su antecesor también contamos con ella.
  2. API de Impresión, permite al desarrollador tener el control de las distintas características del área de impresión a través de un árbol visual, también puede controlar la pre y post impresión.
  3. Control del evento del botón derecho del ratón, lo que nos permite por ejemplo cambiar de estilo a un control.
  4. Acceder a características de la Webcam y el Micrófono, solo con obtener permisos del usuario puedes acceder al micrófono y la Web Cam, además de poder tomar instantáneas de esta última.
  5. Soporte Nativo para la Rueda del Ratón, a través de una nueva API que permite manejar este elemento del ratón de forma independiente y no depender de terceros como algunas características de DeepZoom, etc…
  6. RichTextArea, este control es uno de los más solicitados, al ofrecernos la posibilidad de editar cualquier texto de forma enriquecida, mediante la activación de comandos como Negrita, Cursiva, Corrector ortográfico, etc…
  7. API Portapapeles, la inclusión de este api, nos evita depender de otras plataformas para tener acceso al área de memoria reservada para este fin.
  8. Mostrar HTML a través de el control WebBrowser, permite introducir contenido HTML en el control Silverlight 4 a través de un simple control WebBrowser, o por ejemplo utilizar una Url interactiva de un video de Youtube que se reproduzca dentro de nuestro control Silverlight 4.
  9. Privilegios elevados para aplicaciones OOB, las aplicaciones Out Of Browser que Silverlight 3 incorporaba como novedad siempre requerían elevar privilegios, con esta nueva versión podemos otorgarlos si lo creemos convenientes.
  10. Acceso a ficheros locales, en versiones anteriores solo podíamos tener acceso a ficheros locales a través de OpenFileDialog(lectura),SaveFileDialog(Escritura). Ahora podemos tener acceso a ficheros locales situados en las carpetas «My» que cada usuario tiene en su perfil, como por ejemplo «Mis documentos», «Mi Música», etc..Esta característica requiere permisos elevados.
  11. Interoperabilidad COM, si nuestras aplicaciones Silverlight necesitan comunicarse con aplicaciones Office o con periféricos que solo usan interfaz COM. Ahora pueden hacerlo simplemente creando una instancia de la API ComAutomationFactory.
  12. Notificaciones de escritorio(tipo MSN u Outlook), las características que nos ofrece MSN u Outlook en cuanto a mensajes emergentes en el escritorio al recibir un nuevo correo, un mensaje instantáneo etc.. ahora están disponibles a través de un API dedicada para este fin.
  13. Autentificación de Red, a veces necesitamos autentificar las llamadas de servicios para consumir unos determinados recursos. Puede que la persona que los reclama no sea la misma que los reclamaba con anterioridad. Para facilitar esta información disponemos de NetworkCredential a través de pila de red ClientHttp.
  14. Cambios en el Acceso Cross Domain, uno de los cambios más significativos para redes de dominios llega cuando tiene una aplicación de confianza. Los servicios que tienen un archivo de política de dominios cerrado (mediante clientaccesspolicy.xml o crossdomain.xml), si la aplicación es una aplicación de confianza (permisos elevados), el requisito de un archivo de política de dominios ya no es necesario.
  15. Disponibilidad de todo el teclado en aplicaciones de pantalla completa, en aplicaciones que se ejecutan en pantalla completa como en supermercados, tiene limitado el teclado a unas determinadas teclas, ahora permite tener disponible todo el teclado por ejemplo en controles como un textbox.
  16. Text trimming, los textbox tienen esta nueva propiedad que permite utilizar el valor WordElipse, de modo que si el texto introducido supera la superficie del control se mostrarán puntos suspensivos en el límite de dicho control.

    1 

  17. View Box en el núcleo de Silverlight, debido a la importancia que ha tomado este control está disponible en el núcleo de esta plataforma.
  18. DRM sin conexión, la próxima generación de PlayReady se centra en tres modelos de negocio el alquiler, la compra y la suscripción que nosotros podremos realizar en modo Off-line.
  19. Contenido protegido H264, como ha venido demostrando Silverlight ofrece una protección en el contenido Playready para medios codificados de esta plataforma y VC1. Pero ahora ofrece esta posibilidad a los medios de comunicación H.264.
  20. Arrastrar archivos a la aplicación Silverlight, cuantas veces queremos arrastrar archivos a nuestra aplicación Silverlight, ahora podemos mediante la activación del atributo AllowDrop en los elementos de la interfaz del usuario.
  21. Validación Asíncrona e IDataErrorInfo, Silverlight permite a través de IDataErrorInfo la realización de informes de errores de validación que pueden ser enlazados de una interfaz de usuario. Cuando una interfaz está implicada en dicho enlace, esta invoca al indexador para validar las propiedades. Si tenemos ValidatesOnDataErrors como verdadero, las propiedades de destino en la interfaz de usuario recibirán mensajes de error y mostrarán mensajes de error.

    IDataErrorInfo se limita a validar propiedades básicas. INotifyDataErrorInfo permite la validación de todas las propiedades de una entidad, además de prestar validación asincrónica para acceder a la lógica de validación en el servidor. De este modo contaremos con una propiedad HasErrors para indicarnos si contiene algún error y el método GetErrors para recuperar los errores.

  22. Enlace de Objetos dependientes, Silverlight introduce la capacidad de enlazar propiedades en un DependencyObject (DO) y no sólo en FrameworkElements.
  23. StringFormat, TargetNullValue, FallbackValue, en ocasiones generar formatos en el enlace de datos no resulta tan sencillo si no es una operación simple (formato moneda,fechas, etc.) A partir de esta versión disponemos de String Format para dar formato directamente a nuestros datos enlazados o el formato de salida de un campo. Fallbackvalue muestra un valor cuando la operación de enlace de datos no se ha realizado de forma satisfactoria. Cuando el valor del enlace de datos es null TargetNullValue nos proporciona un valor.
  24. Managed Extensibility Framework (MEF), esta propiedad es incorporada en el SDK de Silverlight 4 debido a que abarca un amplio campo, podréis encontrar una amplia información de esta propiedad aquí.
  25. Soporte para Fluid UI, para agregar experiencias más dinámicas a la interfaz de usuario se han agregado nuevos estados a los ItemControl. Estos nuevos estados (BeforeLoaded, Loaded y unloaded) ayudan a animar la transición de contenidos entre Estados en un ItemsControl .
  26. Temas Implicitos, Silverlight 4 permite crear un estilo como un recurso que puede ser utilizado implícitamente por todos los elementos de un tipo de destino. Esto permite que los desarrolladores de aplicaciones personalicen el aspecto a través de varias instancias de un control y modificar la apariencia de estas instancias de control cambiando el estilo implícito.
  27. Soporte para Google Chrome, hasta la actualidad Silverlight podía ejecutarse en Chrome pero no de manera oficial, a partir de esta versión se ha creado un grupo de trabajo entre Microsoft y Google para que Silverlight se ejecute sin contratiempos.

     

    Como podréis ver Silverlight 4 tiene unas cuantas novedades para estar jugando un buen ratos, cuidado que engacha!!

    Un último apunte aquí tenéis las descargas que necesitais para trabajar con esta nueva versión:

Silverlight Media Framework(un nuevo, marco de Reproductor de medios de comunicación de código)