Paso 2: crear una interfaz de usuario

Actualización: noviembre 2007

Es el momento de comenzar a crear un explorador web. Se utilizará Visual Basic Express para generar la interfaz de usuario (la parte visible con la cual interactúan los usuarios) agregando controles del Cuadro de herramientas al formulario.

El Cuadro de herramientas se encuentra en el lado izquierdo de Visual Studio y consta de varias fichas, como Datos, Componentes y Todos los formularios Windows Forms. Dentro de cada ficha hay un conjunto de entradas, que representan controles o componentes que se pueden agregar a la aplicación. Por ejemplo, la ficha Todos los formularios Windows Forms tiene entradas denominadas Textbox, Button y Checkbox que representan los controles que puede agregar a la aplicación arrastrándolos al formulario. No se preocupe demasiado por el tamaño de los controles; aprenderá a personalizar el aspecto de la aplicación en la lección siguiente.

vínculo a vídeo Para ver una demostración en vídeo, vea Video How to: Creating Your First Visual Basic Program.

Para agregar controles a la aplicación

  1. Haga clic en el panel Cuadro de herramientas.

    Se abrirá el Cuadro de herramientas.

    s3hwe76s.alert_note(es-es,VS.90).gifNota:

    El Cuadro de herramientas es más fácil de utilizar si mantiene la ventana abierta. Puede hacer esto haciendo clic en el icono Ocultar automáticamente, que parece una chincheta.

  2. Haga clic en la ficha Todos los formularios Windows Forms del Cuadro de herramientas y, a continuación, arrastre un control Panel hasta la esquina superior izquierda del formulario.

    s3hwe76s.alert_note(es-es,VS.90).gifNota:

    Si tiene dificultades para encontrar el control correcto, haga clic con el botón secundario en el Cuadro de herramientas y seleccione Ordenar elementos alfabéticamente.

  3. Desde la misma ficha, arrastre un control TextBox y colóquelo en la parte superior del control Panel.

    s3hwe76s.alert_note(es-es,VS.90).gifNota:

    Puede cambiar la posición de los controles mediante operaciones de arrastrar y colocar. También puede cambiar el tamaño de los controles haciendo clic y arrastrando el borde o la esquina del control.

  4. En la misma ficha, arrastre un control Button y colóquelo encima del Panel, a la derecha del control TextBox.

  5. Finalmente, en la ficha Todos los formularios Windows Forms, seleccione un control WebBrowser y colóquelo bajo el control Panel.

    s3hwe76s.alert_note(es-es,VS.90).gifNota:

    Si el control WebBrowser no se ajusta en el formulario, puede cambiar el tamaño del formulario arrastrando el borde o esquina del mismo.

    s3hwe76s.alert_note(es-es,VS.90).gifNota:

    Si tiene abierta la ventana Cuadro de herramientas, es posible que desee cerrarla ahora para tener más espacio de trabajo. Puede hacerlo haciendo clic una vez más en el icono Ocultar automáticamente.

Acaba de agregar cuatro controles al formulario. Los controles contienen código que define el aspecto que tendrán y las tareas que pueden realizar.

Por ejemplo, considere el control Button: casi todos los programas tienen un botón "Aceptar" o un botón "Salir". Si bien podría escribir su propio código para dibujar un botón en la pantalla, cambiar su apariencia cuando se presione y realizar alguna tarea cuando se haga clic en él, hacerlo para cada programa enseguida se convertiría en un trabajo tedioso. El control Button ya incluye el código necesario para realizar estas acciones. Esto evita tener que realizar mucho trabajo innecesario.

Como puede ver, el Cuadro de herramientas contiene numerosos controles y cada uno de ellos tiene un propósito único. Los controles Panel pueden utilizarse para albergar otros controles, como los que acaba de agregar. Los controles Button se utilizan generalmente para realizar tareas cuando el usuario hace clic en ellos; por ejemplo, cerrar el programa. Los controles TextBox se utilizan para escribir texto en una pantalla a través del teclado. Un control WebBrowser proporciona funciones de exploración web integradas similares a las de Internet Explorer; sin duda, no deseará escribir todo el código de esa función.

En próximas lecciones aprenderá a personalizar la apariencia de éstos y de otros muchos controles, así como a escribir el código que define su comportamiento. Además de utilizar los controles del Cuadro de herramientas, también puede crear sus propios controles, los que se conocen como controles de usuario; también se hablará de ellos en una próxima lección.

Acaba de agregar todos los controles necesarios a la aplicación. Probablemente tendrá un aspecto tosco y sin terminar, ¡pero es que es cierto! En la siguiente lección, utilizará la ventana Propiedades para establecer las propiedades que controlarán la apariencia y el comportamiento de la aplicación.

Siguiente lección: Paso 3: personalizar aspecto y comportamiento

Adiciones de comunidad

Mostrar: