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 ([Link]):
Biblioteca de interfaz grfica de usuario El predecesor a los componentes de Swing y la base de Swing y JFC
Swing ([Link]):
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(). [Link](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"), [Link]); getContentPane().add(new JButton("NORTH"), [Link]); getContentPane().add(new JButton("SOUTH"), [Link]); getContentPane().add(new JButton("EAST"), [Link]); getContentPane().add(new JButton("WEST"), [Link]); 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(); [Link](new BoxLayout(panel,BoxLayout.Y_AXIS)); [Link](new JButton("Botn 1")); [Link](new JButton("Botn 2")); [Link](new JButton("Botn 3")); [Link](new JButton("Botn 4")); [Link](new JButton("Botn 5")); [Link](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 = [Link](); //Crea una caja vertical Box cajav = [Link]();
Puntal (Strut): zona invisible de un alto o ancho fijo para separar dos componentes. [Link](int ancho) [Link](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. [Link](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. [Link]()
PruebasFrame(){ setTitle("JFrame de pruebas"); //Para un BoxLayout con un objeto Box Box caja = [Link](); [Link](new JButton("Botn 1")); [Link]([Link](20)); [Link](new JButton("Botn 2")); [Link](new JButton("Botn 3")); [Link]([Link](new Dimension(50,30))); [Link](new JButton("Botn 4")); [Link]([Link]()); [Link](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();
[Link]([Link]());
[Link](jTextArea1, [Link]);