Tabla de contenido:

Creación de un programa en Visual Basic: navegador web: 9 pasos
Creación de un programa en Visual Basic: navegador web: 9 pasos

Video: Creación de un programa en Visual Basic: navegador web: 9 pasos

Video: Creación de un programa en Visual Basic: navegador web: 9 pasos
Video: Aplicacion web con Visual Basic .NET y ASP.NET 2024, Noviembre
Anonim
Creación de un programa en Visual Basic: navegador web
Creación de un programa en Visual Basic: navegador web

Este Instructable explica el proceso de creación de una aplicación de navegador web simple en VB. NETIt está diseñado como un seguimiento de mi primer Instructable de VB. NET: Creación de su primer programa en Visual Basic. Se recomienda que lea primero ese instructivo, ya que este instructivo asume que tiene un conocimiento básico de la Interfaz de Visual Basic Express Edition, como se cubre en mi otro instructivo. Aunque Visual Basic 2005 Express Edition funciona bien para este instructivo, estoy usando Visual Basic 2008 Express Edition, disponible en Microsoft

Paso 1: crea el proyecto

Crea el proyecto
Crea el proyecto

Cree un nuevo proyecto de Windows Forms y llámelo Explorador web. Cambie el tamaño del formulario a su gusto.

Paso 2: agregue los controles y cambie las propiedades

Agregue los controles y cambie las propiedades
Agregue los controles y cambie las propiedades

Desde la caja de herramientas, arrastre un TextBox, WebBrowser y A Button al formulario. Colóquelos como están en la imagen. Luego, edite la propiedad Anchor del TextBox y WebBrowser para que todos los cuadros alrededor del cuadrado gris (que se muestran cuando edita la propiedad del ancla) estén seleccionados, esto permitirá que los controles se 'estiren' cuando se cambie el tamaño del formulario. Haga lo mismo para el Botón, pero solo configúrelo en "Arriba, Derecha". También cambie la propiedad Text de Form1 a Web Browser, o algo similar para cambiar la barra de título.

Paso 3: ¡Código

¡Código!
¡Código!

Haga doble clic en Button1 y agregue el siguiente código al editor, después de la línea "Private Sub" y antes de la línea "End Sub"

WebBrowser1. Navigate (TextBox1. Text)Este código simplemente le dice al programa: Cuando alguien hace clic en Button1, Get WebBrowser para navegar a lo que sea que esté en TextBox1 ¡Eso es! Tiene un navegador web en funcionamiento. Haga clic en el botón de reproducción para probarlo.

Paso 4: más cosas

Mas cosas
Mas cosas

Ahora, no pensaste que solo te iba a dar una línea de código, ¿verdad? En los próximos pasos, implementaremos lo siguiente:

  • Barra de direcciones que cambia a medida que cambia la página
  • Botones de retroceso, avance y actualización
  • Barra de estado.

Paso 5: barra de direcciones

Barra de direcciones
Barra de direcciones

Por el momento, todo lo que hace la barra de direcciones es mostrar la página en la que escribes, si haces clic en un enlace, el cambio no se refleja en la barra de direcciones. Para solucionar esto, necesitamos agregar más código. Regrese a la vista de diseño, haga clic en "Form 1.vb (Diseño)" y luego haga doble clic en el control WebBrowser. Volverá a la vista de código, sin embargo, habrá más código allí, observe que dice "WebBrowser1_DocumentCompleted", este es el código que queremos, por lo que no necesitamos hacer ningún cambio aquí, pero hay un espacio en blanco línea debajo de esa, antes de la instrucción End Sub, y queremos agregar algo de código allí. Escriba lo siguiente allí

TextBox1. Text = WebBrowser1. Url. ToStringEsto le dice al programa que una vez que WebBrowser1_DocumentCompleted, deberíamos cambiar TextBox1. Text a WebBrowser1. Url. ToString está ahí porque, de forma predeterminada, la propiedad URL del navegador web no es del mismo tipo de datos (cadena), como lo necesita nuestro cuadro de texto. ToString escribe la URL en una cadena para TextBox.

Paso 6: botones de acción

Botones de acción
Botones de acción

Vuelva a la vista de diseño, arrastre 3 nuevos botones al formulario y colóquelos. Cambie la propiedad Text de cada uno: Button2 = Back, Button3 = Forward y Button4 = Refresh. Si los coloca como los míos, ajuste la propiedad de anclaje de Actualizar al principio, haga doble clic derecho en el botón Atrás y escriba el siguiente código.

WebBrowser1. GoBack () Volver al diseño, haga doble clic en Adelante y escriba

WebBrowser1. GoForward ()Vista de diseño y un doble clic para actualizar

WebBrowser1. Refresh ()Pruebe el navegador y pruebe las nuevas funciones.

Paso 7: barra de estado

Barra de estado
Barra de estado

De vuelta en la vista de diseño, agregue una etiqueta, cambie el texto a "Cargando …" (sin las comillas). Ahora, vaya a la vista de código haciendo clic en la pestaña Form1.vb. Busque la entrada WebBrowser1_DocumentCompleted y escriba debajo el código que colocó allí anteriormente

Label1. Text = "Listo"Ahora, haga clic donde el código dice DocumentCompleted. Mueva el mouse hacia arriba hasta donde están los dos cuadros desplegables. Seleccione el segundo (el que dice DocumentCompleted) y seleccione Navegando. Luego, aparecerá un código nuevo, típ.

Label1. Text = "Cargando"Esto solo proporciona un indicador cuando la página se está cargando. Además, es posible que desee establecer la propiedad de anclaje de la etiqueta.

Paso 8: ¡Completa

¡Completa!
¡Completa!

Ahí tienes. Tiene un navegador web en pleno funcionamiento. Sigue personalizándolo como desees, como en mi primer instructivo. Tengo algunos deberes para aquellos que completen este instructivo. Implemente lo siguiente:

  • Una función en casa
  • Cambie el botón Actualizar a un botón Detener cuando se esté cargando una página.

¡Espero que estos proyectos te hayan mostrado lo fácil que es programar!

Paso 9: Soluciones

Soluciones
Soluciones

Para aquellos que completaron mi primer instructable de VB, tengo las soluciones para la tarea que establecí al final.

Cambiar el color de fondo

Esto es simple: cambie la propiedad BackColour de Form1 a un color diferente

Agrega información de derechos de autor

Una nueva etiqueta con la propiedad de texto cambiada hará el truco

Haga que el formulario cambie de tamaño con la imagen

¡Cambie AutoSize a True y AutoSizeMode a GrowAndShrinkDone! Aún por venir: estaré creando más Instructables VB. NET. ¡Sigue codificando!

Recomendado: