Tema 1 dise o de interfaces gr ficas
This presentation is the property of its rightful owner.
Sponsored Links
1 / 24

TEMA 1. Diseño de interfaces gráficas PowerPoint PPT Presentation


  • 87 Views
  • Uploaded on
  • Presentation posted in: General

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.

Download Presentation

TEMA 1. Diseño de interfaces gráficas

An Image/Link below is provided (as is) to download presentation

Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.


- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -

Presentation Transcript


Tema 1 dise o de interfaces gr ficas

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

Bibliografía

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

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


Tipos de gestores

3 . Gestores de ubicación

Tipos de gestores

  • FlowLayout

  • BorderLayout

  • GridLayout

  • CardLayout

  • GridBagLayout y GridBagConstraint.

  • SpringLayout

  • BoxLayout


Borderlayout

3 . Gestores de ubicación

BorderLayout


Borderlayout1

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


Boxlayout

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.


Cardlayout

3 . Gestores de ubicación

CardLayout


Cardlayout1

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


Cardlayout2

3 . Gestores de ubicación

CardLayout

  • No obstante la componente que se utiliza para obtener el efecto de pestañas es el TabPane


Gridlayout

3 . Gestores de ubicación

GridLayout

  • La distribución en forma de matriz


Gridbaglayout

3 . Gestores de ubicación

GridBagLayout

  • Con este gestor conseguimos una distribución en forma de matriz no uniforme.


Springlayout

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.


Sistema de coordenadas

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


Sistema de coordenadas1

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


Graphics

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.


Graphics1

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


Ejercicio

4 . Primitivas gráficas de pantalla

Ejercicio

Diseñar una componente de intefaz propia.


Look feel

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.


Look feel1

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.


Look feel2

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


Look feel3

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:


Look feel4

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:


Look feel5

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:


Look feel6

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


  • Login