El Bruno

Buenas,

durante los últimos meses estoy viendo como cada vez más personas y empresas aprovechan el excelente modelo de extensibilidad que se ha incorporado en Visual Studio 2010, y crean excelentes extensiones para el IDE de Visual Studio. Lamentablemente estas empresas enfocan su trabajo orientado a mejorar la productividad del usuario pero ninguna piensa en el el ocio: por ejemplo en la posibilidad de ver videos de Channel 9 dentro de Visual Studio mientras uno codifica.

Esto es relativamente fácil y en 5 minutos lo podemos tener funcionando. En el siguiente tutorial describo como hacerlo.

Tutorial

1. Para aprovechar un poco de trabajo ya creado, aprovecharemos uno de los templates que existen en la Beta 1, y crearemos un proyecto del tipo Editor Margin.

2. En el proyecto de extensibilidad podremos ver que el mismo posee 2 clases principales: GreenMargin.cs y MarginFactory.cs.

3.  Renombramos la clase GreenMargin por C9VideoMargin.

4. Modificamos el codigo como en el siguiente ejemplo. He dejado sin código las regiones en las líneas 46 a 50 para no tener que copiar todo el código.

   1:  using System;

   2:  using System.Windows.Controls;

   3:  using System.Windows.Media;

   4:  using Microsoft.VisualStudio.Text.Editor;

   5:   

   6:  namespace ElBruno.VSIDE.Channel9Viewer

   7:  {

   8:    class C9VideoMargin : Canvas, IWpfTextViewMargin

   9:    {

  10:      //The name of the margin

  11:      public const string MarginName = "C9VideoMargin";

  12:   

  13:      // The IWpfTextView that our margin will be attached to.

  14:      private IWpfTextView _textView;

  15:   

  16:      // A flag stating whether this margin has been disposed

  17:      private bool _isDisposed = false;

  18:   

  19:      /// <summary>

  20:      /// Creates a <see cref="C9VideoMargin"/> for a given <see cref="IWpfTextView"/>.

  21:      /// </summary>

  22:      /// <param name="textView">The <see cref="IWpfTextView"/> to attach the margin to.</param>

  23:      public C9VideoMargin(IWpfTextView textView)

  24:      {

  25:        // Set the IWpfTextView

  26:        _textView = textView;

  27:   

  28:        // Establish the background of the margin.

  29:        this.Height = 20;

  30:        this.ClipToBounds = true;

  31:        this.Background = new SolidColorBrush(Colors.Orange);

  32:   

  33:        MediaElement videoChannel9 = new MediaElement()

  34:        {

  35:          Source = new Uri("http://mschnlnine.vo.llnwd.net/d1/ch9/1/8/3/0/5/4/VSTS08_ch9.wmv")

  36:        };

  37:        this.Children.Add(videoChannel9);

  38:      }

  39:   

  40:      private void ThrowIfDisposed()

  41:      {

  42:        if (_isDisposed)

  43:          throw new ObjectDisposedException(MarginName);

  44:      }

  45:   

  46:      #region IWpfTextViewMargin Members

  47:      #endregion

  48:   

  49:      #region ITextViewMargin Members

  50:      #endregion

  51:    }

  52:  }

5. El constructor de la clase (definido entre las líneas 23 y 38) es el encargado de decorar a la ventana de edición de código con un nuevo visor de videos (basado en un MediaElement) y luego asociar al mismo la ruta de un video de Channel 9. En este caso un video de casi 20 minutos donde hago un recorrido por VSTS: Un paseo por Visual Studio Team System 2008.

5. Una vez agregado el decorador que en el margin del editor de código agregará el visor de Video, debemos modificar la clase MarginFactory para que agregue el decorador en la sección superior. El siguiente cógigo muestra un ejemplo de la versión original modificada. En la línea 10 podemos ver como se define que el contenedor estará en la zona superior.

   1:  using System.ComponentModel.Composition;

   2:  using Microsoft.VisualStudio.Text.Editor;

   3:  using Microsoft.VisualStudio.Utilities;

   4:  namespace ElBruno.VSIDE.Channel9Viewer

   5:  {

   6:    #region ElBruno.VSIDE.Channel9Viewer Factory

   7:    [Export(typeof(IWpfTextViewMarginProvider))]

   8:    [Name("GreenBar")]

   9:    [Order(After = "HorizontalScrollbar")]

  10:    [MarginContainer(MarginContainerAttribute.Top)]

  11:    [ContentType("text")]

  12:    [TextViewRole("interactive")]

  13:    internal sealed class MarginFactory : IWpfTextViewMarginProvider

  14:    {

  15:      public IWpfTextViewMargin CreateMargin(IWpfTextViewHost textViewHost, IWpfTextViewMargin containerMargin)

  16:      {

  17:        return new C9VideoMargin(textViewHost.TextView);

  18:      }

  19:    }

  20:    #endregion

  21:  }

6. Una vez completado el ejemplo, ya podemos ejecutar el mismo y veremos como se levanta una nueva instancia del entorno esperimental de trabajo de Visual Studio para que probemos esta extensión

7. Si creamos un nuevo proyecto del tipo Class Library u otro que nos permita acceder a un editor de código podremos ver como en el mismo, en la sección superior comienza a pasar automáticamente el video de Channel 9 con el fondo naranja que definimos en la clase C9VideoMargin, en la línea 31.

En pocos pasos hemos agregado un visor de videos a nuestro entorno de trabajo y después con un poco más de tiempo, podríamos acomodar el tamaño (150 pixels es poco a nivel Height), incorporar una barra de navegación, etc.

El código de la demo se puede descargar desde http://cid-bef06dffdb192125.skydrive.live.com/self.aspx/Code%20Samples/2009%2008%2017%20ElBruno.VSIDE.Channel9Viewer.zip

Espero poder sacar un poco más de tiempo en vacaciones para poder cerrar alguna extension interesante no orientada a la productividad.

Saludos @ Rio IV

El Bruno