Indice. Swing: conceptos. Generalidades. Swing & AWT: diferencias. Interfaz Gráfica de Usuario (GUI)

Transcripción

1 Indice Interfaz Gráfica de Usuario (GUI) Unidad: 2 Laboratorio de Programación Universidad Nacional de la Patagonia Austral Unidad Académica Río Gallegos Swing Generalidades Conceptos y caracteristicas Diferencias: pros y contras Ejemplo Eclipse Visual Editor Conceptos Características Instalación Ejemplo GUI Laboratorio de Programacion 1 Generalidades JDK 1.0 introdujo la creación de interfaces gráficas de usuario (GUI, Graphics User Interfaces). 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. 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 GUI Laboratorio de Programacion 2 GUI Laboratorio de Programacion 3 Swing: conceptos Java incorpora su propio Look&Feel por defecto, cuyo nombre es Metal, y que se muestra a continuación. Swing & AWT: diferencias Diferencias entre Swing y AWT. AWT. 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. 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. GUI Laboratorio de Programacion 4 GUI Laboratorio de Programacion 5 1

2 Swing: pros y contras PROS 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 Apariencia. Los componentes de swing automáticamente pueden tomar la apariencia de cualquier plataforma. CONTRAS 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. GUI Laboratorio de Programacion 6 AWT y Swing: equivalencias Componentes equivalentes en AWT y swing 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 JWindow GUI Laboratorio de Programacion 7 Jerarquías de Swing 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 Javax.swing.border Javax.swing.event Javax.swing.table Javax.swing.tree Bordes para componentes Swing Clases de eventos e interfaces listener Clases de soporte para JTable Clases de soporte para JTree GUI Laboratorio de Programacion 8 GUI Laboratorio de Programacion 9 & AWT 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. Aplicaciones GUI con Swing 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

3 Aplicaciones GUI con Swing Se acostumbra (pero no es obligatorio) declarar una subclase de JFrame y en el constructor llenar el Frame de componentes. 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); } Aplicaciones GUI con Swing 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() 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 Laboratorio de Programacion 15 Eclipse: características 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 Eclipse: Plug-in Un plug-in es la mínima unidad de la plataforma que puede ser desarrollado por separado y que le aporta una nueva funcionalidad. JDT (Java Development Toolkit) Visual Editor Proyecto de herramientas de desarrollo en C/C++ (CDT) Omondo EclipseUML Spring Framework Jautodoc AspectJ, etc. GUI Laboratorio de Programacion 16 GUI Laboratorio de Programacion 17 3

4 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: 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. GUI Laboratorio de Programacion 18 Eclipse Visual Editor 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: Eclipse Eclipse Modeling Framework (EMF) GEF GUI Laboratorio de Programacion 19 Instalación: pasos Creación de una clase visual (Visual Class) 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 Además, debe contarse con los siguientes paquetes: EMF 2.2.0, GEF 3.2, JEM y VE (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 GUI Laboratorio de Programacion 21 Creación de una clase visual Vista general Eclipse GUI Laboratorio de Programacion 22 GUI Laboratorio de Programacion 23 4

5 Vista particular Visual Editor Vista Eclipse Visual Editor B A C Una vez creada la clase visual, podemos apreciar que la vista de Edición se divide en tres partes: 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. Vista de edición de Eclipse GUI Laboratorio de Programacion 24 GUI Laboratorio de Programacion 25 Ejercicio con Visual Editor Consultas Ejercicio: Realizar una clase tipo visual que extienda de JFrame e insertar 3 componentes: 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. GUI Laboratorio de Programacion 26 GUI Laboratorio de Programacion 27 Próxima clase Próxima teoría: 6 de mayo Tecnología XML GUI Laboratorio de Programacion 28 5