Indice. CardLayout. Administradores de diseño avanzados. CardLayout: pasos. CardLayout: métodos. 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 Administradores de diseño avanzados CardLayout GridBagLayout Ejemplos Uso de menús Menu MenuBar MenuItem Ejemplos Gestión de eventos Repaso Ejemplos Pasos para la creación de una aplicación GUI Laboratorio de Programacion 1 Administradores de diseño avanzados Layouts Managers CardLayout Este administrador es el único que permite cambiar los componentes en pantalla en tiempo de ejecución. Su potencia radica en el uso de paneles. Podremos en un instante determinado visualizar uno de los paneles dejando los otros paneles sin visualizar. GUI Laboratorio de Programacion 3 CardLayout: pasos Crear un panel que tenga por administrador a CardLayout. Crear los diferentes paneles que contendrá nuestra aplicación, insertando, claro está, los componentes necesarios en cada panel. Añadir mediante el método add() de la clase Container los paneles creados, al panel cuyo administrador es CardLayout. En el método add se asigna una etiqueta al componente gestionado: Component add(string label, Component c); Usar los métodos next(), previous(), first() o show() pertenecientes a la clase CardLayout para poder visualizar el panel correspondiente. CardLayout: métodos Constructores CardLayout CardLayout() CardLayout(int distancia_h, int distancia_v) Métodos de CardLayout first(container padre) Visualiza el primer contenedor. last(container padre) Visualiza el último contenedor. next(container padre) Visualiza el siguiente contenedor. show(container padre, String nombre) Visualiza un contenedor específico. GUI Laboratorio de Programacion 4 GUI Laboratorio de Programacion 5 1

2 CardLayout GUI Laboratorio de Programacion 6 CardLayout: ejemplo CardLayout layout = new CardLayout(); setlayout(layout); Button b1 = new Button( Primer Boton"); Button b2 = new Button( Segundo Botón"); add( primero",b1); add( segundo",b2); ActionListener al = new ActionListener() public void actionperformed(actionevent ev) layout.next(this); ; b1.addactionlistener(this); b2.addactionlistener(this); GUI Laboratorio de Programacion 7 CardLayout: ejemplo Mostrar la primera: micard.first(p); Mostrar siguiente: micard.next(p); Mostrar la última: micard.last(p); Mostrar por nombre: micard.show(p, segundo ); GridBagLayout Similar al GridLayout, con las diferencias siguientes: Los componentes, pueden tener diferente tamaño. Los componentes pueden ocupar más de una celda. Los componentes se pueden agregar en cualquier orden. GUI Laboratorio de Programacion 8 GUI Laboratorio de Programacion 9 GridBagLayout: clase GridBagConstraints Esta clase especifica las restricciones de los componentes que serán colocados en un GridBagLayout. Las propiedades son: setconstraints(component comp, GridBagConstraints gbc); gridx: Columna en la cual se pone al componente. gridy: Fila en la cual se pone al componente. fill: Como rellenar el espacio si la celda es mayor que el componente. Los valores posibles son: GridBagConstraints.NONE/HORIZONTAL/VERTICAL/BOTH anchor: Posición del componente dentro de la celda: NORTH, NORTHWEST, CENTER, etc. insets (int top, int left, int bottom, int right) : es el margen que tienen los componentes dentro de la celda. gridwidth: Número de columnas que un componente ocupa. gridheight: Número de filas que un componente ocupa. GridBagLayout/ GridBagConstraints GUI Laboratorio de Programacion 10 GUI Laboratorio de Programacion 11 2

3 GridBagLayout: ejemplo GridBagLayout layout = newgridbaglayout(); setlayout(layout); GridBagConstraints c = newgridbagconstraints(); Button b1 = new Button("uno"); Button b2 = new Button("dos"); Button b3 = new Button("tres"); Button b4 = new Button("cuatro"); c.gridx = 0; c.gridy = 0; c.gridwidth = 2; c.fill = GridBagConstraints.BOTH; layout.setconstraints(b1,c); add(b1); GridBagLayout: ejemplo c.gridx = 0; c.gridy = 1; c.gridwidth = 1; c.fill = GridBagConstraints.BOTH; layout.setconstraints(b2,c); add(b2); c.gridx = 0; c.gridy = 2; // el valor de c.gridwidth era 1 c.fill = GridBagConstraints.BOTH; layout.setconstraints(b3,c); add(b3); GUI Laboratorio de Programacion 12 GUI Laboratorio de Programacion 13 GridBagLayout: ejemplo c.gridx = 1; c.gridy = 1; // el valor de c.gridwidth era 1 c.gridheight = 2; c.fill = GridBagConstraints.BOTH; layout.setconstraints(b4,c); add(b4); Uso de Menu en los frames // fin codigo GUI Laboratorio de Programacion 14 Menu Los frames pueden tener barra de menús. Constructor: crear una barra de menús: MenuBar(); Añadir una barra de menús a un frame: voidsetmenubar(menubar mb); Menu Constructor: Menu(); Menu(String menulabel); Menu(String menulabel,boolean allowtearoff); Añadir un menu a una barra de menús: Menuadd(Menu m); GUI Laboratorio de Programacion 16 GUI Laboratorio de Programacion 17 3

4 Menu Creación de un menú: 1º se crea una MenuBar, después se crean los Menus y los MenuItem Los MenuItems se añaden al Menu, los Menus se añaden a la MenuBar y la MenuBar se añade a un Frame Menu Frame myframe = newframe(); // Crear barra de menús MenuBar mymenubar = newmenubar(); // Añadir la barra de menús al frame myframe.setmenubar(mymenubar); // Crear menú Menu filemenu = newmenu("file"); // Añadir menú a barra de menús mymenubar.add(filemenu); Puede añadirse un Menu a otro Menu GUI Laboratorio de Programacion 18 GUI Laboratorio de Programacion 19 Menu Las entradas del menú se pueden añadir directamente, o creando un MenuItem: filemenu.add("open"); MenuItem savemenuitem = newmenuitem("save"); filemenu.add(savemenuitem); Las entradas del menú pueden habilitarse o deshabilitarse: savemenuitem.setenabled(false); Para añadir un separador al menú usar: voidaddseparator(); Menu Creando un submenú: Menu printsubmenu = newmenu("print"); filemenu.add(printsubmenu); printsubmenu.add("print Preview"); printsubmenu.add("print Document"); Los menús pueden contener entradas de tipo Checkbox: Constructor: CheckboxMenuItem(String itemlabel); Metodos: booleangetstate(); voidsetstate(boolean newstate); La colocación de los menús en la barra es de izquierda a derecha. Puede crearse un único menú en el lado derecho (normalmente de ayuda) con: voidsethelpmenu(menu helpmenu); GUI Laboratorio de Programacion 20 GUI Laboratorio de Programacion 21 Menu: ejemplo menú de Archivo Menu ma = newmenu("archivos"); ma.add("abrir"); MenuItem save = new MenuItem("Salvar"); ma.add(save); save.setenabled(false); ma.addseparator(); Menu sm = newmenu("submenu"); ma.add(sm); sm.add("opcion 1"); sm.add("opcion 2"); Menu: ejemplo los menús Edición y Ayuda // Menu Edicion Menu me = newmenu("edicion"); CheckboxMenuItem cmi = new CheckboxMenuItem("mayus"); me.add(cmi); // Menu Ayuda Menu help = newmenu("ayuda"); help.add("ayuda"); GUI Laboratorio de Programacion 22 GUI Laboratorio de Programacion 23 4

5 Menu: ejemplo ventana y barra de menús // una ventana nueva Frame f = newframe(); Gestión de Eventos // Barra de menus de la ventana MenuBar mb = newmenubar(); f.setmenubar(mb); // añadir menu de archivos, edicion y ayuda mb.add(ma); mb.add(me); mb.sethelpmenu(help); GUI Laboratorio de Programacion 24 Eventos Los eventos representan la actividad entre el sistema, los programas y los usuarios. Se definen varios tipos de eventos. Eventos: Funcionamiento Normalmente: componentes generan eventos en respuesta a las acciones de los usuarios. objetos del usuario escuchan y atienden los eventos generados. Cuando se produce un evento: El generador invoca un método en todos los objetos escuchadores registrados. El método que se invoca depende del tipo de evento. Estos métodos se definen en varias interfaces llamadas escuchadoras. Las clases escuchadoras implementan interfaces escuchadoras. GUI Laboratorio de Programacion 26 GUI Laboratorio de Programacion 27 Tipos de Eventos Eventos: funcionamiento Los objetos escuchadores deben registrarse en los generadores. addxxx y removexxx XXX es el nombre de la interfaz escuchadora boton.addactionlistener(obj_escuchador); boton.removeactionlistener(obj_escuchador); GUI Laboratorio de Programacion 28 GUI Laboratorio de Programacion 29 5

6 Métodos Métodos GUI Laboratorio de Programacion 30 GUI Laboratorio de Programacion 31 Tabla resumen Component Button Checkbox Choice Component Eventos generados ActionEvent ItemEvent ItemEvent ComponentEvent FocusEvent KeyEvent MouseEvent Interfaz Listener - Adapter ActionListener ItemListener ItemListener ComponentListener ComponentAdapter FocusListener FocusAdapter KeyListener KeyAdapter MouseListener MouseAdapter MouseMotionListener MouseMotionAdapter Métodos actionperformed itemstatechanged itemstatechanged 4 metodos 2 metodos 3 metodos 5 metodos 2 metodos GUI Laboratorio de Programacion 32 Tabla resumen Component Container List MenuItem Scrollbar TextComponent TextField Eventos generados ContainerEvent ActionEvent ItemEvent ActionEvent AdjustementEvent TextEvent ActionEvent Interfaz Listener - Adapter ContainerListener ContainerAdapter ActionListener ItemListener ActionListener AdjustementListener TextListener ActionListener Métodos 2 metodos actionperformed itemstatechanged actionperformed adjustmentvaluechanged textvaluechanged actionperformed WindowListener 7 metodos Window WindowEvent WindowAdapter GUI Laboratorio de Programacion 33 Eventos ActionEvent Clase de evento: ActionEvent. Debe implementarse el interfaz ActionListener. Tiene un único método: void actionperformed(actionevent event); Método de ActionEvent: String getactioncommand(); devuelve la etiqueta del generador Método de EventObject: Object getsource(); Devuelve objeto donde se genero el evento. Eventos ItemEvent Clase de evento: ItemEvent Debe implementarse el interfaz ItemListener. Tiene un único método: voiditemstatechanged(itemevent event) Métodos de la clase ItemEvent: // Checkbox, CheckboxMenuItem y Choice: // objeto donde ocurrio el evento ItemSelectablegetItemSelectable() // List: indice elemento seleccionado o deseleccionado. // Checkbox, CheckboxMenuItem y Choice: etiqueta elemento. ObjectgetItem() // Checkbox, CheckboxMenuItem y Choice: estado // Estados validos: ItemEvent.SELECTED, // ItemEvent.DESELECTED intgetstatechange() GUI Laboratorio de Programacion 34 GUI Laboratorio de Programacion 35 6

7 Ejemplo Ejemplo class InterfazUsuario public InterfazUsuario() // Se crea una ventana Frame miframe = new Frame("Ventana en Java"); miframe.setlayout(new FlowLayout()); miframe.setsize(450,150); miframe.setvisible(true); // Se registran los receptores de eventos miframe.addwindowlistener(new CerrarVentana()); class CerrarVentana implements WindowListener public void windowactivated(windowevent we) public void windowclosed(windowevent we) public void windowclosing(windowevent we) System.exit(0); public void windowdeactivated(windowevent we) public void windowdeiconified(windowevent we) public void windowiconified(windowevent we) public void windowopened(windowevent we) ; GUI Laboratorio de Programacion 36 GUI Laboratorio de Programacion 37 Ejemplo public class EjemploVentana public static void main(string arg[]) InterfazUsuario ventana = new InterfazUsuario(); Clases Adaptadoras Existen clases adaptadoras cuyo objetivo es evitar que las clases escuchadoras tengan que implementar todo el interfaz escuchador. Las clases adaptadoras implementan los métodos de las interfaces escuchadoras con un cuerpo vacío. Así, las clases escuchadoras sólo tienen que extender a los adaptadores y redefinir únicamente el cuerpo de los métodos que necesitan. GUI Laboratorio de Programacion 38 GUI Laboratorio de Programacion 39 Clases Adaptadoras: ejemplo class CerrarVentana extends WindowAdapter public void windowclosing(windowevent we) System.exit(0); Pasos creación aplicación (1) 1. Crear una clase InterfazUsuario 2. Constructor de la clase InterfazUsuario: 1. Crear componentes (botones, cajas de texto ) 2. Crear ventana (objeto de la clase Frame) 3. Asignar distribución a la ventana 4. Añadir componentes a la ventana y mostrarla 5. Registrar los gestores de eventos 3. Crear las clases encargadas de la gestión de eventos 4. Crear la clase que contenga el main() 1. Crear un objeto de la clase InterfazUsuario GUI Laboratorio de Programacion 40 GUI Laboratorio de Programacion 41 7

8 Pasos creación aplicación (2) Pasos creación aplicación (3) import java.awt.*; import java.awt.event.*; class InterfazUsuario public InterfazUsuario() // Crear componentes // Crear ventana Frame miframe = new Frame("Ventana en Java"); miframe.setlayout(new FlowLayout()); // Añadir componentes a la ventana miframe.add( ); // Dar tamaño y mostrar ventana miframe.setsize(450,150); miframe.setvisible(true); // Registrar gestores de eventos ; public class EjemploAwt public static void main(string arg[]) InterfazUsuario ventana = new InterfazUsuario(); GUI Laboratorio de Programacion 42 GUI Laboratorio de Programacion 43 Próxima clase Consultas Ultima teoría Repaso general Herramienta Eclipse Visual Editor Ejercitación GUI Laboratorio de Programacion 44 GUI Laboratorio de Programacion 45 8