Académique Documents
Professionnel Documents
Culture Documents
USABILIDAD Y
ACCESIBILIDAD
Desarrollo de Interfaces
CFGS DAM
Juan V. Carrillo
PRINCIPIOS DE DISEO:
USABILIDAD
7. Usar metforas
Similitudes con otros mecanismos y procesos
conocidos por el usuario que aplica lo que ya
conoce a los elementos y relaciones dentro de
un dominio no familiar (Autoexplicativa)
El ejemplo ms tradicional: el escritorio con
sus iconos representando carpetas y
documentos.
Bordes
Principio de diseo 5: minimizar la necesidad
de memorizacin
Mejoran la comprensin
http://docs.oracle.com/javase/tutorial/uiswing/components/border.html
Crear Bordes
Los bordes se pueden establecer sobre
cualquier Jcomponent con el mtodo
setBorder
JPanel pane = new JPanel();
pane.setBorder(BorderFactory.
createLineBorder(Color.black));
T
I
P
O
S
B
O
R
D
E
D S
E
EJERCICIO
Aade bordes a tu calculadora para mejorar la
usabilidad, agrupando los componentes que
actan juntos
JAVA SWING:
FOCUS TRAVERSAL POLICY (TABORDER)
Taborder
Principio de diseo 3: consistencia u homogeneidad
Regla de diseo en cualquier sistema de escritorio:
Al pulsar la tecla TAB no movemos al siguiente control
Al pulsar la combinacin MAY + TAB nos movemos al
control anterior
getComponentAfter()
getComponentBefore()
getDefaultComponent()
getFirstComponent()
getLastComponent()
Para establecerla
frame.setFocusTraversalPolicy
http://docs.oracle.com/javase/tutorial/uiswing/examples/misc/FocusTraversalDemoProject
/src/misc/FocusTraversalDemo.java
Actividad
Comprueba el taborder de tu calculadora y
reordena los controles si no es el correcto
Establece el botn por defecto a la tecla de
igual
JAVA SWING:
VALIDACIN
Validacin
Principio de diseo 4: minimizar la
posibilidad de cometer errores
Para validar un control en Java hay que
extender la clase InputVerifier.
InputVerifier
Todos los componentes de Swing colaboran entre ellos a la hora de
pasarse el foco de unos a otros. Si un componente gana el foco,
primero le pregunta al componente que lo pierde (y en concreto a
su InputVerifier) si se puede hacer la trasnmisin del foco.
De esta forma, por ejemplo, si escribimos algo en el JTextField y
vamos a pulsar un JButton, el JButton antes de ganar el foco
preguntar al InputVerifier del JTextField si se puede cambiar el
foco del JTextField al JButton.
Este es el momento que tiene el JTextField para verificar si su
entrada es o no correcta y negarse a perder el foco hasta que lo sea.
InputVerifier
Solamente tiene el mtodo verify, que devuelve un boolean
class PassVerifier extends InputVerifier {
public boolean verify(JComponent input) {
JTextField tf = (JTextField) input;
return "pass".equals(tf.getText());
}
}
...
textField.setInputVerifier(new PassVerifier())
Ejemplo sencillo
//This is our actual UI
JPanel inner = new JPanel();
JLabel lbl = new JLabel("Enter a URL");
JTextField f = new JTextField();
// The component name is used in error messages
f.setName("URL");
inner.add(lbl); inner.add(f);
//Create a ValidationPanel that will show
//any problem with the input at the bottom with an icon
ValidationPanel panel = new ValidationPanel();
panel.setInnerComponent(inner);
//This is all we do to validate the URL:
panel.getValidationGroup().add(f,
Validators.REQUIRE_NON_EMPTY_STRING,
Validators.NO_WHITESPACE,
Validators.URL_MUST_BE_VALID);
//Convenience method to show a simple dialog
if (panel.showOkCancelDialog("URL")) {...}
Validators
Los validators se pueden usar en cadena
Validator<String> v =
Validators.merge(validator1, validator2,
validator3)
validationGroup.add (theTextField,
Validators.REQUIRE_NON_EMPTY_STRING,
Validators.NO_WHITESPACE,
new MyCustomValidator());
ValidationGroup - Grupo de
componentes que se evalan
juntos.
Normalmente hay un nico grupo
por panel.
Un cambio en uno de los
componentes provoca la validacin
de todos
EJERCICIO OPCIONAL
Implementa una interfaz, a travs de Simple
Validation API, que permita introducir y valide los
datos de whois para un dominio
* http://amatellanes.wordpress.com/2013/07/30/java-validar-dni-nie-o-cif-en-java/
**
http://www.agenciatributaria.es/AEAT.desarrolladores/Desarrolladores/Descarga_de_modu
los/Descarga_de_modulos.html
COPIAR / PEGAR
// CORTAR
menuItem = new JMenuItem(new DefaultEditorKit.CutAction());
menuItem.setText("Cut");
menuItem.setMnemonic(KeyEvent.VK_X);
menuItem.setAccelerator(KeyStroke.getKeyStroke(
KeyEvent.VK_X, ActionEvent.CTRL_MASK));
mainMenu.add(menuItem);
// COPIAR
menuItem = new JMenuItem(new DefaultEditorKit.CopyAction());
menuItem.setText("Copy");
menuItem.setMnemonic(KeyEvent.VK_C);
menuItem.setAccelerator(KeyStroke.getKeyStroke(
KeyEvent.VK_C, ActionEvent.CTRL_MASK));
mainMenu.add(menuItem);
// PEGAR
menuItem = new JMenuItem(new DefaultEditorKit.PasteAction());
menuItem.setText("Paste");
menuItem.setMnemonic(KeyEvent.VK_P);
menuItem.setAccelerator(KeyStroke.getKeyStroke(
KeyEvent.VK_V, ActionEvent.CTRL_MASK));
mainMenu.add(menuItem);
EJERCICIO
Habilita la opcin de copiar y pegar en tu
calculadora
DESHACER / REHACER
Command Pattern
Memento Pattern
// UNDO Action
public void actionPerformed(ActionEvent e) {
try {
undo.undo();
} catch (CannotUndoException ex) {
System.out.println("Unable to undo: " + ex);
ex.printStackTrace();
}
updateUndoState();
redoAction.updateRedoState();
}
// UNDO Action
protected void updateUndoState() {
if (undo.canUndo()) {
setEnabled(true);
putValue(Action.NAME,
undo.getUndoPresentationName());
} else {
setEnabled(false);
putValue(Action.NAME, "Undo");
}
}
// REDO Action
public void actionPerformed(ActionEvent e) {
try {
undo.redo();
} catch (CannotRedoException ex) {
System.out.println("Unable to redo: " + ex);
ex.printStackTrace();
}
updateRedoState();
undoAction.updateUndoState();
}
// REDO Action
protected void updateRedoState() {
if (undo.canRedo()) {
setEnabled(true);
putValue(Action.NAME,
undo.getRedoPresentationName());
} else {
setEnabled(false);
putValue(Action.NAME, "Redo");
}
}
Ejercicio
Habilita la opcin de deshacer / rehacer en tu
calculadora. Solamente tendr efecto sobre
los dgitos que se escriben en el textField. Es
decir, que no se podrn deshacer operaciones
http://docs.oracle.com/javase/tutorial/uiswing/exampl
es/components/index.html#TextComponentDemo
USABILIDAD EN VENTANAS
Usabilidad en Ventanas
Principio de diseo 6: Disear dilogos para
conducir a la finalizacin
Crear sistemas claros de conduccin hasta el final
del proceso de las secuencias de accin del
usuario.
Ej: Al final de una compra aparece una ventana o
un texto que te indica que tu compra a finalizado.
MODO
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.
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.