TEMA 1. Diseño de interfaces gráficas

11

TEMA 1.TEMA 1.Diseño de interfaces Diseño de interfaces gráficasgráficas

1.1. IntroducciónIntroducción

2.2. Componentes de la interfazComponentes de la interfaz

3.3. Programación dirigida por eventosProgramación dirigida por eventos

4.4. Gestores de ubicaciónGestores de ubicación

5.5. Primitivas gráficas de pantalla.Primitivas gráficas de pantalla.

6.6. Aspecto y Sensación (look&feel)Aspecto y Sensación (look&feel)

7.7. Diseño de interfaces gráficas de Diseño de interfaces gráficas de usuariousuario

22

Bibliografía Bibliografía

http://java.sun.com/docs/books/http://java.sun.com/docs/books/tutorial/uiswing/tutorial/uiswing/

Kathy Walrath, et all. “The JFC Swing Kathy Walrath, et all. “The JFC Swing Tutorial”. Ed. Addison Wesley. 2004.Tutorial”. Ed. Addison Wesley. 2004.

33

Tipos de gestoresTipos de gestores FlowLayout BorderLayout GridLayout CardLayout GridBagLayout y GridBagConstraint. SpringLayout BoxLayout

3 . Gestores de ubicación

44

BorderLayoutBorderLayout


55

BorderLayoutBorderLayoutJButton 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)"); pane.add(button, BorderLayout.LINE_END);


66

BoxLayoutBoxLayout La BoxLayout coloca las componentes en una

simple fila y columna. Respetando el tamaño máximo de las componentes y su alineación.


77

CardLayoutCardLayout


88

CardLayoutCardLayoutJPanel card1 = new JPanel(); ... JPanel card2 = new JPanel(); ... cards = new JPanel(new CardLayout()); cards.add(card1, BUTTONPANEL); cards.add(card2, TEXTPANEL);


99

CardLayoutCardLayout No obstante la componente que se utiliza No obstante la componente que se utiliza

para obtener el efecto de pestañas es el para obtener el efecto de pestañas es el TabPaneTabPane


1010

GridLayoutGridLayout La distribución en forma de matrizLa distribución en forma de matriz


1111

GridBagLayoutGridBagLayout Con este gestor conseguimos una Con este gestor conseguimos una

distribución en forma de matriz no distribución en forma de matriz no uniforme.uniforme.


1212

SpringLayoutSpringLayout Con este gestor conseguimos precisar Con este gestor conseguimos precisar

las relaciones entre los bordes de las las relaciones entre los bordes de las componentes que están bajo su gestión.componentes que están bajo su gestión.


1313

SISTEMA DE SISTEMA DE COORDENADASCOORDENADAS

Como sistema de coordenadas se usa el Como sistema de coordenadas se usa el estándar bidimensional común a todos estándar bidimensional común a todos los interfaces gráficos. Siendo la los interfaces gráficos. Siendo la esquina superior izquierda el (0,0).esquina superior izquierda el (0,0).

4 . Primitivas gráficas de pantalla

1414

SISTEMA DE SISTEMA DE COORDENADASCOORDENADAS

Cuando la componente tiene un borde Cuando la componente tiene un borde tendremos que tener cuidado a la hora tendremos que tener cuidado a la hora trabajar con el tamaño de la trabajar con el tamaño de la componentecomponente


1515

GraphicsGraphics Las figuras se dibujan sobre el objeto Graphics Las figuras se dibujan sobre el objeto Graphics

o Graphics2D que llevan asociado todas las o Graphics2D que llevan asociado todas las componentes.componentes.

No podemos crear un objeto de esas No podemos crear un objeto de esas características. Debemos demandarlo a la características. Debemos demandarlo a la componente gráfica a través del método componente gráfica a través del método getGraphics().getGraphics().

Cuando se debe redibujar la componente la Cuando se debe redibujar la componente la máquina virtual invoca el método máquina virtual invoca el método paintComponent(Graphics g), creando ella el paintComponent(Graphics g), creando ella el objeto Graphics. objeto Graphics.


1616

GraphicsGraphics

public paintComponent( Graphics g){public paintComponent( Graphics g){

int[] x = {23, 45, 6}, y = {0,7,0};int[] x = {23, 45, 6}, y = {0,7,0};

Polygon triang = new Polygon(x,y,3);Polygon triang = new Polygon(x,y,3);

g.drawPolygon(triang);}g.drawPolygon(triang);}


1717

EjercicioEjercicio

Diseñar una componente de intefaz propia.Diseñar una componente de intefaz propia.


1818

Look & FeelLook & Feel El aspecto y sensación de un programa El aspecto y sensación de un programa

es la forma en la que el programa se es la forma en la que el programa se presenta al usuario (aspecto) y la forma presenta al usuario (aspecto) y la forma en la que el usuario interactúa con él en la que el usuario interactúa con él (sensación). (sensación).

El aspecto y sensación quedan El aspecto y sensación quedan determinados por la forma en la que se determinados por la forma en la que se muestra la ventana u otras muestra la ventana u otras componentes GUI y la manera en la que componentes GUI y la manera en la que el usuario trabaja con ellas. el usuario trabaja con ellas.

6 . Aspecto y sensación

1919

Look & FeelLook & Feel La mayoría de los sistemas operativos La mayoría de los sistemas operativos

que soportan ventanas y otras que soportan ventanas y otras componentes GUI, como Windows, componentes GUI, como Windows, Macintosh, UNIX ...etc., tienen un aspecto Macintosh, UNIX ...etc., tienen un aspecto y sensación fijos y predeterminados.y sensación fijos y predeterminados.

El L&F de una componente se implementa El L&F de una componente se implementa en términos de un en términos de un delegadodelegado, que es un , que es un objeto usado para mostrar dicha objeto usado para mostrar dicha componente e interactuar con el usuario. componente e interactuar con el usuario.


2020

Look & FeelLook & Feel

Toda componente Swing tiene un delegado y Toda componente Swing tiene un delegado y un modelo únicos. Por ejemplo, los modelos de un modelo únicos. Por ejemplo, los modelos de las componentes JButton deben implementar la las componentes JButton deben implementar la interfaz ButtonModel, y los delegados de dichas interfaz ButtonModel, y los delegados de dichas componentes deben implementar la interfaz componentes deben implementar la interfaz ButtonUI. ButtonUI.

Los métodos utilizados para acceder al modelo Los métodos utilizados para acceder al modelo de una componente son getModel() y de una componente son getModel() y setModel(). De igual manera, los métodos para setModel(). De igual manera, los métodos para acceder al delegado de una componente son acceder al delegado de una componente son getUI() y setUI(). getUI() y setUI().


2121


Los delegados que incorpora el JDK son:Los delegados que incorpora el JDK son: javax.swing.plaf.metaljavax.swing.plaf.metal:aspecto y :aspecto y

sensación Metal. Es el aspecto y sensación Metal. Es el aspecto y sensación por defecto. Un ejemplo sensación por defecto. Un ejemplo sería: sería:


2222

Look & FeelLook & Feel com.sun.java.swing.plaf.windowscom.sun.java.swing.plaf.windows: :

aspecto y sensación Windows. Un aspecto y sensación Windows. Un ejemplo de este tipo de aspecto y ejemplo de este tipo de aspecto y sensación sería:sensación sería:


2323

Look & FeelLook & Feel com.sun.java.swing.plaf.motifcom.sun.java.swing.plaf.motif: :

aspecto y sensación Motif. Una imagen aspecto y sensación Motif. Una imagen de ejemplo de este tipo de aspecto y de ejemplo de este tipo de aspecto y sensació sería: sensació sería:


2424


Los paquetes de aspecto y sensación anteriores Los paquetes de aspecto y sensación anteriores contienen clases que implementan las contienen clases que implementan las correspondientes interfaces delegadas. Por correspondientes interfaces delegadas. Por ejemplo, el paquete javax.swing.plaf.metal ejemplo, el paquete javax.swing.plaf.metal proporciona la clase MetalButtonUI. proporciona la clase MetalButtonUI.

Para modificar el aspecto general de la Para modificar el aspecto general de la aplicación:aplicación:try { try {

UIManager.setLookAndFeel("java.awt.swing.plaf.Motif");UIManager.setLookAndFeel("java.awt.swing.plaf.Motif");

}catch(Exception e) { System.out.println(e); }}catch(Exception e) { System.out.println(e); }


Documents

TEMA 1. Diseño de interfaces gráficas