1 TEMA 1. Diseño de interfaces gráficas 1.Introducción 2.Componentes de la interfaz 3.Programación dirigida por eventos 4.Gestores de ubicación 5.Primitivas gráficas de pantalla. 6.Aspecto y Sensación (look&feel) 7.Diseño de interfaces gráficas de usuario

2 Bibliografía iswing/ iswing/ Kathy Walrath, et all. “The JFC Swing Tutorial”. Ed. Addison Wesley Kathy Walrath, et all. “The JFC Swing Tutorial”. Ed. Addison Wesley

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

4 BorderLayout

5 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); 3. Gestores de ubicación

6 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. 3. Gestores de ubicación

7 CardLayout

8 CardLayout JPanel card1 = new JPanel();... JPanel card2 = new JPanel();... cards = new JPanel(new CardLayout()); cards.add(card1, BUTTONPANEL); cards.add(card2, TEXTPANEL); 3. Gestores de ubicación

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

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

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

12 SpringLayout Con este gestor conseguimos precisar las relaciones entre los bordes de las componentes que están bajo su gestión. Con este gestor conseguimos precisar las relaciones entre los bordes de las componentes que están bajo su gestión. 3. Gestores de ubicación

13 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). 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). 4. Primitivas gráficas de pantalla

14 SISTEMA DE COORDENADAS Cuando la componente tiene un borde tendremos que tener cuidado a la hora trabajar con el tamaño de la componente Cuando la componente tiene un borde tendremos que tener cuidado a la hora trabajar con el tamaño de la componente 4. Primitivas gráficas de pantalla

15 Graphics Las figuras se dibujan sobre el objeto Graphics o Graphics2D que llevan asociado todas las componentes. 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(). 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. Cuando se debe redibujar la componente la máquina virtual invoca el método paintComponent(Graphics g), creando ella el objeto Graphics. 4. Primitivas gráficas de pantalla

16 Graphics public paintComponent( Graphics g){ int[] x = {23, 45, 6}, y = {0,7,0}; Polygon triang = new Polygon(x,y,3); g.drawPolygon(triang);} 4. Primitivas gráficas de pantalla

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

18 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 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. 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. 6. Aspecto y sensación

19 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. 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. 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. 6. Aspecto y sensación

20 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. 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(). 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(). 6. Aspecto y sensación

21 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: javax.swing.plaf.metal:aspecto y sensación Metal. Es el aspecto y sensación por defecto. Un ejemplo sería: 6. Aspecto y sensación

22 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: 6. Aspecto y sensación

23 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: 6. Aspecto y sensación

24 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. 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: Para modificar el aspecto general de la aplicación: try { UIManager.setLookAndFeel("java.awt.swing.plaf.Motif"); }catch(Exception e) { System.out.println(e); } 6. Aspecto y sensación