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