1. Formulario y Controles Básicos.pdf

Herramientas de Desarrollo de Software

Visual Basic .NET

Autor: Ing. Wilson Gerardo Cardoza Llontop Email: [email protected]

© Derechos D erechos reser reser vados

Formulario y Controles Básicos

El Formulario Para crear una aplicación en Visual Basic .NET lo primero que tenemos que hacer es crear la interfaz, es decir la parte visual de la aplicación con la que va a interactuar el usuario. Los formularios y controles son los elementos de desarrollo básicos que se usan para crear la interfaz; son los objetos con los que se trabaja para desarrollar la aplicación. El objeto Formulario es el contenedor principal de toda la aplicación para Windows y se encuentra dentro del espacio de nombres: System.Windows.Forms En Visual Basic .NET, los formularios clásicos reciben el nombre de Windows Forms o WinForms.

Propiedades importantes del formulario: Name: Name: Se utiliza para colocarle un nombre al formulario, emplearemos el prefijo Frm. Text: Se Text: Se utiliza para darle un título al formulario.

Ing. Wilson Gerardo Cardoza Llontop

1


El Formulario Para crear una aplicación en Visual Basic .NET lo primero que tenemos que hacer es crear la interfaz, es decir la parte visual de la aplicación con la que va a interactuar el usuario. Los formularios y controles son los elementos de desarrollo básicos que se usan para crear la interfaz; son los objetos con los que se trabaja para desarrollar la aplicación. El objeto Formulario es el contenedor principal de toda la aplicación para Windows y se encuentra dentro del espacio de nombres: System.Windows.Forms En Visual Basic .NET, los formularios clásicos reciben el nombre de Windows Forms o WinForms.

Propiedades importantes del formulario: Name: Name: Se utiliza para colocarle un nombre al formulario, emplearemos el prefijo Frm. Text: Se Text: Se utiliza para darle un título al formulario.


1


Forecolor: Se Forecolor: Se utiliza para darle el color al texto que se utilice en primer plano en el formulario.

MinimizeBox: MinimizeBox: Se utiliza para desactivar o quitar el botón minimizar del formulario. Presenta dos valores: True o False. MaximizeBox: MaximizeBox: Se utiliza para desactivar o quitar el botón maximizar del formulario. Presenta dos valores: True o False. Icon: Indica Icon: Indica el icono del formulario, este se muestra en la barra de título de la ventana y en la barra de tareas de Windows. ShowIcon: ShowIcon: Indica si se muestra o se oculta el icono en la barra de título del formulario dependiendo de si el valor es True o False respectivamente. True

False

WindowState: WindowState: Determina la forma en que se presentará el formulario al ejecutarse, puede ser: Normal, Minimizada o Maximizada. BackgroundImage: BackgroundImage: Permite colocarle una imagen de fondo al formulario. Al seleccionar esta propiedad hacemos hacemos clic en su botón y se presenta la siguiente ventana, en la cual se debe hacer clic en el botón Importar y luego buscar y seleccionar la imagen deseada, finalmente debe dar clic en el botón Aceptar . …


2


El formulario con la imagen se mostraría de la siguiente manera:

BackgroundImageLayout: Esta propiedad es un complemento de la BackgroundImageLayout: propiedad BackgroundImage ya que permite ajustar la imagen de diferentes formas, por defecto muestra el valor Tile, pero puede configurar la imagen con cualquiera de sus valores.

Por ejemplo si utiliza el valor Stretch la imagen se ajusta al tamaño que tiene el formulario. El formulario ahora mostraría la imagen completa.


3


Nota Importante: Al agregar una imagen automáticamente en el Explorador de soluciones aparece una carpeta llamada Resources, la cual contendrá las diferentes imágenes que agreguemos a nuestra aplicación.

StartPosition: Determina la posición del formulario en la pantalla cuando aparece por primera vez. Presenta los siguientes valores:

Backcolor: Se utiliza para darle un color de fondo al formulario.


4


Opacity: Es una nueva propiedad, que indica la forma de visualización del formulario, que puede ser desde opaco equivalente al 100% hasta transparente equivalente al 0%. ControlBox: Esta propiedad se utiliza para controlar los botones de la barra de título además de su icono. Si está en True muestra los botones Minimizar, Maximizar, Cerrar y el icono, en caso de estar en False los oculta.

True

False

IsMdiContainer: Determina si el formulario es un contenedor MDI (Interfaz de Documento Múltiple).

Font: Utilizada para cambiar el tipo, el estilo y el tamaño de la letra, además podemos configurar el texto para que aparezca subrayado o tachado.


5


TopMost: Indica si el formulario aparece siempre por encima delresto de formularios de la aplicación que no tienen esta propiedad establecida en true. Cursor: Especifica el cursor que aparecerá al situar el mouse sobre el formulario.

FormBorderStyle: Indica la apariencia y el comportamiento del borde y de la barra de título del formulario. Presenta las siguientes opciones:

Eventos importantes del formulario: Load: Se produce al cargar los controles sobre el formulario. Activated: Ocurre al activarse el formulario. Closed: Se habilita al cerrar el formulario. Closing: Ocurre mientras se está cerrando el formulario. Click: Se desencadena al dar clic sobre el formulario. DoubleClick: Se desencadena al dar doble clic sobre el formulario., Deactivate: Ocurre al desactivarse el formulario. GotFocus: Ocurre al ingresar el foco sobre el formulario. LostFocus: Ocurre cuando el f ormulario pierde el foco. Paint: Ocurre al pintarse la ventana en pantalla. Resize: Ocurre cada vez que se modifica de tamaño el formulario. Ing. Wilson Gerardo Cardoza Llontop

6


Convenciones para el nombre de los objetos: Prefijos Es recomendable utilizar convenciones para el nombre de los objetos (formularios y controles), es decir que al momento de dar lectura al código sea más fácil de entender y comprender, por lo que el establecimiento de convenciones ayuda a identificar qué control se empleó. Es decir si por ejemplo si se utiliza un control Button emplee siempre como prefijo Btn después complételo con un nombre descriptivo acorde a la funcionalidad que este tendrá. A continuación se muestran los prefijos utilizados de algunos controles:

Objeto

Prefijo

Form

Frm

Label

Lbl

Button

Btn

TextBox

Txt

GroupBox

Gbx

RadioButton CheckBox ListBox ComboBox CheckedListBox

Rbn o Rb Chk Lb o Lst Cbo Chklb o ChkLst

Timer

Tmr

PictureBox

Pic

DateTimePicker

Dtp

FontDialog

Fdg

ColorDialog

Cdg

OpenFileDialog

Odg

SaveFileDialog

Sdg

FolderBrowseDialog

Fbdg

MenuStrip

Mns

ContextMenuStrip NumericUpDown

CMns Nud

Listview

Lv

TreeView

Tv

Nota Importante: Tener en cuenta que al momento de asignarle un nombre a los objetos no debe dejar espacios en blanco.


7


Control Label Un control Label o etiqueta es un control que muestra texto informativo, que los usuarios no pueden editar directamente.

Propiedades importantes del control Label: Name: Mediante esta propiedad le asignamos un nombre a la etiqueta, se utilizará el prefijo Lbl. Text: Se utiliza para colocarle texto a la etiqueta.

TextAlign: Determina la posición del texto dentro de la etiqueta. Por defecto el texto se coloca en la posición TopLeft. Presenta nueve formas de alineación. MiddleCenter TopLeft

TopCenter TopRight

MiddleLeft

MiddleRight

BottomLeft

BottonRight BottomCenter


8


Para poder visualizar mejor los efectos de esta propiedad, primero debemos de colocar la propiedad AutoSize de la etiqueta a False, luego procedemos a estirar un poco más grande el tamaño de la etiqueta.

A continuación presentamos algunos ejemplos:

TopCenter

MiddleCenter

BottomLeft

BottomRight

Enabled: Habilita o deshabilita una etiqueta. Presenta dos valores: True o False. Locked: Determina si se puede mover o cambiar el tamaño de la etiqueta. Presenta dos valores: True o False.


9


Dock: Esta propiedad nos proporciona la posibilidad de acoplar la etiqueta a uno de los bordes del formulario, consiguiendo que dicho control permanezca pegado a ese borde del formulario en todo momento. Puede ser arriba (Top), abajo (Bottom), izquierda (Left), derecha (Right) y centro (Fill). Top Left

Right

Fill Bottom

BorderStyle: Controla la apariencia del borde de la etiqueta. Presenta los siguientes valores:

None

FixedSingle

Fixed3D

Cursor: Especifica el cursor que aparece al situar el mouse sobre la etiqueta.

Visible: Permite la visualización o no de la etiqueta al momento de ejecutarse.


10


Anchor: Nos permite anclar la etiqueta a uno o varios bordes del formulario. Cuando anclamos un control a un borde, la distancia entre el control y dicho borde será siempre la misma, aunque redimensionemos el formulario. Top, Left

Las zonas de color gris oscuro representan los bordes de la etiqueta que ya están anclados a los bordes del formulario. Debemos marcar y desmarcar respectivamente estos elementos según los bordes que necesitamos anclar. Por defecto, los controles se encuentran inicialmente anclados a los bordes: superior (Top) e izquierdo (Left). Image: Mediante esta propiedad seleccionamos la imagen que queremos mostrar en la etiqueta.

AutoSize: Ajusta el texto al tamaño de la etiqueta. Presenta dos valores: True o False. Font: Utilizada para cambiar el tipo, el estilo y el tamaño del texto de la etiqueta, además podemos configurar el texto para que se muestre subrayado o tachado. ForeColor: Se utiliza para darle el color al texto de la etiqueta. BackColor: Se utiliza para darle color al fondo de la etiqueta. ImageAlign: Esta propiedad permite alinear la imagen, por defecto la imagen se coloca en la posición MiddleCenter. Se puede seleccionar entre nueve opciones.


11


MiddleCenter

Al igual que la propiedad TextAlign en esta propiedad es recomendable que para poder ver los efectos la propiedad AutoSize debe estar en False. Aquí mostramos algunos ejemplos:

MiddleCenter

BottomCenter

MiddleRight

BottomLeft

ContextMenuStrip: Esta propiedad se utiliza para especificar el nombre del control ContextMenuStrip que antes ha tenido que ser colocado y configurado, de tal manera que al hacer anticlic sobre el control Label se muestre un menú contextual. El control ContextMenuStrip es materia de estudio en otro capítulo.

Eventos importantes del control Label: Click: Este evento se desencadena al dar clic sobre la etiqueta. DoubleClick: Se desencadena al dar doble clic con el mouse sobre la etiqueta. Enter o GotFocus: Ocurren al ingresar el foco sobre la etiqueta Leave o LostFocus: Ocurren al salir el foco de la etiqueta. MouseEnter: Se habilita al ingresar el mouse sobre la etiqueta. MouseLeave: Se habilita al salir el mouse la etiqueta. MouseMove: Se desencadena al pasar el mouse sobre la etiqueta.


12


Control Button Un control Button o botón de pulsación es aquel que se utiliza para iniciar, detener o interrumpir un proceso.

Propiedades importantes del control Button: Name: Esta propiedad se utiliza para establecerle un nombre al botón, se utilizará el prefijo Btn. Text: Se utiliza para colocarle texto al botón.

Puede utilizar la propiedad Text para crear teclas de acceso directo en los botones si coloca el carácter & delante de la letra que quiere utilizarcomo tecla de acceso directo. Por ejemplo en el siguiente formulario aparece subrayadala letra S, ya que le hemos colocado en la propiedad Text: &Salir


13


Al ejecutar la aplicación, la letra “S” aparecerá subrayada y el usuario podrá seleccionar el botón presionando simultáneamente las teclas: ALT + S, obteniendo un efecto como si hubiera hecho clic sobre dicho botón. AutoSize: Ajusta el texto al tamaño del botón. Presenta dos valores: True o False. Font: Utilizada para cambiar el tipo, el estilo y el tamaño del texto del botón, además podemos configurar el texto para que aparezca subrayado o tachado. ForeColor: Se utiliza para darle el color al texto del botón. BackColor: Se utiliza para darle color al fondo del botón. TextAlign: Determina la posición del texto dentro del botón. Por defecto el texto se coloca en la posición MiddleCenter. Presenta nueve formas de alineación.

MiddleCenter TopLeft

TopCenter TopRight

MiddleLeft

MiddleRight

BottomLeft

BottonRight BottomCenter

A continuación se presentan algunos ejemplos:

MiddleCenter


MiddleLeft

14


BottomLeft

TopRight

Dock: Esta propiedad nos da la posibilidad de acoplar el botón a cualquiera de los bordes del formulario, consiguiendo que dicho control permanezca pegado a ese borde del formulario en todo momento. Puede ser arriba (Top), abajo (Bottom), izquierda (Left), derecha (Right) y centro (Fill). Top Fill Right

Left

Bottom

A continuación se muestran ejemplos:

Top

Bottom

Left

Right


15


Fill

Cursor: Especifica el cursor que aparece al situar el mouse sobre el botón.

Visible: Permite la visualización o no del botón al momento de ejecutarse.

Enabled: Se utiliza para habilitar o deshabilitar un botón. Presenta dos valores: True o False. Locked: Determina si se puede mover o cambiar el tamaño del botón. Presenta dos valores: True o False. Anchor: Nos permite anclar el botón a uno o varios bordes del formulario. Cuando anclamos un control a un borde, la distancia entre el control y dicho borde será siempre la misma, aunque redimensionemos el formulario. Top, Left

Las zonas de color gris oscuro representan los bordes del botón que ya están anclados a los bordes del formulario. Debemos marcar y desmarcar respectivamente estos elementos según los bordes que necesitamos anclar. Por defecto, los controles se encuentran inicialmente anclados a los bordes: superior (Top) e izquierdo (Left). Image: Mediante esta propiedad seleccionamos la imagen que queremos que se muestre en el botón.


16


ImageAlign: Esta propiedad permite alinear la imagen en el botón, por defecto la imagen se coloca en la posición MiddleCenter. Se puede seleccionar entre nueve opciones.

MiddleCenter

Aquí mostramos algunos ejemplos del botón con su imagen:

TopCenter

BottomCenter

MiddleLeft

MiddleRight

BackgroundImage: Permite especificar la imagen de fondo que utilizará el botón.


17


BackgroundImageLayout: Esta propiedad es un complemento de la propiedad BackgroundImage ya que permite ajustar la imagen de diferentes formas, por defecto muestra el valor Tile, pero puede configurar la imagen con cualquiera de sus valores.

Por ejemplo: si usted utiliza el valor Stretch la imagen se ajusta al tamaño que tiene el botón.

FlatStyle: Determina la apariencia del botón cuando el usuario mueve el mouse sobre el control o hace clic. Presenta los siguientes valores:

ContextMenuStrip: Esta propiedad se utiliza para especificar el nombre del control ContextMenuStrip que antes ha tenido que ser colocado y configurado, de tal manera que al hacer anticlic sobre el control Button se muestre un menú contextual. El control ContextMenuStrip es materia de estudio en otro capítulo.


18


Eventos importantes del control Button: Click: Este evento se desencadena al dar clic sobre el botón. Enter o GotFocus: Ocurren al ingresar el foco sobre el botón. Leave o LostFocus: Ocurren al salir el foco del botón. MouseEnter: Se habilita al ingresar el mouse sobre el botón. MouseLeave: Se habilita al salir el mouse el botón. MouseMove: Se desencadena al pasar el mouse sobre el botón.


19


Control TextBox Un control TextBox o caja de texto es aquel que muestra texto escrito en tiempo de diseño que puede ser editado por los usuarios en tiempo de ejecución o modificado mediante instrucciones.

Propiedades importantes del control TextBox: Name: Esta propiedad se utiliza para colocarle un nombre a la caja de texto, se utilizará el prefijo Txt. Text: Es la propiedad más importante de este control, se utiliza para colocarle texto a la caja de texto. Font: Utilizada para cambiar el tipo, el estilo y el tamaño del texto, además podemos configurar el texto para que se muestre subrayado o tachado. ForeColor: Se utiliza para darle el color al texto. BackColor: Se utiliza para darle color al fondo de la caja de texto. ReadOnly: Se utiliza cuando queremos que el contenido de la caja de texto no se pueda editar. Presenta dos valores: True o False. Enabled: Habilita o deshabilita una caja de texto. Presenta dos valores: True o False. Locked: Determina si se puede mover o cambiar el tamaño de la caja de texto. Presenta dos valores: True o False. Cursor: Especifica el cursor que aparece al situar el mouse sobre la caja de texto.


20


Visible: Permite la visualización o no de la caja de texto al momento de ejecutarse. Presenta dos valores: True o False. TextAlign: Determina la posición del texto dentro de la caja de texto. Por defecto el texto se coloca en la posición Left (izquierda). Presenta tres formas de alineación.

A continuación se muestra los siguientes ejemplos:

Left

Right

Center

Dock: Esta propiedad nos proporciona la posibilidad de acoplar la caja de texto a uno de los bordes del formulario, consiguiendo que dicho control permanezca pegado a ese borde del formulario en todo momento. Puede ser arriba (Top), abajo (Bottom), izquierda (Left), derecha (Right) y centro (Fill). Top Left

Right

Fill Bottom


21


BorderStyle: Indica el borde de la caja de texto. Presenta los siguientes valores:

En los siguientes ejemplos se muestran los diferentes valores de la propiedad BorderStyle. Fixed3D

FixedSingle

None

Anchor: Nos permite anclar la caja de texto a uno o varios bordes del formulario. Cuando anclamos un control a un borde, la distancia entre el control y dicho borde será siempre la misma, aunque se redimensione el formulario. Top, Left

Las zonas de color gris oscuro representan los bordes de la caja de texto que ya están anclados a los bordes del formulario. Debemos marcar y desmarcar respectivamente estos elementos según los bordes que necesitamos anclar.


22


Por defecto, los controles se encuentran inicialmente anclados a los bordes: superior (Top) e izquierdo (Left). PasswordChar: Esta propiedad se usa generalmente cuando en la caja de texto se ingresará una clave o contraseña. Aquí se señala el carácter que aparecerá como máscara de entrada, tener en cuenta que sólo acepta un solo carácter. En el siguiente ejemplo se usa el carácter asterisco *.

MaxLength: Esta propiedad establece el número de caracteres que la caja de texto aceptará. Su valor por defecto es 32 767. Colóquele a esta propiedad el valor 0, si desea que el texto pueda tener cualquier longitud, hasta el límite máximo de 2 GB, ó 2 147 483 647 caracteres exactamente. Para restringir el número de caracteres que el usuario puede escribir establezca en esta propiedad el valor que usted considere necesario. MultiLine: Esta propiedad se utiliza para establecer si la caja de texto puede contener una sola línea de texto o varias líneas. Por defecto, el control almacena una sola línea (valor False). Para cambiarlo, asigne a esta propiedad el valor True y luego amplíe la caja de texto al tamaño requerido. False

True

WordWrap: Esta propiedad establece si el texto se ajusta automáticamente cuando llega al margen derecho de la caja de texto. El valor por defecto es True. Sin embargo, si el control tiene una barra de desplazamiento horizontal, puede introducir líneas de texto muy largas. ScrollBars: Esta propiedad controla si la caja de texto tendrá barras de desplazamiento cuando el texto exceda las dimensiones del control. Esta Ing. Wilson Gerardo Cardoza Llontop

23


propiedad se debe utilizar cuando la propiedad MultiLine está configurada con el valor True. Presenta los siguientes valores:

Si usted establece esta propiedad con el valor Horizontal notará que no se visualiza la barra de desplazamiento horizontal, para poder visualizarla deberá de colocar la propiedad WordWrap a False.

La siguiente figura muestra la caja de texto cuando su propiedad ScrollBar tiene el valor Vertical.

La siguiente figura muestra la caja de texto cuando su propiedad ScrollBar tiene el valor Both. Como puede observar este valor activa las barras de desplazamiento horizontal y la vertical.


24


CharacterCasing: Esta propiedad se usa para indicarle a la caja de texto si el texto ingresado debe dejarse tal y como se ingresó (Normal), o si se debe convertir a mayúsculas (Upper) o minúsculas (Lower).

A continuación se muestran ejemplos con los tres valores de la propiedad CharacterCasing. Normal

Upper

Lower

RightToLeft: Se utiliza cuando se requiere que el texto que se ingresa empiece por la parte derecha.

ContextMenuStrip: Esta propiedad se utiliza para especificar el nombre del control ContextMenuStrip que antes ha tenido que ser colocado y configurado, de tal manera que al hacer anticlic sobre el control TextBox se muestre un menú contextual. El control ContextMenuStrip es materia de estudio en otro capítulo. Ing. Wilson Gerardo Cardoza Llontop

25


Eventos importantes del control TextBox: KeyDown: Ocurre al pulsar hacia abajo una tecla extendida. KeyPress: Ocurre al pulsar una tecla normal. También se desencadena antes el evento KeyDown y después el evento KeyUp. KeyUp: Ocurre al soltar una tecla extendida previamente pulsada. TextChanged: Es un nuevo evento que reemplaza al evento change, es decir ocurre al cambiar el texto. Enter o GotFocus: Ocurren al ingresar el foco sobre la caja de texto. Leave o LostFocus: Ocurren al salir el foco sobre la caja de texto. Validating: Se habilita cuando el control está validándose. Validated: Se habilita después de validarse el control.


26


DESARROLLO DE APLICACIONES En esta sección procederemos al desarrollo de diferentes tipos de aplicaciones básicas donde utilizaremos como es lógico el f ormulario y los controles Label, Button y TextBox, en cada una de las aplicaciones tendremos un cuadro donde se detalla la configuración de las diferentes propiedades de los objetos que se utilizan.

Aplicación Nº: III - 01 Crear una aplicación que muestre un formulario con el título “Bienvenido” con un control label donde se muestre el texto “Microsoft Visual Basic .Net” y un control button con el texto “Salir”, el cual estará programado para que al hacerle clic termine la aplicación. : Solución Nuestro formulario al final deberá presentar el siguiente aspecto:

Colocamos un control Label1 y un control Button1 en el f ormulario, como se muestra a continuación:


27


Configuramos las propiedades de los objetos que utilizaremos:

Objeto Form1

Label1

Button1

Propiedad Name Text StartPosition Name Text BorderStyle ForeColor Font Name Text

Valor FrmBienvenido Bienvenido CenterScreen LblMensaje Microsoft Visual Basic .NET Fixed3D Blue Fuente: Arial, Estilo: Negrita, Tamaño 10 BtnSalir &Salir

En el objeto Form1 se utilizan tres propiedades: Name que permite asignarle un nombre al formulario, Text utilizada para darle un título y StartPosition se utiliza para que al momento de ejecutarse la aplicación nuestro formulario aparezca en la parte central de nuestra pantalla. En el objeto Label1 se utilizan cuatro propiedades: Name para darle un nombre al label, la propiedad Text para mostrar un texto, BorderStyle para cambiarle el borde, ForeColor para cambiarle de color al texto y Font que permite configurar el tipo, estilo, además del tamaño de la letra. En el objeto Button1 se utilizan solamente dos propiedades: Name que como ya es obvio se utiliza para darle un nombre al control button y Text que permite asignarle un texto al botón. Luego de configurar las diferentes propiedades del formulario y los controles, hacemos doble clic en el botón Salir para programar este botón, aquí en el evento click del BtnSalir escribiremos la instrucción Close(), la cual hace que la aplicación termine.

Nombre del Formulario

Evento del Botón Salir

Instrucción que permite terminar la aplicación

Finalmente, ejecutamos la aplicación haciendo clic en el icono F5. Ing. Wilson Gerardo Cardoza Llontop

o pulsando la tecla

28


Nota Importante: Cabe hacer notar que al momento de guardar la aplicación, nuestros archivos en el Explorador de soluciones se verán como en la siguiente figura:

Si observamos nuestra carpeta donde hemos guardado nuestra aplicación notamos que el formulario se encuentra con el nombre Form1.vb

Esto quiere decir que el formulario se guardará con el nombre de archivo Form1, si usted desea puede cambiarle el nombre del archivo, generalmente aquí se debe colocar el nombre que se le colocó en la propiedad Name, en este caso FrmBienvenido, para cambiar el nombre simplemente basta con hacer anticlic en Form1.vb en el explorador de soluciones, seleccionar y hacer clic en la opción Cambiar nombre y luego colocarle el nombre correspondiente, teniendo en cuenta de conservar la extensión del nombre del archivo del formulario (.vb)


29


Ahora procederemos a cambiarle el nombre como se muestra en la siguiente figura:

Veamos nuevamente el contenido de nuestra carpeta en el Explorador de Windows y notamos que el nombre del formulario cambio automáticamente de Form1 a FrmBienvenido, como se muestra en la siguiente figura:


30


Aplicación Nº: III - 02 Crear una aplicación que permita ingresar el nombre de un usuario en un control TextBox y luego al hacer clic en un control Button muestre un mensaje saludando al usuario ingresado. Solución :

Al final del diseño, el formulario deberá de tener el aspecto como se muestra en la figura siguiente, observar que a los controles Button además de tener un texto, presentan una imagen.

Ejecutamos la aplicación (F5) y luego ingresamos el nombre de un usuario para este ejemplo se ha ingresado el usuario: Victor Cardoza.


31


Y al hacer clic en el botón Mostrar aparecerá un mensaje con el nombre del usuario que usted ingreso.

Finalmente al hacer clic en el botón Salir, terminará la aplicación. Entonces empezaremos a diseñar nuestro f ormulario, para ello colocaremos un control Label1, un control TextBox1 y dos controles Button: Button1 y Button2, distribuidos como se muestra en la siguiente figura:

TextBox1

Enseguida configuramos las propiedades de los objetos que utilizaremos como se muestra en el siguiente cuadro.


32


Objeto

Propiedad Name Form1 Text StartPosition Label1 Text TextBox1 Name Name Text TextAlign Button1 Image

Button2

ImageAlign Name Text TextAlign Image ImageAlign

Valor FrmSaludo Saludo CenterScreen Usuario : TxtUsuario BtnMostrar &Mostrar BottomCenter Ubicar la carpeta que contiene los íconos y seleccionar el icono correspondiente MiddleCenter BtnSalir &Salir BottomCenter Ubicar la carpeta que contiene los íconos y seleccionar el icono correspondiente MiddleCenter

Generalmente se le debe asignar un nombre adecuado a los controles que se utilizarán al momento de realizar la programación, pero existen controles en una aplicación que ya no es necesario asignárselo porque simplemente dichos controles no serán utilizados en la programación, por lo tanto no tendrán mayor trascendencia. Por ejemplo: Si observamos el cuadro anterior al control Label1 no se le específico la propiedad Name, ya que dicho control sólo lo utilizaremos para mostrar un título. Una vez que se ha terminado de diseñar la interfaz, comenzaremos a ingresar las instrucciones correspondientes, en este ejemplo ingresaremos instrucciones en el evento clic tanto del botón Mostrar como del botón Salir.

Instrucciones del botón BtnMostrar , evento Click

MsgBox("Hola usuario: " & TxtUsuario.Text, MsgBoxStyle.Exclamation, "Saludo")

Instrucciones del botón BtnSalir , evento Click

Close( )

En la siguiente figura se muestran las instrucciones del botón Mostrar y del botón Salir en la ventana editor de código.


33


Aplicación Nº: III - 03 Diseñar una aplicación que permita ingresar los datos de un empleado, después de ingresar cada dato y pasar a ingresar el siguiente debe cambiar el color de fondo de la caja de texto. Una vez ingresados los datos al hacer clic en el botón Nuevo debe limpiar las cajas de texto y finalmente al dar clic en el botón Salir debe terminar la aplicación.

: Solución Al terminar de diseñar la aplicación nuestro formulario, debe presentar un aspecto como el que se muestra en la siguiente figura.

Ejecutamos la aplicación (F5), y luego ingresamos en primer lugar el código del empleado, presionamos la tecla TAB para pasar a la siguiente caja de texto donde ingresaremos el nombre, notará que el fondo de la caja de texto que contiene el código cambió de color; y así sucesivamente hasta terminar de ingresar todos los datos del empleado.


34


Luego de terminar de ingresar los datos del empleado, al hacer clic en el botón Nuevo, se limpiarán los datos de las cajas de texto y colocará el foco en la primera caja de texto donde se ingresa el código, se coloca allí ya que es la primera caja donde se ingresan los datos, más adelante se explica todo lo relacionado al foco, el foco en una caja de texto es una línea vertical pequeña parpadeante. Foco

Finalmente al hacer clic en el botón Salir, terminará la aplicación.

Ahora, empezaremos a diseñar el formulario, entonces colocaremos los controles respectivos, como se muestran en la siguiente figura:


35


TextBox1 TextBox2

TextBox3 TextBox4 TextBox5

Ahora configuraremos las propiedades de cada objeto: Objeto

Form1

Label1 Label2 Label3 Label4 Label5 TextBox1 TextBox2 TextBox3 TextBox4 TextBox5

Button1

Propiedad Name Text MaximizeBox MinimizeBox StartPosition Text Text Text Text Text Name MaxLength Name MaxLength Name MaxLength Name Name Name Text TextAlign Image

Button2

ImageAlign Name Text TextAlign Image ImageAlign

Valor FrmEmpleado Datos del Empleado False False CenterScreen Código : Nombre : Sexo : Fecha de Ingreso : Sueldo (S/.) : TxtCodigo 4 TxtNombre 30 TxtSexo 1 TxtFechaIngreso TxtSueldo BtnNuevo &Nuevo BottomCenter Ubicar la carpeta que contiene los íconos y seleccionar el ícono correspondiente MiddleCenter BtnSalir &Salir BottomCenter Ubicar la carpeta que contiene los íconos y seleccionar el ícono correspondiente MiddleCenter


36


Luego de configurar las propiedades de los objetos (Formulario y controles), comenzamos a escribir las instrucciones correspondientes a las cajas de texto. Para que las cajas de texto cambien de color al pasar a la siguiente, debe utilizarse el evento LostFocus, que es un evento que se desencadena cuando la caja de texto pierde el foco, el color que utilizaremos para colorear el fondo de las cajas de texto será el color cyan.

Explicaremos el procedimiento para programar la caja de texto TxtCodigo, ya que después para el resto de cajas será de manera similar. Entonces nos ubicamos en la ventana editor de código y seleccionamos de la lista de objetos el control TxtCodigo, como se muestra en la siguiente figura.

Luego seleccionamos el evento LostFocus, de la lista de eventos; como lo puede visualizar en la siguiente figura.

Una vez seleccionados el Control TxtCodigo y su correspondiente evento LostFocus, la ventana editor de código queda de la siguiente manera:


37


Entonces ahora escribimos la línea de código que hará que la caja de texto TxtCodigo cambie de color de fondo, al momento de perder el foco.

Repetimos el mismo procedimiento para las demás cajas de texto, de tal manera que al final de realizar los pasos la ventana editor de código debe mostrarse como se muestra en la siguiente figura:


38

1. Formulario y Controles Básicos.pdf

Recommend Documents