June 14th, 2010 by JuanK

Hola, hace unos meses escribí este artículo acerca de esta herramienta: “Add-In Express for IE”  que facilita enormemente la creación add-ons para Internet Explorer : C# – Creando Toolbars, Botones y Menús para Internet Explorer

 

Llegué a esta herramienta gracias a un proyecto importante que esta desarrollando Microsoft en el país, me han contactado para llevarlo a cabo y de paso me contaron que utilizarían esta herramienta para llevar a cabo este proyecto.

 

Como lo mencione anteriormente al comienzo creí que sería un proyecto realizado con IE SDK y COM pero apenas me confirmaron de la existencia de esta herramienta me puse en la labor de documentarme a través de internet.

 

Construir un Addon para IE es algo bastante interesante y en esencia sencillo de realizar haciendo uso de “Add-In Express for IE”.

Me detuve por unos instantes a pensar que cosas se pueden hacer con esta herramienta y me di cuenta que para sacarle máximo provecho es conveniente idear componentes dinámicos que permitan al usuario interactuar de manera directa con el contenido desplegado en el toolbar, sidebar o botón.

 

Dentro de los miles de diferentes alternativas que puedan existir para crear componentes dinámicos he optado por tratar 2 temas:

• Consumo de RSS para despliegue de información
• Crear una caja de búsqueda

 

En este artículo enseñaré como crear un componente Add-In Express for IE que consumiendo datos de un RSS se comporte de manera dinámica.

 

Creare un componente que lea el RSS de Top News desde The Washington Post y despliegue esos datos como un texto con híper vínculo. Ese componente lo colocare en un toolbar para IE.

 

CONSUMIR EL RSS DE TOP NEWS

Esta tarea la puedo realizar haciendo uso de este sencillo método que he creado:

C# – Consumir un XML o un RSS alojado en la web de manera sencilla

 

Simplemente llamaré al método pasándole la URL del RSS de Top News: http://www.washingtonpost.com/wp-dyn/rss/linkset/2005/03/24/LI2005032400102.xml

 

PASO 1 – CREAR EL PROYECTO

 

 

PASO 2 – CREAR UNA CLASE QUE ALOJE EL METODO PARA CONSUMIR EL RSS

using System.Net;
using System.Data;

/// <summary>Provee funcionalidades de conexión a una URL que publica un archivo XML</summary>
public static class RemoteXML
{
    /// <summary>
    /// Se conecta a una URL que representa un archivo XML y convierte la información en un DataSet
    /// </summary>
    /// <param name="URL" />URL del xml publicado en la web</param>
    /// <returns>Dataset que representa los datos XML</returns>
    public static DataSet GetXMLDataSet(string URL)
    {
        HttpWebRequest xmlRequest = (HttpWebRequest)WebRequest.Create(URL);
        DataSet xmlData = new DataSet();
        xmlData.ReadXml(xmlRequest.GetResponse().GetResponseStream());
        return xmlData;
    }
}

 

PASO 3 – CREAR UN TOOLBAR

Esto es sencillísimo gracias a “Add-In Express for IE”, tan solo:

• clic derecho sobre el proyecto
• adicionar nuevo ítem
• y…

 

 

PASO 4 – CREAR UN LABEL PARA MOSTRAR EL CONTENIDO DEL RSS Y HACER LINK

El toolbar como tal es un Panel vacio así que arrastro allí un nuevo label, la mejor parte es que los controles para adicionar en el toolbar son los mismos controles de Windows Forms ( he colocado colores distintos para distinguir los controles ).

 

 

PASO 5 – CONSUMIR EL RSS Y TOMAR LA PRIMERA NOTICIA

Ahora utilizando el método del paso 2 tomare el RSS y hare uso de la primera noticia. Para tal fin he creado una estructura RSSEntryInfo:

/// <summary>Representa información de una entrada RSS</summary>
public struct RSSEntryInfo
{
   public string title, url;
}

 

Seguidamente creo el siguiente método dentro de la clase RemoteXML:

/// <summary>
/// Devuelve la última entrada de un RSS
/// </summary>
/// <returns></returns>
private static RSSEntryInfo GetLatestRSSEntry(string RSSUrl)
{
    RSSEntryInfo ni = new RSSEntryInfo();

    try
    {
        using (var datos = RemoteXML.GetXMLDataSet(RSSUrl))
        {
            foreach (DataRow row in datos.Tables[&quot;item&quot;].Select())
            {
                ni.title = (string)row[&quot;title&quot;];
                try
                {
                    ni.url = (string)row[&quot;link&quot;];
                }
                catch
                {
                    ni.url = ((Uri)row[&quot;link&quot;]).AbsoluteUri;
                }
                break;
            }
        }
    }
    catch
    {
        throw;
    }

    return ni;
}

 

Es IMPORTANTE tener cuenta que si la implementación de GetXMLDataSet incluye la carga del XSD de RSS 2.0 entonces el URL vendrá en formato de objeto Uri. Ver "Nota Adicional" al final de el artículo:

C# – Consumir un XML o un RSS alojado en la web de manera sencilla

 

PASO 6 – CONFIGURAR EL LABEL CON LA INFORMACION OBTENIDA DEL RSS

Ahora hay que configurar el label con la información, para ello he creado un método lblLastTopNewInfo dentro del código del toolbar, y he creado una variable string para almacenar la URL de la última noticia. Acá utilizo el RSS de top news de The Washington Post: http://www.washingtonpost.com/wp-dyn/rss/linkset/2005/03/24/LI2005032400102.xml

/// <summary>URL donde esta la noticia contenida en el label</summary>
string ltnUrl;
/// <summary>Trae la última noticia de un RSS y establece la información necesaria en el label</summary>
private void lblLastTopNewInfo()
{
    var ltnInfo = RemoteXML.GetLatestRSSEntry(&quot;http://www.washingtonpost.com/wp-dyn/rss/linkset/2005/03/24/LI2005032400102.xml&quot;);
    lblLastTopNew.Text = ltnInfo.title;
    ltnUrl = ltnInfo.url;
}

 

PASO 7 – PROGRAMAR EL EVENTO CLIC DEL LABEL PARA HACER QUE IE NAVEGUE A LA URL DE LA ULTIMA NOTICIA

Para poder hacer que IE navegue al URL de la última noticia hare uso de otra de las funcionalidades de “Add-In Express for IE”, cada objeto creado ( toolbar, bar, etc ) tiene dos referencias a IE una de ellas a un tipo object, y la otra al mismo tipo object pero accediéndolo como Interop.SHDocVw.WebBrowser, esto facilita enormemente trabajar con el browser, en cada objeto de “Add-In Express for IE” tenemos esta referencia en el campo IEApp.

Así queda el evento clic del label:

/// <summary>
/// Hace que IE navegue al URL correspondiente
/// </summary>
/// <param name="sender" /></param>
/// <param name="e" /></param>
private void lblLastTopNew_Click(object sender, EventArgs e)
{
    object nullObject =null;
    this.IEApp.Navigate(ltnUrl, ref nullObject,
        ref nullObject, ref nullObject, ref nullObject);
}

 

PASO 8 – HACER QUE EL LABEL ARRANQUE CON LA INFORMACION DEL RSS

Para ello programo el evento OnConnect del toolbar, este evento se dispara cada vez que el Toolbar se integra con IE.

/// <summary>
/// Configura el estado inicial del label
/// </summary>
/// <param name="sender" /></param>
/// <param name="threadId" /></param>
private void TWPToolbar_OnConnect(object sender, int threadId)
{
    lblLastTopNewInfo();
}

 

PASO 9 – HACER QUE CADA HORA SE REFRESQUE LA ULTIMA NOTICIA

Con un System.Timers.Timer establezco que cada 30 minutos se llame a lblLastTopNewInfo()

/// <summary>Temporizados para refrescar la última noticia</summary>
System.Timers.Timer timerWpLn = new System.Timers.Timer();

/// <summary>
/// Configura el estado inicial del toolbar
/// </summary>
/// <param name="sender" /></param>
/// <param name="threadId" /></param>
private void TWPToolbar_OnConnect(object sender, int threadId)
{
    lblLastTopNewInfo();
    timerWpLn.Interval = 1000 * 60 * 30;
    timerWpLn.Elapsed += new System.Timers.ElapsedEventHandler(timerWpLn_Elapsed);
    timerWpLn.Enabled = true;
    timerWpLn.Start();
}

/// <summary>
/// Establece periodicamente los valores del label
/// que muestra la última noticia
/// </summary>
/// <param name="sender" /></param>
/// <param name="e" /></param>
void timerWpLn_Elapsed(object sender, System.Timers.ElapsedEventArgs e)
{
    lblLastTopNewInfo();
}

 

Adicionalmente he coloreado el label de color azul, y he hecho que al pasar el mouse por encima del control el cursor del mouse cambie para mostrar que es un híper vínculo, esto en los eventos MouseEnter y MouseLeave.

 

PASO 10 – INTEGRAR, COMPILAR Y PROBAR EN IE

Esto es muy fácil, das doble clic sobre IEModule para abrir el panel del módulo, voy a las propiedades del módulo y entro donde dice toolbars :

 

Allí agrego un nuevo toolbar y lo configuro como se ve en esta imagen:

 

compilo la solución, luego clic derecho en el proyecto y selecciono Register ADX Project,

 

 

abro IE y listo! … ver video abajo.

 

http://www.youtube.com/v/ovIZtcmkkNA