TEMA 1. Diseño de interfaces gráficas

1. TEMA 1.Diseño de interfaces gráficas 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

2. Bibliografía • http://java.sun.com/docs/books/tutorial/uiswing/ • Kathy Walrath, et all. “The JFC Swing Tutorial”. Ed. Addison Wesley. 2004.

3. 3 . Gestores de ubicación Tipos de gestores • FlowLayout • BorderLayout • GridLayout • CardLayout • GridBagLayout y GridBagConstraint. • SpringLayout • BoxLayout

4. 3 . Gestores de ubicación BorderLayout

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

6. 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.

7. 3 . Gestores de ubicación CardLayout

8. 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);

9. 3 . Gestores de ubicación CardLayout • No obstante la componente que se utiliza para obtener el efecto de pestañas es el TabPane

10. 3 . Gestores de ubicación GridLayout • La distribución en forma de matriz

11. 3 . Gestores de ubicación GridBagLayout • Con este gestor conseguimos una distribución en forma de matriz no uniforme.

12. 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.

13. 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).

14. 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

15. 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.

16. 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);}

17. 4 . Primitivas gráficas de pantalla Ejercicio Diseñar una componente de intefaz propia.

18. 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.

19. 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.

20. 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().

21. 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:

22. 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:

23. 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:

24. 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); }