Programacin grfica Diseo de la interfaz grfica javax

Programación gráfica • Diseño de la interfaz gráfica (javax. swing) – Contenedores – Componentes • Modelo de eventos • Diseño de aplicaciones – Modelo MVC (Modelo-Vista-Control) El lenguaje de programación Java

Interfaz gráfica de usuario • El interfaz de usuario es la parte del programa que permite a éste interactuar con el usuario. • AWT (Abstract Window Toolkit) biblioteca de clases Java para el desarrollo de Interfaces de Usuario Gráficas. • La estructura básica del AWT se basa en Componentes y Contenedores – Los Contenedores contienen Componentes, que son los controles básicos – todos los Componentes clase Component o uno de sus subtipos. – los Contenedores son instancias de la clase Container o uno de sus subtipos. • No se usan posiciones fijas de los Componentes, sino que están situados a través de una disposición controlada (Layouts) El lenguaje de programación Java

Interfaz gráfica de usuario. AWT Component Scroll. Bar List Button Label Canvas Choice Checkbox Container Panel Scroll. Pane Text. Component Text. Area Text. Field Window Dialog Frame Menu. Component Menu. Bar Menu. Item File. Dialog Check. Box. Menu. Item Menu Popup. Menu

Swing-JFC (Java Foundation Classes) • Extensión de AWT mejora la cosmética de las GUI’s. • La apariencia de la aplicación se adapta al sistema operativo y plataforma donde se está ejecutando. • Garantizan que el aspecto es el mismo aunque se cambie de plataforma. −Look and Feel: Metal, Window, Motif • La aplicación se puede utilizar sin ratón sin añadir código • Las clases se llaman igual que las del paquete java. awt pero con una J delante, esto es, JFrame, JButton, . . . El lenguaje de programación Java 4

• Swing Containers: JPanel, JTabbed. Pane, JScroll. Pane, JSplit. Pane, JMenu. Bar, JPopup. Menu, JTool. Bar • Swing Components: JButton, JRadio. Button, JChech. Box, JLabel, JText. Area, JText. Field, JPassword. Field, JCombo. Box, JList, JTree, JTable El lenguaje de programación Java

JFrame • paquete javax. swing • Por defecto se crea con tamaño 0 x 0 – set. Size(ancho, alto) • Hay que indicar qué ocurrirá cuando el usuario cierre la ventana – set. Default. Close. Operation(cte) – cte = EXIT_ON_CLOSE/DO_NOTHING_ON_CLOSE/HIDE_ON_CLOSE/ DISPOSE_ON_CLOSE • Al crear un frame no se visualiza automáticamente – set. Visible(true) • Para situar un frame en la ventana: – set. Location(x, y) //(x, y) es la esquina superior-izda – set. Bounds(x, y, ancho, alto) El lenguaje de programación Java

Toolkit • Permite obtener información dependiente del sistema. • Ejemplo: Permite obtener las dimensiones de la pantalla para poder calcular el tamaño óptimo del tamaño de las ventanas de la aplicación. class Frame. Centrado extends JFrame{ public Frame. Centrado() { try { jb. Init(); } catch(Exception e) { e. print. Stack. Trace(); } } private void jb. Init() throws Exception { //siguiente transparencia } El lenguaje de programación Java }

clase Frame. Centrado (continuación) private void jb. Init() throws Exception { //obtener las dimensiones de la pantalla Toolkit = Toolkit. get. Default. Toolkit(); Dimension tamaño. Vtna = kit. get. Screen. Size(); int alto = tamaño. Vtna. height; int ancho = tamaño. Vtna. width; //centrar la ventana en la pantalla this. set. Size(ancho/2, alto/2); set. Location(ancho/4, alto/4); //Establecer título e icono Image img = kit. get. Image(“icon. gif”); //gif y jpeg set. Icon. Image(img); set. Title(“Frame centrado”); } El lenguaje de programación Java

• No se añaden directamente los componentes a un frame sino a un panel de contenido. this. get. Content. Pane(). add(…); • Los componentes en un contenedor se gestionan por un layout manager: – Flow. Layout: Alinea los componentes horizontalmente. • opción por defecto en JPanel • dentro de una fila se puede elegir la alineación (LEFT, RIGHT, CENTER) – Border. Layout: opción por defecto del panel de contenido de un JFrame. • Puede elegir dónde colocar los componentes: NORTH, SOUTH, EAST, WEST, CENTER (por defecto) El lenguaje de programación Java

Border. Layout set. Layout(new Border. Layout()); this. get. Content. Pane(componente, “South”); • Las constantes se han definido como String. • El componente tiende a ocupar todo el espacio disponible. • Solución: situar un panel (JPanel) en cada zona que necesitemos El lenguaje de programación Java

Etiquetas. JLabel etiq 2 = new JLabel( "Etiqueta 2" ); etiq 2. set. Text(“Soy una etiqueta”); etiq 2. set. Font( new Font("Helvetica", Font. BOLD, 18 )); Icon imagen = new Image. Icon( "star 0. gif" ); JLabel etiq 3 = new JLabel( "Etiqueta 3"); etiq 3. set. Icon(imagen); El lenguaje de programación Java 11

JText. Field, JText. Area y JScroll. Pane • Introducir texto en una línea o varias. • Métodos heredados de JText. Component: – void set. Text(String t) – String get. Text() – void set. Editable(boolean b) • El layout puede ajustar el tamaño del JText. Field aunque se establezca un tamaño preferido (set. Columns) • JText. Area se pueden establecer las filas (rows) y columnas (columns) • Se puede añadir una barra de scroll (JScroll. Pane). Aparecerá cuando el texto exceda el tamaño establecido text. Area = new JText. Area(8, 40); JScroll. Pane sp = new JScroll. Pane(text. Area); content. Pane. add(scroll. Pane, Boreder. Layout. CENTER);

Pestañas. JTabbed. Pane • Cada pestaña debe tener un JPanel para añadir los componentes • Botón de dos estados • JRadio. Button y JCheck. Box son subclases Button. Group (exclusividad) • String informativo sobre los componentes: boton 1. set. Tool. Tip. Text( "Soy el JBoton 1" ); El lenguaje de programación Java 13 • Se pueden asignar imágenes (Icon) a los botones (JButton).

JCheck. Box y JRadio. Button • JCheck. Box: – – – JCheck. Box(String label) JCheck. Box(String label, boolean state) JCheck. Box(String label, Icon icon) boolean is. Selected() void set. Selected(boolean state) • JRadio. Button: – JRadio. Button(String label, boolean state) – JRadio. Button(String label, Icon icon) – Para una selección exclusiva se tienen que agrupar en Button. Group: • add(Abstract. Button b) • Button. Model get. Selection(); – Button. Model • String get. Action. Command() El lenguaje de programación Java

JCombo. Box • Seleccionar entre muchas alternativas • Métodos: – – – – void set. Editable(boolean b) void add. Item(Object item) void insert. Item. At(Object item, int index) void remove. Item(Object item) void remove. Item. At(int index) void remove. All. Items() Object get. Selected. Item() El lenguaje de programación Java

JOption. Pane • Ventanas de mensajes estándar que permiten mostrar un mensaje de información al usuario o capturar información. • Casi todos los usos de esta clase son llamadas a uno de los métodos static show. Xxx. Dialog – – JOption. Pane. show. Message. Dialog(); JOption. Pane. show. Confirm. Dialog(); JOption. Pane. show. Option. Dialog)(); JOption. Pane. show. Input. Dialog(); • Todos los diálogos son modales (no continúa la ejecución hasta que no se cierra). • Se pueden configurar mediante parámetros: título, mensaje, icono, etc. El lenguaje de programación Java

Ejemplos JOption. Pane. show. Message. Dialog(null, "Cuidado con lo que haces", "Consejo", JOption. Pane. ERROR_MESSAGE); JOption. Pane. show. Confirm. Dialog(null, “Debes elegir uno", “Decide", JOption. Pane. YES_NO_OPTION); El lenguaje de programación Java 17

Ejemplo JOption. Dialog Object[] opciones = { "Continuar", "Cancelar", "Guardar Estado" }; JOption. Pane. show. Option. Dialog(null, "Podemos estar en un estado inconsistente", "¡¡¡OJO!!!", JOption. Pane. DEFAULT_OPTION, JOption. Pane. WARNING_MESSAGE, null, opciones[0]); El lenguaje de programación Java 18

Ejemplo entrada de datos Object [] valores = {"Libro", "CD", "DVD" }; String respuesta=(String) JOption. Pane. show. Input. Dialog( null, "Elija el tipo de producto", "Entrada de datos", JOption. Pane. QUESTION_MESSAGE, null, valores[0]); El lenguaje de programación Java 19

Ejemplo entrada de datos libre Icon icono = new Image. Icon("icons/Question. gif"); String respuesta = (String)JOption. Pane. show. Input. Dialog( null, "Introduzca el nombre que va a borrar", "Eliminar contacto", JOption. Pane. QUESTION_MESSAGE, icono, null); El lenguaje de programación Java 20

Menús Componente JFile. Chooser JMenu. Bar JPopup. Menu 1. Añadimos un menú 2. Haciendo doble click abrimos el diseñador de menús El lenguaje de programación Java

Diseñador de menús El lenguaje de programación Java 22

Asignación del menú al componente • Una vez cerrado el diseñador de menús, asignamos el JMenu. Bar al componente que lo contendrá (JFrame o JDialog). • Desde el diseñador • El resultado es que en la definición de Ventana. Contador se añada: this. set. JMenu. Bar(j. Menu. Bar 1); Propiedades del JFrame o JDialog El lenguaje de programación Java

Modelo de delegación de eventos • Los eventos se encapsulan en una jerarquía de clases donde la clase raíz es java. util. Event. Object • Fuentes de eventos (Source): – es un objeto que tiene la capacidad de detectar eventos y notificar a los receptores de eventos que se han producido esos eventos – mantiene una lista de objetos receptores y los tipos de eventos a los que están suscritos. El programador crea esa lista utilizando llamadas a los métodos add<Tipo. Evento>Listener() (tb remove). – Generalmente un componente del interfaz gráfico • Receptores de eventos (Listener): – es una clase (o una subclase de una clase) que implementa un interfaz receptor específico java. util. Event. Listener – declara TODOS los métodos adecuados al tratamiento de los eventos de su clase • Resultan de utilidad las clases internas

Modelo de delegación de eventos • Emparejamiento entre clases de eventos y definiciones de interfaces. Por ejemplo: – class Mouse. Event – interfaz Mouse. Listener – En java. awt. Component existe el método add. Mouse. Listener • Adaptadores (Adapter): – evita tener que escribir todos los métodos del interfaz – implementa todos los métodos del interfaz con métodos vacíos – una clase receptor puede definirse como una clase que extiende una clase Adapter (en lugar de una clase que implementa el interfaz) y sobreescribe los métodos que necesite – Ejemplo: public abstract class Mouse. Adapter implements Mouse. Listener

Interfaces Listener Métodos

Modelo de delegación de eventos. Ejemplo import java. awt. *; class Cierra. Ventanas implements Window. Listener{ public void window. Closing(Window. Event we){ Window w = (Window)we. get. Source(); Vacios!! w. dispose(); extends Window. Adapter System. exit(0); } public void window. Opened (Window. Event we){} public void window. Closed (Window. Event we){} public void window. Activated (Window. Event we){} public void window. Deactivated (Window. Event we){} public void window. Iconified (Window. Event we){} public void window. Deiconified (Window. Event we){} } public class Mi. Aplicacion extends JFrame{. . . public Mi. Aplicacion(){. . . this. add. Window. Listener(new Cierra. Ventanas()); . . . } } El lenguaje de programación Java

Ejemplo 2: Window. Adapter import java. awt. *; class Cierra. Ventanas extends Window. Adapter{ //Sólo implementamos el método que necesitamos public void window. Closing(Window. Event we){ Window w = (Window)we. get. Source(); w. dispose(); Default. Close. Operations: System. exit(0); EXIT_ON_CLOSE } DO_NOTHING_ON_CLOSE } HIDE_ON_CLOSE DISPOSE_ON_CLOSE public class Mi. Aplicacion extends JFrame{. . . public Mi. Aplicacion(){. . . this. add. Window. Listener(new Cierra. Ventanas()); . . . } El lenguaje de programación Java }

Ejemplo: JFrame. Contador v. 1 1) JButton j. Button. Dec; 2) j. Button. Dec. add. Action. Listener(new BDListener()); 3) //Clase interna en JFrame. Contador class BDListener implements Action. Listener{ public void action. Performed(Action. Event event){ mi. Conta. decrementar(); imprimir. Valor(); } El lenguaje de programación Java 29 }

Ejemplo: JFrame. Contador v. 2 • Cualquiera de las clases listener pueden ser clases anónimas, que tiene la ventaja de no necesitar un nuevo nombre de clase j. Button. Dec. add. Action. Listener(new Action. Listener(){ public void action. Performed(Action. Event event){ mi. Conta. decrementar(); imprimir. Valor(); } }); • Ningún otro componente podría invocar a este Action. Listener El lenguaje de programación Java 30

En JBuilder se puede elegir el estilo El lenguaje de programación Java

Generar los métodos asociados a los eventos sobre los componentes, en el estilo seleccionado void j. Button. Sumar_action. Performed(Action. Event e) { //acciones asociadas al evento (programador) conta. incrementar(); imprimir. Valor(); //rellena el JText. Field } El lenguaje de programación Java 32

Diseñador de menús. Acciones asociadas void j. Menu. Item. Salir_action. Performed(Action. Event e) { //El cuerpo lo rellena el programador System. exit(0); } El lenguaje de programación Java 33

Enlazar el menú Archivo con JFile. Chooser • JFile. Chooser es un cuadro de diálogo para archivos. • Acción asociada a la opción de menú abrir: public class Ventana. Contador extends JFrame{ private JFile. Chooser explorador = new JFile. Chooser(); . . . void j. Menu. Item. Abrir_action. Performed(Action. Event e) { if (JFile. Chooser. APPROVE_OPTION == explorador. show. Open. Dialog(this)){ File fichero = explorador. get. Selected. File(); recuperar. Datos(fichero); } } • También show. Save. Dialog El lenguaje de programación Java

JFile. Chooser. show. Open. Dialog El lenguaje de programación Java