Este documento describe cómo crear un navegador web básico en Visual Basic 6.0 y VB.NET usando el control WebBrowser. Explica los métodos, propiedades y eventos principales del control y los pasos para agregar los controles necesarios como botones de navegación, una barra de direcciones y una barra de progreso. También incluye código para manejar eventos como cargar páginas, errores y ventanas emergentes.

1. Webbrowser de vb 6.0 y vb.net

2. Introducción Para crear el explorador se utiliza el Ocx ( que en realidad es una DllActivex) llamado Microsoft Internet Controls. Este se agrega desde el menú Proyecto - componentes

4. Una vez que lo marcas, es decir que lo agregas al proyecto, se verá el siguiente control en el cuadro de controles del IDE de visual basic

5. Métodos principales del control WebBrowser Antes de comenzar a crear el navegador de ejemplo, se describen los principales métodos del control WebBrowser en lo que se refieren a la navegación y carga de las páginas:

6. Método Navigate Método GoBack Método GoForward Método Refresh Método GoHome Método Stop

7. Método Navigate El método Navigate es el que permite cargar una página en el control Web. El único parámetro que necesita dicho método es la Url para cargar el documento en el control. Por ejemplo si quisiera cargar la página de google, se haría así.

8. Método GoBack y GoForward El método GoBack y el método GoForward se utilizan para navegar a la página anterior y página siguiente (si es que las hay).

9. Método Refresh Método que se utiliza para actualizar la página cargada en el WebBrowser, es decir la vuelve a recargar

10. Método GoHome Se utiliza para cargar la página de inicio que esté establecida en el programa Internet explorer en la sección de opciones, este valor está guardado en el registro de Windows, Esto es porque el control web está basado en el dicho control.

11. Si quisieramos configurar nuestra propia página de inicio, tendríamos que guardar la url en alguna parte, y cargarla con el método Navigate por ejemplo.

12. Método Stop Por último el Método Stop detiene la carga de la página que actualmente se está cargando. Todos estos métodos, excepto el método Navigate, no requieren parámetros, solo llamarlos para que hagan lo que tienen que hacer.

13. Propiedades principales del control WebBrowser Las propiedades principales son: Propiedad LocationName Propiedad LocationURL

14. La propiedad LocationName devuelve el título de la página que cargamos en el control webBrowser. Por ejemplo si cargáramos la mítica web del guille: www.elguille.info , esta propiedad devolvería: "El Guille la web de la programación etc..", es decir la descripción de la página que está definida en las etiquetas "Title" del documento cargado

15. La propiedad LocationUrl lo que nos devuelve es la dirección http del documento cargado en el control WebBrowser. Este control tiene otras propiedades, pero para el ejemplo por ahora basta con nombrar estas 2

16. Eventos principales del control WebBrowser Los principales eventos del control son: Evento NavigateError Evento ProgressChange Evento NewWindow2 Evento StatusTextChange Evento NavigateComplete2

17. El control web tiene muchos otros eventos aparte de estos 5, algunos sinceramente no tengo idea para que son, pero en el ejemplo se usarán solo estos

18. Evento NavigateError El evento NavigateError se dispara o ejecuta cada ves que al cargar una página, se produce un error en la carga

19. Evento ProgressChange El evento ProgressChange nos sirve para ver el progreso de descarga del documento o de los documentos, ya que al cargar una página se pueden estar descargando varios elementos, no solo la página a la que navegamos.

20. En el ejemplo del navegador, con este evento , se creará una barra de progreso para poder visualizar el porcentaje de descarga de la página en la que estamos navegando

21. Evento NewWindow2 Se ejecuta cuando se abre una ventana de tipo PopUp o las llamadas páginas de tipo _Blank. Por defecto en el control webBrowser, si presionamos en un enlace que abre una ventana PopUp, se abre una nueva instancia del Internet Explorer.

22. Para que no ocurra esto en el programa y se pueda abrir la página en una instancia de nuestro navegador, utilizaremos este evento para detectar cuando suceda esto, mediante una variable llamada cancel , y que cancela la ejecución del navegador predeterminado, y al crear una instancia nueva de nuestro formulario, se cargará esa página en este nuevo formulario .

23. Evento StatusChange Este evento tiene un parámetro llamado Text. Ese valor nos devuelve el estado de la navegación, es decir nos muestra la url que se está navegando o las url que se están navegando. Cuando termina de descargarse todo, la variable Text posee el valor "Listo".

24. También esta variable cambia cuando el mouse pasa encima del control Webbrowser, por ejemplo encima de un enlace, y se refleja en esta variable. En este evento es donde hay que poner una especie de barra de estado, label o lo que sea.

25. Evento NavigateComplete2 Se produce cuando se ha podido navegar a la url, esto no quiere decir que el documento o la página este completamente descargada

26. Controles necesarios para crear el Navegador

27. Nota: los controles dentro del Picture no importa que estén ordenados, ya que se acomodan y posicionan en tiempo de ejecución, por eso se ve de esa manera en la imagen

28. La vista previa anterior muestra la ventana de diseño y los controles para agregar. Como podés ver no usé iconos ni nada, eso lo podés hacer vos a tu gusto. Tampoco se utilizó un control ToolBar de Visual Basic, si no que se colocó un control PictureBox que contiene los botones para navegación.

29. También contiene una barra de progreso, un combobox para la barra de direcciones, el control webbrowser debajo del control Picture, y debajo del control Webbrowser un control Label que será el que muestre el enlace actual de descarga de las páginas y el estado de descarga, mostrando la url, sería como el statusbar o barra de estado.

30. Pasos a seguir para agregar los principales controles en el formulario 1. Agregar un control PictureBox llamado PicToolBar. Colocarlo en la parte superior del formulario como está en la imagen. No colocarle el ancho ni el alto a mano, ya que se redimensionará cuando se cargue el formulario y se ubicará en el lugar correcto

31. 2. Colocar un arreglo de CommandButton , o un ocx de botones, o lo que mas te guste, y al nombre del arreglo botones renombrarlo a cmdtoolBar. En total tienen que ser 5, es decir desde el cmdtoolBar(0) hasta el cmdtoolBar(4)También Colocarle los Caption a los botones en el orden como está en la imagen, el primero sería la flecha "<" que sería el botón que navega hacia la página anterior, el segundo (cmdToolbar(1) ) ">", la página siguiente, hasta el último que dice Inicio (cmdtoolBar(4)).

32. 3. Debajo de esto, colocar un control Label llamado LblDir, y en el Caption del Label escribir "Dirección". Al igual que los otros controles , no lo ubiques en el orden correcto, colocalo en cualquier lado, ya que se posiciona mediante código, Pero si o si debe estar dentro del PictureBox mencionado antes. 4. Agregar un ComboBox llamado CboDir dentro del Picture. Este combo será la barra de direcciones.

33. 5. Agregar un Command Button llamado cmdNavigate, que será el que navegará a la página cuando se escriba una dirección en el CboDir (barra de direcciones) y se pulse navegar. Escribir en el Caption del botón "Navegar" o "ir" o lo que quieras. 6. Fuera del Picture, es decir dentro del formulario, dibuja o agrega un control WebBrowser llamado WebBrowser (como está en la imagen)

34. 7. Insertar un control Label llamado lblStatusbar, que en la imagen está como "Label1". Este control se posicionará en la parte inferior del formulario cuando se esté ejecutando el programa, justo debajo del control WebBrowser y mostrará el estado de las url que se están cargando. También este Label visualiza la dirección url cuando pasas el mouse por encima de un enlace como se comentó.

35. 8. Por último colocar, dentro del PicToolBar, un control ProgressBar para la barra de progreso ( Yo no usé el Progressbar del visual basic que se agrega con el Ocx "Microsoft Windows Common Controls 6.0", ya que este ocx, trae varios ocx y el peso del archivo es de 1 MB y no valía la pena usar solo el Progressbar y cargar todos los demás ocx que no se usarán. Si querés podes usar un Ocx que pesa 90 Kb (es muy liviano) y es mucho mejor que el de Visual basic ya que tiene muchas otras opciones que no posee el Progressbar del vb. Lo podés bajar desde acá y es gratuito: Ocx para barra de progreso 9. Por último, al formulario Form1 colocarle el nombre FrmWeb

36. Código fuente para el navegador Ahora se agregará el procedimiento para los botones cmdToolBar:

37. Botón Navegar - cmdNavigate El código para cargar la página que se escriba dentro del combobox llamado cboDir cuando pulsemos el botón cmdNavigate es muy simple, y como se comentó antes utiliza el método Navigate del control webBrowser. Agrega el código en el formulario principal:

38. Private Sub cmdNavigate_Click() If CboDir <> "" Then 'Navegamos a la página con el método Navigate pasandole la _ dirección del combobox cboDir WebBrowser.Navigate Trim$(CboDir) End If End Sub

39. Para que cuando se pulse la tecla Enter, también se navegue a la página escrita en la barra de direcciones, es decir no solo cuando pulsamos dicho botón, hay que establecer la propiedad Default del botón cmdNavigate en True. Pero también aparte de esto hay que impedir que los botones del formulario retengan el foco, ya que si tienen el foco, por ejemplo el botón "inicio" por decir uno, al presionar la tecla Enter, no se ejecutará el botón cmdNavigate para navegar a la página, para esto podemos hacer que cuando reciban el foco, se lo pasemos al formulario: pega entonces esta rutina:

40. Private Sub cmdtoolBar_GotFocus( Index As Integer) 'Le establecemos el foco al formulario Me.SetFocus End Sub

41. Ahora se añade el código para que cuando se presione click en una dirección del combo cboDir se navegue a la página: Private Sub CboDir_Click() 'Cuando hacemos click en una url del combo cargamos dicha página WebBrowser.Navigate CboDir End Sub

42. Código para cuando se produce un error ( Evento NavigateError ) Cada ves que se produce un error al intentar navegar a una dirección inexistente, o que no se pudo localizar, se dispara el evento NavigateError. Dentro de este procedimiento, pondremos solo un mensaje indicando la Url que dio el error, a modo de información:

44. Procedimiento para posicionar y redimensionar los controles del formulario Este procedimiento, coloca los controles en la ubicación correcta, no se ejecuta en el evento resize del formulario, ya que solo se debe posicionar y redimensionar una sola ves cuando se carga el formulario, por eso lo ponemos en el evento Load del Form: El procedimiento se llama redimensionarControles y es el siguiente:

46. Procedimiento para quitar la propiedad TabStop de todos los controles del formulario menos del control WebBrowser y del control CboDir (combo de la barra de direcciones)

47. Para quitar el TabStop de todos los controles para no poder movernos con la tecla tab, podríamos hacerlo uno por uno, pero mejor es de esta manera, ya que si se agregan otros controles nuevos, nos despreocupamos de volver a establecer la propiedad manualmente, ya que el bucle recorrerá todos los controles, y solo dejará con la propiedad TabStop en true del control WebBrowser y del Combo de las direcciones url

49. Procedimientos que se ejecutan en la carga del form En el evento Load del Form iría el siguiente código

50. Los procedimientos QuitartabStop y RedimensionarControles, ya se vió anteriormente, ahora hay uno que no se explicó y es el procedimiento AutocompletarCahe. Este procedimiento hace uso de una función Api llamada SHAutoComplete y otra llamada FindWindow. Lo que hace esta rutina, es poder asignarle al control ComboBox las entradas de la caché de Windows (esto lo hace de forma automática), para que al escribir una coincidencia, se autodesplieguen las entradas de las páginas ya visitadas, si no entendés a lo que voy, mirando la siguiente imagen te va a quedar mas claro:

51. Para poder hacer esto agregar un módulo bas, y pegar las siguientes declaraciones Api y el procedimiento AutocompletarCache Aclaro que esto lo descubrí gracias al amigo Leandro Ascierto, ya que yo lo sabía hacer pero utilizando un control textBox y no con un Combo. Para hacerlo con un combo hay que utilizar otra Api (FinWindowEx).

53. Mostrar en el combo de direcciones, la Url que se está cargando mediante el evento NavigateComplete2 Este evento como se dijo, se produce cuando al usar el método Navigate, se ha alcanzado la url solicitada, entonces utilizamos la propiedad locationUrl para mostrarla en el combo cboDir

55. Abrir una nueva instancia del navegador cuando se abra otra ventana en el evento NewWindow2 Como se había comentado antes, cuando hacemos click en un vínculo que se abre en otra ventana (las de tipo _Blank o PopUp ), se inicia el Internet Explorer o el navegador predeterminado que tengamos en el sistema para mostrar dicha página.

56. Para evitar esto y poder abrirlo con una nueva instancia de nuestro formulario web,se puede hacerlo con el evento llamadoNewWindow2. Este evento que se produce cada ves que un vinculo se abre en una nueva ventana, y el mismo tiene una variable como parámetro llamada Cancel. Al colocar esta variable en True, se cancela la ventana impidiendo que se abra el navegador predeterminado, de esta manera, mediante la sentencia New, creamos una copia del formulario y cargamos esa Url en la nueva instancia:

57. El código fuente sería el siguiente:

58. Ahora, para poder crear el formulario de tipo FrmWeb, es decir una nueva instancia , debemos declarar la variable, en la zona de declaraciones

59. Código para la Barra de progreso El evento que se dispara y que va indicando el progreso de las descarga de los documentos en el control Web, es el eventoProgressChange. Este tiene 2 parámetros: Uno llamado ProgressMax y otro Progress. El código fuente para la barra de progreso es el siguiente