FUNDAMENTOS DE INFORMATICA

Tema 6 Programacin de Interfaces Grficas

Departamento de Ingeniera de Sistemas y Automtica Universidad de Vigo

Fundamentos de Informtica. Departamento de Ingeniera de Sistemas y Automtica.

Actualizacin Septiembre 2005

Programacin de Interfaces Grficas

Formularios y Controles
Cada uno de los elementos grficos que pueden formar parte de una aplicacin tpica de Windows es, en la terminologa Visual Basic, un tipo de control: los botones, cajas de dilogo, cajas de seleccin desplegable, mens, etc., son tipos de controles de Visual Basic. Los formularios pueden ser considerados como las ventanas contenedoras de los controles. Una aplicacin (o proyecto) puede estar formada por varios formularios, aunque estos no son necesarios.

Fundamentos de Informtica. Departamento de Ingeniera de Sistemas y Automtica.

Actualizacin Septiembre 2005

Programacin de Interfaces Grficas

Eventos relacionados con los Objetos

Las acciones del usuario sobre la interfaz se denominan eventos. Son eventos tpicos el pulsar un botn, hacer dobleclick sobre un icono, el pulsar una tecla, etc. Cada vez que se produce un evento, Visual Basic ejecuta una determinada funcin o procedimiento, que se llama con un nombre que se forma a partir del nombre del objeto, separado con el carcter _ y el nombre del evento correspondiente. Ejemplos:
Objeto_Evento Objeto_Evento... ...

Form_Load BtnAceptar_Click TmrAccion_Timer

Fundamentos de Informtica. Departamento de Ingeniera de Sistemas y Automtica. Actualizacin Septiembre 2005 3

Programacin de Interfaces Grficas

Eventos relacionados con los Objetos

Lista de eventos de un objeto o control. En negrita se muestran aquellos con cdigo asociado.

Cdigo asociado al evento Click de un Botn de comando

Fundamentos de Informtica. Departamento de Ingeniera de Sistemas y Automtica.

Actualizacin Septiembre 2005

Programacin de Interfaces Grficas

Mtodos asociados a los Objetos

Los mtodos son funciones o procedimientos preprogramados en el lenguaje que estn asociadas a una determinada clase de controles. Se accede a los mtodos de cada control por medio de su nombre correspondiente. Para invocar un mtodo de un control, se introduce el nombre del control, el smbolo . y el nombre del mtodo junto con los parmetros (si stos son necesarios). Ejemplos:
Objeto Objeto. .Metodo Metodo[( [(parmetros)] parmetros)]

TxtUsuario.Move(30) BtnAceptar.Refresh LstUsuarios.AddItem(PEPE)

Fundamentos de Informtica. Departamento de Ingeniera de Sistemas y Automtica. Actualizacin Septiembre 2005 5

Programacin de Interfaces Grficas

Controles elementales del Entorno de Programacin VB

PictureBox: permite mostrar imgenes en los formularios del programa. Label: etiquetas de texto que el usuario no puede modificar directamente. TextBox: edicin de texto, permite que el usuario introduzca datos. Frame: marco para el agrupamiento funcional de controles en formularios. CommandButton:botn de comando para solicitar ejecucin de acciones. CheckBox: permite ofrecer al usuario una opcin de seleccin Si/No. OptionButton: opcin, de entre un conjunto, que se puede seleccionar. ListBox: lista de elementos de la cual es posible seleccionar varios. ComboBox: combinacin entre los controles TextBox y ListBox. HScrollBar/VScrollBar: barra de desplazamiento horizontal/vertical. Timer: permite la ejecucin de cdigo a intervalos peridicos. Line: control grfico para visualizar lneas rectas en los formularios. Shape: control grfico que permite mostrar formas geomtricas bsicas. Data: proporciona acceso a informacin almacenada en Bases de Datos. CommonDialog: conjunto de cuadros de dilogo estndar para operaciones habituales (ficheros, colores, tipos de letra, etc.)
Fundamentos de Informtica. Departamento de Ingeniera de Sistemas y Automtica. Actualizacin Septiembre 2005 6

Programacin de Interfaces Grficas

Proyectos y Ficheros
Proyecto VB compuesto de: - 2 formularios - 2 mdulos de programa almacenado en disco flexible.

Fundamentos de Informtica. Departamento de Ingeniera de Sistemas y Automtica.

Actualizacin Septiembre 2005

Programacin de Interfaces Grficas

Formularios y controles bsicos

El Formulario es un objeto, que sirve de soporte de otros objetos. En este cuadro grfico, que llamamos formulario, podemos introducir etiquetas, cajas de texto donde podemos escribir, figuras, elementos donde podemos elegir entre opciones, etc... Un Formulario es lo que normalmente conocemos por Ventana. Un Formulario es una ventana Windows de nuestra aplicacin. Una Aplicacin puede tener varios Formularios. Un Formulario puede servir tambin como soporte de textos o dibujos. Como cualquier objeto de Visual Basic, un formulario tiene propiedades y procedimientos.
Fundamentos de Informtica. Departamento de Ingeniera de Sistemas y Automtica. Actualizacin Septiembre 2005 8

Programacin de Interfaces Grficas

Formulario: propiedades ms importantes

Name: Define al objeto durante la ejecucin del programa. Se introduce en tiempo de diseo y no se puede variar durante la ejecucin del programa (slo lectura). Caption: Es el texto que aparecer en la barra de Ttulo cada vez que aparezca en pantalla este formulario. No tiene otra funcin dentro del programa. El programa no accede a los formularios por el ttulo, sino por el nombre. Puede cambiarse en tiempo de ejecucin. Enabled: Propiedad booleana. Si est en True, el formulario est activado y se puede interactuar con l. Si est en False, se desactiva el formulario, impidiendo de esta forma, que se pueda trabajar con l en tiempo de ejecucin.
Fundamentos de Informtica. Departamento de Ingeniera de Sistemas y Automtica. Actualizacin Septiembre 2005 9

Programacin de Interfaces Grficas

Formulario: propiedades ms importantes

Font: Especifica el tipo y tamao de la letra que se usar en el formulario. Visible: Asignndole el valor True la pantalla es visible, y asignndole el valor False, no se ve. Este valor puede cambiarse durante el tiempo de ejecucin. WindowState: Establece el estado en el que aparecer el formulario cuando se activa y presenta en pantalla. Admite tres opciones: 0 (Normal): Posicin y tamao que tena en tiempo de diseo. 1 (Minimizado): representado por su icono. 2 (Maximizado): ocupando toda la pantalla.

Fundamentos de Informtica. Departamento de Ingeniera de Sistemas y Automtica.

Actualizacin Septiembre 2005

10

Programacin de Interfaces Grficas

Formularios y controles bsicos

Principal.Caption = Gestin de Gastos Principal.WindowState = 0

El valor de la propiedad Name de este formulario es Principal. Dicho valor slo se puede cambiar en modo diseo.

Fundamentos de Informtica. Departamento de Ingeniera de Sistemas y Automtica.

Actualizacin Septiembre 2005

11

Programacin de Interfaces Grficas

Formulario: mtodos ms importantes

Click: Click de ratn sobre el formulario DblClick: Doble-Click de ratn sobre el formulario. KeyPress: Pulsar una tecla. Show: Mostrar el formulario (carga si es necesario). Load: Cargar el formulario (no lo muestra). MouseDown: Pulsar una tecla del ratn sobre l. Unload: Descargar el formulario.

Fundamentos de Informtica. Departamento de Ingeniera de Sistemas y Automtica.

Actualizacin Septiembre 2005

12

Programacin de Interfaces Grficas

Controles
Una vez introducido un Formulario, se pueden colocar los componentes (Controles) que forman parte de la aplicacin. Los Controles, del mismo modo que el Formulario, son objetos con Propiedades, mtodos y eventos. Las Propiedades definen las caractersticas del Control. Los Mtodos definen su forma de actuar frente a un evento. Para colocar un control en un Formulario, basta con tomarlo de la caja de herramientas y llevarlo al Formulario. Si no existiese el control deseado en la caja de herramientas, deberemos ir a seleccionarlo a Componentes que est en el men desplegable Proyecto. Este control pasa a formar parte de la caja de herramientas.
Fundamentos de Informtica. Departamento de Ingeniera de Sistemas y Automtica. Actualizacin Septiembre 2005 13

Programacin de Interfaces Grficas

Controles: propiedades comunes y ms importantes

Name: Define al objeto durante la ejecucin del programa. Se introduce en tiempo de diseo y no se puede variar durante la ejecucin. Caption: Es el texto que aparecer en el control (En el caso de un formulario es el ttulo, en el caso de un botn el texto del mismo, etc.). Puede cambiarse en tiempo de ejecucin. El programador no accede a este control por la propiedad Caption, sino por el nombre (Name). Enabled: Propiedad Booleana que habilita o deshabilita un control. Cuando ste est deshabilitado (Enabled = False), el control no tiene efecto, y su apariencia vara, presentando un tono plido tanto en su cuerpo como en su ttulo.
Fundamentos de Informtica. Departamento de Ingeniera de Sistemas y Automtica. Actualizacin Septiembre 2005 14

Programacin de Interfaces Grficas

Controles: propiedades comunes y ms importantes

Font: Es el tipo de letra que se emplea para visualizar texto (caption). Puede cambiarse en tiempo de ejecucin. Height: Altura del control. Width: Ancho del control. Index: (ndice): En el caso de que se tengan varios controles que realicen una funcin similar puede declararse un control array con estos controles. Todos tendrn el mismo nombre, y se diferenciarn por un ndice. Esta propiedad, Index, toma el nmero de dicho ndice. Left: Indica la posicin de la parte izquierda del control con respecto a la ventana. Top: Indica la coordenada de la parte superior del control.
Fundamentos de Informtica. Departamento de Ingeniera de Sistemas y Automtica. Actualizacin Septiembre 2005 15

Programacin de Interfaces Grficas

Controles: propiedades comunes y ms importantes

TabIndex: (N de orden para tabulador) Cuando disponemos de varios controles en un mismo formulario, solamente uno de ellos tiene el foco. Es posible pasar de un control a otro (cambiar el foco de un control a otro) pulsando la tecla TABulador. La propiedad TabIndex marca el orden que seguir el foco al recorrer los controles del Formulario. Visible: Propiedad Booleana. Si es True, el control se ve, si es False, el control no se ve. Puede cambiarse en tiempo de ejecucin. De hecho, es un recurso muy usado para dejar visibles, en un Formulario, solamente los controles necesarios en un instante dado.

Fundamentos de Informtica. Departamento de Ingeniera de Sistemas y Automtica.

Actualizacin Septiembre 2005

16

Programacin de Interfaces Grficas

Formularios y controles bsicos

Private Sub Form_Load() cmd_aceptar.Enabled = True cmd_cancelar.Enabled = True cmd_borrar.Enabled = False End Sub Private Sub Form_Load() cmd_aceptar.Enabled = True cmd_cancelar.Enabled = False cmd_borrar.Enabled = True cmd_borrar.Font.Italic = True End Sub Private Sub Form_Load() cmd_aceptar.Enabled = True cmd_cancelar.Visible = False cmd_borrar.Enabled = False End Sub
Fundamentos de Informtica. Departamento de Ingeniera de Sistemas y Automtica. Actualizacin Septiembre 2005 17

Programacin de Interfaces Grficas

Controles: mtodos ms importantes

Click: Hacer Click con el ratn sobre el control. DblClick: Idem con Doble-Click. DragDrop: Arrastrar y/o soltar sobre el control. DragOver: Arrastrar por encima del control. GotFocus: Obtener el foco sobre el control. KeyDown: Mantener pulsada una tecla. KeyPress: Pulsar una tecla sobre el control. KeyUp: Soltar una tecla sobre el control.

Fundamentos de Informtica. Departamento de Ingeniera de Sistemas y Automtica.

Actualizacin Septiembre 2005

18

Programacin de Interfaces Grficas

Controles: mtodos ms importantes

LostFocus: Perder el foco en el control. MouseDown: Pulsar una tecla del ratn sobre el control. MouseMove: Mover el ratn (Detecta la posicin del ratn sobre el control). MouseUp: Soltar una tecla del ratn sobre el control. Paint: Pintar el control. Resize: Cambio de tamao del control.

Fundamentos de Informtica. Departamento de Ingeniera de Sistemas y Automtica.

Actualizacin Septiembre 2005

19

Programacin de Interfaces Grficas

Formularios y controles bsicos

Private Sub txt_nombre_KeyPress(KeyAscii As Integer) If KeyAscii = 13 Then El 13 es el cdigo ASCII de la tecla Enter If txt_nombre <> "" Then lbl_sunombre.Caption = "Su nombre es " & txt_nombre.Text Else lbl_sunombre.Caption = "Su nombre es ?" End If End If End Sub

txt_nombre
Fundamentos de Informtica. Departamento de Ingeniera de Sistemas y Automtica.

lbl_sunombre
Actualizacin Septiembre 2005 20

Programacin de Interfaces Grficas

Control: CommandButton
El control CommandButton (botn de comando) nos permite realizar determinadas acciones pulsando sobre l.

Control: Label
Una Label (etiqueta) es un control que nos permite presentar un texto. La etiqueta se usa en casos en los que exista una informacin que no debe ser cambiada por el usuario.

Control: TextBox
Un Textbox es un control en el que se presentan o introducen textos. Normalmente se usan para introducir texto, o para la presentacin de aquellos que el usuario pueda cambiar.
Fundamentos de Informtica. Departamento de Ingeniera de Sistemas y Automtica. Actualizacin Septiembre 2005 21

Programacin de Interfaces Grficas

Controles: CheckBox y OptionButton

Cada casilla CheckBox es independiente de las dems, pudiendo tomar el valor 1 (seleccionado) o 0 (no seleccionado), a voluntad del usuario. OptionButton muestra una opcin que puede tomar valor True (activar) o valor False (desactivar), pero con dependencia del estado de otros OptionButton.

Value: El valor de esta propiedad, en ambos controles, indica si cada uno de estos controles est seleccionado o no.

Fundamentos de Informtica. Departamento de Ingeniera de Sistemas y Automtica.

Actualizacin Septiembre 2005

22

Programacin de Interfaces Grficas

Controles: ComboBox y ListBox

Un control ListBox muestra una lista de elementos en la que el usuario puede seleccionar uno o ms. Si el nmero de elementos supera el nmero que puede mostrarse, se agregar automticamente una barra de desplazamiento al control ListBox. Un ComboBox combina las caractersticas de un TextBox y un ListBox. Los usuarios pueden introducir informacin en la parte del cuadro de texto y seleccionar un elemento en la parte de cuadro de lista del control.

Fundamentos de Informtica. Departamento de Ingeniera de Sistemas y Automtica.

Actualizacin Septiembre 2005

23

Programacin de Interfaces Grficas

Controles: ComboBox y ListBox

ListCount: Indica el nmero de elementos que tiene la lista ListIndex: Indica el nmero de orden del elemento seleccionado dentro de la lista. AddItem: Aade un elemento a la lista. RemoveItem: Elimina un elemento de la lista. Text: Obtiene el texto del elemento seleccionado. List (n): Obtiene el elemento cuyo orden dentro de la lista viene dado por el valor de n.

ItemData: Devuelve [o establece] un nmero especfico para cada elemento de un control ComboBox o ListBox.
Fundamentos de Informtica. Departamento de Ingeniera de Sistemas y Automtica. Actualizacin Septiembre 2005 24

Programacin de Interfaces Grficas

Formularios y controles bsicos. Ejemplo programacin

Private Sub listapersonal_Click() lbl_codselec.Caption = listapersonal.ItemData(listapersonal.ListIndex) lbl_nomselec.Caption = listapersonal.List(listapersonal.ListIndex) End Sub Private Sub txt_nombre_KeyPress(KeyAscii As Integer) If KeyAscii = 13 Then If txt_nombre <> "" And txt_codigo <> "" Then listapersonal.AddItem txt_nombre listapersonal.ItemData(listapersonal.NewIndex) = txt_codigo End If End If lbl_codselec End Sub

lbl_nomselec txt_codigo txt_nombre listapersonal

Fundamentos de Informtica. Departamento de Ingeniera de Sistemas y Automtica. Actualizacin Septiembre 2005 25

Programacin de Interfaces Grficas

Controles: Timer (Temporizador)

Este objeto permite realizar acciones peridicas. Presenta una novedad respecto a los controles estudiados hasta ahora. El control Timer solamente se ve durante el tiempo de diseo. En tiempo de ejecucin, el control permanece invisible. Interval: El valor de esta propiedad nos dar el intervalo de tiempo (en milisegundos) en que se producir un evento Timer y, consecuentemente, se ejecutar el cdigo asociado por el programador a este evento. Timer: Este procedimiento se ejecuta cada vez que se cumple un intervalo completo.
Fundamentos de Informtica. Departamento de Ingeniera de Sistemas y Automtica. Actualizacin Septiembre 2005 26

Programacin de Interfaces Grficas

Conceptos Bsicos sobre Mens

La Barra de Men es un componente de un Formulario. El Men o Barra de Men, de existir, es la segunda lnea de cualquier ventana Windows. De cada palabra de la barra de men, puede desplegarse a su vez un nuevo men. Para cada palabra se produce el evento Click. Cada palabra de la Barra de Men lleva anexo un nico procedimiento, que se ejecutar al hacer Click sobre la palabra.
Fundamentos de Informtica. Departamento de Ingeniera de Sistemas y Automtica. Actualizacin Septiembre 2005 27

Programacin de Interfaces Grficas

El editor de Mens
Para crear un men se usa el Editor de Mens, que se encuentra en el entorno VB en Herramientas | Editor de mens . Cada palabra del men tiene Caption (palabra que aparece en el men), Name (Nombre), y puede tener Index (para palabras con el mismo Name). Shortcut: Esta propiedad admite varias combinaciones de teclas para acceder al procedimiento Click de esa palabra sin necesidad de usar el ratn.
Fundamentos de Informtica. Departamento de Ingeniera de Sistemas y Automtica. Actualizacin Septiembre 2005 28

Programacin de Interfaces Grficas

Controles para mostrar imgenes

Para presentar una imagen es necesario hacerlo sobre un objeto que la admita. Los objetos bsicos que admiten una imagen son: Formularios. Controles PictureBox. Controles Image. Para mostrar una imagen en cualquiera de estos objetos, es necesario especificarlo en su propiedad Picture.
Principal.Picture = LoadPicture("C:\imagen_fija_1.jpg") Para "descargar" esa imagen, basta con ejecutar: Principal.Picture = LoadPicture()
Fundamentos de Informtica. Departamento de Ingeniera de Sistemas y Automtica. Actualizacin Septiembre 2005 29

Programacin de Interfaces Grficas

Conceptos bsicos del CommonDialog

Se presenta en tiempo de diseo con un simple icono. El cuadro de dilogo se utiliza para varias funciones comunes como: Abrir Ficheros Guardar Ficheros Elegir colores Seleccionar Impresora Seleccionar Fuentes Mostrar el fichero de Ayuda

Fundamentos de Informtica. Departamento de Ingeniera de Sistemas y Automtica.

Actualizacin Septiembre 2005

30

Programacin de Interfaces Grficas Ejemplo: Abrir un archivo

Dialogo. ShowOpen

de Ingeniera de Sistemas y Automtica. Fundamentos de Departamento Informtica. Departamento de Ingeniera de Sistemas y Automtica. Fundamentos de informtica. Programacin de interfaces grficas.

Actualizacin Septiembre 2005

31

FUNDAMENTOS DE INFORMATICA
Tema 6 Programacin de Interfaces Grficas
Departamento de Ingeniera de Sistemas y Automtica Universidad de Vigo

Fundamentos de Informtica. Departamento de Ingeniera de Sistemas y Automtica.

Actualizacin Septiembre 2005

32