Programación de Interfaces Gráficas

FUNDAMENTOS DE
INFORMATICA
Tema 6
Programación de Interfaces
Gráficas
Departamento de Ingeniería de Sistemas y Automática
Universidad de Vigo
Fundamentos de Informática. Departamento de Ingeniería de Sistemas y Automática.
Actualización Septiembre 2005
1
Programación de Interfaces Gráficas
Formularios y Controles
• Cada uno de los elementos gráficos que pueden formar parte
de una aplicación típica de Windows es, en la terminología
Visual Basic, un tipo de control:
control los botones, cajas de diálogo,
cajas de selección desplegable, menús, etc., son tipos de
controles de Visual Basic.
• Los formularios pueden ser considerados como las ventanas
contenedoras de los controles.
• Una aplicación (o proyecto) puede estar formada por varios
formularios, aunque estos no son necesarios.
Fundamentos de Informática. Departamento de Ingeniería de Sistemas y Automática.
Actualización Septiembre 2005
2
Programación de Interfaces Gráficas
Eventos relacionados con los Objetos
• Las acciones del usuario sobre la interfaz se denominan
eventos. Son eventos típicos el pulsar un botón, hacer “dobleclick” sobre un icono, el pulsar una tecla, etc.
• Cada vez que se produce un evento, Visual Basic ejecuta una
determinada función o procedimiento, que se llama con un
nombre que se forma a partir del nombre del objeto,
separado con el carácter “_” y el nombre del evento
correspondiente.
• Ejemplos:
Objeto_Evento
Objeto_Evento......
Form_Load
BtnAceptar_Click
TmrAccion_Timer
Fundamentos de Informática. Departamento de Ingeniería de Sistemas y Automática.
Actualización Septiembre 2005
3
Programación de Interfaces Gráficas
Eventos relacionados con los Objetos
Lista de eventos de un
objeto o control. En negrita
se muestran aquellos con
código asociado.
Código asociado al evento
“Click” de un Botón de
comando
Fundamentos de Informática. Departamento de Ingeniería de Sistemas y Automática.
Actualización Septiembre 2005
4
Programación de Interfaces Gráficas
Métodos asociados a los Objetos
• Los métodos son funciones o procedimientos preprogramados en el lenguaje que están asociadas a una
determinada clase de controles.
• Se accede a los métodos de cada control por medio de su
nombre correspondiente. Para invocar un método de un
control, se introduce el nombre del control, el símbolo “.” y el
nombre del método junto con los parámetros (si éstos son
necesarios).
• Ejemplos:
Objeto
Objeto. .Metodo
Metodo[([(parámetros)]
parámetros)]
TxtUsuario.Move(30)
BtnAceptar.Refresh
LstUsuarios.AddItem(“PEPE”)
Fundamentos de Informática. Departamento de Ingeniería de Sistemas y Automática.
Actualización Septiembre 2005
5
Programación de Interfaces Gráficas
Controles elementales del Entorno de Programación VB
PictureBox: permite mostrar imágenes en los formularios del programa.
Label: etiquetas de texto que el usuario no puede modificar directamente.
TextBox: edición de texto, permite que el usuario introduzca datos.
Frame: marco para el agrupamiento funcional de controles en formularios.
CommandButton:botón de comando para solicitar ejecución de acciones.
CheckBox: permite ofrecer al usuario una opción de selección Si/No.
OptionButton: opción, de entre un conjunto, que se puede seleccionar.
ListBox: lista de elementos de la cual es posible seleccionar varios.
ComboBox: combinación entre los controles TextBox y ListBox.
HScrollBar/VScrollBar: barra de desplazamiento horizontal/vertical.
Timer: permite la ejecución de código a intervalos periódicos.
Line: control gráfico para visualizar líneas rectas en los formularios.
Shape: control gráfico que permite mostrar formas geométricas básicas.
Data: proporciona acceso a información almacenada en Bases de Datos.
CommonDialog: conjunto de cuadros de diálogo estándar para
operaciones habituales (ficheros, colores, tipos de letra, etc.)
Fundamentos de Informática. Departamento de Ingeniería de Sistemas y Automática.
Actualización Septiembre 2005
6
Programación de Interfaces Gráficas
Proyectos y Ficheros
Proyecto VB compuesto de:
- 2 formularios
- 2 módulos de programa
almacenado en disco flexible.
Fundamentos de Informática. Departamento de Ingeniería de Sistemas y Automática.
Actualización Septiembre 2005
7
Programación de Interfaces Gráficas
Formularios y controles básicos
¬ El Formulario es un objeto, que sirve de soporte de otros
objetos.
¬ En este cuadro gráfico, 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 aplicación.
¬ Una Aplicación puede tener varios Formularios.
¬ Un Formulario puede servir también como soporte de textos o
dibujos.
¬ Como cualquier objeto de Visual Basic, un formulario tiene
propiedades y procedimientos.
Fundamentos de Informática. Departamento de Ingeniería de Sistemas y Automática.
Actualización Septiembre 2005
8
Programación de Interfaces Gráficas
Formulario: propiedades más importantes
¬ Name: Define al objeto durante la ejecución del programa.
Se introduce en tiempo de diseño y no se puede variar
durante la ejecución del programa (sólo lectura).
¬ Caption: Es el texto que aparecerá en la barra de Título
cada vez que aparezca en pantalla este formulario. No
tiene otra función dentro del programa. El programa no
accede a los formularios por el título, sino por el nombre.
Puede cambiarse en tiempo de ejecución.
¬ 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
ejecución.
Fundamentos de Informática. Departamento de Ingeniería de Sistemas y Automática.
Actualización Septiembre 2005
9
Programación de Interfaces Gráficas
Formulario: propiedades más importantes
¬ Font: Especifica el tipo y tamaño de la letra que se usará en el
formulario.
¬ Visible: Asignándole el valor True la pantalla es visible, y
asignándole el valor False, no se ve. Este valor puede cambiarse
durante el tiempo de ejecución.
¬ WindowState: Establece el estado en el que aparecerá el
formulario cuando se activa y presenta en pantalla. Admite tres
opciones:
0 (Normal): Posición y tamaño que tenía en tiempo de diseño.
1 (Minimizado): representado por su icono.
2 (Maximizado): ocupando toda la pantalla.
Fundamentos de Informática. Departamento de Ingeniería de Sistemas y Automática.
Actualización Septiembre 2005
10
Programación de Interfaces Gráficas
Formularios y controles básicos
Principal.Caption = “Gestión de Gastos”
Principal.WindowState = 0
El valor de la propiedad Name de este formulario es “Principal”.
Dicho valor sólo se puede cambiar en modo diseño.
Fundamentos de Informática. Departamento de Ingeniería de Sistemas y Automática.
Actualización Septiembre 2005
11
Programación de Interfaces Gráficas
Formulario: métodos más importantes
¬ Click: Click de ratón sobre el formulario
¬ DblClick: Doble-Click de ratón 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 ratón sobre él.
¬ Unload: Descargar el formulario.
Fundamentos de Informática. Departamento de Ingeniería de Sistemas y Automática.
Actualización Septiembre 2005
12
Programación de Interfaces Gráficas
Controles
¬ Una vez introducido un Formulario, se pueden colocar los
componentes (Controles) que forman parte de la aplicación.
¬ Los Controles, del mismo modo que el Formulario, son
objetos con Propiedades, métodos y eventos.
¬ Las Propiedades definen las características del Control. Los
Métodos 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 Informática. Departamento de Ingeniería de Sistemas y Automática.
Actualización Septiembre 2005
13
Programación de Interfaces Gráficas
Controles: propiedades comunes y más importantes
¬ Name: Define al objeto durante la ejecución del programa. Se
introduce en tiempo de diseño y no se puede variar durante la
ejecución.
¬ Caption: Es el texto que aparecerá en el control (En el caso de
un formulario es el título, en el caso de un botón el texto del
mismo, etc.). Puede cambiarse en tiempo de ejecución. 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 varía, presentando un
tono pálido tanto en su cuerpo como en su título.
Fundamentos de Informática. Departamento de Ingeniería de Sistemas y Automática.
Actualización Septiembre 2005
14
Programación de Interfaces Gráficas
Controles: propiedades comunes y más importantes
¬ Font: Es el tipo de letra que se emplea para visualizar texto
(caption). Puede cambiarse en tiempo de ejecución.
¬ Height: Altura del control.
¬ Width: Ancho del control.
¬ Index: (Índice): En el caso de que se tengan varios controles
que realicen una función similar puede declararse un “control
array” con estos controles. Todos tendrán el mismo nombre, y
se diferenciarán por un índice. Esta propiedad, Index, toma el
número de dicho índice.
¬ Left: Indica la posición de la parte izquierda del control con
respecto a la ventana.
¬ Top: Indica la coordenada de la parte superior del control.
Fundamentos de Informática. Departamento de Ingeniería de Sistemas y Automática.
Actualización Septiembre 2005
15
Programación de Interfaces Gráficas
Controles: propiedades comunes y más 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 ejecución. De hecho, es un recurso muy usado para dejar
visibles, en un Formulario, solamente los controles
necesarios en un instante dado.
Fundamentos de Informática. Departamento de Ingeniería de Sistemas y Automática.
Actualización Septiembre 2005
16
Programación de Interfaces Gráficas
Formularios y controles básicos
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 Informática. Departamento de Ingeniería de Sistemas y Automática.
Actualización Septiembre 2005
17
Programación de Interfaces Gráficas
Controles: métodos más importantes
¬ Click: Hacer Click con el ratón 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 Informática. Departamento de Ingeniería de Sistemas y Automática.
Actualización Septiembre 2005
18
Programación de Interfaces Gráficas
Controles: métodos más importantes
¬ LostFocus: Perder el foco en el control.
¬ MouseDown: Pulsar una tecla del ratón sobre el control.
¬ MouseMove: Mover el ratón (Detecta la posición del ratón
sobre el control).
¬ MouseUp: Soltar una tecla del ratón sobre el control.
¬ Paint: Pintar el control.
¬ Resize: Cambio de tamaño del control.
Fundamentos de Informática. Departamento de Ingeniería de Sistemas y Automática.
Actualización Septiembre 2005
19
Programación de Interfaces Gráficas
Formularios y controles básicos
Private Sub txt_nombre_KeyPress(KeyAscii As Integer)
If KeyAscii = 13 Then
‘El 13 es el código 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 Informática. Departamento de Ingeniería de Sistemas y Automática.
lbl_sunombre
Actualización Septiembre 2005
20
Programación de Interfaces Gráficas
Control: CommandButton
El control CommandButton (botón 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 información 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
presentación de aquellos que el usuario pueda cambiar.
Fundamentos de Informática. Departamento de Ingeniería de Sistemas y Automática.
Actualización Septiembre 2005
21
Programación de Interfaces Gráficas
Controles: CheckBox y OptionButton
Cada casilla CheckBox es independiente de las
demás, pudiendo tomar el valor 1 (seleccionado) o
0 (no seleccionado), a voluntad del usuario.
OptionButton muestra una opción 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 Informática. Departamento de Ingeniería de Sistemas y Automática.
Actualización Septiembre 2005
22
Programación de Interfaces Gráficas
Controles: ComboBox y ListBox
Un control ListBox muestra una lista de elementos
en la que el usuario puede seleccionar uno o más.
Si el número de elementos supera el número que
puede mostrarse, se agregará automáticamente
una barra de desplazamiento al control ListBox.
Un ComboBox combina las características de un
TextBox y un ListBox. Los usuarios pueden
introducir información en la parte del cuadro de
texto y seleccionar un elemento en la parte de
cuadro de lista del control.
Fundamentos de Informática. Departamento de Ingeniería de Sistemas y Automática.
Actualización Septiembre 2005
23
Programación de Interfaces Gráficas
Controles: ComboBox y ListBox
¬ ListCount: Indica el número de elementos que tiene la lista
¬ ListIndex: Indica el número de orden del elemento
seleccionado dentro de la lista.
¬ AddItem: Añade 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 número específico
para cada elemento de un control ComboBox o ListBox.
Fundamentos de Informática. Departamento de Ingeniería de Sistemas y Automática.
Actualización Septiembre 2005
24
Programación de Interfaces Gráficas
Formularios y controles básicos. Ejemplo programación
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 Informática. Departamento de Ingeniería de Sistemas y Automática.
Actualización Septiembre 2005
25
Programación de Interfaces Gráficas
Controles: Timer (Temporizador)
¬ Este objeto permite realizar acciones periódicas. Presenta una
novedad respecto a los controles estudiados hasta ahora.
¬ El control Timer solamente se ve durante el tiempo de diseño.
En tiempo de ejecución, 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 código asociado
por el programador a este evento.
¬ Timer: Este procedimiento se ejecuta cada vez que se cumple
un intervalo completo.
Fundamentos de Informática. Departamento de Ingeniería de Sistemas y Automática.
Actualización Septiembre 2005
26
Programación de Interfaces Gráficas
Conceptos Básicos sobre Menús
¬ La Barra de Menú es un
componente de un Formulario.
¬ El Menú o Barra de Menú, de existir, es la segunda línea 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 Informática. Departamento de Ingeniería de Sistemas y Automática.
Actualización Septiembre 2005
27
Programación de Interfaces Gráficas
El editor de Menús
¬ Para crear un menú se usa el
Editor de Menús, que se encuentra
en el entorno VB en “Herramientas
| Editor de menús “.
¬ 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 ratón.
Fundamentos de Informática. Departamento de Ingeniería de Sistemas y Automática.
Actualización Septiembre 2005
28
Programación de Interfaces Gráficas
Controles para mostrar imágenes
Para presentar una imagen es necesario hacerlo sobre un objeto
que la admita. Los objetos básicos 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 Informática. Departamento de Ingeniería de Sistemas y Automática.
Actualización Septiembre 2005
29
Programación de Interfaces Gráficas
Conceptos básicos del CommonDialog
Se presenta en tiempo de diseño con un simple icono.
El cuadro de diálogo se utiliza para varias funciones comunes como:
¬ Abrir Ficheros
¬ Guardar Ficheros
¬ Elegir colores
¬ Seleccionar Impresora
¬ Seleccionar Fuentes
¬ Mostrar el fichero de Ayuda
Fundamentos de Informática. Departamento de Ingeniería de Sistemas y Automática.
Actualización Septiembre 2005
30
Programación de Interfaces Gráficas
Ejemplo: Abrir un archivo
Dialogo. ShowOpen
de Ingeniería
deSistemas
Sistemas
y Automática.
Fundamentos de Departamento
Informática. Departamento
de Ingeniería de
y Automática.
Fundamentos de informática. Programación de interfaces gráficas.
Actualización Septiembre 2005
31
FUNDAMENTOS DE
INFORMATICA
Tema 6
Programación de Interfaces
Gráficas
Departamento de Ingeniería de Sistemas y Automática
Universidad de Vigo
Fundamentos de Informática. Departamento de Ingeniería de Sistemas y Automática.
Actualización Septiembre 2005
32