Download Sin título de diapositiva

TEMA 1.
Diseño de interfaces gráficas
1.
2.
3.
4.
5.
6.
7.
Introducción
Componentes de la interfaz
Programación dirigida por eventos
Gestores de ubicación
Primitivas gráficas de pantalla.
Aspecto y Sensación (look&feel)
Diseño de interfaces gráficas de usuario
1
Bibliografía


http://java.sun.com/docs/books/tutorial/u
iswing/
Kathy Walrath, et all. “The JFC Swing
Tutorial”. Ed. Addison Wesley. 2004.
2
3 . Gestores de ubicación
Tipos de gestores







FlowLayout
BorderLayout
GridLayout
CardLayout
GridBagLayout y GridBagConstraint.
SpringLayout
BoxLayout
3
3 . Gestores de ubicación
BorderLayout
4
3 . Gestores de ubicación
BorderLayout
JButton button = new JButton("Button 1 (PAGE_START)");
pane.add(button, BorderLayout.PAGE_START);
button = new JButton("Button 2 (CENTER)");
button.setPreferredSize(new Dimension(200, 100));
pane.add(button, BorderLayout.CENTER);
button = new JButton("Button 3 (LINE_START)");
pane.add(button, BorderLayout.LINE_START);
button = new JButton("Long-Named Button 4 (PAGE_END)")
pane.add(button, BorderLayout.PAGE_END);
button = new JButton("5 (LINE_END)");
5
pane.add(button, BorderLayout.LINE_END);
3 . Gestores de ubicación
BoxLayout

La BoxLayout coloca las componentes en una
simple fila y columna. Respetando el tamaño
máximo de las componentes y su alineación.
6
3 . Gestores de ubicación
CardLayout
7
3 . Gestores de ubicación
CardLayout
JPanel card1 = new JPanel(); ...
JPanel card2 = new JPanel(); ...
cards = new JPanel(new CardLayout());
cards.add(card1, BUTTONPANEL);
cards.add(card2, TEXTPANEL);
8
3 . Gestores de ubicación
CardLayout

No obstante la componente que se utiliza para
obtener el efecto de pestañas es el TabPane
9
3 . Gestores de ubicación
GridLayout

La distribución en forma de matriz
10
3 . Gestores de ubicación
GridBagLayout

Con este gestor conseguimos una
distribución en forma de matriz no
uniforme.
11
3 . Gestores de ubicación
SpringLayout

Con este gestor conseguimos precisar las
relaciones entre los bordes de las
componentes que están bajo su gestión.
12
4 . Primitivas gráficas de pantalla
SISTEMA DE COORDENADAS

Como sistema de coordenadas se usa el
estándar bidimensional común a todos los
interfaces gráficos. Siendo la esquina
superior izquierda el (0,0).
13
4 . Primitivas gráficas de pantalla
SISTEMA DE COORDENADAS

Cuando la componente tiene un borde
tendremos que tener cuidado a la hora
trabajar con el tamaño de la componente
14
4 . Primitivas gráficas de pantalla
Graphics



Las figuras se dibujan sobre el objeto Graphics o
Graphics2D que llevan asociado todas las
componentes.
No podemos crear un objeto de esas características.
Debemos demandarlo a la componente gráfica a
través del método getGraphics().
Cuando se debe redibujar la componente la máquina
virtual invoca el método paintComponent(Graphics
g), creando ella el objeto Graphics.
15
4 . Primitivas gráficas de pantalla
Graphics
public paintComponent( Graphics g){
int[] x = {23, 45, 6}, y = {0,7,0};
Polygon triang = new Polygon(x,y,3);
g.drawPolygon(triang);}
16
4 . Primitivas gráficas de pantalla
Ejercicio
Diseñar una componente de intefaz propia.
17
6 . Aspecto y sensación
Look & Feel


El aspecto y sensación de un programa es la
forma en la que el programa se presenta al
usuario (aspecto) y la forma en la que el
usuario interactúa con él (sensación).
El aspecto y sensación quedan determinados
por la forma en la que se muestra la ventana
u otras componentes GUI y la manera en la
que el usuario trabaja con ellas.
18
6 . Aspecto y sensación
Look & Feel


La mayoría de los sistemas operativos que
soportan ventanas y otras componentes GUI,
como Windows, Macintosh, UNIX ...etc.,
tienen un aspecto y sensación fijos y
predeterminados.
El L&F de una componente se implementa en
términos de un delegado, que es un objeto
usado para mostrar dicha componente e
interactuar con el usuario.
19
6 . Aspecto y sensación
Look & Feel


Toda componente Swing tiene un delegado y un
modelo únicos. Por ejemplo, los modelos de las
componentes JButton deben implementar la interfaz
ButtonModel, y los delegados de dichas componentes
deben implementar la interfaz ButtonUI.
Los métodos utilizados para acceder al modelo de
una componente son getModel() y setModel(). De
igual manera, los métodos para acceder al delegado
de una componente son getUI() y setUI().
20
6 . Aspecto y sensación
Look & Feel
Los delegados que incorpora el JDK son:
 javax.swing.plaf.metal:aspecto
y
sensación Metal. Es el aspecto y sensación
por defecto. Un ejemplo sería:
21
6 . Aspecto y sensación
Look & Feel

com.sun.java.swing.plaf.windows:
aspecto y sensación Windows. Un ejemplo de
este tipo de aspecto y sensación sería:
22
6 . Aspecto y sensación
Look & Feel

com.sun.java.swing.plaf.motif: aspecto y
sensación Motif. Una imagen de ejemplo de
este tipo de aspecto y sensació sería:
23
6 . Aspecto y sensación
Look & Feel


Los paquetes de aspecto y sensación anteriores
contienen
clases
que
implementan
las
correspondientes interfaces delegadas. Por ejemplo,
el paquete javax.swing.plaf.metal proporciona la
clase MetalButtonUI.
Para modificar el aspecto general de la aplicación:
try {
UIManager.setLookAndFeel("java.awt.swing.plaf.Motif");
}catch(Exception e) { System.out.println(e); }
24