Componentes básicos de GUI Parte I

1. Componentes básicos de GUIParte I Proyecto de software

2. Introducción al AWT • AWT es el acrónimo del X Window Toolkit para Java, donde X puede ser cualquier cosa: Abstract, Alternative, Awkward o Another • Se trata de una 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. • La interface de usuario es la parte del programa que permite a éste interactuar con el usuario. • La interface de usuario es el aspecto más importante de cualquier aplicación. • El AWT también es independiente de la plataforma en que se ejecute.

3. Estructura del AWT • Los Contenedores contienen Componentes, que son los controles básicos • No se usan posiciones fijas de los Componentes, sino que están situados a través de una disposición controlada (layouts) • El común denominador de más bajo nivel se acerca al teclado, ratón y manejo de eventos • Alto nivel de abstracción respecto al entorno de ventanas en que se ejecute la aplicación • Es bastante dependiente de la máquina en que se ejecuta la aplicación

4. Componentes y Contenedores • Una interface gráfica está construida en base a elementos gráficos básicos, los Componentes. • Típicos ejemplos de estos Componentes son los botones, barras de desplazamiento, etiquetas, listas, cajas de selección o campos de texto. • En el AWT, todos los Componentes de la interface de usuario son instancias de la clase Component o uno de sus subtipos. • Los Componentes no se encuentran aislados, sino agrupados dentro de Contenedores. • En el AWT, todos los Contenedores son instancias de la clase Container o uno de sus subtipos.

5. Ejemplo de GUI simple

6. Ejemplo… Jerarquía componentes

7. Tipos de Componentes

8. Ejemplo GUI En la figura se reproduce la ventana generada por el código de la aplicación ComponentesAWT.java que muestra todos los Componentes que proporciona el AWT. (Ver ejemplo: ComponentesAWT.java)

9. Componentes • Component es una clase abstracta que representa todo lo que tiene una posición, un tamaño, puede ser pintado en pantalla y puede recibir eventos. • Los Objetos derivados de la clase Component que se incluyen en el Abstract Window Toolkit (AWT) son los siguientes:

10. Botones de Pulsación (Button) • Creación Button boton; boton = new Button( "Botón"); • Captura de eventos public boolean action( Event evt,Object obj ) { if ( evt.target instanceof Button ) System.out.println( (String)obj ); else System.out.println( "Evento No-Button" ); } (Ver ejemplo: Botones.java)

11. Botones de Lista (Choice) • Los botones de selección en una lista (Choice) permiten el rápido acceso a una lista de elementos

12. Botones de Lista (Choice) • Creación Selector = new Choice(); • Asignando valores Selector.addItem( "Rojo" ); Selector.addItem( "Verde" ); Selector.addItem( "Azul" ); • Captura de eventos public boolean action( Event evt,Object obj ) { if( evt.target instanceof Choice ) { String color = (String)obj; System.out.println( "El color elegido es el " + color ); } return true; } (Ver ejemplo: BotonSeleccion.java )

13. Botones de Marcado (Checkbox) • Los botones de comprobación (Checkbox) se utilizan frecuentemente como botones de estado. • Proporcionan información del tipo Sí o No (true o false). • El estado del botón se devuelve en el argumento Object de los eventos Checkbox. • el argumento es de tipo booleano: verdadero (true) si la caja se ha seleccionado y falso (false) en otro caso.

14. Botones de Marcado (Checkbox) • Creación Relleno = new Checkbox( "Relleno"); • Captura de eventos public boolean action( Event evt,Object obj ) { if ( evt.target instanceof Checkbox ) System.out.println( "CheckBox: " + evt.arg.toString() ); return true; } (Ver ejemplo: BotonComprobacion.java)

15. Botones de Selección (CheckboxGroup) • Los botones de comprobación se pueden agrupar para formar una interfaz de botón de radio (CheckboxGroup), que son agrupaciones de botones Checkbox en las que siempre hay un único botón activo.

16. Botones de Selección (CheckboxGroup) • Creación CheckboxGroup Radio; Asignando valores public void init() { Radio = new CheckboxGroup(); add( new Checkbox( "Primero",Radio,true) ); add( new Checkbox( "Segundo",Radio,false) ); add( new Checkbox( "Tercero",Radio,false) ); } (Ver ejemplo: BotonRadio.java)

17. Etiquetas (Label) • Las etiquetas proporcionan una forma de colocar texto estático en un panel, para mostrar información que no varía.

18. Etiquetas (Label) • Creación Label etiq1 = new Label( "Hola Java!" ); • Alineacion de etiquetas setLayout( new FlowLayout( FlowLayout.CENTER,10,10) ); (Ver ejemplo: Etiqueta.java)

19. Listas (List) • Las listas (List) facilitan a los operadores la manipulación de muchos elementos. • Se crean utilizando métodos similares a los de los botones Choice. • La lista es visible todo el tiempo. • Para acceder a los elementos seleccionados se utilizan los métodos getSelectedItem() o getSelectedItems(). • Para listas de selección simple, cualquier selección con doble-click en la lista disparará el método action()

20. Listas (List) • Creación List planetas = new List( 4,false ); • Asignando valores planetas.addItem( "Mercurio" ); planetas.addItem( "Venus" ); planetas.addItem( "Tierra" ); planetas.addItem( "Marte" ); planetas.addItem( "Jupiter" ); planetas.addItem( "Saturno" ); planetas.addItem( "Neptuno" ); planetas.addItem( "Urano" ); planetas.addItem( "Pluton" ); (Ver ejemplo: Lista.java)

21. Campos de Texto (TextField) • Los campos de texto (TextField) , son para la entrada directa de datos por teclado. • Los campos de texto se pueden crear vacíos, vacíos con una longitud determinada, rellenos con texto predefinido y rellenos con texto predefinido y una longitud predeterminada. • Cuando el usuario teclea un retorno de carro en un campo de texto, se genera un evento TextField.

22. Campos de Texto (TextField) • Creación TextField tf1,tf2,tf3,tf4; • Asignando valores // Campo de texto vacío tf1 = new TextField(); // Campo de texto vacío con 20 columnas tf2 = new TextField( 20 ); // Texto predefinido tf3 = new TextField( "Hola" ); // Texto predefinido en 30 columnas tf4 = new TextField( "Hola",30 ); • Captura de eventos public boolean action( Event evt,Object obj ) { if( evt.target instanceof TextField ) { if( evt.target.equals( tf1 ) ) System.out.println( "Campo de Texto 1: " + evt.arg.toString() ); (Ver ejemplo: CampoTexto.java)

23. Áreas de Texto (TextArea) • Las áreas de texto permiten incorporar texto multilínea dentro de zonas de texto (TextArea). • Los objetos TextArea se utilizan para elementos de texto que ocupan más de una línea, como puede ser la presentación tanto de texto editable como de sólo lectura. • Se puede permitir que el usuario edite el texto con el método setEditable() de la misma forma que se hace en el TextField. • Para acceder al texto actual de una zona de texto se utiliza el método getText().

24. Áreas de Texto (TextArea) • Creación t1 = new TextArea(); t2 = new TextArea( "Tutorial de Java",5,40 ); t2.setEditable( false ); • Captura de Eventos Las áreas de texto no generan eventos por sí solas, por lo que hay que utilizar eventos externos, para saber cuando tenemos que acceder a la información contenida en el TextArea. (Por ejemplo un botón.)

25. Canvas • Los canvas son lienzos o zonas de dibujo. • Son un Componente básico que captura eventos de exposición (expose), de ratón y demás eventos relacionados. • Los canvas simplifican la producción de applets que necesitan una única funcionalidad para distintas áreas. • Por ejemplo, el applet Lienzo.java, contiene un manejador de eventos que controla el evento mouseDown en el canvas. Si el evento no se genera en el canvas, se le pasa al applet que lo tratará como un evento de ratón normal.

26. Barras de Desplazamiento (Scrollbar) • Las barras de desplazamiento (Scrollbar) proporcionan una forma de trabajar con rangos de valores o de áreas como el Componente TextArea, que proporciona dos barras de desplazamiento automáticamente. • Si queremos implementar un selector de color, como en el applet Slider.java, podemos utilizar una barra de desplazamiento para cada uno de los colores primarios.

27. Barras de Desplazamiento (Scrollbar) • También podríamos utilizar una barra de desplazamiento para un rango de valores de color, tal como se muestra en el ejemplo Ranger.java. • las barras de desplazamiento no disponen de un display o zona donde se muestren directamente los valores asociados a los desplazamientos, para ello es necesario añadir explícitamente una caja de texto, tal como se muestra en el ejemplo RangoRojo.java.

28. Contenedores (Container) • Container es una clase abstracta derivada de Component, que representa a cualquier componente que pueda contener otros componentes. Se trata, en esencia, de añadir a la clase Component la funcionalidad de adición, sustracción, recuperación, control y organización de otros componentes. • El AWT proporciona cuatro clases de Contenedores: • Window • Frame • Dialog • Panel • La clase Applet también es un Contenedor, es un subtipo de la clase Panel y puede tener Componentes.

29. Contenedores (Container) • Window Es una superficie de pantalla de alto nivel (una ventana). Una instancia de la clase Window no puede estar enlazada o embebida en otro Contenedor. Una instancia de esta clase no tiene ni título ni borde. • Frame Es una superficie de pantalla de alto nivel (una ventana) con borde y título. Una instancia de la clase Frame puede tener una barra de menú. Una instancia de esta clase es mucho más aparente y más semejante a lo que nosotros entendemos por ventana. • Dialog Es una superficie de pantalla de alto nivel (una ventana) con borde y título. Una instancia de la clase Dialog no puede existir sin una instancia asociada de la clase Frame. • Panel Es un Contenedor genérico de Componentes. Una instancia de la clase Panel, simplemente proporciona un Contenedor al que ir añadiendo Componentes.