componentes básicos de gui parte i

Componentes básicos de GUIParte I

Proyecto de software

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.

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

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.

Ejemplo de GUI simple

Ejemplo… Jerarquía componentes

Tipos de Componentes Clases:

BorderLayout

CardLayout

CheckboxGroup

Color

Component

Button

Canvas

Checkbox

Choice

Container

Panel

Window

Dialog

Frame

Label

List

Scrollbar

TextComponent

TextArea

TextField

Dimension

Event

FileDialog

FlowLayout

Font

FontMetrics

Graphics

GridLayout

GridBagConstraints

GridBagLayout

Image

Insets

MediaTracker

MenuComponent

MenuBar

MenuItem

CheckboxMenuItem

Menu

Point

Polygon

Rectangle

Toolkit

Interfaces:

LayoutManager

MenuContainer

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)

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:

Button

Canvas

Checkbox

Choice

Container

Panel

Window

Dialog

Frame

Label

List

Scrollbar

TextComponent

TextArea

TextField

Botón

Canvas

Casilla Verificación

Botón de Opción

Contenedores

Panel

Ventana

Dialogo

Marco

Etiqueta-Rotulo

Lista

Barra deslizamiento

Componente Texto

Area de texto

Texto de campo

Botones de Pulsación (Button)• CreaciónButton boton;

boton = new Button( "Botón");

• Captura de eventospublic 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)

Botones de Lista (Choice)

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

Botones de Lista (Choice)

• CreaciónSelector = new Choice();

• Asignando valoresSelector.addItem( "Rojo" );Selector.addItem( "Verde" );Selector.addItem( "Azul" );

• Captura de eventospublic 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 )

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.

Botones de Marcado (Checkbox)

• CreaciónRelleno = new Checkbox( "Relleno");

• Captura de eventospublic boolean action( Event evt,Object obj ) { if ( evt.target instanceof Checkbox ) System.out.println( "CheckBox: " + evt.arg.toString() ); return true; }

(Ver ejemplo: BotonComprobacion.java )

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.

Botones de Selección (CheckboxGroup)

• CreaciónCheckboxGroup Radio;

Asignando valorespublic 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)

Etiquetas (Label)

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

Etiquetas (Label)

• Creación

Label etiq1 = new Label( "Hola Java!" ); • Alineacion de etiquetassetLayout( new FlowLayout( FlowLayout.CENTER,10,10) );

(Ver ejemplo: Etiqueta.java)

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()

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)

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.

Campos de Texto (TextField)• CreaciónTextField 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 eventospublic 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)

Á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().

Áreas de Texto (TextArea)

• Creaciónt1 = new TextArea();

t2 = new TextArea( "Tutorial de Java",5,40 );

t2.setEditable( false );

• Captura de EventosLas á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.)

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.

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.

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.

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.

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.

• FrameEs 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.

• DialogEs 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.

• PanelEs un Contenedor genérico de Componentes. Una instancia de la clase Panel, simplemente proporciona un Contenedor al que ir añadiendo Componentes.