Construye aplicaciones windows utilizando el componente WebBrowser

Patxi Echarte, 16. Mar, 2006, Comentarios desactivados en Construye aplicaciones windows utilizando el componente WebBrowser .NET

Podemos aprovechar toda la potencia que nos ofrece Internet Explorer y utilizarlo dentro de nuestras aplicaciones de una forma muy sencilla, utilizando para ello el componente ActiveX disponible en Windows, con lo que conseguiremos un gran abanico de posibilidades, como incrustar el navegador en un formulario, interactuar con el contenido de una página, definir menús contextuales, responder a eventos, visualizar información XML parseada automáticamente con XSL, etc…

En las siguientes líneas vamos a ver un ejemplo muy sencillo en el que vamos a construir un supersencillo navegador web, incrustando el componente en un formulario y haciendo que muestre la URL que indiquemos. Pese a que sencillo este programa es realmente sencillo nos servirá para introducir la forma de incrustar o utilizar un componente ActiveX en nuestras aplicaciones .NET y cómo interactuar con él, características comunes a cualquier tipo de funcionalidad que podamos necesitar en el futuro.

Creando el Mini Navegador

Vamos a suponer que estamos trabajando con Visual Studio aunque el mecanismo sería similar para otros entornos.

Lo primero que tenemos que hacer es crear un nuevo proyecto, por ejemplo con el nombre «MiniBrowser». Tras crearlo podemos añadirle una caja de texto para que el usuario escriba la url que desea ver, y un botón con el texto «IR», al que más adelante asociaremos código de forma que cuando se haga clic en él, el navegador muestre la información solicitada. Una vez creada la caja de texto y el botón, tenemos que añadir el control que nos mostrará el navegador, para lo cual necesitaremos hacer un par de cosillas antes si es la primera vez que lo usamos.

Importando el componente ActiveX

Para poder acceder al componente ActiveX desde código gestionado (mannaged code) de .NET necesitamos antes hacerlo disponible, para lo cual tenemos dos opciones.

La primera opción, y la más sencilla, la realiza de forma automática Visual Studio. Debemos hacer clic con el botón derecho del ratón sobre el panel de controles de formulario y seleccionar «Agregar o quitar elementos…». Se nos abrirá un diálogo con un par pestañas, y seleccionaremos la correspondiente a «Componentes COM», con lo que se nos mostrará un listado de los componentes disponibles. Hay que buscar en la lista uno con el nombre «Explorador del Web de Microsoft», señalarlo y pulsar en aceptar. En el caso de que no aparezca ese componente en el listado podemos pulsar en examinar y localizar el archivo «C:\Windows\System32\shdocvw.dll».

Una vez cerrado el diálogo tendremos disponible en el cuadro de herramientas una nueva opción con el nombre «Explorador Web de Microsoft», que podemos utilizar para añadir control a nuestro formulario, añadiéndolo a la caja de texto y el botón existentes. Tras añadir el control podemos ver como en la lista de referencias del proyecto tenemos dos nuevas dependencias, AxSHDocVw y SHDocVw, y que al generar el proyecto se copian las dll’s correspondientes junto al ejecutable, «AxInterop.SHDocVw.dll» y «Interop.SHDocVw.dll».

Estas dos DLL son necesarias para poder utilizar el componente ActiveX desde nuestra aplicación. Cuando desde C# creamos una instancia del control, se crea algo llamado Runtime Callable Wrapper (RCW), que no es más que un proxy que por un lado acepta llamadas desde código gestionado .NET, y por el otro trata con código no gestionado del componente ActiveX, actuando de forma completamente transparente para nosotros. Este proxy se encarga básicamente de redirigir las llamadas al componente ActiveX, aunque también tiene otras responsabilidades, como liberar el componente cuando no se use o hacer el marshalling de los parámetros. Hay que tener en cuenta que aunque realicemos múltiples instancias de un mismo componente, únicamente se generará una única instancia de este proxy, que por lo tanto será compartido por todas ellas.

Aparte de crear las dos DLL que hemos visto desde Visual Studio, hay una forma alternativa de generarlas vía consola de comandos. Seguramente utilizaremos siempre la comodidad que nos ofrece el entorno de desarrollo, pero no está de más saber qué estas utilidades existen y cómo se utilizan, ya que al fin y al cabo es lo que hace Visual Studio, y puede que en alguna ocasión nos haga falta.

Hay dos utilidades de línea de comandos que podemos utilizar, TlbImp y AxImp.

TlbImp

Esta utilidad de línea de comandos se utiliza para aquellos casos en los que el control ActiveX no se va a utilizar en una aplicación Windows Forms. TlbImp lee un archivo correspondiente a un componente COM (.tlb, .dll, .odl) y genera una DLL con los metadatos necesarios para generar automáticamente el proxy. Para poder utilizar el componente en nuestro proyecto será suficiente con añadir la referencia.

tlbimp c:\\windows\\system32\\shdocvw.dll /out:C:\\MiniBrowser\\bin\\Debug\\Interop.shdocvw.dll

AxImp

En aquellos casos en los que necesitemos utilizar el componente ActiveX en un formulario de Windows tendremos que utilizar la utilidad AxImp en vez de la anterior. El motivo es que para poder añadir el componente al formulario es necesario crear también una clase que encapsule al componente y que herede de System.Windows.Forms.Control. En esta ocasión el comando creará dos DLL’s, una equivalente a la obtenida con TlbImp, y otra con el nombre «AxSHDocVw.dll» que contendrá la clase wrapper.

aximp c:\\windows\\system32\\shdocvw.dll

Podemos utilizar la utilidad ildasm para ver el código intermedio generado para cada DLL.

Accediendo al nuevo control

En este punto ya tenemos el formulario preparado con todos los controles necesarios, nos queda únicamente generar el código que habrá que ejecutarse cuando el usuario pulse en el botón de «IR».

private void button1_Click(object sender, System.EventArgs e)
{
   object empty = "";
   object ourl = (object)tUrl.Text;
   axWebBrowser1.Navigate2(ref ourl, ref empty, ref empty, ref empty, ref empty);
   axWebBrowser1.Focus();
}

Cuando el usuario pulse en «IR» se ejecutará este método, en el que le decimos al navegador incrustado (axWebBrowser1) que muestre la url solicitada por el usuario (tUrl.Text), utilizando para ello el método Navigate2.

Probando el MiniBrowser

Para probar la aplicación la ejecutamos, introducimos una url en la caja de texto y pulsamos en «IR». A continuación debería mostrarse la página web dentro del control del navegador.

Como he comentado al principio podemos utilizar el control para multitud de cuestiones diferentes, pero ya simplemente con lo que hemos hecho podemos aprovecharnos de él y utilizarlo para visualizar otro tipo de contenidos que no sean páginas html, podemos visualizar archivos Word, Excel, XML…