tema 1. diseño de interfaces gráficas
DESCRIPTION
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. Bibliografía. - PowerPoint PPT PresentationTRANSCRIPT
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
3 . Gestores de ubicación
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);
3 . Gestores de ubicación
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.
3 . Gestores de ubicación
77
CardLayoutCardLayout
3 . Gestores de ubicación
88
CardLayoutCardLayoutJPanel 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
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
3 . Gestores de ubicación
1010
GridLayoutGridLayout La distribución en forma de matrizLa distribución en forma de matriz
3 . Gestores de ubicación
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.
3 . Gestores de ubicación
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.
3 . Gestores de ubicació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
4 . Primitivas gráficas de pantalla
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.
4 . Primitivas gráficas de pantalla
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);}
4 . Primitivas gráficas de pantalla
1717
EjercicioEjercicio
Diseñar una componente de intefaz propia.Diseñar una componente de intefaz propia.
4 . Primitivas gráficas de pantalla
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.
6 . Aspecto y sensación
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().
6 . Aspecto y sensación
2121
Look & FeelLook & Feel
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:
6 . Aspecto y sensación
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:
6 . Aspecto y sensación
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:
6 . Aspecto y sensación
2424
Look & FeelLook & Feel
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); }
6 . Aspecto y sensación