Generalidades Swing

Indice
Interfaz Gráfica de Usuario (GUI)
Swing
Unidad: 2
Laboratorio de Programación
Eclipse Visual Editor
Universidad Nacional de la Patagonia Austral
Unidad Académica Río Gallegos
Generalidades
Conceptos y caracteristicas
Diferencias: pros y contras
Ejemplo
Conceptos
Características
Instalación
Ejemplo
GUI
Generalidades
GUI
AWT (Abstract Windows Toolkit).
Java 2: JFC (Java Foundation Classes).
AWT.
Swing.
Aspecto configurable (Pluggable Look and Feel).
Interfaz de accesibilidad.
API para dibujo 2D.
Soporte drag and drop.
Laboratorio de Programacion
2
Swing: conceptos…
Es un paquete Java para la generación de la GUI en
aplicaciones reales de gran tamaño
Complementa y amplia el modelo de componentes y
eventos de AWT, basándose en éste
Proveen soporte para implementar interfaces de
usuario gráficas con look and feel (las componentes
Swing pueden conservar su apariencia en
plataformas diferentes).
El termino Look and Feel se refiere a la apariencia en
pantalla y funcionamiento, que van a tener los
Componentes Swing
GUI
Laboratorio de Programacion
Java incorpora su propio Look&Feel por defecto, cuyo
nombre es Metal, y que se muestra a continuación.
Diferencias entre Swing y AWT.
AWT.
4
GUI
Soportado por JDK 1.0 y 1.1.
Utiliza código nativo de la plataforma en la que se ejecuta el
programa.
Resta compatibilidad: no todos los componentes GUI de todas las
plataformas se comportan de la misma forma.
Swing.
Laboratorio de Programacion
3
Swing & AWT: diferencias
GUI
1
Swing: conceptos
JDK 1.0 introdujo la creación de interfaces
gráficas de usuario (GUI, Graphics User
Interfaces).
Laboratorio de Programacion
Soportado por JDK 1.2.
No utiliza código nativo.
Todos los componentes se comportan igual en todas las
plataformas.
Aspecto distinto según la plataforma.
Conjunto de componentes más extenso y con más características.
Precisa de algunas clases de AWT.
Laboratorio de Programacion
5
1
Swing: pros y contras
PROS
AWT y Swing: equivalencias
CONTRAS
Portabilidad. Debido a que los
componentes de swing estan hechos
solo con java, estos funcionan en casi
todos las plataformas
Comportamiento. Permiten un rango de
comportamiento mas amplio ya que no
estan limitados a los sistemas en los que
se ejecutan.
Caracteristicas. Soporta el uso de iconos
y de tool-tips
Soporte. Sun hace un gran esfuerzo para
hacer Swing mas robusto
Componentes equivalentes en AWT y swing
Portabilidad de Applets. La mayoria de
los navegadores no incluyen las clases
de Swing ANSI que se debe de instalar
un plugin de java; para que funcionen
los applets con swing
Desempeño. Los componentes Swing
son generalmente mas lentos y con mas
problemas que AWT.
Apariencia. Los componentes de swing
automáticamente pueden tomar la
apariencia de cualquier plataforma .
GUI
Laboratorio de Programacion
Applet
JApplet
Button
JButton
Canvas
JPanel
Checkbox
JCheckBox o JRadioButton
Choice
JComboBox
Component
JComponent
Frame
JFrame
Label
JLabel
List
JList
Panel
JPanel
TextArea
JTextArea
TextField
JTextField
Window
6
Jerarquías de Swing
Laboratorio de Programacion
8
Componentes Swing & AWT
Laboratorio de Programacion
7
Componentes Swing
GUI
JWindow
GUI
Swing contiene alrededor de 250 clases. Para distinguir las clases que
son componentes de interfaz de usuario de aquellas que son de
soporte, los nombres de las componentes Swing comienzan con J.
Algunos de los paquetes que componen Swing son:
Javax.swing
Componentes Swing
Javax.swing.border
Bordes para componentes
Swing
Javax.swing.event
Clases de eventos e interfaces
listener
Javax.swing.table
Clases de soporte para JTable
Javax.swing.tree
Clases de soporte para JTree
GUI
Laboratorio de Programacion
9
Aplicaciones GUI con Swing
Swing se construyó por encima del AWT. Usa la infraestructura
provista por el AWT: objetos gráficos, colores, fonts, layout
managers, etc.
Todas las componentes Swing son subclase de
java.awt.Container (es lightweight), que a su vez es subclase de
java.awt.Component.
Swing NO usa las componentes de GUI del AWT, excepto
Frame, Window y Dialog, que son las superclases de las
componentes Swing, Jframe, JWindow y Jdialog.
Para crear una aplicación con Swing se debe:
Crear un JFrame
Llenarlo de components según los requerimientos de la
aplicación
Mostrar el JFrame en pantalla invocando el método
setVisible(true)
Ejemplo
public static void main(String[] args) {
JFrame frame = new JFrame();
frame.setVisible(true);
}
GUI
Laboratorio de Programacion
10
GUI
Laboratorio de Programacion
11
2
Aplicaciones GUI con Swing…
Aplicaciones GUI con Swing…
Se acostumbra (pero no es obligatorio) declarar una subclase de
JFrame y en el constructor llenar el Frame de componentes.
Ubicación de componentes en un Frame (Layout)
La clase JPanel es un contenedor de objetos que
pueden ser desplegados
Un JFrame tiene un panel principal que se obtiene
invocando getContentPane()
public class FrameAlumnos extends JFrame {
JTextField nombre;
JTextField fechaNac;
FrameAlumnos() {
JPanel contentPane = (JPanel) getContentPane();
nombre = new JTextField();
contentPane.add(nombre);
FechaNac = new JtextField();
contentPane.add(fechaNac);
}
JFrame frame = new JFrame();
JPanel contentPane = (JPanel) frame.getContentPane();
. . .
Un panel puede contener componentes finales
(JLabel, JTextField, etc.) u otros paneles (Jpanel)
Esto permite acomodar los
componentes/contenedores en el Frame
…
GUI
Laboratorio de Programacion
12
GUI
Laboratorio de Programacion
13
Eclipse
Eclipse Visual Editor
Eclipse es una comunidad de código abierto cuyos
proyectos se centran en proporcionar una plataforma
de desarrollo independiente de los fabricantes.
Eclipse proporciona un marco de trabajo basado en
plug-ins que facilita la creación, integración y
utilización de herramientas software.
Soportado por los principales sistemas operativos:
Linux, Windows, Solaris 8 (SPARC/GTK 2), Mac OSX –
Mac/Carbon
GUI
Eclipse: características
GUI
15
Eclipse: Plug-in
Editor de Texto
Resaltado de sintaxis
Compilación en tiempo real
Pruebas unitarias con Junit
Refactoring
Asistentes (wizards)
Plug-ins
Característica clave de Eclipse:
Extensibilidad
Laboratorio de Programacion
Laboratorio de Programacion
Un plug-in es la mínima unidad de la plataforma que
puede ser desarrollado por separado y que le aporta
una nueva funcionalidad.
16
GUI
JDT (Java Development Toolkit)
Visual Editor
Proyecto de herramientas de desarrollo en C/C++ (CDT)
Omondo EclipseUML
Spring Framework
Jautodoc
AspectJ, etc.
Laboratorio de Programacion
17
3
Eclipse: editores gráficos
Eclipse no contiene entorno gráfico, para ello, es necesario
instalarle un plugin adecuado, entre los más conocidos se
encuentran:
GUI
Eclipse Visual Editor
Eclipse Visual Editor
SWT GUI Builder
Java Advanced Imaging
Advanced Eclipse SWT Designer
Jlense
Jelly SWT
Workzen
Sweet-SWT
JBeaver Swing GUI Builder
Jigloo, entre otros.
Laboratorio de Programacion
Eclipse Visual Editor (VE) es un entorno de creación de
interfaces gráficos de usuario en Eclipse
Dirigido no solamente a Swing/JFC y SWT, sino también a otros
lenguajes (como C/C++) y widgets.
Dispone de editores gráficos avanzados, soporta Windows y
Linux/GTK, permite editar tanto el código Java como el modo
visual y que se reflejen los cambios.
VE necesita de las siguientes aplicaciones para funcionar:
18
GUI
Eclipse
Eclipse Modeling Framework (EMF)
GEF
Laboratorio de Programacion
19
Creación de una clase visual
(Visual Class)
Instalación: pasos
Se puede realizar de dos formas:
On-line (mediante Eclipse activo)
Off-line (Eclipse debe estar cerrado)
En este caso, explicamos el segundo caso:
1. Se recomienda tener instalado el Eclipse 3.2.2. Además,
debe contarse con los siguientes paquetes: EMF 2.2.0, GEF
3.2, JEM 1.2.3 y VE 1.2.3 (disponibles en archivos ZIP).
2. Descomprimir cada uno de los paquetes en la misma
carpeta en que se encuentra el eclipse instalado
(sobrescribiendo los archivos existentes).
3. Una vez completado el paso 2, ahora el VE se encuentra
listo para su uso.
4. Abrir el eclipse.
GUI
Laboratorio de Programacion
20
Creación de una clase visual…
GUI
Laboratorio de Programacion
GUI
Laboratorio de Programacion
21
Vista general Eclipse
22
GUI
Laboratorio de Programacion
23
4
Vista particular Visual Editor
Vista Eclipse Visual Editor…
A. Donde se encuentra el código correspondiente a la clase
creada. Inicialmente dicho código se crea de forma
automática de acuerdo al estilo elegido (en este caso un
JFrame), posteriormente puede continuar automáticamente
o editable de forma manual.
B. Se encuentra representado gráficamente el estilo elegido.
Básicamente aparece el contenedor inicial (en este caso el
JFrame) al cuál se le podrá modificar las características del
mismo y agregar los respectivos componentes.
C. La paleta (Palette), para diseñar cualquier contenedor de
forma más rápida.
B
A
Una vez creada la clase visual, podemos apreciar que
la vista de Edición se divide en tres partes:
C
Vista de edición de Eclipse
GUI
Laboratorio de Programacion
24
Ejercicio con Visual Editor
Laboratorio de Programacion
25
Consultas…
Ejercicio:
Realizar una clase tipo visual que extienda de JFrame e insertar 3
componentes:
GUI
GUI
JLabel: que contenga la cadena “Mensaje”
JTextField: de longitud 20
JButton: que contenga la cadena “Mostrar”, y cuando se presione este
botón, que imprima el mensaje escrito en el campo de texto en la
Consola de Eclipse.
Laboratorio de Programacion
26
GUI
Laboratorio de Programacion
27
Próxima clase
GUI
Próxima teoría: 6 de mayo
Tecnología XML
Laboratorio de Programacion
28
5