ImplementacionDeInterfacesGraficas Delphi

Notas sobre terminologa
La interfaz de usuario, la interfaz personamquina. (femenino, plural interfaces)

HCI: Human-Computer Interfaces
IMPLEMENTACIN DE
INTERFACES GRFICAS
EN DELPHI
Implementacin de interfaces grficas en Delphi
M. Martnez, URJC, 2004
GUI: Graphical User Interfaces

Interfaces con visualizaciones grficas.
WIMP: Window, Menu, Icon, Pointer.
Interfaces de manipulacin directa
WYSIWYG: What You See is What You
Get.
VENTANAS
Una interfaz grfica utiliza mltiples
ventanas.
1.- Elementos de una interfaz

grfica
Organizacin en estrella
Ventana principal.
Representa a la propia aplicacin:
ventanas secundarias
Se abre y se activa cuando se abre/activa la

aplicacin.
Cuando se cierra, se cierra la aplicacin.
Cuando se minimiza, se minimizan todas las
ventanas de la aplizacin.
Se utiliza durante todo o casi todo el

tiempo que se utiliza la aplicacin.
Ventanas secundarias
Se abren y se utilizan slo durante parte
del tiempo.
Se usan para trabajar con un conjunto de
datos o un conjunto de acciones.
Ventanas de dilogo
Se abren y se utilizan en instantes
concretos, y para introducir los
parmetros de acciones muy concretas.
ventana
principal
dilogos
Modelos de organizacin de
ventanas en MS-Windows
Interfaz de documentos simples
(SDI: Single Document Interface)
Las ventanas secundarias se colocan fuera de
la ventana principal y se mueven o cambian
de tamao de forma independiente, a travs
del gestor de ventanas de MS-Windows
Ejemplo: Delphi
Interfaz de documentos mltiples.

(MDI: Multiple Document Interface)
Las ventanas secundarias se colocan dentro
de la ventana principal, y se manejan dentro
de la propia aplicacin.
Ejemplos: Turbo Pascal para Windows, MSWord, PowerPoint
Foco de entrada
Normalmente, slo una aplicacin, y una
ventana dentro de ella, estn activas en un
momento dado.
Se dice que esta ventana es el foco de
entrada: el gestor de ventanas considera que
las pulsaciones de tecla o de los botones del
ratn se refieren a ella.
Excepciones:
En algunas aplicaciones se mantiene
activa la ventana principal y una de las
secundarias (Ms frecuente en
aplicaciones MDI). Ejemplo: Turbo
Pascal para Windows.
Algunas combinaciones de teclas y
botones se interpretan como rdenes al
gestor de ventanas. Ejemplo: Alt-Tab para
cambiar la ventana activa.
Uso de las ventanas modales

Las ventanas secundarias no deberan ser
nunca modales.
Es conveniente que la mayora de los
dilogos sean modales, pero con la
posibilidad de cancelar la operacin sin
consecuencias.
Una ventana modal SIEMPRE debe estar
encima de cualquier otra ventana de la
aplicacin. Si se minimiza la aplicacin o se
cambia a otra aplicacin, al volver a ella la
ventana modal debe aparecer igualmente
encima del resto de las ventanas, y en la
misma posicin.
11
Con respecto a la asignacin del foco:

Ventanas modales: Cuando estn abiertas,
bloquean el resto de las ventanas de la
aplicacin. Hasta que no se cierran no se
puede trabajar con el resto de la
aplicacin.
Ventanas no modales: Se puede cambiar
de esa a otras ventanas de la aplicacin.
MODO = Situacin en la que slo se
permite un conjunto restringido de
acciones u operaciones.
10
Distribucin de elementos
entre la ventana principal y las
ventanas secundarias
Colocar las funciones principales en la
ventana principal, y las funciones secundarias
en las ventanas secundarias.
Agrupar los datos y funciones que estn
lgicamente relacionados.
Por orden de prioridad:
Se usan al mismo tiempo.
Se usan con el mismo objetivo.
Se usan para manipular el mismo tipo de
datos.
Representan el mismo tipo de cosa.
Se modifican o controlan el uno al otro.
12
Errores frecuentes
Distribucin incorrecta de funciones y datos
entre la ventana principal y las secundarias.
(Ejemplo: Colocar una funcin que se usa
con mucha frecuencia en una ventana
secundaria que no est siempre visible)
Falta de equilibrio:
Ventana principal demasiado ambiciosa.
Demasiadas ventanas secundarias.
Ventanas secundarias que bloquean la
ventana principal.
13
Uso de los dilogos

Los dilogos se deben usar slo para
situaciones muy concretas y estar activos
durante periodos cortos de tiempo, como
ventanas modales:
Introducir los parmetros de una
operacin.
Pedir confirmacin de una operacin
peligrosa.
Que el usuario decida la accin a tomar
ante una situacin inesperada.
Avisar de un error o una situacin
excepcional.
No se deben usar los dilogos:
Para dar slo informacin.
Para comunicar que se ha realizado
correctamente una operacin.
14
Ventanas en Delphi
Areas dentro de una ventana
Las ventanas principal y secundarias se crean

como fichas (Forms) = objetos de la clase
TForm.
Los dilogos pueden ser tambin fichas,
aunque para algunos dilogos tpicos existen
clases especficas, descendientes de TForm o
de TCommonDialog (p.ej. abrir o guardar
ficheros, mostrar un mensaje).
Las ventanas son objetos contenedores: entre
sus miembros de datos estn el resto de los
elementos de la interfaz (botones, mens,
etc.)
Para agrupar/clasificar/distinguir elementos

dentro de una ventana, se suele dividir sta en
reas.
Las reas se pueden formar:
Utilizando elementos visuales distintivos,
como lneas de divisin, tipos de letra,
colores, etc.
En Delphi las lneas y cajas decorativas se
crean como objetos de tipo TBevel.
Las etiquetas para titular una seccin, un
grupo de elementos o un elemento simple
pueden ser independientes (TLabel) o el
dato de ttulo (Caption) de un objeto
grfico.
15
16
Utilizando objetos contenedores, que

usualmente imponen algun tipo de
organizacin.
Contenedores para crear reas en Delphi:
Grupos (TGroupBox y TRadioGroup). Se

ocupan tambin de algunos aspectos del
comportamiento.
Paneles (TPanel): Mantienen la posicin de los

elementos.
Los paneles pueden tener relieve.
Paneles con barra de desplazamiento
(TScrollBox)
Barras de herramientas (TToolBar).
17
18
TECNICAS DE
INTERACCIN
Pginas alternativas (TTabSheet y
TPageControl)
Tcnica de interaccin = mtodo de empleo

de un dispositivo de entrada (ratn, teclado,
lpiz ptico) para que el usuario ordene una
operacin o introduzca un valor.
Cuando se basan en un elemento grfico
se llaman controles (mens, botones,
casillas). Se manejan principalmente con
un manejador de cursor (ratn).
Basadas en el teclado: teclas rpidas o de
funcin, comandos.
Otros: voz, palancas de juegos.
Barra de estado (TStatusBar)
19
20
Tipos de controles grficos

Mens
Men principal o barra de mens (menu
bar, pulldown menus)
Mens emergentes (pop-up menus)

Mens dependientes del contexto que
aparecen al realizar una accin
determinada (en Windows, tpicamente al
pulsar el botn derecho del ratn sobre
un elemento).
En Delphi: TMainMenu
En Delphi: TPopupMenu
21
Mens en cascada
22
Botones
Botones de accin (push buttons)
En Delphi: la clase bsica es TButton

Hay tambin clases de botones de accin
especializados
En Delphi: Son tambin TPopup
Las opciones de los mens tambin son
objetos (TMenuItem)
23
Con icono (TBitBtn)

Para barras de herramientas (TToolButton o
TSpeedButton)
Botones de incremento y decremento
(TUpDown)
24
Botones de opcin (option buttons o radio

buttons)
Campos de edicin de texto.
En Delphi: La clase bsica es TEdit

En Delphi: TRadioButton. Se usan siempre
dentro de un TRadioBox o un TGroupBox
Casillas o cajas de seleccin (check
boxes)
Hay otras especializadas:

TMaskEdit: Filtra el tipo de caracteres.
TMemo: Mltiples lneas.
TRichEdit: Texto con formato.
En Delphi: TCheckBox
25
Barras de desplazamiento (scroll bars)
En Delphi: TScrollBar. (Para ventanas y

reas de ventana hay clases que ya incluyen
una barra)
26
Listas
En Delphi: La clase bsica es TListBox

Hay tambin listas especializadas:
TCheckListBox: Los elementos seleccionados
se marcan como en una casilla
TFileListBox: Seleccin de ficheros
TDirectoryListBox: Seleccin de directorios.
Barras de seleccin de valores:
Listas combinadas: un campo de edicin de

texto combinado con una lista desplegable
(drop down list)
En Delphi: TTrackBar
Fechas y horas
En Delphi: TDateTimePicker y
TMonthCalendar
27
En Delphi: TComboBox
28
Uso de los controles y otras

tcnicas de interaccin
Considerar primero el tipo de tarea o de
operacin a realizar, despus la tcnica de
interaccin a utilizar (Posiblemente varias).
OPERACIN
Posicionamiento
TCNICA
Sealar con el ratn
Teclas de cursor
Teclas de avance (Tab)
Barra de desplazamiento
Ordenar una operacin Men
Botn de accin
Teclas rpidas
Teclas de funcin
Introducir o elegir
un dato
Acciones/Parmetros
Para ordenar acciones usar mens y
botones de accin, adems de tcnicas de
interaccin de teclado como las teclas
rpidas y de funcin. (Abrir una nueva
ventana se considera una accin).
Para introducir o elegir datos y parmetros
usar botones de opcin, casillas, botones
de incremento y decremento, selectores de
rango, campos de edicin de texto, listas.
No utilizar elementos de introduccin de
datos para ordenar acciones, ni botones de
accin para introducir datos.
Botones de opcin
Casillas
Campos de edicin
Selector de rango
29
En general no es bueno utilizar opciones

de men para elegir datos, pero hay
algunas excepciones consagradas por el
uso:
Opciones de configuracin y de visualizacin
Ultimos archivos utilizados.

Elegir una ventana de las abiertas en una
aplicacin MDI.
30
Segn el rango de valores posibles:

Si se tienen dos alternativas mutuamente
excluyentes, y con una oposicin obvia
(si/no, subrayado/no subrayado) usar
casillas.
Si se tienen ms de dos alternativas
mutuamente excluyentes, o si son dos que
no son claramente opuestas
(vertical/horizontal), usar botones de
opcin.
Si las opciones son muchas, o si no se
conocen hasta el momento de la ejecucin
Para valores numricos dentro de un rango:
usar botones up-down .
Para otro tipo de valores: usar listas o listas
combinadas con un campo de edicin de texto
(ComboBox)
Si los valores posibles son desconocidos

para el programa, usar campos de edicin.
31
32
En general es preferible impedir al usuario la

introduccin de valores incorrectos que
avisarle despus.
Utilizar siempre que sea posible controles
que limiten el rango de valores (casillas,
botones de opcin, listas, etc.)
Cuando una accin o una opcin no estn
permitidas en una situacin determinada
(por ejemplo, porque dependen de otro
valor), inhibir el control correspondiente,
pero dejarlo visible.
En Delphi casi todos los controles tienen
una propiedad booleana Enabled.
33
Errores frecuentes
Eleccin incorrecta de los controles para
acciones/parmetros.
Demasiados niveles de mens.
Controles incmodos para mover/cambiar de
tamao.
Etiquetado insuficiente de los botones y
dilogos (no se entiende para qu sirven).
No dar alternativas para una accin poco
visible, sobre todo en casos de manipulacin
directa. (Ejemplo: doble pulsacin sobre un
objeto para dar una orden).
Para usuarios sin experiencia: Barra de
mens.
Todas las posibles acciones deben ser
accesibles a travs de la barra de mens.
Para usuarios expertos: Teclas rpidas y
de funcin.
35
Mens:
Agrupar las opciones por (en orden de
prioridad)
Funcionalidad.
Frecuencia de uso.
Alfabticamente.
Evitar los mens de dos opciones.

Evitar los mens emergentes o submens
del men principal con muchas opciones.
Mximo 3 niveles de mens.
Si no se pueden cumplir las dos
condiciones anteriores, abrir una ventana
y utilizar otras tcnicas de interaccin.
No centrar el texto de las opciones (es
difcil de leer). Alinear a la izquierda.
34
ELEMENTOS DE
VISUALIZACIN
Muchas de las tcnicas de interaccin de
entradas sirven tambin como visualizadores
de informacin (texto, listas, ...)
En particular, cuando hay manipulacin
directa las operaciones se realizan
bsicamente actuando sobre la representacin
grfica del dato.
Clases especializadas para visualizacin en
Delphi:
Indicador de progreso: TProgressBar
Listas: TListView
rboles: TTreeView
Tablas: TDrawGrid
Grupos de iconos: TImageList
36
Reglas sobre visualizacin

Grficos en Delphi:
Imgenes ledas de un archivo: TImage
conteniendo un TPicture.
TPicture admite varios formatos de imagen
(bitmap, ico, jpeg)
Hay un editor de imgenes (men Tools)
Secuencias de vdeo: TAnimate.

Dibujados en tiempo de ejecucin:
Figuras sencillas: TShape (crculos,
cuadrados).
Grficos complejos: TImage o TForm
conteniendo un TCanvas.
37
El diseo grfico influye en:

Satisfaccin subjetiva.
Discriminacin de la informacin.
Cansancio visual.
Coste en memoria y tiempo de ejecucin.
Utilizar cdigos visuales para
clasificar/agrupar/distinguir o para atraer la
atencin.
Cdigos visuales:
Tipo de letra.
Alineamiento.
Espaciado.
Lneas de separacin.
Color.
38
Uso del color

Utilizar cdigos visuales, abreviaturas e
iconos que sean fcilmente reconocibles para
el usuario.
Representaciones de objetos del mundo
real.
Normas culturales: Cdigos de uso
habitual (p.ej. ttulos en letra ms grande)
Se usan en otras aplicaciones de
ordenador.
Si los cdigos visuales tienen significado
utilizar como mximo 7 categoras, para que
sean fcilmente memorizables.
Colocar los elementos sobre una cuadrcula y
alineados. Motivo: nuestro sistema visual es
muy sensible a las discrepancias, los
elementos no alineados distraen la atencin.
Por el mismo motivo, usar animaciones slo
cuando se fija la vista en ellas.
39
Es uno de los aspectos ms difciles:

Vara segn los monitores.
La percepcin del color es muy compleja.
Hay fuertes preferencias individuales.
Ser conservadores en el uso del color.
Usar pocos colores vivos.
Mirar otras aplicaciones.
Elegir un juego de colores razonable y dar
facilidades al usuario para que lo cambie.
Cuando se usa como cdigo visual,
combinarlo como otro mtodo => disear
primero en monocromo, despus aadir el
color.
40
Representacin del color

La mayora de las herramientas tienen una
tabla de colores predefinidos que podemos
seleccionar por nombre. En Delphi: clWhite,
clBtnFace.
Modelo RGB
Es el que usan internamente los monitores
y televisores.
Se define un color como mezcla de tres
colores bsicos:
Rojo (Red)
Verde (Green)
Azul (Blue)
Modelo HSB
Basado en la percepcin humana del
color.
Debemos tenerlo en cuenta al disear la
interfaz, aunque luego especifiquemos el
color elegido por otro mtodo.
41
Correspondencia RGB-HSB
No hay una correspondencia sencilla.
No todos los colores representables en uno de
los modelos lo son en el otro.
Lo mejor es utilizar una herramienta, como la
Definicin de colores personalizados de
MS-Windows (usada tambin por Delphi)
42
Reglas basadas en el modelo

HSB
Para clasificar informacin, utilizar
contrastes de (por orden de prioridad):
Matiz.
Saturacin.
Luminosidad.
Usar preferentemente colores de saturacin
baja o media, especialmente para reas
grandes.
Evitar el uso del azul para texto y lneas
finas, ya que produce distorsiones. En
cambio, el azul es un buen color de fondo.
Evitar el uso simultneo de rojo y azul
(produce tambin distorsiones).
43
44
Texto:
Lectura continua:
Mximo 4 colores.
Saturacin media-baja.
Buscar un contraste intermedio entre el fondo
y el texto, a base principalmente de diferente
luminosidad.
Ejemplos:
2.- Objetos grficos en Delphi
Fondo gris claro-texto negro

Fondo azul medianoche-texto blanco
Reservar los contrastes fuertes para

distancias mayores de 60 cm y/o donde no
haya que fijar la vista.
45
46
Componentes
Propiedades
Delphi proporciona un conjunto de clases

para los objetos grficos ms comunes en una
interfaz.
Todas ellas descienden, directamente o
indirectamente, de la clase base
TComponent, y por ello se denomina a estos
objetos componentes.
Adems de los datos y los mtodos, los

objetos Delphi pueden tener como miembros
propiedades, que son una combinacin de
dato y mtodo.
Hay tambin componentes que no

representan objetos grficos.
47
Una propiedad es un dato que tiene asociados

mtodos para acciones determinadas, entre
ellas la lectura y escritura del dato (mtodos
de acceso).
Una propiedad se usa como una variable,
accediendo a su valor o asignndole un valor,
pero esta lectura y asignacin suponen
llamadas a sus mtodos de acceso.
a.Visible := true {llama al mtodo
CambiaVisible}
48
Propiedades de los objetos

grficos
Las caractersticas grficas y las opciones de
comportamiento de los componentes estn
definidas como propiedades, y sus mtodos
de acceso se ocupan tambin de actualizar la
representacin en pantalla.
Las ms importantes:
Name. Nombre de la variable que
contiene el objeto en el cdigo generado.
Hay propiedades:
De slo lectura.
Modificables slo en tiempo de edicin.
Modificables slo en tiempo de ejecucin
Compuestas.
Tiene que cumplir las reglas de los

identificadores Pascal.
Delphi genera automticamente un nombre
con el tipo de objeto y un nmero de orden:
Button1, Button2. Es conveniente cambiarlo
por otro ms significativo.
Es recomendable editar esta propiedad antes
que ninguna otra.
Caption: etiqueta o ttulo que aparece

dentro o al lado.
Enabled: si es True el usuario puede
actuar sobre el objeto.
49
Fichas y controles
50
Ejemplo
Para cada ficha de nuestra aplicacin Delphi

definir una subclase de TForm en una nueva
unidad, y un objeto de esa subclase como
variable global.
Los controles dentro de la ficha se crearn
como propiedades con acceso publicado.
Podemos aadir otros datos y mtodos dentro
de las secciones pblica y privada (pero no
dentro de la seccin publicada).
Los valores de las propiedades de las fichas y
controles que introducimos en el editor
grfico de Delphi al construir la interfaz no
se asignan en cdigo Pascal, sino que se
guardan en un fichero de datos .DFM, del
que se cargarn automticamente al ejecutar
nuestra aplicacin.
51
type
TForm1 = class(TForm)
Texto: TEdit;
Boton: TButton;
private
{ Private declarations }
public
{ Public declarations }
end;
52
Creacin y destruccin de los

objetos grficos
Sucesos
Aunque las fichas actan como objetos

contenedores de los controles, la creacin y
destruccin de estos controles no sigue el
procedimiento normal.
Un suceso (en ingls event) es un hecho que

se produce en un momento dado bajo ciertas
condiciones, y puede desencadenar
reacciones.
Es decir, en la subclase de TForm que se crea

para cada ficha no se redefine el constructor
y destructor para que llamen a los
constructores y destructores de los controles
contenidos.
La creacin y destruccin de los objetos
grficos se realiza en los mtodos heredados
y por un procedimiento especial basado en
mensajes.
Las acciones del usuario (pulsar una tecla,

mover el ratn) son sucesos.
MS-Windows detecta la accin realizada
y le enva un mensaje a Delphi.
Delphi detecta sobre qu objeto est
tratando de actuar el usuario y le enva un
mensaje al objeto.
El objeto ejecuta un mtodo como
reaccin al suceso. Estos mtodos se
llaman mtodos de respuesta (callback) o
en Delphi manejadores de sucesos (event
handlers).
Conclusin: No nos tenemos que ocupar de la

creacin y destruccin de los objetos
grficos, slo de los objetos adicionales que
definamos para nuestros datos.
53
54
Principales sucesos
Mtodos de respuesta de los

objetos grficos
Actuar sobre un control, con ratn o teclado:

OnClick
OnDblClick
Las clases de los objetos grficos definen

propiedades para los posibles sucesos, los
mtodos de respuesta estn asociados a estas
propiedades.
Acciones con el ratn:

OnMouseMove
OnMouseUp
OnMouseDown
Acciones con el teclado:
OnKeyPress
OnKeyUp
OnKeyDown
Estos mtodos de respuesta entre otras cosas

se ocupan del comportamiento predefinido
para ese objeto (cambiar el aspecto de un
botn a pulsado, sacar un submen).
Para aadir las reacciones propias de nuestra
aplicacin, en principio tendramos que crear
una subclase que redefina el mtodo de
respuesta.
BotonCancelar = CLASS(TButton)
public
procedure Click; OVERRIDE;
end;
55
56
Mtodos de respuesta a nivel

de ficha
Definir una subclase para todos y cada uno
de los controles de una aplicacin es muy
engorroso.
Para facilitarnos el manejo de los sucesos
Delphi declara automticamente un mtodo
de respuesta en la ficha que contiene el
control.
Lo coloca tambin en la seccin publicada.
El nombre del mtodo de respuesta generado
automticamente es el nombre del objeto
control seguido por el nombre del suceso (sin
On).
Como no es una redefinicin de mtodo, no
hay que llamar al mtodo de la clase base.
57
Ejemplo
type
TForm1 = class(TForm)
Texto: TEdit;
Boton: TButton;
procedure BotonClick(Sender: TObject);
private
{ Private declarations }
public
{ Public declarations }
end;
procedure TForm1.BotonClick(Sender:
TObject);
begin
Texto.Text := 'Has pulsado el botn';
end;
58
Parmetros de los mtodos de

respuesta
Como a los mtodos de respuesta se les llama
automticamente por un mecanismo oculto, y
no mediante una llamada explcita en el
cdigo, sus parmetros tienen que estar
predefinidos, para que pueda pasar sus
valores el Run-Time de Delphi.
Esto significa que los programadores no
podemos aadir parmetros.
Si en un mtodo de respuesta se utiliza un
dato externo al objeto grfico, no se puede
pasar como parmetro, tiene que ser una
variable global y acceder directamente a ella.
En el ejemplo anterior, Texto es un miembro
del mismo objeto (Form1), pero si estuviera
en otra ventana (p. ej. Form2), no podramos
pasar Form2 como parmetro de
TForm1.ButtonClick, tendramos que
acceder directamente (Form2.Texto := ....).
59
Los mtodos de respuesta a nivel de ficha

tienen como parmetro
predefinido Sender: TObject
que es el objeto sobre el que actu el usuario
y que le reenva el suceso a la ficha.
Sirve para que se pueda asociar el mismo
mtodo de respuesta a distintos sucesos,
posiblemente de distintos objetos. En este
caso, debemos darle al mtodo un nombre
relacionado con la accin que realiza.
Adems pueden tener parmetros adicionales
segn el tipo del suceso. Por ejemplo, un
mtodo de repuesta para el suceso
OnKeyPressed recibir el carcter de la tecla
pulsada.
60
Ejecucin de una aplicacin

basada en sucesos
La propia aplicacin est representada por un
objeto de nombre Application.
Al crear una aplicacin grfica, Delphi
genera, en el programa principal, las
siguientes sentencias:
Application.Initialize;
Application.CreateForm(TForm1, Form1);
Application.Run;
CreateForm se encarga de crear y presentar
en pantalla la ventana principal, con sus
controles. En general, el resto de las ventanas
se mostrarn en los mtodos de respuesta de
sta ventana principal.
61
Run es el bucle de sucesos o bucle de

mensajes: despus de crear la ventana
principal, la aplicacin se queda a la espera
de las acciones del usuario.
Todo o casi todo el proceso de nuestra
aplicacin se realiza en los mtodos de
respuesta de los objetos grficos.
El bucle de sucesos slo se termina cuando
termina la aplicacin:
Desde dentro del cdigo, llamando a
Application.Terminate.
Al cerrar la ventana principal.
Al abortar la ejecucin de la aplicacin a
travs de MS-Windows.
62
Crear una aplicacin grfica

Al entrar en Delphi, crea por defecto un
proyecto para una aplicacin grfica.
3.- Programacin visual de

interfaces en Delphi
63
En el men File-New Application

Crea tambin una ficha que es la ventana
principal de la aplicacin.
Para ver las fichas: Men View-Forms
Para cambiar de la ficha a su cdigo Pascal:
Men View-Toggle Form/unit
F12
Botn de la barra de herramientas
64
Paleta de componentes
Para aadir un control o elemento de

visualizacin a nuestra ficha: Pulsar el tipo de
componente en la paleta y despus la
posicin en la que lo queremos colocar en la
ficha.
Objetos dentro de un contenedor (reas

dentro de una ventana, grupos, paneles):
Crear primero el contenedor, despus crear
los objetos contenidos ponindolos dentro.
Para crear varios componentes del mismo
tipo: Mantener pulsada la tecla maysculas
mientras se selecciona el componente en la
paleta.
Al mantener el ratn sobre uno de los

botones de la paleta aparece una caja de texto
con el nombre del componente.
Para la mayora de los componentes aparece
exactamente con la misma posicin y tamao
que tendr durante la ejecucin de la
aplicacin. Podemos cambiar la apariencia de
estos componentes como en un editor grfico.
Algunos componentes, como los mens,
aparece slo un icono que lo representa.
65
66
Pginas de la paleta de
componentes
La paleta est dividida en pginas que
agrupan los componentes segn su
organizacin interna en Delphi:
Standard: Controles normales de
Windows: Mens, Botones de accin y de
opcin, etc.
Additional: Controles ms sofisticados de
MS-Windows: BitButton, MasEdit, etc.
Win32: Controles de Windows 9x/NT:
Pginas, selector de valor, etc.
System: Componentes para acceder a
funciones del sistema, como el
temporizador.
Dialogs: Ventanas de dilogo
predefinidas.
Win3.1: Controles anticuados de
Windows 3.1. Para compatibilidad con
Delphi 1.0
67
Samples: Ejemplos de nuevos

componentes definidos por el
programador.
ActiveX: Controles ActiveX, compatibles
con otras herramientas MS-Windows
Internet: Para comunicacin por Internet y
aplicaciones Web
Servers: Para aplicaciones cliente-servidor
68
Lista de componentes
Men View-Component List
Editar las propiedades

Seleccionar el objeto a modificar en la ficha.
Aparecern en (la pgina izquierda de) el
inspector de objetos sus propiedades.
Ordenada alfabticamente.
Podemos hacer bsquedas por nombre.
!No se puede aadir un componente
directamente en el cdigo Pascal!
69
70
Ejercicio 1: Crear un men

principal
Para modificar las propiedades:
Editar directamente el texto.
Elegir uno de los valores de la lista
desplegable.
Abrir la ventana de edicin pulsando el
botn
si existe, o pulsando dos
veces en el campo de texto (slo algunas,
como el color).
1 Crear una nueva aplicacin grfica

2 Elegir el men principal en la paleta de
componentes y colocarlo en la ficha.
3 Hay un editor especial para los mens:
lanzarlo con doble pulsacin sobre el icono.
4 Editar la propiedad Caption de cada submen
y cada opcin, para crear el siguiente men:
Recordar que debe editarse en primer lugar el

nombre.
Las propiedades compuestas tienen un signo
+ a la izquierda, que podemos utilizar para
desplegar sus elementos.
El inspector no muestra las propiedades que
slo son modificables en tiempo de
ejecucin.
71
72
Mtodos de respuesta
La pgina derecha del inspector de objetos
nos muestra los posibles sucesos.
Para aadir un mtodo de respuesta (a nivel
de ficha).
Introducir el nombre del mtodo en el
cuadro de texto del inspector, al lado del
nombre del suceso.
Si pulsamos dos veces sobre este cuadro
de texto, Delphi genera un mtodo con el
nombre del objeto seguido del nombre del
suceso.
Si pulsamos dos veces en el objeto en la
ficha, Delphi genera un mtodo para el
suceso por defecto.
En cualquiera de los casos, aade el mtodo a
la ficha, y el editor de cdigo se coloca en el
cuerpo de este mtodo.
73
Ayuda sobre los componentes

Ayuda sobre una clase de componente:
Elegir el componente en la paleta, o un
componente de ese tipo en la ficha que se
est editando.
Pulsar la tecla F1 (ayuda sensible al
contexto).
La pgina de ayuda nos muestra tambin
los miembros heredados de otras clases.
Sobre una propiedad o un tipo de suceso:
Elegir la propiedad o el suceso en el
inspector de objetos.
Pulsar F1
75
Ejercicio 1 (Continuacin)
Aadir un mtodo de respuesta a la opcin
Abrir del men Archivo que muestre un
mensaje.
1 En el editor del men principal, doble
pulsacin sobre la opcin Abrir.
Genera un mtodo de respuesta para el
evento por defecto, que en este caso es
pulsar (Click):
procedure TForm1.AbrirClick(Sender:
TObject);
begin
end;
2 Aadir en el cuerpo de este mtodo:
ShowMessage('Archivo- Abrir');
74
Ejercicio 2: Trabajar con

controles de datos
Objetivo: Crear una ventana para elegir un
tipo de letra:
que al pulsar el botn aceptar escriba en la

salida estndar el tipo de letra elegido.
Cada control tiene una propiedad que indica
el contenido o el dato introducido por el
usuario.
76
1 Crear una nueva aplicacin grfica.

2 Aadirle una consola
(Project|Options|Linker|Generate console app
3 Crear el botn Aceptar y las casillas.
(Recordar que se debe poner un nombre
significativo a cada objeto creado).
4 Aadir un mtodo de respuesta para el evento
pulsar del botn Aceptar.
5 Dentro de este mtodo, comprobar el estado
de las casillas, que se encuentra en la
propiedad Checked:
if Negrita.checked then
write(' negrita');
77
7 Aadir la escritura del botn seleccionado al

mtodo de respuesta del botn Aceptar:
i:= GTamanyo.itemindex;
write(GTamanyo.items.Strings[i]);
NOTA SOBRE LOS BOTONES DE OPCIN:
Tambin se pueden crear como botones
independientes dentro de un contenedor
GroupBox, pero slo interesa cuando
queremos manejar cada botn por separado,
por ejemplo inhibirlo en algunos momentos.
79
6 Crear los botones de opcin del tamao de

letra:
Crear un RadioGroup.
Pulsar el botn al lado de la propiedad
Items: Sale un editor de texto, donde cada
lnea corresponde a un botn.
Items es un objeto de la clase TStrings, uno
de cuyas propiedades, Strings, es un array
de Strings.
La propiedad ItemIndex del RadioGroup
indica cul de ellos est seleccionado en
un momento dado.
Tiene un rango de 0 a n-1.
El valor -1 significa que no hay ningn botn
seleccionado.
78
8 Aadir la lista de Fuentes. Su estado se

maneja tambin con Items e ItemIndex.
En el caso de una lista, la propiedad ItemIndex
no es visible ni modificable en tiempo de
edicin, por lo que no aparece en el inspector
de objetos. Pero s se puede utilizar en tiempo
de ejecucin (en el cdigo Pascal).
Los strings tambin se pueden cargar de un
fichero, bien desde el editor de items o en
tiempo de ejecucin, usando el mtodo
LoadFromFile de Items.
80
Mostrar mensajes simples

El procedimiento ShowMessage muestra una
ventana con un mensaje de texto y un botn
Ok.
4.- Aplicaciones con varias

ventanas en Delphi
81
Otras ventanas secundarias y

dilogos
Ventanas de dos tipos:
Dilogos tpicos (descendientes de
TCommonDialog).
Fichas (descendientes de TForm).
Se manejan de forma un poco diferente.
Las fichas se pueden usar tanto para hacer
dilogos como para ventanas secundarias.
83
Para mensajes con iconos indicando el tipo

de mensaje (error, aviso, confirmacin, etc)
usar la funcin MessageDlg.
Estas utilidades reciben como parmetro la
cadena de caracteres a mostrar. Para que
incluyan nmeros hay que utilizar el
operador de concatenacin junto con
funciones de conversin.
Ejemplo:
a: integer;
mensaje: string;
...
mensaje := El valor de a es + IntToStr(a);
ShowMessage(mensaje);
82
Dilogos tpicos
En la pgina Dialogs de la paleta de
componentes.
El editor grfico los aade a la ficha actual,
como un control ms, aunque realmente son
dilogos modales que se mostrarn desde
alguno de los mtodos de respuesta de la
ficha actual.
Aparecen como iconos y no se puede
modificar su apariencia, s el resto de las
propiedades.
84
Utilizar un dilogo tpico

Para mostrar el dilogo: llamar a su mtodo
Execute:
DialogoAbrir.Execute
Este mtodo devuelve un valor booleano que
indica si el usuario puls o no el botn
aceptar.
If DialogoAbrir.execute then
assignfile(fich, DialogoAbrir.Name);
Obsrvese que los datos introducidos por el
usuario se manejan en la ventana que abri el
dilogo, no en el propio dilogo.
85
Fichas como ventanas no

modales
Mostrar la ventana: Llamar al mtodo Show
de la ficha:
Form1.Show
Aparece encima de las otras ventanas.
Ocultar la ventana: Llamar al mtodo Hide.
Podemos consultar si la ficha est en pantalla
mirando la propiedad Visible de la ficha.
Mltiples fichas
Para crear una nueva ficha en el editor
grfico: men File |New Form.
Por cada ficha, el editor aade al programa
principal una llamada a
Application.CreateForm que crea la ficha
junto con sus controles.
Por defecto, toma la primera ficha creada
como ventana principal de la aplicacin.
Slo se presenta en pantalla automticamente
la ventana principal.
Crear las fichas de esta manera exige que los
objetos ficha sean variables globales, para
que sean accesibles desde el programa
principal.
86
Fichas como ventanas modales

Mostrar la ventana: Llamar al mtodo
ShowModal.
Delphi garantiza que la ventana modal est
siempre por encima de cualquier otra de la
aplicacin.
Ocultar la ventana: Asignar a la propiedad
ModalResult un valor distinto de cero:
Self.ModalResult := mrOK;
(vase el tipo TModalResult)
Generalmente no se permite cambiar de
tamao una ventana de dilogo, ni tampoco
minimizarla o maximizarla. Para ello, basta
con asignar a la propiedad BorderStyle de la
ficha el valor bsDialog.
87
88
Utilizar los datos de una ficha
Ejemplo
Adems del estado de los controles, si

tenemos datos adicionales asociados a una
ficha, es conveniente que los declaremos
como miembros del objeto ficha.
Para inicializar los datos al crear o mostrar la
ficha: Definir un mtodo de respuesta para el
suceso OnCreate o el suceso OnShow.
Es preferible hacerlo as que redefinir los
mtodos Create y Show.
Para recoger los datos introducidos por el
usuario en una ficha desde los mtodos de
otra, podemos acceder a sus datos, mtodos y
propiedades.
Si la declaracin de la ficha es visible
(hacer USES de la unidad).
89
UNIT TipoLetra;
UNIT Menu;
...
...
TVentanaTipoLetra = CLASS(TForm)
TVentanaMenu = ...
Tamanyo: TRadioGroup;
...
Fuentes: TListBox;
IMPLEMENTATION
90
...
USES TiposLetra;
IMPLEMENTATION
PROCEDURE TVentanaMenu.TipoLetraClick
PROCEDURE TVentanaTipoLetra.FormShow
(Sender: TObject);
BEGIN
(Sender: TObject);
BEGIN
IF VentanaTipoLetra.ShowModal = mrOK THEN
Fuentes.ItemIndex := 0;
BEGIN
GTamanyo.ItemIndex :=0;
IF VentanaTipoLetra.Negrita.Checked THEN
END;
writeln(Negrita);
PROCEDURE TVentanaTipoLetra.AceptarClick
(Sender: TObject);
BEGIN
...
END;
END;
ModalResult := mrOK;
END;
91
92
Trabajo en equipo
Repartir entre los miembros del equipo la
definicin de ventanas.
Ponerle a las ventanas nombres
significativos.
Para integrarlas en un mismo proyecto: men
Project |Add to Project
Modificar, si es necesario, la creacin y
visualizacin de las ventanas.
93

ImplementacionDeInterfacesGraficas Delphi

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

ImplementacionDeInterfacesGraficas Delphi

Uploaded by

Copyright:

Available Formats

Notas sobre terminologa

La interfaz de usuario, la interfaz personamquina. (femenino, plural interfaces)

Implementacin de interfaces grficas en Delphi

M. Martnez, URJC, 2004

GUI: Graphical User Interfaces

Implementacin de interfaces grficas en Delphi

M. Martnez, URJC, 2004

1.- Elementos de una interfaz

Implementacin de interfaces grficas en Delphi

M. Martnez, URJC, 2004

Implementacin de interfaces grficas en Delphi

M. Martnez, URJC, 2004

Se abre y se activa cuando se abre/activa la

Se utiliza durante todo o casi todo el

Implementacin de interfaces grficas en Delphi

M. Martnez, URJC, 2004

Implementacin de interfaces grficas en Delphi

M. Martnez, URJC, 2004

Implementacin de interfaces grficas en Delphi

M. Martnez, URJC, 2004

Interfaz de documentos mltiples.

Implementacin de interfaces grficas en Delphi

M. Martnez, URJC, 2004

M. Martnez, URJC, 2004

Uso de las ventanas modales

Implementacin de interfaces grficas en Delphi

M. Martnez, URJC, 2004

Con respecto a la asignacin del foco:

Implementacin de interfaces grficas en Delphi

M. Martnez, URJC, 2004

Implementacin de interfaces grficas en Delphi

M. Martnez, URJC, 2004

Implementacin de interfaces grficas en Delphi

M. Martnez, URJC, 2004

Uso de los dilogos

Implementacin de interfaces grficas en Delphi

M. Martnez, URJC, 2004

Areas dentro de una ventana

Las ventanas principal y secundarias se crean

Para agrupar/clasificar/distinguir elementos

Implementacin de interfaces grficas en Delphi

M. Martnez, URJC, 2004

Implementacin de interfaces grficas en Delphi

M. Martnez, URJC, 2004

Utilizando objetos contenedores, que

Grupos (TGroupBox y TRadioGroup). Se

Paneles (TPanel): Mantienen la posicin de los

Barras de herramientas (TToolBar).

Implementacin de interfaces grficas en Delphi

M. Martnez, URJC, 2004

Implementacin de interfaces grficas en Delphi

M. Martnez, URJC, 2004

Tcnica de interaccin = mtodo de empleo

Barra de estado (TStatusBar)

Implementacin de interfaces grficas en Delphi

M. Martnez, URJC, 2004

Implementacin de interfaces grficas en Delphi

M. Martnez, URJC, 2004

Tipos de controles grficos

Mens emergentes (pop-up menus)

Implementacin de interfaces grficas en Delphi

M. Martnez, URJC, 2004

Implementacin de interfaces grficas en Delphi

M. Martnez, URJC, 2004