Tutorial para crear un navegador web

Este tutorial explica los aspectos básicos sobre como utilizar el control WebBrowser de Visual Basic creando un simple navegador web 1 - 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 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 2 - 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: Método NavigateMétodo GoBackMétodo GoForwardMétodo RefreshMétodo GoHomeMétodo Stop 3 - 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 asi ControlWeb.Navigate "http://www.google.com" 4 - 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). 5 - Método Refresh Método que se utiliza para actualizar la página cargada en el WebBrowser, es decir la vuelve a recargar 6 - 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. 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 7 - 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 8 - Propiedades principales del control WebBrowser Las propiedades principales son: Propiedad LocationNamePropiedad LocationURL 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 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 9 - Eventos principales del control WebBrowser Los principales eventos del control son: Evento NavigateErrorEvento ProgressChangeEvento NewWindow2Evento StatusTextChangeEvento NavigateComplete2 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 10 - Evento NavigateError El evento NavigateError se dispara o ejecuta cada ves que al cargar una página, se produce un error en la carga 11 - 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. 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 12 - 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. 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 . 13 - 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". 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. 14 - 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 15 - Controles necesarios para crear el Navegador 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 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. 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. Pasos a seguir para agregar los principales controles en el formulario: 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 correctoColocar 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)).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.Agregar un ComboBox llamado CboDir dentro del Picture. Este combo será la barra de direcciones.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.Fuera del Picture, es decir dentro del formulario, dibuja o agrega un control WebBrowser llamado WebBrowser (como está en la imagen)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 ladirección url cuando pasas el mouse por encima de un enlace como se comentó.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 progresoPor último, al formulario Form1 colocarle el nombre FrmWeb 16 - Código fuente para el navegador Ahora se agregará el procedimiento para los botones cmdToolBar: Private Sub cmdtoolBar_Click(Index As Integer)On Error GoTo mensajeErrorSelect Case Index Case 0 WebBrowser.GoBack 'ir a la página anterior Case 1 WebBrowser.GoForward 'Siguiente página Case 2 WebBrowser.Stop 'Detener la carga de la página Case 3 WebBrowser.Refresh ' Actualizar la página Case 4 WebBrowser.GoHome 'Ir a la página de inicioEnd SelectExit Sub'rutina de ErrormensajeError:If Err.Number = -2147467259 Then Resume NextMsgBox Err.DescriptionEnd IfEnd Sub 17 - 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: 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 IfEnd Sub 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: Private Sub cmdtoolBar_GotFocus(Index As Integer)'Le establecemos el foco al formularioMe.SetFocusEnd Sub 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áginaWebBrowser.Navigate CboDirEnd Sub 18 - 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 dió el error, a modo de información: Private Sub WebBrowser_NavigateError(ByVal pDisp As Object, URL As Variant, _ Frame As Variant, StatusCode As Variant, _ Cancel As Boolean)'Si se produce un error se dispara este evento y mostramos el mensaje con la'url del parámetro NavigateErrorMsgBox "No se puede navegar a la Dirección: " & vbNewLine & URL, vbCritical, "Error"End Sub 19 - 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: Private Sub RedimensionarControles() On Local Error Resume Next Dim ancho As Integer 'Para posicionar los cmdcontrol cmdtoolBar.Item(0).Move 10, 25 For i = 1 To cmdtoolBar.Count - 1 ancho = cmdtoolBar(i).Width + ancho cmdtoolBar(i).Move ancho, 25 Next 'Para posicionar el PicToolBar PicToolBar.Move 25, 0, Screen.Width - 50, cmdtoolBar(0).Height + CboDir.Height + 200 'Para posicionar el combo cboDir CboDir.Move LblDir.Width + 100, cmdtoolBar(0).Height + cmdtoolBar(0).Top + 100, PicToolBar.ScaleWidth - cmdNavigate.Width - 150 - LblDir.Width 'Para posicionar el Label que dice direccion lblDir LblDir.Move 50, CboDir.Top + 50 'Para posicionar el botón cmdNavigate cmdNavigate.Move CboDir.Left + CboDir.Width + 50, CboDir.Top, cmdNavigate.Width - 100 'Para redimensionar y posicionar el control WebBrowser WebBrowser.Move 10, PicToolBar.Height + 50, Screen.Width - 25, Screen.Height - PicToolBar.ScaleHeight - 1200 'Para el Label de la barra de estado lblStatusbar.Move 150, WebBrowser.Top + WebBrowser.Height + 100, Screen.Width - 300 'Para posicionar la barra de progreso (Progressbar) ProgressBar.Left = cmdtoolBar(4).Left + cmdtoolBar(4).Width + 50 End Sub 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) 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 Private Sub QuitartabStop()On Error Resume NextDim i As Integer, ctl As ControlFor Each ctl In Me.Controls 'Deshabilitamos la propiedad TabStop de todos los controles, exepto del control WebBrowser 'y del control cboDir (barra de direcciones) If Not TypeOf ctl Is WebBrowser And Not TypeOf ctl Is ComboBox Then ctl.TabStop = False End IfNext ctl'Ponemos el botón que bavega (cboNavigate) con la propiedad Default en TruecmdNavigate.Default = TrueEnd Sub Procedimientos que se ejecutan en la carga del form En el evento Load del Form iría el siguiente código: Private Sub Form_Load()'Autocompletamos la caché de windows cuando tipeamos en el cboDirCall AucompletarCache(CboDir)'Ponemos en false la propiedad tabStop de los controles menos la _ del WebBrowser y la del Combo cboDirCall QuitartabStop'Para posicionar y redimensionar los controlesCall RedimensionarControlesEnd Sub 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: 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). 'ConstantesPublic Const SHACF_AUTOAPPEND_FORCE_OFF = &H80000000Public Const SHACF_AUTOAPPEND_FORCE_ON = &H40000000Public Const SHACF_AUTOSUGGEST_FORCE_OFF = &H20000000Public Const SHACF_AUTOSUGGEST_FORCE_ON = &H10000000Public Const SHACF_DEFAULT = &H0Public Const SHACF_FILESYSTEM = &H1Public Const SHACF_URLHISTORY = &H2Public Const SHACF_URLMRU = &H4Public Const SHACF_USETAB = &H8Public Const SHACF_URLALL = (SHACF_URLHISTORY Or SHACF_URLMRU)'Función Api SHAutoComplete para autocompletar la cachéPublic Declare Sub SHAutoComplete Lib "shlwapi.dll" (ByVal hwndEdit As Long, ByVal dwFlags As Long)Public Declare Function FindWindowEx Lib "user32" Alias "FindWindowExA" (ByVal hWnd1 As Long, _ ByVal hWnd2 As Long, ByVal lpsz1 As String, _ ByVal lpsz2 As String) As Long'Procedimiento que recibe un combo como parámetroPublic Sub AucompletarCache(cbo As ComboBox)Dim Handle As LongHandle = FindWindowEx(cbo.hWnd, 0, "edit", nullstring)SHAutoComplete Handle, SHACF_DEFAULTEnd Sub 20 - 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 Private Sub WebBrowser_NavigateComplete2(ByVal pDisp As Object, URL As Variant)'Mostramos la url que se está cargando en el comboCboDir = WebBrowser.LocationURL'Agregamos la url al comboCboDir.AddItem WebBrowser.LocationURL'Mostramos en el la barra de titulo del formulario el title _ de la página con la propiedad LocationNameMe.Caption = WebBrowser.LocationNameEnd Sub 21 - 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. Para evitar esto y poder abrirlo con una nueva instancia de nuestro formulario web,se puede hacerlo con el evento llamado NewWindow2. 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: El código fuente sería el siguiente: Private Sub WebBrowser_NewWindow2(ppDisp As Object, Cancel As Boolean)'Cancelamos la ventana del explorador predeterminadoCancel = True'Creamos una nueva instancia del navegador, es decir del formularioSet NuevaVentana = New FrmWeb NuevaVentana.Show 'lo hacemos visible 'cargamos la página en esta nueva ventana NuevaVentana.WebBrowser.Navigate lblStatusbarEnd SubPrivate Sub Form_Unload(Cancel As Integer)'Eliminamos la variable de tipo FrmWeb cuando descargamos el FormularioSet NuevaVentana = NothingEnd Sub Ahora, para poder crear el formulario de tipo FrmWeb, es decir una nueva instancia , debemos declarar la variable, en la zona de declaraciones : 'Variable para crear la instancia del navegador Dim NuevaVentana As FrmWeb 22 - 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 evento ProgressChange. Este tiene 2 parámetros: Uno llamado ProgressMax y otro Progress. El código fuente para la barra de progreso es el siguiente: 'Evento ProgressChange del control WebBrowser que _ nos permite obtener los valores de descargaPrivate Sub WebBrowser_ProgressChange(ByVal Progress As Long, ByVal ProgressMax As Long)On Error GoTo men'El Máximo de la barra es la variable ProgressMaxProgressBar.Max = ProgressMaxProgressBar.Value = Progress If ProgressMax <= 0 Then ProgressBar.Visible = False Else ProgressBar.Visible = True End IfExit Sub'Errormen:If Err.Number = 380 Then Resume NextEnd Sub Bueno acá termina este simple Navegador web en visual basic. Se pueden agregar muchas otras opciones, como por ejemplo un botón para añadir páginas de favoritos, Historial etc... También un método interesante del control WebBrowser es ExecWb, este permite realizar varias operaciones, como por ejemplo abrir la ventana de búsqueda que usa el internet explorer, imprimir, guardar la página web , seleccionar texto, Copiar , Cortar, vista preeliminar del documento cargado, y varias otras opciones Si querés ver un ejemplo de como poder realizar esto último, en este enlace se muesta como hacerlo: Método ExecWb del control WebBrowser