erfaz gráfica de usuario.docx

7/24/2019 erfaz gráfica de usuario.docx

http://slidepdf.com/reader/full/erfaz-grafica-de-usuariodocx 1/19

erfaz gráfica de usuario (AWT)

AWT = Abstract Windowing Toolkit Permite crear entornos graficos de ventanas, a la manera de Windows

Aspecto similar! en varias plataformas

"e #an utilizado elementos comunes a todas las plataformas$ barras deslizantes,

botones, menus desplegables, etc%%%

1. Controles basicos

o &utton

o '#ekboes

o '#oice

o ist

o *enu

o Tet +ield

2. Otros controles

o "lider

o "crollbar

o Tet Area

o 'anvas

o abel



o Panel

o "croll Pane

-emplo$ appletviewer ./0Window%#tml (tutorial "/1)

2erar3uia de clases (ver grafico)

os menus dependen de otra rama de 4b-ect5

3. Concepto de Jerarquia de Componentes del programa

o /na interfaz grafica lleva asociada una -erar3uia (arbol)

o P%e-%$ las opciones de un menu son #i-as! del menu, 3ue a su vez es #i-o! de la ventanaen la 3ue aparece, 3ue a su vez es #i-o del applet, etc%%%



o Al 6re7dibu-ar la interfaz, se #ace siguiendo la -erar3uia, de arriba a aba-o%

o 8emasiado rapido para verse a simple vista 9::

4. Como usar Labels

// EjemploLabelApplet.java

import java.awt.*;

public class EjemploLabelApplet extends java.applet.Applet{public void init()

{Label etiqueta ! new Label("Label");Label etiqueta# ! new Label("Label#");Label etiqueta$ ! new Label("Label$");

add(etiqueta);add(etiqueta#);add(etiqueta$);%

%

5. Como usar Buttons

//Ejemplo&uttonApplet.javaimport java.awt.*;

public class Ejemplo&uttonApplet extends java.applet.Applet{public void init()

{Label etiqueta ! new Label("Label");&utton boton ! new &utton("&oton ");&utton boton# ! new &utton("&oton #");

add(boton);add(etiqueta);add(boton#);%

%



Probar a cambiar las dimensiones de la ventana de appletviewer$ la disposicion de los elementos

es automatica%

6. Como usar Checbo!es

// EjemploA'Applet.java

...

add(new ec+box(",amplona"));

add(new ec+box("&ilbao"- null- true));

add(new ec+box("adrid"));

add(new ec+box("&arcelona"));...

etodos utiles

set0tate() //consulta el estado del cec+boxset0tate() //altera el estado del cec+boxetc...

RadioButton

o "on un caso especial de '#eckbo$ solo ; puede estar activo en su grupo, comolos botones de una radio, 3ue saltan al cambiar%%%

o <a 3ue crear el '#eckbo.roup

...

ec+box1roup cb2 ! new ec+box1roup();

add(new ec+box("3ojo"- cb2- 4alse));



add(new ec+box("A5ul"- cb2- 4alse));

add(new ec+box("6erde"- cb2- true));

add(new ec+box("7e2ro"- cb2- 4alse));

...

". Como usar Choice #enu

o /n menu '#oice es desplegable%

o Permite seleccionar un item del menu

...

oice c ! new oice(); // crea el menu desple2able

c.add8tem("7aranja");

c.add8tem("an5ana");

c.add8tem(",era");

add(c); // a9ade el menu al panel

...

etodos utiles

2et8tem(int n) devuelve el strin2 de la opcion n:esima2et0elected8ndex() devuelve el indice de la opcion seleccionada

//Este tipo de menus solo permiten seleccionar una opcion. ,ara multiplesopciones- usar una lista



$. Como usar %e!t&ields

o Permite al usuario introducir teto

...add(new Label("7ombre completo"));add(new extield(":esciba aqui su nombre:"));add(new Label("ele4ono"));add(new extield(#));add(new Label(",assword"));extield t ! new extield(#<);t.setEcoaracter(=*=);

add(t);...etodos utiles

setEditable(boolean) de4ine si el testo es editable o noselect(int- int) selecciona el texto entre las dos posiciones (ori2en ! <)etc...

'. Como usar %e!t(rea



o s un componente similar a Tet+ield%

o Tet+ield es mas conveniente para pe3ue>os tetos, idealmente de una sola linea% 1o

tiene barras de deslizamiento

o TetArea en mas conveniente para tetos largos, de mas de una linea%

o Por defecto, tiene barras de deslizamiento

...0trin2 texto ! "Erase una ve5 un pais en el que vivian tres cerditos que eran>n"?"ermanos. @ecidieron construirse una casa- uno el primero de>n" ?"ellos se la i5o de paja- el se2undo de madera el tercero de ladrillo>n" ?"Bn buen dia aparecio por alli el lobo blablabla..."; // el caracter C>nD es para 4or5r el retorno de lineaadd(new extArea(texto- <- <));...etodos utilesinsertext(0trin2- int) // inserta texto en la posicion indicadareplaceext(0trin2- int-int) // reepmpla5a el texto entre las posiciones dadasetc...

1). Como usar &rames * +ialogs

o a clase Window de AWT permite crear ventanas independientes del navegador 3uecontiene al applet% +rame es mas potente 3ue 8ialog

o l aout*anager por defecto para +rame es &orderaout



o os 8ialog son ventanas emergentes pensadas para mensa-es no permanentes, comoA8?@T1'0A!, peticion de informacion especifica, etc%%%, 3ue una vez presentados alusuario pueden desaparecer (p%e-%$ "e va a proceder a la instalacion de <peruake ?%'onfirmarB!)

o "e puede forzar a 3ue sean no redimensionables o modales!

o /n 8ialog modal! es a3uel 3ue impide usar otra ventana #asta 3ue no se lleve a cabo laaccion de la presente ventana (p%e-%$ s necesario 3ue introduzca la clave de accesopara continuar la e-ecucion!)

o A su vez eisten dos clases de 8ialog$

o 8ialog (a secas:)

o +ile8ialog$

o Presenta los fic#eros del directorio, abrir, cancelar, etc%%

o 8ebido a las restricciones de los applets, tiene muc#as mas

funcionalidades si se emplea en una aplicacion 2ava

... // Ejemplo de utili5acion de ramerame ventanarame ! new rame("i ventana 3AE");ventanarame.setLaout(new lowLaout()); //por de4ecto es &orderLaoutventanarame.add(new &utton("Fpcion "));

ventanarame.add(new &utton("Fpcion #"));ventanarame.add(new &utton("Fpcion $"));ventanarame.resi5e(<<-G<); //de4ine el tama9o de la ventana,oint dim ! location(); //devuelve la posicion de este componente- como laesquina sup:i5da //medida respecto al componente padreventanarame.move(dim.x ? G<- dim. ? G<);ventanarame.sow(); //cuando se crea la ventana- es invisible. ,ara ocultarla-ide()



...

// Ejemplo de utili5acion de @ialo2

...

// Ejemplo de utili5acion de ile@ialo2

...

11. Como usar List

o "on menus, pero no desplegables

o s una lista de items en la 3ue se puede elegir uno o varios

o "i el numero de items es maor 3ue la longitud de la lista, aparecen barras dedeslizamiento

...List lista ! new List(G- true); // crea una lista que tendra G lineas- quepermitira // seleccion multiple (valor =true=)lista.add8tem("A4rodita");lista.add8tem("Apolo");lista.add8tem("Ares");lista.add8tem("Hades");lista.add8tem("Ieus"); // si se a9ade un sexto elemento- se crearaautomaticamente // una barra desli5anteadd(lista);...etodos utiles

2et0elected8ndex() // devuelve el indice del item seleccionado- si no sepermite seleccion mult.2et0lected8ndexes() // devuelve un arra de indices de los itemsseleccionados2et0elected8tem() // devuelve el item seleccionado



2et0lected8tems() // idem varios itemsselect(int) // 4uer5a a que estJ seleccionado el item de la posicion dadaetc...

12. Como usar ,crollbars

o os componentes TetArea Tet+ield vienen con sus propias barras deslizantes% Perotambien se pueden crear barras deslizantes independientes, tipicamante para manipularrangos de valores entre un maimo un minimo%

o Para variar el valor asociado, #a tres formas$

o Pinc#ar las flec#as de los etremos% ?ariacion unitaria%

o Pinc#ar en la barra% ?ariacion en saltos, ;C por defecto%

o Pinc#ar arrastar el elevador!%

...0crollbar barra@esli5ante ! new 0crollbar(0crollbar.HF38IF7AL);add(barra@esli5ante);... // constructor mas 2eneral

// 0crollbar(int orientacion- int valor8nicial- int ancura- int valorinimo- intvaloraximo);...etodos utiles

2et6alue() // @evuelve el valor actual de la barraset6alue() // Asi2na un valor a la barra



13. Como usar Can-as

o /n componente 'anvas es un ob-eto 3ue permite dibu-ar en Dl%

o 1o #ace nada por si mismo% sta pensado para ser etendido por #erencia%

anvas can ! new anvas();add(can);

14. Como usar anels

o s un tipo de 'ontainer!

o Permite definir un area en la cual incluir otros componentes, incluidos otros Panels(paneles anidados!)% 8e esta forma los componentes se agrupan, dando un aspectoordenado al con-unto de la interfaz grafica% Para 3ue esta ordenacion sea eficaz, #a 3ueusar Panel en un componente 3ue tenga bien definida la disposicion mediante unaout*anager (se ve mas adelante)%

...,anel un,anel ! new ,anel();un,anel.add(new Label("Arriba"));un,anel.add(new Label("Abajo"));add(un,anel);

...

15. Como usar ,croll anes



o 8efine un area para mostrar un solo componente con barras deslizantes%

o a utilizacion tipica es la de visualizar una imagen dentro del "crollPane%

o "i la imagen es maor 3ue el area del "crollPane, este crea automaticamente las barrasdeslizantes necesarias%

o "e puede forzar 3ue no #aa barras%

NOTA: utilizar ScrollPane es un poco mas complicado que los componentes

anteriores. n este e-emplo se #a tenido 3ue definir una clase aparte, 3ue #ereda de'anvas, e implementar varios metodos para 3ue la imagen aparezca con un tama>o

adecuado...8ma2e 4oto ! 2et8ma2e(2etode&ase()- "orb.2i4");0crollableanvas sanvas ! new 0crollableanvas(4oto);0croll,ane s,ane ! new 0croll,ane();s,ane.add(sanvas);add(sanvas);...

// Aora viene la clase de4inida por nosotros (se pueden incluir varias clases enun mismo 4icero siempre que solo aa una de ellas con el atributo CpublicDclass 0crollableanvas extends anvas{

@imension pre4erred0i5e;@imension minimum0i5e;8ma2e ima2en; // onstructor de la clase 0crollableanvas (de4inida por nosotros K)public 0crollableanvas(8ma2e ima2en)

{tis.ima2en ! ima2en;pre4erred0i5e ! new @imension(<<- $#<);minimum0i5e ! new @imension(<- <);%

public @imension 2etinimum0i5e()

{return minimum0i5e;%

public @imension 2et,re4erred0i5e()

{



return pre4erred0i5e;%

public void paint(1rapics 2)

{

2.draw8ma2e(ima2en- <- <- 2et&ac+2round()- tis);%%

16. Otros componentes

o *enu"#ortcut$ asocia una combinacion de teclas para activar una opcion de menu(p%e-%$'ontrolE" para grabar arc#ivo)

o Popup*enu$ menu flotante

1". Como apro-echar un applet gra/ico desde una aplicacion

o "e puede lanzar desde una aplicacion un applet #aciendo lo siguiente5

// Heredar Mcon extends: de las clases Applet- A'- etc...public static void main(0trin2 ar2sNO){rame 4 ! new rame("i ventana para el applet"); // rea una ventana



para mostrar el applet- //a la manera de un nave2adorEjemploA'Applet unApplet ! new EjemploA'Applet(); // El 4iceroEjemploA'Applet es //tambien una clase por lo tanto se puedeinstanciar KunApplet.init(); // Lan5a init()- i2ual que aria el nave2adorunApplet.start(); // idem con start()

4.add("enter"- unApplet);4.resi5e($<<- $<<); // Hace las veces de '8@H HE81H en el HL4.sow();

//AE78F7 esta CadaptacionD para ver applets como aplicaciones debe teneren cuenta si el applet lee //parametros del 4icero HL. Habria que pasar losparametros en la linea de comandos- a main(0trin2 //ar2sNO)%

1$. La*out#anager

o a disposicion de componentes en un panel depende del aout *anager establecido delorden en 3ue se van a>adiendo los componentes con add()%

o 'ada Panel puede tener su propio *, incluso si se anidan paneles%

o l AWT tiene los siguientes *$

o +lowaout

o .ridaout

o .rid&agaout

o &orderaout

o 'ardaout

o aout #ec#o a medida! por el usuario

o "in aout$ posicionamiento absoluto de los componentes



o 1o es recomendable usarlo, por3ue las coordenadas de pantalla dependen de laplataforma, esto va en contra de la filosofia 2ava de #acer programas portables

o n un sistema puede 3uedar perfecto en otro salir como un c#urro%%%

o FlowLayout

o s la clase mas sencilla% "implemente se van a>adiendo los componentes uno detras deotro, en linea% "i no caben en una linea, se pasa a la siguiente%

o s el * por defecto%

setLaout(new lowLaout());

setaout(new +lowaout(+lowaout%+T), ;C, ;C)5 FF alineacion iz3uierda, con

distancias de ;C pieles en #orizontal vertical

o GridLayout

o 8ividen la superficie del panel en filas columnas%



o Al a>adir componentes con add(), estos se distribuen por las celdas

...,anel panel1ridLaout ! new ,anel();panel1ridLaout.setLaout(new 1ridLaout($-$)); // Laout de $ 4ilas $ columnaspa.nel1ridLaout.add(etiqueta);panel1ridLaout.add(boton);panel1ridLaout.add(boton#);panel1ridLaout.add(boton$);add(panel1ridLaout);...Ftro constructorpublic 1ridLaout(int rows- int columns- int ori5ontal1ap- int vertical1ap) // de4inetambien la separacion entre celdas- en pixels

o GridBagLayout

o

s el * mas comple-o potente%

o Permite definir celdas, pero de distinto tama>o

o Tambien se puede definir el comportamiento de las celdas al variar el tama>o de laventana 3ue los contiene (ver .rid&ag'onstraints)$ se mantiene su tama>o, utilizan elnuevo espacio disponible, etc%%%

o BorderLayout



o "e indica la posicion geografica! del componente$ norte, sur, este, oeste o centro%

%%%,anel panel&orderLaout ! new ,anel();panel&orderLaout.setLaout(new &orderLaout(G-G));

panel&orderLaout.add("enter"- etiqueta);panel&orderLaout.add("7ort"- boton);panel&orderLaout.add("East"- boton#);panel&orderLaout.add("'est"- boton$);panel&orderLaout.add("0out"- botonP);add(panel&orderLaout);...

o CardLayout

o sta clase se usa para #acer slide s#ow!, es decir una sucesion de tar-etas! en pantalla%

o os paneles se presentan uno cada vez!%

...,anel panelardLaout ! new ,anel();panelardLaout.setLaout(new ardLaout());panelardLaout.add("primero"- new &utton("&oton P"));panelardLaout.add("se2undo"- new &utton("&oton G"));panelardLaout.add("tercero"- new &utton("&oton "));panelardLaout.add("cuarto"- new &utton("&oton Q"));((ardLaout)panelardLaout.2etLaout()).sow(panelardLaout- "tercero"); //complicadillo...add(panelardLaout);

...etodos utilespublic void 4irst(ontainer parent)public void next(ontainer parent)public void previous(ontainer parent)public void last(ontainer parent)



o Sin LayoutManager

o Para #acer posicionamiento absoluto, se declara #ace$

setaout(null)

o 0nsets

o 8efinen un espacio de marco! del panel%

o "e pueden asignar anc#uras independientes a los G lados

%%%public 8nsets insets(){return new 8nsets(<-<-<-<); // < pixels en los P lados%...

HH

erfaz gráfica de usuario.docx

Documents

Transcript of erfaz gráfica de usuario.docx