Interfaces grficas de usuario

SWING

MC. MA. ELENA MONTES ALMANZA

Objetivos
AL FINALIZAR ESTA LECCIN, DEBERA ESTAR CAPACITADO PARA LO SIGUIENTE:

Detallar la jerarqua de contencin de la interfaz de usuario de Swing Describir cmo utilizar los gestores de diseo Agregar contenedores de interfaz de usuario a una aplicacin para agrupar componentes Embeber componentes de interfaz de usuario en contenedores de interfaz de usuario Utilizar la interfaz de usuario conectable de Swing

AWT, Swing y JFC

AWT o Abstract Window Toolkit (java.awt):
Biblioteca de interfaz grfica de usuario El predecesor a los componentes de Swing y la base de Swing y JFC

Swing (javax.swing):
Biblioteca de interfaz grfica de usuario ms potente Creado sobre la jerarqua de clases de AWT

Java Foundation Classes (JFC):

Recopilacin de API, incluidas AWT, Swing, la API de accesibilidad y la interfaz de usuario conectable API 2D de Java, soporte de arrastrar y soltar (desde JDK 1.2)

Funciones de Swing
Swing es un juego de componentes visuales que estn

disponibles desde JDK 1.1 y que ha formado parte del ncleo de JDK desde la versin 1.2.

Componentes sencillos en comparacin con los de AWT API de interfaz de usuario conectable Nmero ms elevado de componentes que AWT

JButton

JSlider

JTree

JRadioButton

JTextField

JCheckBox

Componentes Sencillos y Complejos

Componentes complejos

Componentes sencillos

Fuerte dependencia del cdigo de peer nativo Cada uno se presenta en su propia ventana opaca Casi todos los componentes de AWT anteriores eran complejos Incluyen algunos componentes de Swing de nivel superior (JFrame, JApplet, JDialog)

Sin dependencia del cdigo de peer nativo Pueden tener fondos transparentes La mayora de los componentes de Swing son sencillos Al mostrarse, pueden tener formas no rectangulares Deben mostrarse en un contenedor complejo

Diseo de Interfaz de Usuario

La creacin de una aplicacin de interfaz de usuario

conlleva una planificacin, sobre todo cuando se crean aplicaciones de Swing. Para llevar a cabo la planificacin es necesario comprender los siguientes conceptos y sus relaciones:

Jerarqua de contencin de interfaz de usuario (un componente raz que comprende componentes y contenedores anidados) Niveles y tipos de contenedor (como contenedores de nivel superior e intermedio) Gestores de diseo y sus tipos (utilizados por cada contenedor) Componentes que se pueden agregar a contenedores

Jerarqua de Contencin de Swing

Contenedores de nivel superior

Marco
Recuadro

Marco

de dilogo

Applet

Contenedores intermedios
Panel
Panel

de desplazamiento

Componentes atmicos
Etiqueta

Elemento
Botn

de texto
Panel Componentes atmicos

Contenedores de Nivel Superior

Swing proporciona JFrame, Jdialog y JApplet, que tienen propiedades modificables como:
Paneles

de contenido para contener componentes o contenedores intermedios, mediante los mtodos getContentPane()o setContentPane() Bordes, mediante un mtodo setBorder() Ttulos, mediante un mtodo setTitle()
Decoraciones

de ventana, como botones para cerrar y minimizar (excluye los applets)

proporcionan propiedades como un panel de contenido o bordes.

AWT proporciona Frame, Dialog y Applet

No

Contenedores Intermedios

Se disean para contener componentes (o contenedores); se pueden anidar dentro de otros contenedores Tipos de contenedores intermedios:
Paneles para agrupar contenedores o componentes

Paneles de desplazamiento para agregar barras de desplazamiento alrededor de componentes que pueden ampliarse, como una lista o rea de texto Paneles de divisin para mostrar dos componentes en un rea fija que puede ajustar el usuario Paneles con separadores para contener varios componentes y que muestran nicamente uno al mismo tiempo en funcin de la seleccin del usuario
Barras de herramientas para agrupar componentes, como los botones Marcos internos para ventanas anidadas

Componentes Atmicos

Botones Casillas de control Recuadros combinados Texto Listas Etiquetas

JFRAME

Estructura de un JFrame

Varios paneles dispuestos en capas

JFrame es un contenedor donde colocar componentes. Los componentes se sitan sobre un panel. Puede ser un objeto de la clase JPanel o directamente sobre el ContentPane. Para obtener el panel de contenido se utiliza el mtodo getContentPane(). Container panelContenido = getContentPane(); Es posible establecer un componente como panel de contenido con el mtodo setContentPane().

setContentPane(new JLabel(Etiqueta de prueba)); Pero normalmente los componentes se aaden con el mtodo add(). panelContenido.add(new JLabel(Etiqueta de prueba));

JPanel

JCheckBox

JTextField

JTextArea

JRadioButton

JComboBox

JList

Manejadores de diseo

Gestores de Diseo

Los gestores de diseo estn diseados para gestionar varios componentes a la vez.
FlowLayout. BorderLayout. GridLayout. BoxLayout. GridBagLayout.

Para usar un gestor de diseo con contenedores, es necesario:

Crear un objeto de gestin de diseo y un contenedor Definir la propiedad de diseo del contenedor Agregar elementos (componentes u otros contenedores) a las regiones definidas por el gestor de diseo

Distintos gestores de diseo necesitan distintos argumentos para controlar la colocacin de componentes.

Gestin de Diseo: Visin General

Diseo de borde Diseo de cuadrcula de ejemplo

Diseo gridbag de ejemplo

Diseo de flujo de ejemplo

Diseo de FlowLayout
Los componentes fluyen de izquierda a derecha, dejando, por omisin, un espacio vertical y horizontal de 5 pixels entre sus componentes.
PruebasFrame(){ setTitle("JFrame de pruebas"); //Para un FlowLayout getContentPane().setLayout(new FlowLayout()); getContentPane().add(new JButton("Botn 1")); getContentPane().add(new JButton("Botn 2")); getContentPane().add(new JButton("Botn 3")); getContentPane().add(new JButton("Botn 4")); getContentPane().add(new JButton("Botn 5")); setSize(300,200); }

Diseo de BorderLayout
Tiene cinco reas: North, South, East, West y Center Tiene un rea Center que se ampla para ocupar el espacio disponible Muestra nicamente un componente en cada rea Habilita cada rea para contener paneles intermedios

Diseo de BorderLayout

PruebasFrame(){ setTitle("JFrame de pruebas"); //Para un BorderLayout getContentPane().setLayout(new BorderLayout()); getContentPane().add(new JButton("CENTER"), BorderLayout.CENTER); getContentPane().add(new JButton("NORTH"), BorderLayout.NORTH); getContentPane().add(new JButton("SOUTH"), BorderLayout.SOUTH); getContentPane().add(new JButton("EAST"), BorderLayout.EAST); getContentPane().add(new JButton("WEST"), BorderLayout.WEST); setSize(300,200); }

Diseo de GridLayout
Los componentes se colocan en una rejilla de celdas iguales. Se colocan de arriba hacia abajo y de izquierda a derecha

PruebasFrame(){ setTitle("JFrame de pruebas"); //Para un GridLayout getContentPane().setLayout(new GridLayout(3,2,5,5)); getContentPane().add(new JButton("Botn 1")); getContentPane().add(new JButton("Botn 2")); getContentPane().add(new JButton("Botn 3")); getContentPane().add(new JButton("Botn 4")); getContentPane().add(new JButton("Botn 5")); getContentPane().add(new JButton("Botn 6")); setSize(300,200); }

Diseo GridBag

Se basa en una cuadrcula Permite que los componentes abarquen varias filas y columnas Permite varios tamaos de filas y columnas Utiliza el tamao preferido del componente para controlar el tamao de celda

Restricciones de GridBag

Agregado externo Relleno de componente

Posicin de la celda Espacio de la celda Media ponderada de la expansin Reglas de relleno

Fijacin

Diseo BoxLayout
Muestra los componentes en una nica fila o columna. Su constructor necesita un argumento con el contenedor a utilizar y la orientacin determinada por las constantes BoxLayout.X_AXIS o BoxLayout.Y_AXIS.
BoxLayout(Container destino, int orientacin)

Precisa la creacin de un objeto de la clase Container para su utilizacin como contenedor.

Normalmente ser un objeto de la clase JPanel (ver ms adelante).

Diseo BoxLayout

PruebasFrame(){ setTitle("JFrame de pruebas"); JPanel panel = new JPanel(); panel.setLayout(new BoxLayout(panel,BoxLayout.Y_AXIS)); panel.add(new JButton("Botn 1")); panel.add(new JButton("Botn 2")); panel.add(new JButton("Botn 3")); panel.add(new JButton("Botn 4")); panel.add(new JButton("Botn 5")); panel.add(new JButton("Botn 6")); setContentPane(panel); setSize(300,200); }

Existe un contenedor que tiene como gestor de posicionamiento un BoxLayout: la clase Box. Box permite aadir separaciones entre los componentes aadiendo puntales (Strut), zonas rgidas (RigidArea) y pegamento (Glue). Creacin de un objeto Box. //Crea una caja horizontal Box cajah = Box.createHorizontalBox(); //Crea una caja vertical Box cajav = Box.createVerticalBox();

Puntal (Strut): zona invisible de un alto o ancho fijo para separar dos componentes. Box.createHorizontalStrut(int ancho) Box.createVerticalStrut(int alto)

Zona rgida (RigidArea): proporciona un rea invisible de separacin horizontal y vertical. En una caja horizontal, la separacin vertical afectar a todos sus componentes y viceversa. Box.createRigidArea(Dimension dim) Precisa de la creacin de un objeto Dimension (new Dimension(alto,ancho)). Glue: zona invisible que alinea los siguientes controles con el borde derecho o inferior. Box.createGlue()

PruebasFrame(){ setTitle("JFrame de pruebas"); //Para un BoxLayout con un objeto Box Box caja = Box.createVerticalBox(); caja.add(new JButton("Botn 1")); caja.add(Box.createVerticalStrut(20)); caja.add(new JButton("Botn 2")); caja.add(new JButton("Botn 3")); caja.add(Box.createRigidArea(new Dimension(50,30))); caja.add(new JButton("Botn 4")); caja.add(Box.createGlue()); caja.add(new JButton("Botn 5")); setContentPane(caja); setSize(300,200); }

Combinacin de Gestores de Diseo

Borde

null

Flujo vertical

GridBag

Cuadrcula

Clases de Marco de Java

Un marco de Java es equivalente a una

ventana de aplicacin.

Tiene

Utilizar JFrame para una ventana principal.

propiedades para los iconos, el ttulo y los botones para minimizar, maximizar y cerrar. Utiliza BorderLayout por defecto. Proporciona un panel de contenido por defecto que ocupa la regin central del diseo. Puede definir el tamao del marco con el mtodo setSize() y hacer que sea visible mediante el mtodo setVisible().

Utilizar JDialog para una ventana modal.

Se

debe cerrar la ventana modal para que se pueda activar la aplicacin a la que llama.

Contenedores JPanel
JPanel es un contenedor de uso general:

Puede utilizar cualquier gestor de diseo (utiliza Flowlayout por defecto) Puede utilizar todos los bordes Puede tener componentes agregados u otros paneles o contenedores mediante el mtodo add()

JPanel myPanel = new JPanel(new BorderLayout());

JTextArea jTextArea1 = new JTextArea();

myPanel.setBorder(BorderFactory.createRaisedBevelBorder());
myPanel.add(jTextArea1, BorderLayout.SOUTH);