Interfaces Gr á Fic as Usuarios

7/24/2019 Interfaces Gr Fic as Usuarios

1/40

01 PROGRAMACION ORIENTADA A OBJETOS I

01 PROGRAMACION ORIENTADA A OBJETOS I

rogramacin de interfacesrcas de usuarios


2/40

Unidad de Aprendizae N!"

Programacin de interfaces grcas de

usuarios

Aprendizae# E#perad$#Construye una interfaz grca de usuario para que resuelva un

problema

Construye casos de prueba utilizando el framework JUnit para

vericar el correcto funcionamientoevisa la codicacin de clases programadas en Java utilizando la

!erramienta de debugging del entorno de desarrollo paradetectar errores


3/40

O%e&i'$#

"escribir elementos de interfaces deusuario #wing

Utilizar J$rame y JPanel

Utilizar J%abel& J'utton& (e)t$ield&Password$ield& (e)t*rea& Combo'o)&C!eck'o)& adio'utton y 'utton+roup

Utilizar ,enu'ar& ,enu y ,enu-tem Programar eventos en los componentes

#olucionar un problema a trav.s de unainterfaz grca de usuario


4/40

/0u. es +U-1

GUI


5/40

+U-2 -nterfaz +rca de Usuario3#oftware que permite la interaccin entreel usuario y los servicios que proporcionael sistema operativo& utilizando para ello

una representacin grca intuitiva dealto nivel3

%a mayor4a de los +U-s de propsitogeneral siguen la llamada metfora deescritorio y utilizan un sistema deventanas3 Para la interaccin con elusuario disponen de un n5mero ms omenos grande de elementos2 botones&editores& etc3


6/40

%a programacin en un +U- determinadorequiere el uso de un toolkit 6o #"78 paraese +U-& en el lengua9e

de programacin que se quiera utilizar3

Puesto que Java pretende ser un lengua9emultiplataforma& el dise:o del toolkit paraprogramacin de +U-s se !izo pensandoen que las aplicaciones tuvieran un buenaspecto en cualquier plataforma peroindependiente de cualquier +U- espec4co3


7/40

(oolkit que permite crear interfacesgrcas en Java3

;s una evolucin del *


8/40

/cules son loselementos bsicos1


9/40

;lementos bsicos

ComponentesPermiten al usuario interactuar con la aplicacin yproporcionarle informacin sobre el estado de .sta2men5s& botones& barras de desplazamiento&

etiquetas& ca9as de te)to& listas de seleccin& 333

ContenedoresComponentes que contienen otros Componentes2

ventanas& frames& dilogos y paneles3 #irven paracontener y organizar otros componentes3


10/40


11/40

;l -"; =et'eans es una !erramienta paraprogramadores pensada para escribir&compilar& depurar y e9ecutar programas3 ;sun producto libre y gratuito sin restriccionesde uso3

IDE Ne&Bean#


12/40


13/40

Cmo creamos una aplicacin Swing?


14/40

Congurar el ContenedorJ$rame2 epresenta una ventana bsica&capaz de contener otros componentes3 Casi

todas las aplicaciones construyen al menosun J$rame3

Atributos Importantes

defaultClose>peration2;?-(@>=@C%>#;2(ermina la aplicacin&usando #ystem3e)it6A83title2 ,odica el t4tulo de la ventana3


15/40

JPanel2 Un panel sirve para agrupar yorganizar otros componentes3 Puede estardecorado mediante un borde y una etiqueta3


16/40

*:adir Componentes a los Contenedores%as interfaces grcas de usuario seconstruyen con componentes& cada uno de

los cuales est preparado para responder adistintos tipos de eventos3BJ%abel2 etiqueta para mostrar te)to3BJ(e)t'o) y J(e)t*rea2 ca9as de te)to para la entrada dedatos3BJ'utton2 botn3

BJC!eck'o)2 ca9a de comprobacin& para elegir opciones3BJadio'utton2 para elegir opciones mutuamentee)cluyentes3BJCombo'o)2 %ista desplegable de opciones3BJ,enu'ar& J,enu& J,enu-tem2 barras de men53

BJ>ptionPane2 entanas de dilogo3


17/40

,ane9ando ;ventosCada vez que el usuario pulsa una tecla& unbotn& mueve el mouse& etc3 se produce un

evento3 ;s posible noticar los eventos paraque el programa act5e en consecuencia3Para ello& se crean unos ob9etos llamadosDlistenersE que capturan el evento realizado3


18/40


19/40

Componentes

J%abelCon la clase J%abel& se puede mostrar te)to no seleccionablee imgenes3 #i necesitamos crear un componente quemuestre un sencillo te)to o una imagen& podemos !acerlo

utilizando un e9emplar de J%abel3

Pre*$+ lblA&ri%,&$# I-p$r&an&e#+ te)t2 Permite modicar el te)to de la etiquetaM.&$d$# I-p$r&an&e#+

set(e)t6#tring82 Cambia el te)to de la etiquetaget(e)t682 >btiene el te)to de la etiquetasetisible6boolean82 Cambia el estado visibleFinvisibleset;nabled6boolean82 Cambia el estado

!abilitadoFdes!abilitado


20/40

J'utton;s el botn3 Puede recibir eventos 6click del botn83

Pre*$+ btn

A&ri%,&$# I-p$r&an&e#+ te)t2 Permite modicar el te)to del botnM.&$d$# I-p$r&an&e#+

set(e)t6#tring82 Cambia el te)to del botn

get(e)t682 >btiene el te)to del botnsetisible6boolean82 Cambia el estado visibleFinvisibleset;nabled6boolean82 Cambia el estado

!abilitadoFdes!abilitadodoClick682 ;9ecuta el *ction%istener6click8 asociado al

botn


21/40

Ejemplo: HOLA MUNDOComponentes2G J%abelH J'utton

;laboracin2Una vez agregados los componentes al J$rame& manipule elatributo font de los J%abel para cambiar su apariencia y el

atributo te)t para cambiar su contenido3 ;l atributo icon delJ%abel permite incluir imgenes en el ob9eto3 Programe en el*ction%istener del botn lo necesario para que la aplicacin setermine3


22/40

Ejemplo: CLCS DEL !O"#NComponentes2H J%abelI J'utton

;laboracin2Una vez agregados los componentes al J$rame& manipule elatributo te)t de los botones y la etiqueta para que tengan la

apariencia del e9emplo3 Programe los *ction%istener de losbotones para que al !acer clic en el botn DClick,eE seincremente el valor escrito en la etiqueta3 ;n el botn #alir&programe lo necesario para que la aplicacin se termine3


23/40

J(e)t$ield y JPassword$ieldUn campo de te)to es un control bsico que permite alusuario teclear una peque:a cantidad de te)to y dispara unevento action cuando el usuario indique que la entrada de

te)to se !a completado 6normalmente pulsandoreturn6enter883 #i necesitamos proporcionar un passwordeldKun campo de te)to editable que no muestra los caracterestecleados por el usuarioLutilizaremos la clase JPassword$ield3

Pre*$+ t)tA&ri%,&$# I-p$r&an&e#+ te)t2 Permite modicar el te)to del campo de te)to


24/40

M.&$d$# I-p$r&an&e#+set(e)t6#tring82 Cambia el te)to del campo de te)to

get(e)t682 >btiene el te)to escrito en el camposetisible6boolean82 Cambia el estado visibleFinvisibleset;nabled6boolean82 Cambia el estado


JTe/&ied JPa##$rdied


25/40

Ejemplo: HOLA "U$Componentes2I J%abelI J'utton

H J(e)t$ield

;laboracin2Una vez agregados los componentes al J$rame& manipule elatributo te)t de los botones y las etiquetas para que tengan la

apariencia del e9emplo3 Programe los *ction%istener de losbotones para que al !acer clic en el botn D>7E aparezca elmensa9e en la etiqueta3 ;n el botn #alir& programe lo necesariopara que la aplicacin se termine3


26/40

Ejemplo: NCA% SES#NComponentes2M J%abelH J'utton

H J(e)t$ieldH JPassword$ield

;laboracin2Una vez agregados los componentes al J$rame& manipule el

atributo te)t de los botones y las etiquetas para que tengan laapariencia del e9emplo3 Programe el *ction%istener del botnpara que al !acer clic en el botn D;ntrarE aparezca el mensa9een la etiqueta si los datos de %ogin no son correctos& de locontrario& escriba en la etiqueta -nicio de #esin e)itoso3


27/40

Ejemplo: CON&E%SO% DE D&SASComponentes2I JlabelI J'utton

H J(e)t$ield

;laboracin2Una vez agregados los componentes al J$rame& manipule elatributo te)t de los botones y las etiquetas para que tengan la

apariencia del e9emplo3 Programe el *ction%istener de losbotones para que al !acer clic en el botn DConvertirE aparezcaen la etiqueta el correspondiente de los dlares ingresados enpesos3 Programe el botn D#alirE para que termine la aplicacin3


28/40

J(e)t*reaUn (e)t*rea es un componente bsico del #wing de Java y sufuncin principal es la de capturar te)to ingresado por elteclado3 #u funcionamiento es id.ntico a J(e)t$ield& con ladiferencia que tiene la propiedad de ser multil4nea3

Pre*$+ t)aA&ri%,&$# I-p$r&an&e#+ te)t2 Permite modicar el te)to del rea de te)toM.&$d$# I-p$r&an&e#+

set(e)t6#tring82 Cambia el te)to del rea de te)toget(e)t682 >btiene el te)to escrito en el te)tareasetisible6boolean82 Cambia el estado visibleFinvisibleset;nabled6boolean82 Cambia el estado



29/40

Ejemplo: CHA" %OOMComponentes2H J'uttonH J(e)t$ield

H J(e)t*rea

;laboracin2Una vez agregados los componentes al J$rame& manipule elatributo te)t de los botones y los campos de te)to para que

tengan la apariencia del e9emplo3 Programe el *ction%istener delbotn para que al !acer clic en .l se traspase lo escrito en elte)t$ield !acia el te)t*rea3Utilizando el m.todo doClick68 del botn& programe un listener enel J(e)t$ield para suceda lo mismo al presionar enter3


30/40

Combo'o)=os permite denir un con9unto de datos o valores asociados auna ca9a de seleccin& as4 a!ora el usuario tendr la oportunidadde seleccionar un dato del con9unto de datos o respuestas yapredenido3

3

Pre*$+ cboA&ri%,&$# I-p$r&an&e#+ model2 Permite ingresar la lista de datosM.&$d$# I-p$r&an&e#+

get#elected-nde)682 >btiene la posicin del dato seleccionadoget#elected-tem682 >btiene el dato seleccionadoset#elected-nde)6int82 #elecciona el dato de la posicin por

parmetroset#elected-tem6>b9ect82 #elecciona el dato por parmetro


31/40

Ejemplo: CALCULO DE NO"AS

;laboracin2Una vez agregados los componentes al J$rame& manipule elatributo te)t de los botones y los campos de te)to para que

tengan la apariencia del e9emplo3 Programe lo necesario paraque la aplicacin calcule la nota de presentacin de la asignaturaseleccionada en el combobo)3


32/40

C!eck'o)#e utilizan frecuentemente como botones de estado3 Proporcionaninformacin del tipo #4 o =o 6true o false83 ;l argumento es de tipobooleano2 verdadero 6true8 si la ca9a se !a seleccionado y falso6false8 en otro caso3

Pre*$+ c!kA&ri%,&$# I-p$r&an&e#+ selected2 Permite marcar el ob9eto por defectoM.&$d$# I-p$r&an&e#+

get(e)t682 >btiene el te)to del ob9eto is#elected682 devuelve true si el ob9eto se encuentra

seleccionado& falso

en caso contrarioset#elected6boolean82 permite seleccionar un ob9eto


33/40

adio'utton;s un elemento de formulario que permite seleccionar una opciny slo una& sobre un con9unto de posibilidades3

Pre*$+ optA&ri%,&$# I-p$r&an&e#+ selected2 Permite marcar el ob9eto por defecto

'utton+roup2 asocia el ob9eto a un grupo

M.&$d$# I-p$r&an&e#+get(e)t682 >btiene el te)to del ob9eto is#elected682 devuelve true si el ob9eto se encuentra

seleccionado& falsoen caso contrario

set#elected6boolean82 permite seleccionar un ob9eto


34/40

E'en&$#

Comunes a todos los componentes2

$ocus%istener2 captura eventos relacionados con la

recepcin 6focus+ained8 o p.rdida del foco6focus%ost837ey%istener2 captura pulsaciones de teclado sobre elcomponente activo3

,ouse%istener2 captura la entrada o salida del cursorsobre un componente& as4 como pulsaciones de losbotones3,ouse,otion%istener2 captura movimientos del ratnsobre el componente3


35/40

;spec4cos de algunos componentes2

*ction%istener2 captura cierto tipo de accin

realizada sobre ciertos componente3 Por e9emplo&pulsar un botn& seleccionar un elemento en una listadesplegable o una opcin en un men53-tem%istener2 recoge el cambio de estado en uncomponente tipo onFoN2 c!eckbo)es& radiobuttons y

listas desplegables3


36/40


37/40

Men


38/40

#i se quiere agregar una nueva opcin de,en5 debemos arrastrar un ,enu-tem !aciaun ,en52


39/40

%uego& se activa el evento del ,enu-tem2

Por defecto un J$rame se crea de formainvisible& as4 que es necesario activar suvisualizacin mediante la operacinsetisible683


40/40

#e describi elementos de interfaces deusuario #wing

#e utiliz J$rame y JPanel

#e utiliz J%abel& J'utton& (e)t$ield&Password$ield& (e)t*rea& Combo'o)&C!eck'o)& adio'utton y 'utton+roup

#e utiliz ,enu'ar& ,enu y ,enu-tem

#e program eventos en los componentes #e solucion un problema a trav.s de una

interfaz grca de usuario

Re#,-en

Interfaces Gr á Fic as Usuarios

Documents

Transcript of Interfaces Gr á Fic as Usuarios