23/03/2007

1

PROGRAMACIÓN GRÁFICA JAVA:AWT, SWING, SWT

23/03/2007 DAI

Evolución

Hasta Java 2: Abstract Window Toolkit(AWT)– GUI no programada sobre objetos Java– Apariencia dependiente de la arquitectura de

ejecuciónDespués de Java 2:Swing, Standard WidgetToolkit (SWT)– Java– Apariencia independiente (look&feel para forzar

apariencias) 23/03/2007 DAI

23/03/2007

2

Primeros acercamientos al modo gráfico

Método paint(Graphics g) (java.awt.Component)

Texto– g.drawString(“Hola Mundo”, 40,120);

Líneas– g.drawLine(5,10,30,50)

Rectángulos– g.drawRect(x,y,ancho, alto)

23/03/2007 DAI

Primeros acercamientos al modo gráfico

Polígonos– Polygon P=new Polygon(); p.addPoint(x,y);

Óvalos– drawOval(x,y,ancho, alto)

ArcosdrawArc(x y ancho alto anguloInicial arcoAngulo)– drawArc(x,y,ancho, alto, anguloInicial, arcoAngulo)

Colores– Color o=new Color(r,g,b);– g.setColor(Color.red)– setBackground(Color.white)

23/03/2007 DAI

23/03/2007

3

Trabajando con fuentes

Clase Font– Estilos permitidos: PLAIN, BOLD, ITALIC– Fuente

Font f=new Font(“Times New Roman”, Font.BOLD+Font.ITALIC,12);g.setFont(f); g. drawString(…);

Clase FontMetrics medidas en píxelesint getAscent (): distancia baseline hasta la altura de las mayúsculas– int getAscent (): distancia baseline hasta la altura de las 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

23/03/2007

4

¿Qué ofrece AWT?

Conjunto rico de componentes de interfaz de usuarioModelo robusto de gestión de eventosHerramientas para gráficos e imágenes, formas, colores y fuentesGestores de layouts para que la disposición en pantalla no dependa del tamaño de ventana o resoluciónCl t f i d d t i lClases para transferencia de datos, copiar y pegar al portapapeles

23/03/2007 DAI

Pros de AWT

Velocidad: El uso de componentes nativos eleva el rendimiento

Portabilidad de applets: AWT soportado sin el plug-in de Java por casi todos los navegadores

Look and Feel: Aspecto propio de la plataforma

23/03/2007 DAI

23/03/2007

5

Contras de AWT

Portabilidad: Uso de componentes nativos limita la portabilidad ya que algunas funciones no estándisponibles para algunas plataformas

Desarrolladores: Menos componentes disponiblesque en otras librerías tipo Swingque en otras librerías tipo Swing

Características: AWT no soporta iconos y tool-tips

23/03/2007 DAI

Elementos básicos AWT (java.awt)

Object– CheckboxGroup– Component

ButtonCanvas CheckBox ChoiceContainer

– Panel Applet

– ScrollPane– Window

Dialog FrameLabel ListTextComponent

– TextArea TextFieldMenuComponent

– MenuItemCheckboxMenuItemMenu

PopupMenu 23/03/2007 DAI

23/03/2007

6

Layouts AWT (java.awt)

LayoutManager– FlowLayout– GridLayout– LayoutManager2

BorderLayoutCardLayoutGridBagLayout

23/03/2007 DAI

Más sobre AWT

Dispose automático de los elementos, excepto en elementosde alto nivel como Dialog o FrameSon thread-safe, esto es, actualización del GUI sin problemasde seguridad + lentoComposición top-down o bottom-upNo hay API de accesibilidad para AWT.Id d J S ib 1 j t l i itiIdea de Java: Se escribe 1 vez, se ejecuta en cualquier sitioAWT 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

23/03/2007

7

SWING

Parte del Java Foundation Classes (JFC)Todas las características de AWT. Versiones 100% Java de los componentesAWTNuevos componentes tipo árbol de vista oNuevos componentes tipo árbol de vista o listboxDiseño Java independiente del destinoLook and Feel “pluggable”.

23/03/2007 DAI

Pros de SWING

Portabilidad: Diseño Java 100% tiene menos limitaciones específicas

Comportamiento: Diseño Java 100% permite definir máscomportamientos al no haber limitaciones específicas

Características: Soporte para iconos, tool-tips,etc

Look and Feel: Posibilidad de diseñar un conjunto de elementos quereflejen el aspecto de cualquier plataforma(Microsoft Windows, Solaris, Mac, etc.). Simplificación de cambios globales automáticospara conseguir mayor accesibilidad

23/03/2007 DAI

23/03/2007

8

Contras de SWING

Portabilidad de applets: Los navegadores requieren el plug-in Java

Rendimiento: Más lentos que AWT. Usan un controlador gráficopropio, en vez de APIs nativas (p.ej, DirectX)

Look and Feel: Puede que no resulten de aspecto idéntico a otrasaplicaciones nativas, lo cual puede “incomodar “ al usuario.

Mayor complejidad que AWT

23/03/2007 DAI

Componentes SWING (javax.swing)

Object– Component

Container– JComponent (subtipos)– Panel

AppletJApplet

– WindowDialog

JDialogFrame

JFrameJWindow

23/03/2007 DAI

23/03/2007

9

Layouts SWING (javax.swing)

LayoutManager– CenterLayout– LayoutManager2

BoxLayoutOverlayLayoutS i LSpringLayout

23/03/2007 DAI

SWING vs AWT

SWING permite la separación entre modelo, vista y controlador. Estopermite adaptar el modelo a las necesidades de la aplicación y ser compartido por múltiples vistas

Look&Feel programable

Editores por tipos de modelos y de componentes, por lo que las listas, tablas y árbole spueden procesar elementos de casi cualquier tipo.

SWING ofrece una infraestructura y una API para conseguir accesibilidad.Dispose automático; bottom-up y top-down

23/03/2007 DAI

23/03/2007

10

SWT

Open SourceSimilar en concepto a AWTOfrece JFace como conjunto mejorado de componentes y utilidades para simplificar la creación de GUIs con SWTcreación de GUIs con SWT.Intento de eliminar problema AWT y SwingCercano a dependiente de la plataforma

23/03/2007 DAI

Algunos componentes SWT

Object– Dialog– Widget

MenuItemC lControl

23/03/2007 DAI

23/03/2007

11

Layouts SWT (org.eclipse.swt.layout,…)

Layout– FillLayout– FormLayout– GridLayout– RowLayouty– !StackLayout

23/03/2007 DAI

Más sobre SWT

No libera automáticamente, aunque los contenedores hacen el dispose de sus controles hijoSólo top-down (todo componente requiere de un contenedor padre)La accesibilidad depende de si el host donde se ejecuta ofrece servicios de accesibilidadEntorno gráfico limitado (poco soporte para Java2D, Java3D,..) Draw2D de Graphical Editing Framework)No es tecnología estándar JavaNo todos los componentes SWT tienen modelos asociados al estilo Swing, sino listas de items.

23/03/2007 DAI

23/03/2007

12

23/03/2007 DAI

23/03/2007 DAI

23/03/2007

13

23/03/2007 DAI

¿Qué elegir?

Caso general: Swing o SWT+JFaceSwing es superior a SWT sin JFaceSwing es Java estándar, portable y con mejorarquitecturaSwing permite aplicaciones gráficas avanzadasSWT es como una aplicación nativa aumentando elSWT es como una aplicación nativa, aumentando el rendimiento y la compatiblidad nativa.Si desarrollamos para una única plataforma, SWT tieneventaja en cuanto a compatibilidad,incluyendointegración con características locales tipo uso de ActiveX en Windows

23/03/2007 DAI

23/03/2007

14

Elementos SWING

Contenedores de alto nivelContenedores de propósito generalContenedores de propósito especialControles básicosP t ll dit blPantallas no editablesPantallas editablesLayouts

23/03/2007 DAI

Layouts

Hasta ahora: Qué elementos vamos a emplear

A partir de ahora: Cómo se distribuyen

23/03/2007 DAI

23/03/2007

15

FlowLayout

Se añaden los componentes línea a líneaSe cambia de línea al llenar la anteriorFlowLayout(alineamiento, hgap, vgap)Alineamiento: LEFT, CENTER, RIGHTH di t i t tHgap, vgap: distancia entre componentes

23/03/2007 DAI

BorderLayout

North y South: Expansión a lo ancho

West y East: Ocupan toda la altura tras poner North y South

23/03/2007 DAI

Center: Lo que quede

BorderLayout(hgap, vgap)

23/03/2007

16

CardLayout

Basado en pestañasSólo se muestran algunos contenidos, que ocupan todo el espacioCambio de componente mediante eventos (próximo tema)(próximo tema)CardLayout(hgap,vgap)Show(parent, name)First(parent), last,next, previous

23/03/2007 DAI

GridLayout

Sistema de filas y columnas 1 componente por casilla (ocupan toda la celda, esto es, se redimensionan)Celdas del mismo tamañoSe añaden de izquierda a derecha y deSe añaden de izquierda a derecha y de arriba abajoGridLayout(rows,cols,hgap,vgap)

23/03/2007 DAI

23/03/2007

17

GridBagLayout

Permite ocupar más de 1 celdagridx, gridy : – Fila y columna arriba izqda del componente. – GridBagLayout.RELATIVE– Permite tener grids predeciblesPermite tener grids predecibles

gridwidth, gridheight: – Nº celdas usadas por el componente

Remainder

23/03/2007 DAI

GridBagLayout

Fill: Cuando el componente es más pequeño que la celda, cómo redimensionar: None, Horizontal, Vertical, Both

ipadx ipady : Padding interno a ambosipadx, ipady : Padding interno a ambos lados

23/03/2007 DAI

23/03/2007

18

GridBagLayout

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

weightx, weighty : peso fila-columna para redimensionar

23/03/2007 DAI

SpringLayout

23/03/2007 DAI

23/03/2007

19

SpringLayout

Distancias entre bordes de componentes encapsuladas en objetos SpringSpringLayout

– NORTH, SOUTH, EAST, WESTConstraints: Restricciones sobre un componente

– x,y,width, heightwest = 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

void addLayoutComponent(String, Component)

void removeLayoutComponent(Component) Dimension preferredLayoutSize(Container)

Dimension minimumLayoutSize(Container)

void layoutContainer(Container)

23/03/2007 DAI

23/03/2007

20

Contenedores de alto nivel

23/03/2007 DAI

Tipos de ventanas

Ventana primaria

Ventana secundaria

Diálogos

Mensajes

23/03/2007 DAI

Mensajes

Pop-Up

Paleta

23/03/2007

21

Ventana primaria

Representan función o aplicación independiente

Presentan constantemente componentes de ventana y controles (ej: barra de menú)

Presentan información que se actualiza constantemente (ej: fecha y hora)

Proporcionan contexto a ventanas dependiente

23/03/2007 DAI

Proporcionan contexto a ventanas dependiente

No dividir una función independiente en dos o más ventanas primarias

No presentar funciones no relacionadas en una ventana primaria

Ventana secundaria

Para acciones subordinadas:– Extensión de funciones en cuanto a complejidad y

relacionadas con objetos de ventanas primarias

Para presentar componentes de ventana usados ocasionalmenteA t é d t d t

23/03/2007 DAI

Acceso a través de componentes de ventanas primariasNo debería ser más grande de 263x263 unidades de diálogo

23/03/2007

22

Modalidad en ventanas secundarias

No deseamos permitir interacción con otra ventanaPresentar información (ej: mensajes)Recibir entrada de usuarioPreguntar al usuario

23/03/2007 DAI

gUsar con cuidado al restringir al usuarioNo usarlas al requerir la tarea interacción con otras ventanas

Cascadas en ventanas secundarias

Para proporcionar opciones avanzadas a menor nivel en un diálogo complejoUso de botón de comando que nos lleve a un nuevo diálogo con …Presentar el diálogo adicional en forma de cascadaNo más de 2 cascadas por rutaNo ocultar barra de título ni información relevante

23/03/2007 DAI

No ocultar barra de título ni información relevante mostradaCerrar la ventana secundaria que la abre si son independientes

23/03/2007

23

Desenrollamiento en ventanas secundarias

Proporciona opciones avanzadas al mismo nivel de complejidad

Uso de botón de comandos con >>

23/03/2007 DAI

Expandir a la derecha o abajo

Diálogos

Presentar mensajes cortos y concretos

Pedir acciones específicas

Realizar acciones que se hagan en poco tiempo y no cambien frecuentemente

23/03/2007 DAI

no cambien frecuentemente

Botones a incluir: OK, Cancelar y otros que puedan ser necesarios

23/03/2007

24

Hojas e inspectores de propiedades

Ejemplo: Definir fecha y hora del sistema

Presentan el conjunto completo de propiedades para un objeto

Categorizar y agrupar páginas de propiedades en caso de ser necesario

Botones a incluir: OK, Cancelar, Aplicar, Reset y otros que puedan ser necesarios

E h j i l it l b t l h j

23/03/2007 DAI

En hojas simples, situar los botones en la hoja

En hojas con pestañas, poner los botones fuera de las pestañas

En caso de inspectores de propiedades:– Reflejar cambios dinámicos y mostrar las propiedades más comunes o más

accedidas

Message Boxes

Se usan para mostrar un mensaje sobre una situación o condición particular

Botones a incluir: OK, Cancel, Ayuda, Sí/no, Parar, botones que corrijan la acción que provocó la aparición del mensaje

Permitir que desde la barra de título se pueda cerrar si el

23/03/2007 DAI

mensaje incluye botón de cerrar

Activar por defecto la opción más frecuente o menos destructiva

23/03/2007

25

Otros

Ventanas de paleta– Para presentar conjuntos de controles– De tamaño ajustable

Ventanas pop-upMostrar información adicional cuando la forma normal

23/03/2007 DAI

– Mostrar información adicional cuando la forma normal muestra la información abreviada

– Etiquetas textuales para controles gráficos– Información de ayuda contextual

Gestión de ventanas: Interfaz mono documentos

Ventana primaria con conjunto de secundariasUso

– 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

V t j

23/03/2007 DAI

Ventajas– 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

26

Interfaz multidocumento (MDI) (I)

Técnica para gestionar un conjunto de ventanas que contienen documentos

Elementos: Ventana padre primaria y secundarias hijas

Uso– Presentar múltiples ocurrencias de un objeto

23/03/2007 DAI

p 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

Interfaz multidocumento (II)

Ventajas– 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

23/03/2007 DAI

– 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

27

Workbooks

Descripción– 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

Uso– Gestionar un conjunto de vistas de un objeto– Rápida navegación de vistas múltiples– Ordenar contenido de las secciones

23/03/2007 DAI

Ventajas– 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

Proyectos

Descripción– 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 estadoUso

– Gestión de objetos que no tienen por qué ser mostrados– Cuando no se deba restringir ventanas hijas

V j

23/03/2007 DAI

Ventajas– 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

28

Contenedores de alto nivel

JApplet– Hereda de Applet– init, start, stop– BorderLayout por defecto

JFrame– Ventana en la que se ejecutan las aplicaciones gráficas en Java.– Heredamos de Jframe– Contenedor primario; uso de Jpanel– BorderLayout por defecto

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

23/03/2007

29

Contenedores de propósito general

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

Acceso a información que no cabe en la superficie de visualización

Ventajas– Permite ver datos de tamaño ilimitado

Inconvenientes– Consume espacio

23/03/2007 DAI

– Consume espacio– Engorroso

Uso adecuado– No usar para establecer valores de propiedades– Cuando se deba visualizar información “invisible”

23/03/2007

30

Barras de scroll: Pautas de diseño

Uso de área o contenedor de scroll para indicar su existenciaUso de slider para indicar la posición y cantidad de información se ha vistoUso de flechas direcciones para indicar la dirección posible de scroll

23/03/2007 DAI

posible de scrollPosición del scrollIndicar estado actualIncluir en todas las ventanas redimensionables

JScrollPane

Hacer scroll de un componenteEspacio en pantalla limitado o tamaño de campo dinámicoUso de JViewport paragestionar la parte visible Uso de ScrollBarsUso de ScrollBarsJScrollPane(Component, int, int) política SB vertical y horizontal

23/03/2007 DAI

23/03/2007

31

JSplitPane

Dos componentes con tamaño personalizableLos componentes se suelen meter en un JScrollPanesplitPane = new JSplitPane(JSplitPane.HORIZONTAL_SPLIT, listScrollPane, pictureScrollPane);setLeftComponent ,setRightComponent, setTopComponent , setBottomComponent

tR i W i ht (0 1) F d di i i tsetResizeWeight (0..1): Forma de redimensionamiento– 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)

Uso– Acceso rápido y sencillo a opciones frecuentes en múltiples

pantallas– Invocar una subaplicación– Reemplazar menú

Estructura– Botones del mismo tamaño

I á t d

23/03/2007 DAI

– Imágenes: centrada– 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

32

Botones Toolbar (II)

Posición– Bajo la barra de menú– Cambiable por usuario– (Des)activable por usuario

Items activos– Deshabilitar los no aplicables

23/03/2007 DAI

Personalización de contenidos

Activación– Como botones de comando

JToolBar

Contenedor de botones (o no botones) por filas o columnasJToolBar toolBar = new JToolBar("Still draggable"); button = makeNavigationButton("Back24", PREVIOUS, "Back to previous something-or-other", "Previous"); toolBar.add(button);setPreferredSize(new Dimension(450 130));setPreferredSize(new Dimension(450, 130)); add(toolBar, BorderLayout.PAGE_START);

SetFloatable: ¿movible?SetRollover: ¿bordes?addSeparator: separación entre botones

23/03/2007 DAI

23/03/2007

33

Pestañas

Presenta la información que se puede ordenar lógicamente en páginas o secciones en la misma ventana

Ventajas– Distinción visual– Similitud con versión papel– Organizar de manera efectiva información repetitiva relacionada

Inconvenientes: Complejidad visual

23/03/2007 DAI

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

Pestañas

Secciones o páginas– Información relacionada en sección– Orden significativo – Tamaño similar

Leyendas de tamaño similar, sustantivos,

23/03/2007 DAI

equivalentes de teclado

Botones de comando– En función de si afectan a una sólo pestaña o a varias

23/03/2007

34

JTabbedPane

Paneles compartiendo espacioEfecto similar al CardLayoutsetTabPlacement (por defecto top)JTabbedPane tabbedPane = new JTabbedPane();tabbedPane.addTab("Tab 1", icon, panel1, "Does nothing"); tabbedPane setMnemonicAt(0 KeyEvent VK 1);tabbedPane.setMnemonicAt(0, KeyEvent.VK_1);

setComponentAt (int,Comp)setSelectedIndex(int)indexOfComponent(Comp)

23/03/2007 DAI

Contenedores de propósito especial

23/03/2007 DAI

23/03/2007

35

JInternalFrame

Ventanas internas, requieren un contenedor Contenidas habitualmente en JDesktopPaneNo generan eventos de ventanasMás posibilidades de control al ser totalmente independientes de la plataformaImportante definir tamaño, posiciónSe añaden los componentes a su ContentPaneInvisibles por defecto

23/03/2007 DAI

JRootPane

Se obtiene a partir de JApplet, JDialog, JFrame, JInternalFrame, and JWindow

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

Layered Pane: Para posicionar los contenidos– Content Pane: contenedor de objetos– Barra de opciones: opcional; menú

23/03/2007 DAI

23/03/2007

36

Controles básicos

23/03/2007 DAI

Botones

Propósito– Iniciar acciones, cambiar propiedades, mostrar pop-up

Uso adecuado : Acciones específicas frecuentes en una ventana– Que algo ocurra inmediatamente– Mostrar una ventana o menú– Dar valor a una propiedad

Ventajas– Siempre visibles y fáciles de organizar adecuadamente– Describen acciones de manera significativa– Pueden estar dotados de grandes áreas de selección

23/03/2007 DAI

g– 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

37

Botones de comando (I)

Uso– En ventanas con barra de menú: Acceso rápido a comandos

críticos o frecuentes– Sin barra: Acceso a todos los comandos

Etiquetas– Descripciones significativas monopalabra (idealmente)– Primera letra de cada palabra en may

F t l d l i t ñ i

23/03/2007 DAI

– Fuentes regulares y del mismo tamaño siempre– No numerar, centrada y consistencia

Dimensiones– Consistencia, tan grande como sea posible– No más de 6 botones por ventana

Botones de comando (II)

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

grupoSi por c estiones de espacio se ponen cerca botones para salir e pandir

23/03/2007 DAI

– Si por cuestiones de espacio se ponen cerca botones para salir y expandir propiedades

Si es abajo: salir a la derechaSi es a la derecha: salir abajo

– Espaciado adecuado y consistente entre botones adyacentes y los controles de pantallas

23/03/2007

38

Botones de comando (III)

Activación por defecto– 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

23/03/2007 DAI

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

Radio Buttons

Para escoger entre un conjunto de opciones mutuamente excluyentes

Ventajas– Rapidez en acceso y comparación

Desventajas– Consumo de espacio– Opciones limitadas

23/03/2007 DAI

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

39

Radio Buttons

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

Tamaño: 2-8 opciones

23/03/2007 DAI

Valores por defecto– Poner uno por defecto– En caso de que sea complicado (ej: hombre/mujer) poner

un valor indeterminado por defecto

Radio Buttons

Estructura– Columnas con botones y etiquetas alineados a la izquierda– En filas si no hay espacio vertical– Borde para enfatizar la relación entre ellos

Organización– Ordenar por frecuencia de uso o importancia (izqda->dcha;

23/03/2007 DAI

– Ordenar por frecuencia de uso o importancia (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

40

Radio Buttons

Uso de equivalentes de teclado

Selección e indicación– Selección

Área lo más grande posible

23/03/2007 DAI

g pMostrar visualmente la posición del cursor sobre la opción

– ActivaciónDistinguir la opción activada

Check Boxes

Activar una o varias opciones

Ventajas– Rapidez en acceso y comparación

Desventajas– Consumo de espacio– Número de opciones limitado– Dificultad de alinear con otros controles

23/03/2007 DAI

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

41

Check Boxes

Descripción de opciones– Monolínea, significativas, a la derecha de la casilla de selección– Desactivar la no aplicable

Tamaño:1-8 opciones

Valores por defecto

23/03/2007 DAI

p– Activar el estado que marca el valor por defecto del control

Organización en base a frecuencia, uso, importancia

Controles relacionados: como radio button

Check Boxes

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

Equivalentes de teclado: como radio button

23/03/2007 DAI

Selección e indicación: como radio button

No usar “(de)seleccionar todo” como check box

Estados: seleccionado, no seleccionado, intermedio

23/03/2007

42

Group Box

Uso– Relacionar visualmente en un control una serie de

elementos– Agrupar radio buttons, checkboxes– Agrupar más de 1 control relacionado funcionalmente

23/03/2007 DAI

Pautas– Sustantivación (1-2 palabras) como etiqueta o encabezado– Sin : y con primera letra de cada palabra importante en May

Botones

JButton: BotónJCheckBox: Botón con casilla de activaciónJRadioButton: Botón con casilla de selecciónJMenuItem:Ítem de menúJCheckBoxMenuItem: Ítem de menú con activaciónJRadioButtonMenuItem: Ítem de menú con selecciónJToogleButton: Check y radio a la vez

23/03/2007 DAI

23/03/2007

43

Combo Box

Asignar el valor a un campo de texto mediante teclado o seleccíón

Ventajas– Ilimitadas opciones siempre visibles– Recuerda al usuario las opciones disponibles– Flexibilidad– Posibilidad de nuevas entradas

Inconvenientes– Consume espacio– Scroll

Difi lt d d l i f ió d l ti d i f ió i t d i

23/03/2007 DAI

– Dificultad para recordar la información del tipo de información a introducir– Orden de las opciones

Uso adecuado– 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

JComboBox

Elegir entre una lista de valores o introducir uno nuevoVentaja: poco espacio en pantallaAlternativa a grupos de RadioButtonsetSelectedIndex/ItemsetSelectedIndex/ItemaddItem ,insertItemAt

23/03/2007 DAI

23/03/2007

44

List Boxes

Propósito– Mostrar colecciones de elementos mutuamente excluyentes (o no)

Ventajas– Número ilimitado de opciones– Recuerda las opciones disponibles– Opciones siempre visibles

Inconvenientes– Espacio scrolling cambios en lista orden de la lista

23/03/2007 DAI

– Espacio, scrolling, cambios en lista, orden de la lista

Uso adecuado– Seleccionar valores o atributos– Cuando hay espacio suficiente– Para datos y opciones…

Cuya mejor representación sea textualNo muy frecuentes, ni bien conocidos ni fáciles de recordarCantidad variable

– Cuando no sea práctico usar radio buttons/checkboxes

List Boxes

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

Cuestiones de espacio (3 ítems)Elemento principal (más grande)

– Suficientemente ancho para mostrar la opción más largaSi no se puede que sean distinguibles las opciones scroll horizontal uso de

23/03/2007 DAI

Si no se puede, que sean distinguibles las opciones, scroll 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

45

List Boxes

Etiquetas– Etiqueta arriba o a la izquierda de la lista– Estilo consistente y desactivar en su caso

Selección e indicación: visualización

23/03/2007 DAI

Selección e indicación: visualización

Activación: Requiere presionar un botón de comando

List Boxes

Selección única– 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

23/03/2007 DAI

Selección múltiple– Marcas de selección, – Lista adicional de selección (Añadir, Eliminar)– (De)Seleccionar todo

23/03/2007

46

Listas desplegables y contextuales

Seleccionar un ítem de un conjunto mutuamente exclusivo cuando hay limitaciones de espacio

Ventajas– Número ilimitado de opciones– Recordatorio de opciones– Conserva espacio

Inconvenientes

23/03/2007 DAI

Inconvenientes– 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

Listas desplegables y contextuales

Botón prompt junto al campo de selección

Elementos de la lista y organizáción como listbox

23/03/2007 DAI

Proporcionar valor por defecto

No mostrar elementos no aplicables

23/03/2007

47

JList

Mostrar una lista de valoresOcupa más espacio que JComboBoxDisposición fila, columna,multiModelo 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

JMenuBar, Jpopup, JMenuItemDefinición de mnemónicos y teclas de acceso rápidosSeparación entre opcionesEjemplo de opciones variadas

– 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

23/03/2007

48

Slider

Para establecer una propiedad en un rango continuo, viendo la posición relativa del valor seleccionado

Ventajas– Representación espacial de la posición relativa– Distinción visual

Inconvenientes– Posible imprecisión

C d i

23/03/2007 DAI

– Consumo de espacio– Más complejo que otros controles

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

Slider

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

Cursor de posición

23/03/2007 DAI

Botones para permitir movimientos con incremento mínimo

Etiquetas/detenciones para valores significativos

“Relleno” indicador de proporciones

23/03/2007

49

JSlider

Valores numéricos en una escala min maxAlternativa: SpinnerTickSpacing: avance en la escalaJSlider(JSlider.VERTICAL, FPS_MIN, FPS MAX FPS INIT);FPS_MAX, FPS_INIT);getValueCombinación con JFormattedTextField para mejorar la apariencia de los números

23/03/2007 DAI

Cajas de texto

Propósito– Mostrar, editar e introducir información

Ventajas– Flexible, familiar y poco espacio

Desventajas– Uso de teclado y conocimiento de qué teclear

23/03/2007 DAI

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

50

¿Multilínea?

1 Línea– Nombre de archivo, ruta de archivo, datos

variables en un formulario, escribir un comando

Multilínea

23/03/2007 DAI

– Escribir, editar y leer pasajes de texto– Usos típicos:

Mostrar/editar ficherosCrear/leer email

Campos de texto estáticos

Uso adecuado– Mostrar una etiqueta de un control– Mostrar una información determinada

instruccional o descriptiva

23/03/2007 DAI

Seguir las pautas ya vistas: consistencia, etiquetas representativas,etc

23/03/2007

51

JTextField

Introducción de texto.

Se dispara evento al llegar la indicador de fin de texto

23/03/2007 DAI

setText, setEditable, selectAll

Cut, copy, paste (JTextComponent)

Pantallas no editables

23/03/2007 DAI

23/03/2007

52

JLabel

Para mostrar textos e imágenes no seleccionablesAlternativa no interactiva al botónImageIcon icon = createImageIcon("images/middle.gif");label1 = new JLabel("Image and Text", icon, JLabel.CENTER);Papel importante en accesibilidadsetText, setIcon, setDisplayedMnemonic

23/03/2007 DAI

Check Boxes

Activar una o varias opciones

Ventajas– Rapidez en acceso y comparación

Desventajas– Consumo de espacio– Número de opciones limitado– Dificultad de alinear con otros controles

23/03/2007 DAI

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

53

Check Boxes

Descripción de opciones– Monolínea, significativas, a la derecha de la casilla de selección– Desactivar la no aplicable

Tamaño:1-8 opciones

Valores por defecto

23/03/2007 DAI

p– Activar el estado que marca el valor por defecto del control

Organización en base a frecuencia, uso, importancia

Controles relacionados: como radio button

Check Boxes

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

Equivalentes de teclado: como radio button

23/03/2007 DAI

Selección e indicación: como radio button

No usar “(de)seleccionar todo” como check box

Estados: seleccionado, no seleccionado, intermedio

23/03/2007

54

JProgressBar

Indica– Que se está ejecutando la tarea– Cuánto puede tardar la tarea– Cuánto se ha hecho ya

Combinación con cursor de espera– container.setCursor(Cursor.getPredefinedCursor(Cursor.WAIT_CURSOR))

Alternativa: ProgressMonitor (Dialog)23/03/2007 DAI

JProgressBar Vs ProgressMonitor

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 progresoQueremos 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

23/03/2007

55

ToolTip

Información descriptiva sobre un control o elemento de pantalla

Ventajas– Identificar un control – Reducir el caos visual por exceso de etiquetas e información descriptiva– Permite reducir el tamaño del control

Inconvenientes– No es obvio, debe ser descubierto– Su apariencia puede distraer

23/03/2007 DAI

– Su apariencia puede distraer

Uso adecuado– Identificar controles sin etiqueta– Proporcionar información descriptiva adicional o de estado sobre un

elemento de pantalla

ToolTip: Pautas

Mostrar tras una breve espera

En toolbars, usar una palabra como etiqueta

En otros elementos, usar una frase breve

23/03/2007 DAI

Mostrarlos abajo-derecha respecto del puntero, completamente dentro de la pantalla

– Cajas de texto: centrarlas debajo

Usarlos como suplemento al diseño

23/03/2007

56

Baloon Tips

Propósito– Como Tool Tip

Ventajas– Recuerdan información y estados útiles

Inconvenientes– Pueden dejar de ser útiles por abuso

U d d

23/03/2007 DAI

Uso adecuado– Mostrar recordatorios y notificaciones no críticas– No usarlos para mostrar información crítica

Baloon Tips: Pautas

Generales– Informar el cambio de un estado– Cambiar estados que el usuario pueda no haberse dado

cuenta– No usarlos para sustituir ToolTips

23/03/2007 DAI

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

57

JToolTip

Añadir mensajes a componentes cuando se pasa el ratón por encima

Set/getToolTipText

getToolTipTextLocation (devuelve la posición del ratón)

23/03/2007 DAI

Pantallas editables

23/03/2007 DAI

23/03/2007

58

JColorChooser

Mostrar la paleta de colores

Posibilidad de seleccionar diferentes modelos de color: RGB, HSB, Muestras (ChooserPanel)(ChooserPanel)

Set/getColor

23/03/2007 DAI

JFileChooser

Escoger archivo para cargar o guardarFiltros de archivos (setFileFilter)Vista de archivos(setFileView): iconos, nombres..showOpen/SaveDialoggetSelectedFile(s)setFileSelectionMode(archivos, directorios,ambos)setMultiSelectionModeGetCurrentDirectory, changeToParentDirectory

23/03/2007 DAI

23/03/2007

59

JTable

JTable table = new JTable(new MyTableModel());

23/03/2007 DAI

JTextArea

Campo de texto con número de filas y columnas indeterminadogetRows, getColumnsAppend (string)Insert(string int)Insert(string, int)Propiedades de JTextField aplicables

23/03/2007 DAI

23/03/2007

60

Vista de árbol

Descripción– Tipo de List Box que muestra un conjunto de objetos– Puede incluir botones para explorar – Elementos que muestra:

IconosGráficos (ej: check box)Líneas jerárquicas

23/03/2007 DAI

Uso adecuado– Mostrar una descripción de un conjunto de objetos para

ilustrar su relación jerárquica

JTree

Mostrar datos jerárquicamenteTreeModel como modelo de datosTreePath para rutas de selección: camino a nodosetSelectionMode(CONTIGUOUS_TREE_SELECTION, DISCONTIGUOUS_TREE_SELECTION, orSINGLE_TREE_SELECTION)

tN tM t hgetNextMatchsetRootVisibleputClientProperty: para definir el estilo

23/03/2007 DAI

23/03/2007

61

Usando HTML en componentes SWING

Uso de HTML para dar formato a textosbutton = new JButton("<html><b><u>T</u>wo</b><br>lines</html>");

23/03/2007 DAI

Eligiendo controles (I)

23/03/2007 DAI

23/03/2007

62

23/03/2007 DAI

23/03/2007 DAI

23/03/2007

63

23/03/2007 DAI