GUI en Java

23/03/2007
PROGRAMACIÓN GRÁFICA
JAVA:AWT, SWING, SWT
23/03/2007
DAI
Evolución
z
Hasta Java 2: Abstract Window Toolkit
(AWT)
–
–
z
GUI no programada sobre objetos Java
Apariencia dependiente de la arquitectura de
ejecución
Después de Java 2:Swing, Standard Widget
Toolkit (SWT)
–
–
Java
Apariencia independiente (look&feel para forzar
apariencias) 23/03/2007
DAI
1
23/03/2007
Primeros acercamientos al modo
gráfico
z
Método paint(Graphics g) (java.awt.Component)
z
Texto
– g.drawString(“Hola Mundo”, 40,120);
z
Líneas
–
z
g.drawLine(5,10,30,50)
Rectángulos
–
g.drawRect(x,y,ancho, alto)
23/03/2007
DAI
Primeros acercamientos al modo
gráfico
z
Polígonos
– Polygon P=new Polygon(); p.addPoint(x,y);
z
Óvalos
– drawOval(x,y,ancho, alto)
z
Arcos
– drawArc(x,y,ancho,
drawArc(x y ancho alto,
alto anguloInicial,
anguloInicial arcoAngulo)
z
Colores
– Color o=new Color(r,g,b);
– g.setColor(Color.red)
– setBackground(Color.white)
23/03/2007
DAI
2
23/03/2007
Trabajando con fuentes
z
Clase Font
– Estilos permitidos: PLAIN, BOLD, ITALIC
– Fuente
z Font f=new Font(“Times New Roman”, Font.BOLD+Font.ITALIC,12);
z g.setFont(f); g. drawString(…);
z
Clase FontMetricsÎ medidas en píxeles
–
int getAscent (): distancia baseline hasta la altura de las mayúsculas.
mayúsculas
int getDescent (): distancia baseline hasta profundidad de los caracteres que
descienden.
int getLeading(): espacio mínimo entre líneas.
int qetHeighc(): distancia entre dos líneas (descent + leading + ascent).
int getMaxAscent(): ascent máximo.
–
int stringWidth(String st): anchura de un string dado.
–
–
–
–
–
23/03/2007
DAI
Con esto podríamos conseguir
cosas así….
23/03/2007
DAI
3
23/03/2007
¿Qué ofrece AWT?
z
z
z
z
z
Conjunto rico de componentes de interfaz de usuario
Modelo robusto de gestión de eventos
Herramientas para gráficos e imágenes, formas, colores y
fuentes
Gestores de layouts para que la disposición en pantalla no
dependa del tamaño de ventana o resolución
Cl
Clases
para transferencia
t
f
i de
d datos,
d t
copiar
i y pegar all
portapapeles
23/03/2007
DAI
Pros de AWT
z
Velocidad: El uso de componentes nativos eleva el
rendimiento
z
Portabilidad de applets: AWT soportado sin el plugin de Java por casi todos los navegadores
z
Look and Feel: Aspecto propio de la plataforma
23/03/2007
DAI
4
23/03/2007
Contras de AWT
z
Portabilidad: Uso de componentes nativos limita la
portabilidad ya que algunas funciones no están
disponibles para algunas plataformas
z
Desarrolladores: Menos componentes disponibles
que en otras librerías tipo Swing
z
Características: AWT no soporta iconos y tool-tips
23/03/2007
DAI
Elementos básicos AWT (java.awt)
z
Object
–
CheckboxGroup
–
Component
z Button
z Canvas CheckBox Choice
z Container
– Panel
z
Applet
– ScrollPane
– Window
z
Dialog Frame
z Label List
z TextComponent
– TextArea TextField
z MenuComponent
– MenuItem
z
CheckboxMenuItem
z
Menu
z
PopupMenu
23/03/2007
DAI
5
23/03/2007
Layouts AWT (java.awt)
z
LayoutManager
–
–
–
FlowLayout
GridLayout
LayoutManager2
z
z
z
BorderLayout
CardLayout
GridBagLayout
23/03/2007
DAI
Más sobre AWT
z
z
z
z
z
z
Dispose automático de los elementos, excepto en elementos
de alto nivel como Dialog o Frame
Son thread-safe, esto es, actualización del GUI sin problemas
de seguridad Î + lento
Composición top-down o bottom-up
No hay API de accesibilidad para AWT.
Id de
Idea
d JJava: S
Se escribe
ib 1 vez, se ejecuta
j
t en cualquier
l i sitio
iti Î
AWT depende de la configuración local Î se escribe 1 vez, se
comprueba en todos los sitios.
Graphics 2D, Java 2D, Java3D, JavaSound, etc…basados en
AWT.
23/03/2007
DAI
6
23/03/2007
SWING
z
z
z
z
z
z
Parte del Java Foundation Classes (JFC)
Todas las características de AWT.
Versiones 100% Java de los componentes
AWT
Nuevos componentes tipo árbol de vista o
listbox
Diseño Java independiente del destino
Look and Feel “pluggable”.
23/03/2007
DAI
Pros de SWING
z
Portabilidad: Diseño Java 100% tiene menos limitaciones específicas
z
Comportamiento: Diseño Java 100% permite definir más
comportamientos al no haber limitaciones específicas
z
Características: Soporte para iconos, tool-tips,etc
z
Look and Feel: Posibilidad de diseñar un conjunto de elementos que
reflejen el aspecto de cualquier plataforma(Microsoft Windows,
Solaris, Mac, etc.). Simplificación de cambios globales automáticos
para conseguir mayor accesibilidad
23/03/2007
DAI
7
23/03/2007
Contras de SWING
z
Portabilidad de applets: Los navegadores requieren el plug-in Java
z
Rendimiento: Más lentos que AWT. Usan un controlador gráfico
propio, en vez de APIs nativas (p.ej, DirectX)
z
Look and Feel: Puede que no resulten de aspecto idéntico a otras
aplicaciones nativas, lo cual puede “incomodar “ al usuario.
z
Mayor complejidad que AWT
23/03/2007
DAI
Componentes SWING (javax.swing)
z
Object
– Component
z Container
– JComponent (subtipos)
– Panel
z Applet
z JApplet
– Window
z Dialog
z JDialog
z Frame
z JFrame
z JWindow
23/03/2007
DAI
8
23/03/2007
Layouts SWING (javax.swing)
z
LayoutManager
–
–
CenterLayout
LayoutManager2
z
z
z
BoxLayout
OverlayLayout
S i L
SpringLayout
23/03/2007
DAI
SWING vs AWT
z
SWING permite la separación entre modelo, vista y controlador. Esto
permite adaptar el modelo a las necesidades de la aplicación y ser
compartido por múltiples vistas
z
Look&Feel programable
z
Editores por tipos de modelos y de componentes, por lo que las listas,
tablas y árbole spueden procesar elementos de casi cualquier tipo.
z
SWING ofrece una infraestructura y una API para conseguir accesibilidad.
Dispose automático; bottom-up y top-down
z
23/03/2007
DAI
9
23/03/2007
SWT
z
z
z
z
z
Open Source
Similar en concepto a AWT
Ofrece JFace como conjunto mejorado de
componentes y utilidades para simplificar la
creación de GUIs con SWT
SWT.
Intento de eliminar problema AWT y Swing
Cercano a dependiente de la plataforma
23/03/2007
DAI
Algunos componentes SWT
z
Object
–
–
Dialog
Widget
z
z
z
Menu
Item
C
Control
l
23/03/2007
DAI
10
23/03/2007
Layouts SWT
(org.eclipse.swt.layout,…)
z
Layout
–
–
–
–
–
FillLayout
FormLayout
GridLayout
RowLayout
y
!StackLayout
23/03/2007
DAI
Más sobre SWT
z
z
z
z
z
z
No libera automáticamente, aunque los contenedores hacen el
dispose de sus controles hijo
Sólo top-down (todo componente requiere de un contenedor padre)
La accesibilidad depende de si el host donde se ejecuta ofrece
servicios de accesibilidad
Entorno gráfico limitado (poco soporte para Java2D,
Java3D,..)ÎDraw2D de Graphical Editing Framework)
No es tecnología estándar Java
No todos los componentes SWT tienen modelos asociados al estilo
Swing, sino listas de items.
23/03/2007
DAI
11
23/03/2007
23/03/2007
DAI
23/03/2007
DAI
12
23/03/2007
23/03/2007
DAI
¿Qué elegir?
z
z
z
z
z
z
Caso general: Swing o SWT+JFace
Swing es superior a SWT sin JFace
Swing es Java estándar, portable y con mejor
arquitectura
Swing permite aplicaciones gráficas avanzadas
SWT es como una aplicación nativa,
nativa aumentando el
rendimiento y la compatiblidad nativa.
Si desarrollamos para una única plataforma, SWT tiene
ventaja en cuanto a compatibilidad,incluyendo
integración con características locales tipo uso de
ActiveX en Windows
23/03/2007
DAI
13
23/03/2007
Elementos SWING
z
z
z
z
z
z
z
Contenedores de alto nivel
Contenedores de propósito general
Contenedores de propósito especial
Controles básicos
P t ll no editables
Pantallas
dit bl
Pantallas editables
Layouts
23/03/2007
DAI
Layouts
z
Hasta ahora: Qué elementos vamos a
emplear
z
A partir de ahora: Cómo se distribuyen
23/03/2007
DAI
14
23/03/2007
FlowLayout
z
z
z
z
z
Se añaden los componentes línea a línea
Se cambia de línea al llenar la anterior
FlowLayout(alineamiento, hgap, vgap)
Alineamiento: LEFT, CENTER, RIGHT
H
Hgap,
vgap: distancia
di t
i entre
t componentes
t
23/03/2007
DAI
BorderLayout
z
North y South: Expansión a lo ancho
z
West y East: Ocupan toda la altura tras
poner North y South
z
Center: Lo que quede
z
BorderLayout(hgap, vgap)
23/03/2007
DAI
15
23/03/2007
CardLayout
z
z
z
z
z
z
Basado en pestañas
Sólo se muestran algunos contenidos, que
ocupan todo el espacio
Cambio de componente mediante eventos
(próximo tema)
CardLayout(hgap,vgap)
Show(parent, name)
First(parent), last,next, previous
23/03/2007
DAI
GridLayout
z
z
z
z
z
Sistema de filas y columnas
1 componente por casilla (ocupan toda la
celda, esto es, se redimensionan)
Celdas del mismo tamaño
Se añaden de izquierda a derecha y de
arriba abajo
GridLayout(rows,cols,hgap,vgap)
23/03/2007
DAI
16
23/03/2007
GridBagLayout
z
z
Permite ocupar más de 1 celda
gridx, gridy :
–
–
–
z
Fila y columna arriba izqda del componente.
GridBagLayout.RELATIVE
Permite tener grids predecibles
gridwidth, gridheight:
–
Nº celdas usadas por el componente
z
Remainder
23/03/2007
DAI
GridBagLayout
z
Fill: Cuando el componente es más pequeño
que la celda, cómo redimensionar: None,
Horizontal, Vertical, Both
z
ipadx, ipady : Padding interno a ambos
ipadx
lados
23/03/2007
DAI
17
23/03/2007
GridBagLayout
z
Insets: Padding externo (entre componente y límite de
superficie de visualización)
Anchor: dónde situar el componente si es más pequeño
z
weightx, weighty : peso fila-columna para redimensionar
z
23/03/2007
DAI
SpringLayout
23/03/2007
DAI
18
23/03/2007
SpringLayout
z
z
z
z
Distancias entre bordes de componentes encapsuladas en
objetos Spring
SpringLayout
– NORTH, SOUTH, EAST, WEST
Constraints: Restricciones sobre un componente
– x,y,width, height
west = x ; north = y ; east = x + width ; south = y + height
SpringLayout.Constraints labelCons = layout.getConstraints(label);
labelCons.setX(Spring.constant(5));
labelCons.setY(Spring.constant(5));
23/03/2007
DAI
Crear Layouts propios
z
void addLayoutComponent(String, Component)
z
void removeLayoutComponent(Component) Dimension
preferredLayoutSize(Container)
z
Dimension minimumLayoutSize(Container)
z
void layoutContainer(Container)
23/03/2007
DAI
19
23/03/2007
Contenedores de alto nivel
23/03/2007
DAI
Tipos de ventanas
z
Ventana primaria
z
Ventana secundaria
z
Diálogos
z
Mensajes
z
Pop-Up
z
Paleta
23/03/2007
DAI
20
23/03/2007
Ventana primaria
z
Representan función o aplicación independiente
z
Presentan constantemente componentes de ventana y controles (ej:
barra de menú)
z
Presentan información que se actualiza constantemente (ej: fecha y
hora)
z
Proporcionan contexto a ventanas dependiente
z
No dividir una función independiente en dos o más ventanas primarias
z
No presentar funciones no relacionadas en una ventana primaria
23/03/2007
DAI
Ventana secundaria
z
Para acciones subordinadas:
–
z
z
z
Extensión de funciones en cuanto a complejidad y
relacionadas con objetos de ventanas primarias
Para presentar componentes de ventana usados
ocasionalmente
A
Acceso
a través
t é de
d componentes
t de
d ventanas
t
primarias
No debería ser más grande de 263x263 unidades de
diálogo
23/03/2007
DAI
21
23/03/2007
Modalidad en ventanas secundarias
z
z
z
z
z
z
No deseamos permitir interacción con otra
ventana
Presentar información (ej: mensajes)
Recibir entrada de usuario
Preguntar
g
al usuario
Usar con cuidado al restringir al usuario
No usarlas al requerir la tarea interacción
con otras ventanas
23/03/2007
DAI
Cascadas en ventanas secundarias
z
z
z
z
z
z
Para proporcionar opciones avanzadas a menor
nivel en un diálogo complejo
Uso de botón de comando que nos lleve a un nuevo
diálogo con …
Presentar el diálogo adicional en forma de cascada
No más de 2 cascadas por ruta
No ocultar barra de título ni información relevante
mostrada
Cerrar la ventana secundaria que la abre si son
independientes
23/03/2007
DAI
22
23/03/2007
Desenrollamiento en ventanas
secundarias
z
Proporciona opciones avanzadas al mismo
nivel de complejidad
z
Uso de botón de comandos con >>
z
Expandir a la derecha o abajo
23/03/2007
DAI
Diálogos
z
Presentar mensajes cortos y concretos
z
Pedir acciones específicas
z
Realizar acciones que se hagan en poco tiempo y
no cambien frecuentemente
z
Botones a incluir: OK, Cancelar y otros que puedan
ser necesarios
23/03/2007
DAI
23
23/03/2007
Hojas e inspectores de propiedades
z
Ejemplo: Definir fecha y hora del sistema
z
Presentan el conjunto completo de propiedades para un objeto
z
Categorizar y agrupar páginas de propiedades en caso de ser necesario
z
Botones a incluir: OK, Cancelar, Aplicar, Reset y otros que puedan ser
necesarios
z
E hojas
En
h j simples,
i l
situar
it
llos b
botones
t
en lla h
hoja
j
z
En hojas con pestañas, poner los botones fuera de las pestañas
z
En caso de inspectores de propiedades:
–
Reflejar cambios dinámicos y mostrar las propiedades más comunes o más
accedidas
23/03/2007
DAI
Message Boxes
z
Se usan para mostrar un mensaje sobre una situación o
condición particular
z
Botones a incluir: OK, Cancel, Ayuda, Sí/no, Parar, botones
que corrijan la acción que provocó la aparición del mensaje
z
Permitir que desde la barra de título se pueda cerrar si el
mensaje incluye botón de cerrar
z
Activar por defecto la opción más frecuente o menos
destructiva
23/03/2007
DAI
24
23/03/2007
Otros
z
Ventanas de paleta
–
–
z
Para presentar conjuntos de controles
De tamaño ajustable
Ventanas pop-up
–
–
–
Mostrar información adicional cuando la forma normal
muestra la información abreviada
Etiquetas textuales para controles gráficos
Información de ayuda contextual
23/03/2007
DAI
Gestión de ventanas: Interfaz mono
documentos
z
z
Ventana primaria con conjunto de secundarias
Uso
–
–
–
–
z
V t j
Ventajas
–
–
z
Cuando objeto y ventana tienen relación 1:1
Cuando se presente el objeto como unidad
Para facilitar vistas alternativas con un control que permita el
cambio de vista
Para permitir vistas simultáneas al dividir en varios paneles
Uso común y enfoque centrado de datos
Manipulación de ventanas fácil y poco confusa
Inconveniente: Se muestra o edita la info en ventanas
separadas
23/03/2007
DAI
25
23/03/2007
Interfaz multidocumento (MDI) (I)
z
Técnica para gestionar un conjunto de ventanas que contienen
documentos
z
Elementos: Ventana padre primaria y secundarias hijas
z
Uso
–
–
–
–
Presentar múltiples
p
ocurrencias de un objeto
j
Comparar datos entre ventanas
Presentar varias partes de una aplicación
Ideal para ver tipos de objetos homogéneos y para segregar
objetos y las ventanas usadas en una tarea
23/03/2007
DAI
Interfaz multidocumento (II)
z
Ventajas
–
–
–
z
Las ventanas hijas tienen los mismos componentes que la padre
Útil para gestionar un conjunto de objetos
Facilita agrupaciones y centrarse en un conjunto de actividades
Desventajas
–
–
–
–
–
Refuerza el foco primario de una aplicación
Las ventanas secundarias pueden ocultar contenido y oscurecer
la relación entre ventanas
No se puede mantener siempre el contexto
Relación abstracta entre archivos y ventanas
Restringir las ventanas hijas a las padres puede no ser adecuado
23/03/2007
DAI
26
23/03/2007
Workbooks
z
Descripción
–
–
–
–
z
Uso
–
–
–
z
Gestionar un conjunto de vistas de un objeto
Rápida navegación de vistas múltiples
Ordenar contenido de las secciones
Ventajas
–
–
z
Consiste en un conjunto de vistas organizadas como cuaderno con pestañas
Se presentan las vistas de objetos como secciones en la ventana primaria
Cada sección representa una vista de los datos
Las pestañas pueden servir para navegar entre secciones
Combina la simplicidad del interfaz monoventana y la de no tener ventanas hijas
Preserva algunas capacidades de gestión de MDI
Inconvenientes
–
No hay simultaneidad de vistas
23/03/2007
DAI
Proyectos
z
Descripción
–
–
–
z
Uso
–
–
z
Gestión de objetos que no tienen por qué ser mostrados
Cuando no se deba restringir ventanas hijas
V
Ventajas
j
–
–
z
Consiste en un contenedor que tiene un conjunto de objetos, que se
pueden abrir en ventanas primarias
Cada ventana con su propio menú y elementos de interfaz
“Hijos” no contenidos pero al cerrar el proyecto se cierran todos y al abrir
se reabre el estado
Preserva capacidades de gestión del MDI
Gran flexibilidad en cuanto a colocación y disposición de ventanas
Inconvenientes
–
Aumento de complejidad por la dificultad de diferenciar la ventana primaria
del resto de ventanas del proyecto
23/03/2007
DAI
27
23/03/2007
Contenedores de alto nivel
z
JApplet
–
Hereda de Applet
–
init, start, stop
–
BorderLayout por defecto
z
JFrame
–
Ventana en la que se ejecutan las aplicaciones gráficas en Java.
–
Heredamos de Jframe
–
Contenedor primario; uso de Jpanel
–
BorderLayout por defecto
z
JDialog
–
Más limitados que un Jframe
–
Ventana con propietarioDependientes de un Jframe
–
Ejecución modal
23/03/2007
DAI
Contenedores de propósito
general
23/03/2007
DAI
28
23/03/2007
Contenedores de propósito
general
z
JPanel
–
–
Superficie sobre la que organizar los elementos
Muy flexible, acepta cualquier tipo de
componente (incluso otros paneles, cada uno con
su layout)
23/03/2007
DAI
Barras de scroll
z
Acceso a información que no cabe en la superficie de
visualización
z
Ventajas
–
z
Inconvenientes
–
–
z
Permite ver datos de tamaño ilimitado
Consume espacio
Engorroso
Uso adecuado
–
–
No usar para establecer valores de propiedades
Cuando se deba visualizar información “invisible”
23/03/2007
DAI
29
23/03/2007
Barras de scroll: Pautas de diseño
z
z
z
z
z
z
Uso de área o contenedor de scroll para indicar su
existencia
Uso de slider para indicar la posición y cantidad de
información se ha visto
Uso de flechas direcciones para indicar la dirección
posible de scroll
Posición del scroll
Indicar estado actual
Incluir en todas las ventanas redimensionables
23/03/2007
DAI
JScrollPane
z
z
z
z
z
Hacer scroll de un
componente
Espacio en pantalla limitado o
tamaño de campo dinámico
Uso de JViewport para
gestionar la parte visible
Uso de ScrollBars
JScrollPane(Component, int,
int) Î política SB vertical y
horizontal
23/03/2007
DAI
30
23/03/2007
JSplitPane
z
z
z
z
z
Dos componentes con tamaño personalizable
Los componentes se suelen meter en un JScrollPane
splitPane = new JSplitPane(JSplitPane.HORIZONTAL_SPLIT,
listScrollPane, pictureScrollPane);
setLeftComponent ,setRightComponent, setTopComponent ,
setBottomComponent
setResizeWeight
tR i W i ht (0..1):
(0 1) F
Forma d
de redimensionamiento
di
i
i t
–
–
1.0: La parte de abajo o derecha permanece igual y arriba/izqda puede
cambiar
0.5: ambos por igual
23/03/2007
DAI
Botones Toolbar (I)
z
Uso
–
–
–
z
Estructura
–
–
–
z
Acceso rápido y sencillo a opciones frecuentes en múltiples
pantallas
Invocar una subaplicación
Reemplazar menú
Botones del mismo tamaño
I á
Imágenes:
centrada
t d
Texto: etiqueta significativa
Organización
–
–
De izqda a dcha: botones más usados a la izqda
De arriba abajo: botones más usados arriba
23/03/2007
DAI
31
23/03/2007
Botones Toolbar (II)
z
Posición
–
–
–
z
Bajo la barra de menú
Cambiable por usuario
(Des)activable por usuario
Items activos
–
Deshabilitar los no aplicables
z
Personalización de contenidos
z
Activación
–
Como botones de comando
23/03/2007
DAI
JToolBar
z
Contenedor de botones (o no botones) por filas o
columnas
z
JToolBar toolBar = new JToolBar("Still draggable");
button = makeNavigationButton("Back24", PREVIOUS, "Back to
previous something-or-other", "Previous");
toolBar.add(button);
setPreferredSize(new Dimension(450,
Dimension(450 130));
add(toolBar, BorderLayout.PAGE_START);
z
z
z
z
z
z
z
SetFloatable: ¿movible?
SetRollover: ¿bordes?
addSeparator: separación entre botones
23/03/2007
DAI
32
23/03/2007
Pestañas
z
Presenta la información que se puede ordenar lógicamente en páginas o
secciones en la misma ventana
z
Ventajas
–
–
–
Distinción visual
Similitud con versión papel
Organizar de manera efectiva información repetitiva relacionada
z
Inconvenientes: Complejidad visual
z
Uso adecuado
–
–
–
–
Presentar información relacionada de forma estructurada
Presentar opciones que se pueden aplicar a un objeto
Cuando varía el orden de uso de información
Cuando el título de la pestaña pueda describir perfectamente sus contenidos
23/03/2007
DAI
Pestañas
z
Secciones o páginas
–
–
–
Información relacionada en sección
Orden significativo
Tamaño similar
z
Leyendas de tamaño similar, sustantivos,
equivalentes de teclado
z
Botones de comando
–
En función de si afectan a una sólo pestaña o a varias
23/03/2007
DAI
33
23/03/2007
JTabbedPane
z
z
z
z
z
z
z
z
z
Paneles compartiendo espacio
Efecto similar al CardLayout
setTabPlacement (por defecto top)
JTabbedPane tabbedPane = new JTabbedPane();
tabbedPane.addTab("Tab 1", icon, panel1, "Does nothing");
tabbedPane setMnemonicAt(0 KeyEvent
tabbedPane.setMnemonicAt(0,
KeyEvent.VK_1);
VK 1);
setComponentAt (int,Comp)
setSelectedIndex(int)
indexOfComponent(Comp)
23/03/2007
DAI
Contenedores de propósito
especial
23/03/2007
DAI
34
23/03/2007
JInternalFrame
z
z
z
z
z
z
z
Ventanas internas, requieren un contenedor
Contenidas habitualmente en JDesktopPane
No generan eventos de ventanas
Más posibilidades de control al ser totalmente
independientes de la plataforma
Importante definir tamaño, posición
Se añaden los componentes a su ContentPane
Invisibles por defecto
23/03/2007
DAI
JRootPane
z
Se obtiene a partir de JApplet, JDialog, JFrame,
JInternalFrame, and JWindow
z
Glass Pane: Oculto por defecto. Al hacerlo visible, grado
de transparencia. Útil para capturar eventos o pintar en
una zona donde ya hay un componente
z
Layered Pane: Para posicionar los contenidos
– Content Pane: contenedor de objetos
– Barra de opciones: opcional; menú
23/03/2007
DAI
35
23/03/2007
Controles básicos
23/03/2007
DAI
Botones
z
Propósito
z
Uso adecuado : Acciones específicas frecuentes en una ventana
–
–
–
–
z
Que algo ocurra inmediatamente
Mostrar una ventana o menú
Dar valor a una propiedad
Ventajas
–
–
–
–
–
–
z
Iniciar acciones, cambiar propiedades, mostrar pop-up
Siempre visibles y fáciles de organizar adecuadamente
Describen acciones de manera significativa
Pueden estar dotados de g
grandes áreas de selección
Aspecto 3D
Equivalentes de teclado
Más rápido que acceder al menú
Inconvenientes
–
–
Consume espacio y limitación de cantidad a poner
Requiere mover el puntero para seleccionar y mirar fuera del área de trabajo
23/03/2007
DAI
36
23/03/2007
Botones de comando (I)
z
Uso
–
–
z
Etiquetas
–
–
–
–
z
En ventanas con barra de menú: Acceso rápido a comandos
críticos o frecuentes
Sin barra: Acceso a todos los comandos
Descripciones significativas monopalabra (idealmente)
Primera letra de cada palabra en may
F
Fuentes
t regulares
l
y del
d l mismo
i
ttamaño
ñ siempre
i
No numerar, centrada y consistencia
Dimensiones
–
–
Consistencia, tan grande como sea posible
No más de 6 botones por ventana
23/03/2007
DAI
Botones de comando (II)
z
Posición
–
–
–
–
–
–
–
Consistencia entre ventanas
No colocarlos en “el hueco que queda”
Para salir del diálogo: centrado y alineado horizontalmente abajo
Para expandir invocar propiedad del diálogo: centrados y alineados
verticalmente en la parte derecha
Si está relacionado con un control: junto al control
Si tiene relación con un grupo de controles: debajo o a la derecha del
grupo
Si por cuestiones
c estiones de espacio se ponen cerca botones para salir y e
expandir
pandir
propiedades
z
z
–
Si es abajo: salir a la derecha
Si es a la derecha: salir abajo
Espaciado adecuado y consistente entre botones adyacentes y los
controles de pantallas
23/03/2007
DAI
37
23/03/2007
Botones de comando (III)
z
Activación por defecto
–
–
–
–
–
z
Botón de confirmación
Aplicar la actividad a realizar
Acción positiva que no tenga resultados catastróficos
Si es una acción destructiva, poner por defecto cancelar
Usar tecla enter para activar botón por defecto
Activación:
–
–
Cuando el puntero se ponga sobre el botón, indicar de alguna
forma visual que el botón está disponible para ser seleccionado
Mostrar el botón de forma distintiva cuando se activa
23/03/2007
DAI
Radio Buttons
z
Para escoger entre un conjunto de opciones mutuamente excluyentes
z
Ventajas
–
z
Desventajas
–
–
z
Rapidez en acceso y comparación
Consumo de espacio
Opciones limitadas
Uso apropiado
–
–
–
–
–
Para establecer valores, atributos y propiedades
Opciones mutuamente excluyentes
Cuando hay espacio
Datos y opciones discretos, difíciles de recordar, que no cambian,
comprensión más simple todas juntas
No usar para comandos o para situar en estado activo/inactivo
23/03/2007
DAI
38
23/03/2007
Radio Buttons
z
Descripción de opciones
–
–
–
–
Texto significativo monolínea, estilo frase
A la derecha del botón separados 1 espacio
Incluir opción “ninguna” si es de interés
Desactivar las que no puedan aplicarse circunstancialmente
z
Tamaño: 2-8 opciones
z
Valores por defecto
–
–
Poner uno por defecto
En caso de que sea complicado (ej: hombre/mujer) poner
un valor indeterminado por defecto
23/03/2007
DAI
Radio Buttons
z
Estructura
–
–
–
z
Organización
–
z
Columnas con botones y etiquetas alineados a la izquierda
En filas si no hay espacio vertical
Borde para enfatizar la relación entre ellos
Ordenar por frecuencia de uso o importancia (izqda->dcha;
(izqda >dcha;
arriba->abajo)
Control asociado al radio button
–
Poner el control a la derecha y con “>” entre ambos si el
radio button ejerce como etiqueta del control
23/03/2007
DAI
39
23/03/2007
Radio Buttons
z
Uso de equivalentes de teclado
z
Selección e indicación
–
Selección
z
z
–
Área lo más g
grande p
posible
Mostrar visualmente la posición del cursor sobre la
opción
Activación
z
Distinguir la opción activada
23/03/2007
DAI
Check Boxes
z
Activar una o varias opciones
z
Ventajas
–
z
Desventajas
–
–
–
z
Rapidez en acceso y comparación
Consumo de espacio
Número de opciones limitado
Dificultad de alinear con otros controles
Uso apropiado
–
–
–
–
–
–
Para establecer valores, atributos y propiedades
Opciones no excluyentes
Cuando hay espacio
Datos y opciones discretos, difíciles de recordar, que no cambian, comprensión más
simple todas juntas
Pueden tener efecto sobre otros controles
Usar cuando los estados son claramente opuestos
23/03/2007
DAI
40
23/03/2007
Check Boxes
z
Descripción de opciones
–
–
Monolínea, significativas, a la derecha de la casilla de selección
Desactivar la no aplicable
z
Tamaño:1-8 opciones
z
Valores p
por defecto
–
Activar el estado que marca el valor por defecto del control
z
Organización en base a frecuencia, uso, importancia
z
Controles relacionados: como radio button
23/03/2007
DAI
Check Boxes
z
Etiquetas
–
–
Para cada grupo de opciones, sin abreviar, situar encima o a la
izqda del grupo
Justificado con borde o primera opción si no hay borde
z
Equivalentes de teclado: como radio button
z
Selección e indicación: como radio button
z
No usar “(de)seleccionar todo” como check box
z
Estados: seleccionado, no seleccionado, intermedio
23/03/2007
DAI
41
23/03/2007
Group Box
z
Uso
–
–
–
z
Relacionar visualmente en un control una serie de
elementos
Agrupar radio buttons, checkboxes
Agrupar más de 1 control relacionado funcionalmente
Pautas
–
–
Sustantivación (1-2 palabras) como etiqueta o encabezado
Sin : y con primera letra de cada palabra importante en May
23/03/2007
DAI
Botones
z
z
z
z
z
z
z
JButton: Botón
JCheckBox: Botón con casilla de activación
JRadioButton: Botón con casilla de selección
JMenuItem:Ítem de menú
JCheckBoxMenuItem: Ítem de menú con activación
JRadioButtonMenuItem: Ítem de menú con selección
JToogleButton: Check y radio a la vez
23/03/2007
DAI
42
23/03/2007
Combo Box
z
Asignar el valor a un campo de texto mediante teclado o seleccíón
z
Ventajas
–
–
–
–
z
Inconvenientes
–
–
–
–
z
Consume espacio
Scroll
Difi lt d para recordar
Dificultad
d la
l información
i f
ió del
d l tipo
ti d
de iinformación
f
ió a iintroducir
t d i
Orden de las opciones
Uso adecuado
–
–
z
Ilimitadas opciones siempre visibles
Recuerda al usuario las opciones disponibles
Flexibilidad
Posibilidad de nuevas entradas
Como List Box
Cuando se requiere introducir información por teclado o cuando puede ser que la opción deseada
no se encuentre en la lista
Desplegables y contextuales
23/03/2007
DAI
JComboBox
z
z
z
z
z
Elegir entre una lista de valores o introducir
uno nuevo
Ventaja: poco espacio en pantalla
Alternativa a grupos de RadioButton
setSelectedIndex/Item
addItem ,insertItemAt
23/03/2007
DAI
43
23/03/2007
List Boxes
z
Propósito
–
z
Ventajas
–
–
–
z
Número ilimitado de opciones
Recuerda las opciones disponibles
Opciones siempre visibles
Inconvenientes
–
z
Mostrar colecciones de elementos mutuamente excluyentes (o no)
Espacio scrolling
Espacio,
scrolling, cambios en lista,
lista orden de la lista
Uso adecuado
–
–
–
Seleccionar valores o atributos
Cuando hay espacio suficiente
Para datos y opciones…
z
z
z
–
Cuya mejor representación sea textual
No muy frecuentes, ni bien conocidos ni fáciles de recordar
Cantidad variable
Cuando no sea práctico usar radio buttons/checkboxes
23/03/2007
DAI
List Boxes
z
Lista de opciones
–
–
–
–
Etiquetas sin abreviar
Sin límite de tamaño
No más de 40 páginas de opciones (en ese caso, posibilidad de filtros o
búsqueda)
Se deben mostrar al menos 6-8 opciones sin scroll
z
z
–
Suficientemente ancho para mostrar la opción más larga
z
z
Cuestiones de espacio (3 ítems)
Elemento principal (más grande)
Si no se puede
puede, que sean distinguibles las opciones
opciones, scroll horizontal
horizontal, uso de …
Organización
–
–
–
Orden que permita navegación sencilla
Usar controles separados para cambiar el orden o filtrar ítems
No mostrar opciones no válidas
23/03/2007
DAI
44
23/03/2007
List Boxes
z
Etiquetas
–
–
Etiqueta arriba o a la izquierda de la lista
Estilo consistente y desactivar en su caso
z
Selección e indicación: visualización
z
Activación: Requiere presionar un botón de
comando
23/03/2007
DAI
List Boxes
z
Selección única
–
–
–
z
Si tiene campo de texto asociado, ponerlo arriba y las
etiquetas (que puede ser única para ambos controles si se
disponen muy próximos) a la izquierda del campo de texto
Ambos mismo fondo
Ofrecer valor por defecto
Selección múltiple
–
–
–
Marcas de selección,
Lista adicional de selección (Añadir, Eliminar)
(De)Seleccionar todo
23/03/2007
DAI
45
23/03/2007
Listas desplegables y contextuales
z
Seleccionar un ítem de un conjunto mutuamente exclusivo cuando hay
limitaciones de espacio
z
Ventajas
–
–
–
z
Inconvenientes
–
–
–
z
Número ilimitado de opciones
Recordatorio de opciones
Conserva espacio
Acción extra para ver las opciones
Necesidad de scroll
Orden de los ítems
Uso adecuado
–
–
Similar listbox, cuando no sea práctico usarlos
No usarlos si es importante ver todas las opciones juntas
23/03/2007
DAI
Listas desplegables y contextuales
z
Botón prompt junto al campo de selección
z
Elementos de la lista y organizáción como
listbox
z
Proporcionar valor por defecto
z
No mostrar elementos no aplicables
23/03/2007
DAI
46
23/03/2007
JList
z
z
z
z
z
z
z
Mostrar una lista de valores
Ocupa más espacio que JComboBox
Disposición fila, columna,multi
Modelo de Selección(ListSelectionModel)
– Única
– Múltiple consecutiva
– Múltiple
int getMinSelectionIndex() ; int getMaxSelectionIndex()
int[] getSelectedIndices() ; Object getSelectedValue()
Object[] getSelectedValues()
23/03/2007
DAI
JMenu
z
z
z
z
JMenuBar, Jpopup, JMenuItem
Definición de mnemónicos y teclas de acceso rápidos
Separación entre opciones
Ejemplo de opciones variadas
–
–
–
–
–
–
–
–
z
menuItem = new JMenuItem("Both text and icon", new ImageIcon("images/middle.gif"));
menuItem.setMnemonic(KeyEvent.VK_B);
menu.add(menuItem);
rbMenuItem = new JRadioButtonMenuItem("A radio button menu item");
rbMenuItem setSelected(true);
rbMenuItem.setSelected(true);
rbMenuItem.setMnemonic(KeyEvent.VK_R);
group.add(rbMenuItem);
menu.add(rbMenuItem)
Layout por defecto: BoxLayout, se puede cambiar para conseguir otras
disposiciones
23/03/2007
DAI
47
23/03/2007
Slider
z
Para establecer una propiedad en un rango continuo, viendo la posición relativa
del valor seleccionado
z
Ventajas
– Representación espacial de la posición relativa
– Distinción visual
z
Inconvenientes
– Posible imprecisión
– Consumo
C
d
de espacio
i
– Más complejo que otros controles
z
Uso adecuado
– Valorar una atributo con valores excluyentes
– Rango de valores determinado en escala continua
– Cuando tiene sentido el incremento en una escala para asignar los valores
– Cuando la representación espacial pueda facilitar la comprensión
23/03/2007
DAI
Slider
z
Escala
–
–
–
–
–
Mostrar el rango completo de valores
Marcar posiciones bajas, intermedias y altas
Proporcionar cuando sea posibles marcas de intervalos de escala
Incrementos consistentes
Permitir cambiar las unidades de medida
z
Cursor de posición
z
Botones para permitir movimientos con incremento mínimo
z
Etiquetas/detenciones para valores significativos
z
“Relleno” indicador de proporciones
23/03/2007
DAI
48
23/03/2007
JSlider
z
z
z
z
z
z
Valores numéricos en una escala min max
Alternativa: Spinner
TickSpacing: avance en la escala
JSlider(JSlider.VERTICAL, FPS_MIN,
FPS MAX FPS_INIT);
FPS_MAX,
FPS INIT);
getValue
Combinación con JFormattedTextField para
mejorar la apariencia de los números
23/03/2007
DAI
Cajas de texto
z
Propósito
–
z
Ventajas
–
z
Flexible, familiar y poco espacio
Desventajas
–
z
Mostrar, editar e introducir información
Uso de teclado y conocimiento de qué teclear
Uso adecuado
–
–
Para datos de ámbito no limitado, difíciles de categorizar y con longitud
variables
Cuando no es posible una lista de selección
23/03/2007
DAI
49
23/03/2007
¿Multilínea?
z
1 Línea
–
z
Nombre de archivo, ruta de archivo, datos
variables en un formulario, escribir un comando
Multilínea
–
–
Escribir, editar y leer pasajes de texto
Usos típicos:
z
z
Mostrar/editar ficheros
Crear/leer email
23/03/2007
DAI
Campos de texto estáticos
z
Uso adecuado
–
–
z
Mostrar una etiqueta de un control
Mostrar una información determinada
instruccional o descriptiva
Seguir las pautas ya vistas: consistencia,
etiquetas representativas,etc
23/03/2007
DAI
50
23/03/2007
JTextField
z
Introducción de texto.
z
Se dispara evento al llegar la indicador de fin
de texto
z
setText, setEditable, selectAll
z
Cut, copy, paste (JTextComponent)
23/03/2007
DAI
Pantallas no editables
23/03/2007
DAI
51
23/03/2007
JLabel
z
z
z
z
z
z
Para mostrar textos e imágenes no seleccionables
Alternativa no interactiva al botón
ImageIcon icon = createImageIcon("images/middle.gif");
label1 = new JLabel("Image and Text", icon,
JLabel.CENTER);
Papel importante en accesibilidad
setText, setIcon, setDisplayedMnemonic
23/03/2007
DAI
Check Boxes
z
Activar una o varias opciones
z
Ventajas
–
z
Desventajas
–
–
–
z
Rapidez en acceso y comparación
Consumo de espacio
Número de opciones limitado
Dificultad de alinear con otros controles
Uso apropiado
–
–
–
–
–
–
Para establecer valores, atributos y propiedades
Opciones no excluyentes
Cuando hay espacio
Datos y opciones discretos, difíciles de recordar, que no cambian, comprensión más
simple todas juntas
Pueden tener efecto sobre otros controles
Usar cuando los estados son claramente opuestos
23/03/2007
DAI
52
23/03/2007
Check Boxes
z
Descripción de opciones
–
–
Monolínea, significativas, a la derecha de la casilla de selección
Desactivar la no aplicable
z
Tamaño:1-8 opciones
z
Valores p
por defecto
–
Activar el estado que marca el valor por defecto del control
z
Organización en base a frecuencia, uso, importancia
z
Controles relacionados: como radio button
23/03/2007
DAI
Check Boxes
z
Etiquetas
–
–
Para cada grupo de opciones, sin abreviar, situar encima o a la
izqda del grupo
Justificado con borde o primera opción si no hay borde
z
Equivalentes de teclado: como radio button
z
Selección e indicación: como radio button
z
No usar “(de)seleccionar todo” como check box
z
Estados: seleccionado, no seleccionado, intermedio
23/03/2007
DAI
53
23/03/2007
JProgressBar
z
Indica
–
–
–
z
Combinación con cursor de espera
–
z
Que se está ejecutando la tarea
Cuánto puede tardar la tarea
Cuánto se ha hecho ya
container.setCursor(Cursor.getPredefinedCursor(Cursor.WAIT_CURSOR))
Alternativa: ProgressMonitor (Dialog)
23/03/2007
DAI
JProgressBar Vs ProgressMonitor
z
z
JProgressBar
– Mayor control en su configuración
– Se quieren mostrar en pantalla más componentes
– Necesitamos más de 1 barra de progreso
– Queremos reusar la barra de progreso
ProgressMonitor
– Queremos un diálogo para mostrar progreso
– Estamos ejecutando tarea secundaria y al usuario no le interesa el
progreso
– Fácil forma de cancelar la tarea
– Queremos mostrar un mensaje periódicamente
– La tarea no lleva mucho tiempo
23/03/2007
DAI
54
23/03/2007
ToolTip
z
Información descriptiva sobre un control o elemento de pantalla
z
Ventajas
–
–
–
z
Inconvenientes
–
–
z
Identificar un control
Reducir el caos visual por exceso de etiquetas e información descriptiva
Permite reducir el tamaño del control
No es obvio, debe ser descubierto
Su apariencia puede distraer
Uso adecuado
–
–
Identificar controles sin etiqueta
Proporcionar información descriptiva adicional o de estado sobre un
elemento de pantalla
23/03/2007
DAI
ToolTip: Pautas
z
Mostrar tras una breve espera
z
En toolbars, usar una palabra como etiqueta
z
En otros elementos, usar una frase breve
z
Mostrarlos abajo-derecha respecto del puntero,
completamente dentro de la pantalla
–
z
Cajas de texto: centrarlas debajo
Usarlos como suplemento al diseño
23/03/2007
DAI
55
23/03/2007
Baloon Tips
z
Propósito
z
Ventajas
–
–
z
Recuerdan información y estados útiles
Inconvenientes
–
z
Como Tool Tip
Pueden dejar de ser útiles por abuso
U adecuado
Uso
d
d
–
–
Mostrar recordatorios y notificaciones no críticas
No usarlos para mostrar información crítica
23/03/2007
DAI
Baloon Tips: Pautas
z
Generales
–
–
–
z
Informar el cambio de un estado
Cambiar estados que el usuario pueda no haberse dado
cuenta
No usarlos para sustituir ToolTips
Contenido
–
–
–
Longitud máxima de 100 caracteres
Título: En negrita, incluir el nombre del objeto y el estado
del mismo
Cuerpo: Descripción 1-2 frases; puede incluir sugerencias
23/03/2007
DAI
56
23/03/2007
JToolTip
z
Añadir mensajes a componentes cuando se
pasa el ratón por encima
z
Set/getToolTipText
z
getToolTipTextLocation (devuelve la posición
del ratón)
23/03/2007
DAI
Pantallas editables
23/03/2007
DAI
57
23/03/2007
JColorChooser
z
Mostrar la paleta de colores
z
Posibilidad de seleccionar diferentes
modelos de color: RGB, HSB, Muestras
(ChooserPanel)
z
Set/getColor
23/03/2007
DAI
JFileChooser
z
z
z
z
z
z
z
z
Escoger archivo para cargar o guardar
Filtros de archivos (setFileFilter)
Vista de archivos(setFileView): iconos, nombres..
showOpen/SaveDialog
getSelectedFile(s)
setFileSelectionMode(archivos, directorios,ambos)
setMultiSelectionMode
GetCurrentDirectory, changeToParentDirectory
23/03/2007
DAI
58
23/03/2007
JTable
z
JTable table = new JTable(new MyTableModel());
23/03/2007
DAI
JTextArea
z
z
z
z
z
Campo de texto con número de filas y
columnas indeterminado
getRows, getColumns
Append (string)
Insert(string int)
Insert(string,
Propiedades de JTextField aplicables
23/03/2007
DAI
59
23/03/2007
Vista de árbol
z
Descripción
–
–
–
Tipo de List Box que muestra un conjunto de objetos
Puede incluir botones para explorar
Elementos que muestra:
z
z
z
z
Iconos
Gráficos (ej: check box)
Líneas jerárquicas
Uso adecuado
–
Mostrar una descripción de un conjunto de objetos para
ilustrar su relación jerárquica
23/03/2007
DAI
JTree
z
z
z
z
z
z
z
Mostrar datos jerárquicamente
TreeModel como modelo de datos
TreePath para rutas de selección: camino a nodo
setSelectionMode(CONTIGUOUS_TREE_SELECTION,
DISCONTIGUOUS_TREE_SELECTION, or
SINGLE_TREE_SELECTION)
getNextMatch
tN tM t h
setRootVisible
putClientProperty: para definir el estilo
23/03/2007
DAI
60
23/03/2007
Usando HTML en componentes
SWING
z
Uso de HTML para dar formato a textos
z
button = new
JButton("<html><b><u>T</u>wo</b><br>lines</html>");
23/03/2007
DAI
Eligiendo controles (I)
23/03/2007
DAI
61
23/03/2007
23/03/2007
DAI
23/03/2007
DAI
62
23/03/2007
23/03/2007
DAI
63