[Webcast] - Habilitar el uso de Silverlight en SharePoint

Hola, el día de hoy quiero compartir con la comunidad, un pequeño video que grabe en dias pasados en el que describo de manera breve, los pasos necesarios para configurar el uso de Silverlight en la plataforma SharePoint.

Cabe mencionar que si alguien, tiene alguna duda o sugerencia para nuevos temas de Webcast dejen sus comentarios, ya que mediante estos me estaré basando para futuras entregas.

Habilitar Assembly Caching en Silverlight 3

Una de las muchas nuevas caracteristicas de Silverlight 3, es la posibildad de habilitar la caracteristica Assembly Caching, la cual nos permite indicarle al navegador que cargue los ensamblados que nuesta aplicación necesita (archivo .xap) bajo demanda y no todos al cargar la página, como funcionaba en la versión 2.0.

Para lograr esto, solo debe seleccionarse la opción “Reduce XAP size by using appication library caching”, en el apartado de propiedades de nuestro proyecto Silverlight. También debemos notar como ahora se crean archivos con extensión.zip para cada uno de los ensamblados que la aplicación ocupa y que serán descargados bajo demanda.  Como se puede observar a continuación:

Cuando la opción no es seleccionada, el archivo resultante xap, es más grande que cuando la opción es seleccionada. Como se puede ver en las siguientes imágenes comparativas.

Opción NO habilitada

Opción habilitada

Pongamos especial atención en el archivo AppManifest.xaml y la sección Deployment.ExternalPart, en la cual se indica cuales son los ensamblados que nuestra aplicación referencia y que serán descargados cuando así se requiera, estos son los ensamblados “cacheados”. Sin embargo noten que hay algunos ensamblados que no son marcados para ser cacheados, como: CachedAssembly.dll o los ensamblados del silverlight toolkit.

Para que esto suceda se debe crear el archivo XXXX.extmap.xml. Y después de crearlo recompilar el proyecto, y automáticamente se creara el archivo XXXX.zip, el cual será copiado a la carpeta ClientBin de la aplicación ASP.Net.  Para facilitar un poco esto, puedes ocupar la utilería Emm, la cual crea automáticamente el archivo XXXX.extmap.xml a partir de tu ensamblado ejecutando un comando como el siguiente:

Nota, para el correcto funcionamiento de esta utilería, el ensamblado debe tener un SN (strong name)

Además también se puede usar para los ensamblados del Silverlight Toolkit, de esta forma solo se descargaría en primera instancia nuestro ensamblado y todos los demás ensambados seria descargados “on demand”. Ejemplo:


En resumen, esta característica es muy poderosa para el mejor desempeño de tus aplicaciones silverlight.

Descargar solución de Ejemplo

Happy Coding!

Silverlight Toolkit Octubre 2009

Ya está disponible la última actualización del silverlight toolkit de Octubre del 2009, y como en cada release, esta versión nos trae nuevas y llamativas funcionalidades, y esta no se podía quedar atrás. Las nuevas características, por mencionar algunas:

• Soporte para Visual Studio 2010, que por cierto se acaba de liberar el día de ayer la beta 2.
• Todas las clases base del namespace Data Visualization han sido “unsealed”, es decir, ya es posible heredar de ellas y así extender su funcionalidad.
• La interface ISeries ahora es la interface base de todos los tipos de series para las graficas.
• Se ha agregado el assembly System.Windows.Controls.Data.Toolkit y el assembly System.Reactive
• Soporte para Drag and Drop para elementos tales ListBox, TreeView, DataGrid y DataPointSeries.

A continuación una pequeña demostración de esta última característica, realmente es muy fácil su uso y es mucho el valor que agrega a nuestros desarrollos.

Aquí algunos recursos de donde pueden profundizar en el tema:
Silverlight Toolkit de Octubre 2009
Drag and Drop Support

De aquí pueden descargar el código completo.

Happy Coding!

Creando Editor Parts personalizados para webparts de SharePoint utilizando Silverlight

Hoy mostraré un ejemplo de cómo escribir un Custom Editor Part para una webpart de SharePoint, en realidad esto no tiene mucha ciencia si no es por el hecho de que utilizaré Silverlight(como siempre) para crear Editor Parts, con una experiencia rica al usuario final.

Creación de la webpart

Primero crearé una simple webpart, llamada SampleWebPart,  con un control Label, que tendrá el valor del color actual del fondo en formato hexadecimal.

Para crear un custom Editor Part los pasos a seguir son los siguientes:

Crear una clase que herede de EditorPart, que se encuentra definido dentro del namespace System.Web.UI.WebControls.WebParts, para este ejemplo crearé una clase llamada ColorEditor, que servirá para editar la propiedad BackColor de SampleWebPart. BackColor es una propiedad que sobrescribiré, ya que esta es una propiedad heredada, y solo le estoy agregando el custom Editor Part. A Continuación el código de la clase ColorEditor.cs:

using System;
using System.Collections.Generic;
using System.Text;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.WebControls;
using System.Drawing;
using System.Web.UI.SilverlightControls;

namespace Blog.Webparts.WebPartCode
{
    public class ColorEditor : EditorPart
    {
        HiddenField hiddenField;
        public override bool ApplyChanges()
        {
            this.EnsureChildControls();
            SampleWebpart s = (SampleWebpart)this.WebPartToEdit;
            
            //obtenemos el valor del hidden control
            string strcolor = hiddenField.Value;
            Color c = Color.Transparent.FromHex(strcolor);
            s.BackColor = c;
            return true;
        }

        public override void SyncChanges()
        {
            this.EnsureChildControls();
            SampleWebpart s = (SampleWebpart)this.WebPartToEdit;
            Color c = s.BackColor;
            hiddenField.Value = c.ToHex();
        }

        protected override void CreateChildControls()
        {
            base.CreateChildControls();
            try
            {
                hiddenField = new HiddenField();
                hiddenField.ID = "hfcolorPicker";
                base.Controls.Add(hiddenField);

                Silverlight slControl = new Silverlight();
                slControl.ID = "slColorPicker";
                slControl.InitParameters = "controlid=" + hiddenField.ClientID;
                slControl.Source = "/ClientBin/ColorPickerEditor.xap";
                slControl.Width = 300;
                slControl.Height = 250;
                slControl.MinimumVersion = "2.0.31005.0";
                slControl.Windowless = true;
                base.Controls.Add(slControl);
            }
            catch(Exception ex)
            {
            }
        }
    }
}

En esencia, la creación de un custom editor part, es muy parecida a la creación de una webpart, ya que podemos sobreescribir el método CreateChildControls para agregar los controles que conformarán el editor. Pero además, se heredan dos métodos abstractos que deben ser implementados, SyncChanges y ApplyChanges etc

El método SyncChanges

Este método, tomara los valores actuales de la webpart y los establecera a los controles de el custom editor. Cuando se carga el custom editor, este método es el primero que se ejecuta, no el OnLoad, ni el CreateChildControls (por eso se debe hacer una llamada a EnsurechildControls al inicio de este método)

El método ApplyChanges

Este método se encargara de reflejar los valores establecidos en el custom editor a nuestra webpart target.

Para hacer referencia a la webpart de la cual estamos leyendo/escribiendo valores, lo hacemos mediante la propiedad WebPartToEdit.

El método CreateChildControls

Es en este método donde se crean los controles que conformarán la interfaz del custom editor part, como se observa en el siguiente snippet, he instanciado un objeto de la clase Silverlight, que se encuentra en el namespace System.Web.UI.SilverlightControls,  que es la que nos permite renderear objetos silverlight en el cliente, solo estableciendo unas cuantas propiedades. Además he agregado un control HiddenField, que utilizaré como medio de comunicación entre el código silverlight y la clase ColorEditor.cs

El control ColorPicker es totalmente una creación de Matthias Shapiro, de su post Final-ish  Silverlight Color  Picker Utility, y que muy amablemente puso a disposición de la comunidad. Many thanks Matthias!. Yo solo he modificado la página contenedora de este control, para que acepte como parámetro el id del hidden field y así guardar el valor del color establecido a través del color picker.

Sobrescribir el método CreateEditorParts dentro de la clase SampleWebPart, lo anterior, para instruir a WSS a que cargue nuestro custom editor part además de los Editor Parts estándar que son normalmente desplegados en el Tool Panel. En esta parte utilizamos colecciones de tipo EditorPartCollection. Como se observa en el código siguiente,  debemos agregar todos los custom editor parts a la colección de la clase base para crear una nueva instancia de EditorPartCollection.

Es importante establecer la propiedad ID del los objetos de tipo EditorPart, de lo contrario obtendremos errores al intentar ejecutar nuestro código.

public override EditorPartCollection CreateEditorParts()
{
 List<Editorpart> editor = new List<Editorpart>();
 EditorPart ep = new Blog.Webparts.WebPartCode.ColorEditor();
 ep.ID = this.ID + "_ColorEditor";
 editor.Add(ep);
 EditorPartCollection baseEditors = base.CreateEditorParts();
 return new EditorPartCollection(baseEditors, editor );
}

Al final podremos observar como la experiencia de usuario se ve bastante enriquecida al usar tecnologías como Silverlight.

Por último, el codigo completo de la clase SampleWebPart

using System;
using System.Collections.Generic;
using System.Runtime.InteropServices;
using System.Web.UI;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.WebControls;
using System.Drawing;
using System.ComponentModel;
using System.Drawing.Design;
using Blog.Webparts.WebPartCode;

namespace Blog.Webparts
{
    [Guid("057b92f2-193e-4ac4-ba28-bf06e6180aa2")]
    public class SampleWebpart : Microsoft.SharePoint.WebPartPages.WebPart, IWebEditable
    {
        private bool _error = false;
        Label lbl1;

        [Personalizable(PersonalizationScope.Shared)]
        [WebBrowsable(false)]
        [WebDisplayName("Color de fondo")]
        [WebDescription("Color de fondo")]
        [DefaultValue(typeof(Color), "Red")]
        public override Color BackColor
        {
            get
            {
                return base.BackColor;
            }
            set
            {
                base.BackColor = value;
            }
        }
        public SampleWebpart()
        {
            this.ExportMode = WebPartExportMode.All;
        }

        /// 

        /// Create all your controls here for rendering.
        /// Try to avoid using the RenderWebPart() method.
        /// 
        protected override void CreateChildControls()
        {
            if (!_error)
            {
                try
                {
                    base.CreateChildControls();

                    lbl1 = new Label();
                    lbl1.ID = "lblInitialDate";
                    lbl1.Width = 300;
                    lbl1.Text = "Label con texto";
                    lbl1.Font.Size = new FontUnit(24);
                    this.Controls.Add(lbl1);

                    this.Controls.Add(new LiteralControl("
"));
                    this.Controls.Add(new LiteralControl("
"));

                    this.Height = "200";
                }
                catch (Exception ex)
                {
                    HandleException(ex);
                }
            }
        }

        protected override void OnPreRender(EventArgs e)
        {
            base.OnPreRender(e);
            lbl1.Text = this.BackColor.ToHex();
        }

        public override EditorPartCollection CreateEditorParts()
        {
            List<Editorpart> editor = new List<Editorpart>();
            EditorPart ep = new Blog.Webparts.WebPartCode.ColorEditor();
            ep.ID = this.ID + "_ColorEditor";
            editor.Add(ep);
            EditorPartCollection baseEditors = base.CreateEditorParts();
            return new EditorPartCollection(baseEditors, editor );
        }

        /// 

        /// Ensures that the CreateChildControls() is called before events.
        /// Use CreateChildControls() to create your controls.
        /// 
        protected override void OnLoad(EventArgs e)
        {
            if (!_error)
            {
                try
                {
                    base.OnLoad(e);
                    this.EnsureChildControls();
                    ScriptManager sm = ScriptManager.GetCurrent(this.Page);
                    if (sm == null)
                    {
                        sm = new ScriptManager();
                        this.Controls.AddAt(0,sm);
                    }
                }
                catch (Exception ex)
                {
                    HandleException(ex);
                }
            }
        }

        /// 

        /// Clear all child controls and add an error message for display.
        /// 
        private void HandleException(Exception ex)
        {
            this._error = true;
            this.Controls.Clear();
            this.Controls.Add(new LiteralControl(ex.Message));
        }
    }
}

De aquí pueden descargar el codigo completo

Happy Coding!

Screenshot de cualquier elemento en Silverlight 3

Una forma sencilla de obtener un screenshot de casi cualquier elemento dentro de un objeto Silverlight, es utilizar la clase WriteableBitmap, y usar el método Render que recibe como parámetro un objeto que derive de UIElement, es por eso que virtualmente se le puede sacar la instantánea a cualquier elemento, con unas pocas líneas de código, como las siguientes: 

public Image GetImageFromUIElement(UIElement uiElement) 
{ 
       WriteableBitmap bm = new WriteableBitmap((int)uiElement.RenderSize.Width, (int)uiElement.RenderSize.Height); 
       bm.Render(container, new MatrixTransform()); 
       bm.Invalidate(); 
       Image im = new Image(); 
       im.Source = bm; 
       return im; 
}

La clase WriteableBitmap, puede ser usada como fuente de datos para un objeto Image y asi mostrarlo en pantalla o guardarlo en un archivo.Se me ocurren algunas interesantes aplicaciones como:

1.  Un método Helper para guardar instantáneas de tu aplicación, en el momento exacto en que truena ocurre un fallo inesperado y asi complementar las explicaciones de los usuarios, tales como, “La aplicación falló cuando la estaba utilizando”
2. Obtener thumbnails de Videos.
3. Etc.

Espero encuentren un buen uso a esta clase y me pasen el tip 


Happy Coding! 

Nuevas Características en Silverlight 3 Beta 1

Sin lugar a dudas uno de los huecos mas grandes de Silvelight 2.0 es la integración con servicios web, restricciones tales como basicHttpBinding, hacían la vida de un desarrollador  menos divertida. Como sabemos el basicHttpBinding codifca los mensajes de respuesta como texto, lo cual es grandioso si uno de los alcances de nuestro proyecto es la interoperabilidad  con SOAP 1.1 pero nefasto por la sobrecarga de información que se envía en la respuesta. Cuantos desarrolladores no dedicamos tiempo creando alguna forma para que la respuesta de un servicio web se redujera de tamaño?

Y he aquí una de las características, por la que rezaba todas las noches,  que mas esperaba de la versión Beta 1 que fue anunciada en el pasado mix.

Binary Message Encoding

BinaryHttpBinding es la respuesta que Silverlight 3 trae a los desarrolladores, para reducir el overhead que se tenía en la codificación a texto.  Este nuevo tipo de binding es, por alguna razón, implementado como un custom binding.

<bindings>

  <customBinding>

    <binding name="binaryHttpBinding">

      <binaryMessageEncoding />

      <httpTransport />

    </binding>

  </customBinding>

</bindings>

<endpoint address="" binding="customBinding" bindingConfiguration="binaryHttpBinding"  contract="ServiceContract" />

El gran incremento en performance que trae este nuevo tipo de binding, seguramente repercutirá en su utilización como default binding, y relegaremos el basicHttpBinding en los escenarios en los que sea obligatorio la interoperabilidad.

 

Un modo  de seguridad adicional

Silverlight 3 introduce un nuevo modo de seguridad, que ya conocíamos al utilizar otros clientes  con WCF, TransportWithMessageCredential es casi la respuesta a nuestras plegarias, ya que nos permite enviar credenciales para autentificarnos con el servicio  web que estamos consumiendo. La desventaja (porque siempre hay un “pero”?), es que las credenciales que enviemos para la autentificación, serán enviadas en cada mensaje, y el servicio validara las credenciales en una capa SOAP. Por lo anterior las credenciales viajaran en texto plano, por lo que será necesario utilizar HTTPS

<security mode="TransportWithMessageCredential">

SLsvcutil.exe

Por ultimo, aunque no menos  importante, quiero hacer mención de la herramienta SLsvcutil.exe, que podremos utilizar desde la línea de comandos, la cual nos permitirá crear las clases proxy, para realizar peticiones a los servicios web. Recordemos que en la versión anterior de Silverlight solo podíamos hacer esto a través de  Visual Studio | Add Service Reference. 

Aquí pueden encontrar la documentación para utilizar esta herramienta.

Happy Coding!