Unidad 2. Componentes Graficos

Programacin orientada a objetos II Unidad 2. Componentes grficos

Ciencias Exactas, Ingeniera y Tecnologa | Desarrollo de Software 1

Ingeniera en Desarrollo de Software

4o semestre

Programa de la asignatura:

Programacin orientada a objetos II

Unidad 2. Componentes grficos

Clave:

Ingeniera:

15142421

TSU:

/ 16142421

Universidad Abierta y a Distancia de Mxico



ndice

Unidad 2. Componentes grficos ....................................................................................... 3

Presentacin de la Unidad ................................................................................................. 3

Propsito ........................................................................................................................... 3

Competencia especfica ..................................................................................................... 4

2.1. Contenedores ............................................................................................................. 4

2.1.1. Paneles .................................................................................................................... 5

2.1.2. Marco ....................................................................................................................... 6

2.2. Controles .................................................................................................................. 12

2.2.1. Etiqueta.................................................................................................................. 12

2.2.2. Botones.................................................................................................................. 14

2.2.3. Casilla de activacin .............................................................................................. 17

2.2.4. Lista desplegable ................................................................................................... 19

2.2.5. Campo de texto ...................................................................................................... 21

2.2.6. rea de texto ......................................................................................................... 24

2.2.7. Separador .............................................................................................................. 26

2.2.8. Spinner .................................................................................................................. 28

2.2.9. rbol ...................................................................................................................... 30

2.3. Men ......................................................................................................................... 41

2.3.1. Barra de men ....................................................................................................... 41

2.3.2. Elemento de men ................................................................................................. 43

2.3.3. Men emergente .................................................................................................... 45

2.3.4. Separador .............................................................................................................. 47

2.4. Ventanas .................................................................................................................. 48

2.4.1. Cuadros de dilogo ................................................................................................ 48

2.4.2. Ventanas independientes y sus cambios ............................................................... 52

Cierre de la Unidad .......................................................................................................... 53

Cara saber ms ............................................................................................................... 54

Fuentes de consulta ........................................................................................................ 55



Unidad 2. Componentes grficos

Presentacin de la Unidad

Bienvenido(a) a la unidad dos, en donde examinars los componentes que se utilizan

para crear aplicaciones grficas funcionales. Estos componentes son de suma

importancia debido a que son la base para desarrollar sistemas complejos al conectarlos

con bases de datos y permitir el almacenaje de informacin, que es el tema que se ver

en la siguiente unidad.

Por lo tanto, en esta unidad debers poner atencin a la sintaxis del uso de los

componentes grficos, porque te ayudar a comprender mejor cmo se construyen las

interfaces grficas.

No olvides consultar las dudas que te surjan con tu Docente en lnea para una mejor

comprensin de los temas y dar continuidad a tu estudio de POO2.

Propsito

Al trmino de esta unidad logrars:

Identificar diferentes tipos de componentes grficos

y su codificacin.

Comprender la sintaxis de creacin de diferentes

componentes grficos, as como la manipulacin de

sus propiedades.

Unir diferentes componentes grficos en una sola

clase para crear interfaces grficas.

Crear programas con interfaz grfica y manipularlos

mediante eventos



Competencia especfica

Utilizar las clases y estructuras de los

componentes grficos para crear

aplicaciones con interfaces grficas,

mediante el lenguaje de programacin Java.

2.1. Contenedores

Las aplicaciones ms utilizadas cuentan con interfaz GUI (siglas en ingls) que en

espaol significa interfaz grfica de usuario; esta interfaz es la carta de presentacin de la

aplicacin, que ofrece al usuario una interaccin; esa apariencia debe programarse

mediante componentes grficos. Para tener una idea ms clara al respecto, tan slo

observa el navegador en el que te encuentras revisando este material, en el podrs

distinguir que en la parte superior cuenta con un men, que tambin tiene algunos

botones, seguramente tambin cuenta con un espacio para escribir texto, estos elementos

que se acaban de mencionar son justamente componentes grficos.

Todos los componentes grficos son objetos y para declararlos como tales se debe

sealar la clase a la que pertenece el componente en cuestin e ir utilizando los mtodos

que tienen predefinidos para configurar sus caractersticas. Todos esos elementos se

encuentran en el paquete javax.swing (algunos pertenecen a java.awt) y son subclase de

JComponent, por esta razn se deber importar dicha clase. Una clase es una

abstraccin que define un tipo de objeto especificando qu propiedades y operaciones

disponibles va a tener.

Finalmente, slo falta mencionar que los contenedores son supracomponentes grficos

que, precisamente como su nombre lo indica, ayudan a contener agrupar y organizar

otros componentes grficos dentro de ellos, esto se hace para tener un mejor control

sobre la ubicacin de dichos componentes en la interfaz grfica que se est

construyendo.

En los siguientes subtemas, Paneles y Marco, se revisar cmo crear contenedores,

as como sus caractersticas y propiedades configurables.



2.1.1. Paneles

El primer tipo de contenedores que se revisa son los paneles, stos ayudan a definir

secciones dentro de una interfaz grfica.

Los paneles son secciones que pueden configurarse en diferentes tamaos, colores,

mrgenes, etctera; sirven para segmentar la apariencia grfica de una aplicacin, porque

pueden crear divisiones en la GUI.

Las propiedades de los paneles son muy diversas, pero entre las que ms destacan son

los bordes y color de fondo, debido a que son estas caractersticas las que ayudan a

segmentar una aplicacin.

En seguida podrs observar un ejemplo que muestra la sintaxis para construir paneles y

su uso.

Observa el siguiente ejemplo de cdigo 1:

Ejemplo de cdigo 1. Declaracin de un panel

package GUI;

import java.awt.BorderLayout;

import java.awt.Color;

import java.awt.event.WindowAdapter;

import java.awt.event.WindowEvent;

import javax.swing.*;

/**

* @author ESAD

*/

public class panel {

public static void main (String args[]){

JFrame frame=new JFrame("Marco / Frame");

frame.setLocation(200, 200);

frame.setVisible(true);

frame.setSize(500, 500);

frame.addWindowListener(new WindowAdapter() {

@Override

public void windowClosing(WindowEvent e){



System.exit(0);

}

});

JPanelpnl = new javax.swing.JPanel();

pnl.setBackground(Color.CYAN);

JPanel pnl2 = new javax.swing.JPanel();

pnl2.setBackground(Color.MAGENTA);

pnl2.setBorder(javax.swing.BorderFactory.createTitledBorder("Borde con titulo"));

JPanel pnl3 = new javax.swing.JPanel();

pnl3.setBackground(Color.ORANGE);

frame.add(pnl, BorderLayout.PAGE_START);

frame.add(pnl2, BorderLayout.CENTER);

frame.add(pnl3, BorderLayout.PAGE_END);

}

}

A continuacin se explicar el cdigo anterior.

En azul aparece la definicin del paquete donde se encuentra la clase y la

importacin de bibliotecas, recuerda que esto es importante, ya que al agregar

bibliotecas se indica que se usarn clases y mtodos predefinidos, tambin se

encuentra la declaracin de la clase y el mtodo main, as como el cierre de las

llaves correspondientes.

La seccin verde declara el marco sobre el que se mostrar el panel.

La seccin morada declara tres paneles; observa que se declaran como cualquier

objeto clasenombre=new constructor(parametros); a cada uno se le dio un color de

fondo diferente, y uno de ellos adems cuenta con un borde.

Por ltimo en la seccin roja se agregan los panales al marco.

Como pudiste observar, se habl del marco (la ventana) que es el contenedor principal,

donde se encontrarn los paneles, el siguiente tema ayudar a comprender tanto la

definicin de un marco como su respectivo ejemplo.

2.1.2. Marco

En el tema anterior se vieron los paneles, que deben ubicarse dentro de marcos, los

cuales son comnmente llamados frames, tal como el nombre de la clase los define

(JFrame). Los marcos son los contenedores principales para crear aplicaciones grficas,

ya que cualquier otro componente grfico que se cree, debe estar dentro de un marco.



Nota: el marco es la ventana sobre la que se construye la apariencia grfica de un

programa.

Vase el siguiente ejemplo de cdigo 2, donde:

Se sombrea en azul la definicin del paquete, clase utilizada, autor, as como la

declaracin de la clase y el mtodo.

En sombreado morado se coloca el cdigo para declarar el marco, que como se

ha dicho anteriormente, los componentes grficos son objetos y se declaran como

tal con la palabra reservada new, el constructor para crear marcos recibe como

parmetro el ttulo que tendr el marco. Una vez declarado el marco que se ha

llamado frame, se configuran sus atributos mediante mtodos que ya se

encuentran previamente definidos en la clase JFrame. En este caso se

configuraron tres atributos:

o setLocation: recibe como parmetro dos enteros que son las coordenadas

x, y (en pixeles), para indicar dnde se ubicar el marco, respecto al ancho

y alto de la pantalla, toma en cuenta que la posicin 0,0 es la esquina

superior izquierda.

o setVisible: recibe como parmetro un valor booleano, en este caso true

para indicar que el marco debe ser visible.

o setSize: este mtodo recibe dos valores enteros que indican el ancho y alto

del marco, en este mismo orden.

Ejemplo de cdigo 2. Declaracin de un marco

package GUI;

import javax.swing.JFrame;

/**

* @author ESAD

*/

public class marco {






}

}

Ahora que ya identificaste las partes del cdigo 2 de declaracin de un marco, ste

generar una salida, como la que se muestra en la siguiente imagen, de la cual se

recomienda cambiar el tamao y posicin del marco y volver a ejecutar el cdigo para ir

comprendiendo mejor sus propiedades.



Salida de pantalla del marco

Una vez definido el marco para agregar elementos dentro de ste, se utiliza el mtodo

add, y un administrador de diseo llamado layout, esto permite acomodar en algn orden

todos los componentes que se agreguen al marco.

Como ya se mencion anteriormente para construir interfaces grficas se utilizan clases

ya predefinidas; las bibliotecas de clases Java para el desarrollo de interfaces grficas de

usuario son Swing y AWT, stas proporcionan los siguientes administradores de diseo

para el acomodo de componentes (Oracle, 2012):

BorderLayout: esta distribucin acomoda los componentes en mximo 5

ubicaciones del frame, stas son: arriba (PAGE_START), abajo (PAGE_END),

izquierda (PAGE_START),derecha (PAGE_END) y centro (PAGE_CENTER), tal

como se muestra en la siguiente imagen:



BoxLayout: esta distribucin acomoda todos los componentes uno tras de otro en

una sola fila o columna, segn el espacio disponible, en la siguiente imagen se

puede observar un ejemplo.

CardLayout: permite implementar un rea que contiene diferentes componentes en

diferentes momentos, observa el siguiente ejemplo:



FlowLayout: esta distribucin coloca los elementos por filas, de izquierda a

derecha, hasta acabar con el espacio, entonces crea una nueva fila debajo, como

se muestra a continuacin:

GridLayout: esta distribucin acomoda los componentes en filas y columnas,

ajusta los elementos a que tengan un tamao similar, como se ve en la siguiente

imagen:

GridBagLayout: alinea los elementos en filas y columnas, como el anterior, pero

con la diferencia de que permite que un componente cubra varias filas y/o

columnas, a continuacin se presenta un ejemplo en la siguiente imagen:



GroupLayout: maneja un diseo de los elementos verticales y horizontales de

manera separada, por lo que cada una cuenta con una configuracin

independiente, tal como se ver continuacin:

SpringLayout: esta distribucin permite definir la relacin de espacio entre los

componentes y sus bordes, como se muestra en el siguiente ejemplo.



De forma predeterminada cada contenedor tiene asignado un diseo del tipo

BorderLayOut, tambin se puede dejar a un frame sin administrador de estilo, de manera

que los elementos que se agreguen se posicionen en base a coordenadas.

Hasta este punto se han visto a los contenedores (paneles y marcos), as como las

distribuciones (layout) para el acomodo de componentes dentro de los contenedores. En

los temas siguientes se revisarn los dems componentes grficos.

2.2. Controles

En los siguientes apartados se hablar sobre el tema controles, con ello se pueden crear

apariencias grficas ms sofisticadas para los programas que se realicen.

Como resumen del apartado anterior, se vieron contenedores, que son donde se colocan

los componentes. En este segundo subtema se vern esos componentes grficos, ya que

son aquellos elementos que ayudan a conformar la apariencia de una aplicacin.

2.2.1. Etiqueta

El primer componente de los controles que se abordar es uno de los ms utilizados para

colocar textos en la apariencia grfica de una aplicacin, sin que se requiera modificarlos.

Por lo general este componente es utilizado para el nombrado de campos.



Al igual que todos los componentes las etiquetas tienen una gran cantidad de

propiedades, entre las ms comnmente utilizadas se encuentra la tipografa de la fuente,

as como el color.

Como ejemplo de la creacin de etiquetas, revisa el siguiente cdigo 3, en donde se

representa el uso de sus propiedades:

Ejemplo de cdigo 3. Declaracin y uso de etiquetas

package GUI;





importjavax.swing.*;

/**

* @author ESAD

*/

public class etiquetas {







@Override


System.exit(0);

}

});

JLabel etiq1= new javax.swing.JLabel();

etiq1.setText("Ejemplo1");

etiq1.setFont(new java.awt.Font("Calibri", 1, 11));





etiq2.setForeground(Color.yellow);



etiq3.setVisible(false);

frame.add(etiq1, BorderLayout.PAGE_START);

frame.add(etiq2, BorderLayout.CENTER);

frame.add(etiq3, BorderLayout.PAGE_END);

}

}

El ejemplo anterior se encuentra conformado de la siguiente manera:

Se sombrea en azul la definicin del paquete, clases a utilizar, autor, as como la


En sombreado verde se tiene la creacin del marco sobre el que se colocarn las

etiquetas.

En sombreado morado se tienen las etiquetas, en este ejemplo se crearon tres

etiquetas, a las que se les coloc un texto (setText) y diferentes propiedades a

cada una, de las cuales:

o En la primera etiqueta se configur el tipo de letra; si no se define una letra

las etiquetas tienen por defecto la letra Dialog. Para configurar la letra se

deben enviar como parmetro el tipo de letra, el estilo deseado y el

tamao.

o En la segunda etiqueta se configur su color de letra.

o La tercera etiqueta se coloc su visibilidad en falso, por lo que existe pero

en la apariencia grfica no se ve.

En sombreado rojo se tiene la adicin de las etiquetas al marco.

Como has visto las etiquetas pueden configurarse para que personalices su apariencia y

tambin puedes investigar sobre otras propiedades para que puedas ver cmo funcionan

al ejecutar el programa. Se te invita a continuar con el siguiente tema, para que sigas

involucrndote con el manejo de componentes grficos.

2.2.2. Botones

El tema que se tratar en este apartado es el de botones. En este se abordar cmo se

construyen y se manipulan sus propiedades, para que puedas ir construyendo interfaces

grficas con la funcionalidad (manejo de eventos) que los botones proporcionan.



Estos componentes son tpicamente utilizados para recibir eventos y desencadenar el

funcionamiento de las aplicaciones. Por lo general el texto que tienen los botones indica la

accin que desencadenar.

Revise el siguiente ejemplo, donde se podr observar la creacin de botones, as como la

personalizacin de sus propiedades:



En sombreado verde se tiene la creacin del marco sobre el que se colocarn las

etiquetas.

En sombreado morado se tienen los botones, en donde veras que:

o El primer botn configura la propiedad setMnemonic, que indica la letra con

la que se podr colocar el foco en ese elemento. Realizando alt+b (el

mnemnico especificado).

o El segundo botn configura el color de la letra.

o Y el tercer botn slo tiene agregado un texto.

En sombreado rojo se tiene la adicin de los botones al marco.

Ejemplo de cdigo 4. Declaracin y uso de botones

package GUI;






/**

* @author ESAD

*/

public class marco {







@Override




System.exit(0);

}

});

JButtonbtn = new javax.swing.JButton();

btn.setText("Boton1");

btn.setMnemonic('B');

JButton btn2 = new javax.swing.JButton();

btn2.setText("Boton2");

btn2.setBackground(Color.red);

JButton btn3 = new javax.swing.JButton();

btn3.setText("Boton3");

frame.add(btn, BorderLayout.LINE_START);

frame.add(btn2, BorderLayout.CENTER);

frame.add(btn3, BorderLayout.LINE_END);

}

}

Lo importante de los botones es que son el

componente para el manejo de los eventos ms

utilizado, por este motivo, siempre que se crea

un botn se debe tener asociado el manejo del

evento que desencadenar la ejecucin de la

accin que deba realizar la aplicacin.

Antes de continuar con el siguiente componente

(casilla de activacin) es importante que

recuerdes que en los botones debes hacer el

manejo de eventos, para que estos botones

redireccionen el flujo del programa hacia el

mtodo que tratar la informacin, y as el

programa funcione como se requiere.



2.2.3. Casilla de activacin

En las ocasiones en que requieres permitir que

un usuario realice selecciones mltiples de una

o varias opciones de un conjunto de opciones

dado, es til recurrir a las casillas de activacin.

Las casillas de activacin son componentes

grficos utilizados para realizar selecciones

mltiples, cada casilla puede tomar slo dos

valores; Verdadero o Falso, es decir, slo se

sabr si se activ o no.

Para comprender mejor lo dicho observa el

siguiente ejemplo de cdigo 5 donde:



Sombreado verde se tiene la creacin del marco sobre el que se colocarn las

etiquetas.

Sombreado morado se tienen las casillas de activacin, en el que observars que:

o La primer casilla slo tiene configurado el texto con el que aparecer.

o La segunda casilla tiene su propiedad de seleccionado en activado

(setSelected(true); ), por lo que aparecer la casilla activa al ejecutar el

cdigo. Recuerda stos componentes slo pueden tener dos valores

Verdadero/ Falso (True/False).

o La tercera casilla tiene un texto y se configuro de manera que ste se vea

en rojo.

En sombreado rojo se tiene la adicin de las casillas de activacin al marco.

Ejemplo de cdigo 5. Declaracin y uso de casillas de activacin

package GUI;






/**

* @author ESAD

*/



public class casilla {







@Override


System.exit(0);

}

});

JCheckBox check1 = new javax.swing.JCheckBox();

check1.setText("Chek1");



check2.setSelected(true);



check3.setForeground(Color.red);

frame.add(check1, BorderLayout.NORTH);

frame.add(check2, BorderLayout.SOUTH);

frame.add(check3, BorderLayout.CENTER);

}

}

El uso de las casillas de activacin como en el ejemplo anterior requiere que, al estar

codificando un programa, se detecte si la casilla ha sido activada, esto se hace mediante

un mtodo de la clase JCheckBox, el cual se muestra a continuacin:

Ejemplo de cdigo 6. Deteccin de activacin de casilla

casilla.isSelected();



Este mtodo retornar un valor booleano, para saber si se activ (true) o no (false), por lo

general este resultado suele acompaarse de una condicin (if) para indicar que deber

realizar en programa en cada caso.

Por ltimo, slo recuerda que si quieres que los usuarios realicen elecciones sobre

mltiples opciones, debes utilizar casillas de activacin, en el caso que slo quieres que

elijan un valor, utiliza listas desplegables, que es el siguiente subtema.

2.2.4. Lista desplegable

En las ocasiones en que requieres que un usuario

introduzca informacin a un programa, pero esta

informacin ya est predefinida, como los nombres

de los estados, y quieres evitar errores de tecleo

por parte de los usuarios es recomendable que

utilices el componente grfico lista desplegable.

Este componente es precisamente una lista de

opciones, de las cuales el usuario slo podr elegir

una opcin.

Las listas desplegables ofrecen al usuario varias

opciones de eleccin para un mismo concepto,

pudiendo elegir slo uno de ellos.

Revisa el siguiente ejemplo de cdigo 7, donde se

crea una lista desplegable:



En sombreado verde se tiene la creacin del marco sobre el que se colocar la

lista.

En sombreado morado se tiene el ejemplo, donde se cre la lista y se le aadi un

modelo, indicando lo que debe estar visible, como:

o El modelo que es la configuracin de los elementos que deben estar dentro

de la lista.

o Si no se agregan las opciones al modelo, stas no pueden agregarse

directamente a la lista, porque la lista slo recibe modelos.

En sombreado rojo se tiene la adicin de la lista al marco.



Ejemplo de cdigo 7. Declaracin y uso de lista desplegable

package GUI;




/**

* @author ESAD

*/

public class lista {







@Override


System.exit(0);

}

});

JComboBox lista1= new javax.swing.JComboBox();

lista1.setModel(new javax.swing.DefaultComboBoxModel(new String[] { "UNO", "DOS",

"TRES" }));

lista1.setVisible(true);

frame.add(lista1);

}

}

Para conocer que elemento de la lista es el que se ha elegido, la clase JComboBox

cuenta con dos opciones, que se muestran a continuacin:

Ejemplo de cdigo 8. Deteccin del elemento seleccionado

lista.getSelectedItem().toString();

lista.getSelectedIndex();



La primer opcin es obteniendo el elemento (item), el cual es seleccionado y convertido a

cadena (String). La conversin es necesaria debido a que el mtodo getSelectedItem()

retorna un valor tipo objeto, y por lo general lo que se requiere es el texto elegido, por ello

se hace la conversin toString().

La segunda opcin es que devuelva el ndice del elemento elegido, es decir el orden en

que est en la lista, y no el texto que aparece, este mtodo devuelve entonces un entero.

Toma en cuenta que si quieres que el usuario slo elija de una lista predefinida, lo ms

conveniente es que utilices el componente grfico lista desplegable. Pero si quieres que el

usuario sea quien ingrese la informacin directamente, puedes utilizar campos de texto,

que es el siguiente tema.

2.2.5. Campo de texto

Los campos de texto son uno de los componentes grficos ms utilizados para la creacin

de los GUI, los elementos que se han visto anteriormente requieren de trabajo para su

configuracin y obtencin de datos, pero en particular los campos de texto deben tambin

contar con algn tipo de validacin de la informacin que se est recibiendo.

Los contenedores cuentan con componentes, las

etiquetas sirven para colocar textos inamovibles

en la GUI, los botones reciben eventos, las

casillas de activacin se activan o no, las listas

desplegables tiene algn elemento de la lista

elegido, pero el campo de texto proporciona

libertad al usuario de ingresar informacin

como l lo requiera, ya sea correcta o no, por ello

es muy importante realizar alguna validacin a

los datos ingresados mediante este componente.

Primero se revisar el siguiente ejemplo de cdigo 9, se describe la implementacin de

cajas de texto:

Se sombrea en azul la definicin del paquete, clases a utilizar, el autor, as como

la declaracin de la clase y el mtodo.

En sombreado verde se tiene la creacin del marco en el que se colocarn los

campos de texto.

En sombreado morado se tiene la declaracin de dos campos de texto, al primero

slo se le agrega un texto, y al segundo se le configura el tipo de letra y color.

En sombreado rojo se tiene la adicin del campo de texto al marco.



Ejemplo de cdigo 9. Declaracin y uso de campo de texto

package GUI;





/**

* @author ESAD

*/

public class campoTexto {







@Override


System.exit(0);

}

});

JTextField campo1=new JTextField();

campo1.setText("Caja de texto 1");

JTextField campo2=new JTextField();

campo2.setText("Caja de texto 2");

campo2.setFont(new java.awt.Font("Tunga", 1, 24));

campo2.setForeground(new java.awt.Color(255, 51, 51));

frame.add(campo1, BorderLayout.LINE_START);

frame.add(campo2, BorderLayout.LINE_END);

}

}

El ejemplo anterior muestra slo la configuracin de los campos de texto. Ahora se

revisar cmo obtener lo que el usuario haya ingresado y tambin como validarlo.



Es importante resaltar que el campo de texto tiene dentro una cadena, porque as est

estipulado en su definicin. Revisa los siguientes tres ejemplos:

-En el ejemplo 1, sombreado azul, se debe pensar que se requiere obtener un texto del

usuario, entonces se declara una cadena, donde se colocar lo que se obtuvo del campo

de texto (getText()).

-En el ejemplo 2, sombreado morado, se debe pensar que lo que debe ingresar el usuario

es un nmero entero, entonces se declara un entero, se obtiene el texto y se convierte en

entero (Integer.parseInt).

-En el ejemplo 3, sombreado verde, se debe pensar que se requiere que lo que ingrese el

usuario sea un texto de 10 letras; se obtiene lo que el usuario ingreso (getText().), a eso

se le obtiene el tamao (length()) y se valida que ese tamao sea igual a 10.

Ejemplo de cdigo 10. Declaracin y uso de campo de texto

String texto=campoTexto1.getText();

intentrada= Integer.parseInt(campoTexto2.getText());

if (campoTexto3.getText().length() == 10){

// cdigo si la condicion cumple

}

As como esos tres ejemplos pueden darse muchos otros, todo depende de lo que se

requiera del programa, por lo que se debe poner mucha atencin en lo que se necesita

para poder programarlo adecuadamente. Los campos de texto como has visto reciben

informacin del usuario, de la cual, tpicamente reciben informacin breve, para las

ocasiones en que requieres mostrar o recibir una cantidad mayor de informacin debes

utilizar otro componente llamado rea de texto, el cual ser revisado en la siguiente

seccin.



2.2.6. rea de texto

Este componente es muy similar al anterior,

la diferencia radica en que un campo de texto

se utiliza para la recepcin de textos

pequeos, es decir de una sola lnea.

Mientras que el rea de texto puede recibir

varias lneas de texto y obviamente se utiliza

para la recepcin de textos grandes.

Es importante que se comprenda el siguiente ejemplo de cdigo 11, en donde:



En sombreado verde se tiene la creacin del marco sobre el que se colocar el

rea de texto.

En sombreado morado se tienen dos reas de texto, en donde la primera tiene

configurado un tamao de 20 columnas, es decir que todo el texto que se escriba

se acomodar a ese ancho, la segunda rea tiene un pequeo texto y se dej su

propiedad de edicin en falso, lo que indica que el texto ah no se puede editar,

esto es til para cuando se quiere mostrar un texto de informacin al usuario sin

brindarle la posibilidad de modificarlo.

En sombreado rojo se tiene la adicin del rea de texto al marco.

Ejemplo de cdigo 11. Declaracin y uso de rea de texto

package GUI;





/**

* @author ESAD

*/

public class areaTexto {









@Override


System.exit(0);

}

});

JTextArea area1= new JTextArea();

area1.setColumns(10);

area1.setText("Area de texto 1");

JTextArea area2= new JTextArea();

area2.setColumns(20);

area2.setText("Area de texto 2");

area2.setEditable(false);

frame.add(area1, BorderLayout.LINE_START);

frame.add(area2, BorderLayout.LINE_END);

}

}

En el ejemplo anterior para obtener el texto introducido por un usuario tambin se usa el

mtodo getText(), tal como en el campo de texto, y el texto obtenido se tendr en una

cadena.

Por ltimo, se debe tomar en cuenta que las reas de texto slo se utilizan cuando se

requiere recibir o mostrar una gran cantidad de informacin, si no se requiere esto, mejor

utiliza los campos de texto que se revisaron en el apartado anterior y ahorra espacio en tu

interfaz.

Uno de los elementos que ayudan a ordenar las interfaces son los separadores, porque

stos ayudan a dividir la apariencia de la interfaz del programa, estos componentes

podrs revisarlos en el siguiente apartado.



2.2.7. Separador

Para mantener una apariencia grfica

ordenada, comnmente se utilizan

secciones en la interfaz, para tener as

tambin ordenados los componentes

grficos con que se cree sta. Una de

las formas de hacer esta accin es

mediante paneles, y otra manera es

utilizar separadores, que son

componentes grficos que ayudan en la

divisin de interfaces.

Los separadores son lneas que se pintan sobre los marcos de manera horizontal o

vertical, para dividir el espacio de un marco.

Los separadores son de utilidad para dar un mejor orden y apariencia a las interfaces que

se implanten.

Vase el siguiente ejemplo de cdigo 12, donde se demuestra y explica la creacin y uso

de separadores:



En sombreado verde se tiene la creacin del marco sobre en el cual se aplicar el

separador, as como la declaracin de las etiquetas de apoyo para mostrar el

ejemplo de uso de los separadores.

En sombreado morado se tiene el ejemplo del separador, que se declara (con

new) y se indica la direccin, en este caso es horizontal, vea que al aadir los

componentes al marco se hizo, de la siguiente manera:

o Componente separador componente.

Indicando que el separador deba ubicarse entre ellos.

En sombreado rojo se tiene la adicin de las etiquetas de apoyo al marco, as

como del separador.

Ejemplo de cdigo 12. Declaracin y uso de separador



package GUI;





/**

* @author ESAD

*/

public class separador {







@Override


System.exit(0);

}

});


etiq1.setText("Etiqueta1");


etiq2.setText("Etiqueta2");

frame.add(etiq1, BorderLayout.PAGE_START);

frame.add(new JSeparator(SwingConstants.HORIZONTAL), BorderLayout.CENTER);

frame.add(etiq2, BorderLayout.PAGE_END);

}

}



2.2.8. Spinner

Existen situaciones en las que se requiere que los usuarios

proporcionen alguna informacin, pero esta informacin puede

ser elegida de un conjunto de valores ordenados de manera

consecutiva, para estas ocasiones es recomendable utilizar el

componente grfico spinner.

Este componente es una pequea caja de texto, con dos

flechas a la derecha, una hacia arriba y otra hacia abajo, con

las flechas se puede ir incrementando o reduciendo su valor.

El spinner es comnmente utilizado con nmeros, pero tambin

pueden colocarse textos y fechas en las opciones que brinda.

La intencin al utilizar este componente es que los elementos

que contengan estn ordenados en alguna forma

predeterminada.

Revisa el siguiente ejemplo de cdigo 13, donde se plasma la creacin y uso del

componente spinner:



En sombreado verde se tiene la creacin del marco, sobre l se colocarn los

spinner que se crearon en bloque de cdigo anterior.

En sombreado morado se tienen dos spinner:

o El primero cuenta con una configuracin de tipo numrica, donde, se tienen

4 parmetros, (el nmero donde aparecer, nmero mnimo, nmero

mximo, incremento). De esta manera se tienen los elementos ya

definidos.

o El segundo spinner tiene un modelo de tipo lista, donde se colocan los

elementos que se quieren en el spinner.

En sombreado rojo se tiene la adicin de los spinner al marco.

Ejemplo de cdigo 13. Declaracin y uso de spinner

package GUI;





/**



* @author ESAD

*/

public class ejemploSpinner{







@Override


System.exit(0);

}

});

JSpinner spn1= new javax.swing.JSpinner();

spn1.setModel(new javax.swing.SpinnerNumberModel(1, 0, 5, 1));

JSpinner spn2= new javax.swing.JSpinner();

Spn2.setModel(new javax.swing.SpinnerListModel(new String[] {"Lunes", "Martes",

"Miercoles", "Jueves", "Viernes"}));

frame.add(spn1, BorderLayout.PAGE_START);

frame.add(spn2, BorderLayout.PAGE_END);

}

}

Para obtener el elemento que se seleccion en el spinner se utiliza el mtodo,

spinner.getValue().toString();. El mtodo getValue(),obtiene el valor que se ha

seleccionado en el spinner, y retorna un objeto, por lo que se debe convertir el objeto en

cadena toString(), para obtener el valor elegido.

Los spinners deben utilizarse cuando se quieren acotar los valores que el usuario pueda

proporcionar al programa, de manera que los valores predefinidos estn en orden

consecutivo, ya que este componente grfico permite el movimiento de valor de manera

ascendente o descendente (flechas arriba o abajo).



2.2.9. rbol

Este componente grfico a diferencia de los anteriores crea un rbol de informacin, que

permite visualizar cada uno de los nodos y ver si tiene hijos o no, as como desplegar y

replegar a los hijos de cada nodo para ir revisando la informacin.

El componente rbol se visualiza de manera muy

similar a lo que muestran los exploradores de

archivos, mostrando los nodos y sus respectivos

hijos, que se pueden comparar como carpetas y

archivos.

Para su creacin, se requieren padres e hijos, los

cuales normalmente son utilizados para mostrar

archivos, o informacin que pueda ser

categorizada de manera jerrquica.

Analiza el siguiente ejemplo de cdigo 14, donde se crea y maneja un rbol:




rbol.

En sombreado morado se tiene el rbol del cual:

o Lo primero es declarar el rbol.

o Una vez que se tiene el rbol se crea su modelo, en donde desde un inicio

debes declarar los nodos del rbol, es decir aquellos nodos que sern

races; despus se crean las hojas del rbol, y se van agregando (add) a la

raz a la que pertenecern.

o El ltimo paso es aadir ese modelo creado al rbol declarado. Tal como

en la lista desplegable que primero se crea el modelo y despus se agrega

a la lista. El rbol tambin primero se crea su modelo y despus se agrega

este al rbol.

En sombreado rojo se tiene la adicin del rbol al marco.

Ejemplo de cdigo 14. Declaracin y uso de casillas de rbol

package GUI;







/**

* @author ESAD

*/

public class arbol{







@Override


System.exit(0);

}

});

JTreearbol= new javax.swing.JTree();

javax.swing.tree.DefaultMutableTreeNode e1 = new

javax.swing.tree.DefaultMutableTreeNode("Inicio");


javax.swing.tree.DefaultMutableTreeNode("Segmento1");


javax.swing.tree.DefaultMutableTreeNode("E1-S1");

e1.add(e2);

e2.add(e3);

e3 = new javax.swing.tree.DefaultMutableTreeNode("E2-S1");

e2.add(e3);


e2.add(e3);

e2 = new javax.swing.tree.DefaultMutableTreeNode("Segmento 2");


e2.add(e3);


javax.swing.tree.DefaultMutableTreeNode treeNode4 = new

javax.swing.tree.DefaultMutableTreeNode("SE1-E2-S2");

e3.add(treeNode4);

e2.add(e3);

e1.add(e2);

arbol.setModel(new javax.swing.tree.DefaultTreeModel(e1));



frame.add(arbol, BorderLayout.CENTER);

}

}

Antes de seguir con el siguiente subtema se ver un ejemplo de un programa conversor

de unidades, de manera que, adems de crear y manipular componentes grficos de

manera aislada, se aprenda cmo utilizarlos de forma conjunta para crear las GUI. El

ejemplo se muestra a continuacin:

La imagen anterior cuenta con tres secciones que se describen a continuacin:

Equivalencia de moneda, se tiene una lista desplegable para elegir una moneda,

se oprime el botn convertir y muestra la equivalencia en la caja de texto que

est junto a pesos.

Equivalencia de grados, tiene un spinner numrico para ingresar los grados

centgrados, las casillas de activacin si fueron seleccionadas mostrarn la

equivalencia en las cajas de texto que estn junto a ellas, si no se eligi, no

muestra nada al pulsar el botn convertir.

Equivalencia de longitud se ingresa el nmero de pulgadas, yardas y/o millas y al

oprimir el botn convertir muestra en la caja de texto su equivalencia en

centmetros, metros y/o millas.

Ahora se analizar el ejemplo de cdigo 15 que cre la interfaz grfica mostrada en la

imagen anterior, as como la funcionalidad de esa interfaz:

El cdigo con sombreado azul: contiene la declaracin del paquete, el autor, la

clase, definicin del autor y las llaves correspondientes.



El bloque de cdigo sombreado rosa: tiene la declaracin de todos los

componentes grficos que se estarn utilizando en el programa, se debe notar que

estas declaraciones estn fuera de todos los mtodos, lo que significa que estn

declarados a nivel de clase, recuerden que esto se hace cuando las variables se

utilizarn en toda la clase sin distincin, esto tiene la intencin de poder manipular

cada uno de los componentes grficos desde cualquier parte de la clase.

La seccin morada es el mtodo que conjunta la apariencia total:

o Dentro de este mtodo se crea el marco principal, y la definicin de sus

caractersticas,

o Adems, se mandan llamar los mtodos de aparienciaMoneda();

aparienciaGrados(); aparienciaLongitud(); que cada uno de esos mtodos

construye la apariencia de los paneles que conforman por partes la

apariencia total,

o Tambin en este bloque al final se aaden los paneles que crean los

mtodos mencionados en el punto anterior al marco principal.

El bloque de cdigo verde claro, crea la apariencia del pnlMoneda, en este mtodo

se configuran las propiedades del panel, adems de las etiquetas, la lista

desplegable, la caja de texto donde se colocar el resultado y el botn convertir,

se agrega al botn el manejo del evento mouseClicked y cuando lo detecte re-

direccionar el flujo del programa al mtodo equivalenciaMoneda(); y por ltimo se

acomodan los componentes grficos mencionados en el panel, mediante el

administrador de diseo GridLayout.

El bloque de cdigo verde obscuro, es el mtodo equivalenciaMoneda();

mencionado en el punto anterior, lo que realiza es que toma el ndice elegido en la

lista desplegable (cmbMoneda.getSelectedIndex();), con base en l se decide

mediante condiciones (if) que equivalencia es la que se debe mostrar en la caja de

texto (txtPesos) de resultado.

El bloque de cdigo rojo claro, crea la apariencia del pnlGrados, en este mtodo

se configuran las propiedades del panel, adems de las etiquetas, el spinner, las

casillas de seleccin y el botn que activa la conversin, que redirecciona el flujo

del programa al mtodo equivalenciaGrados(), y por ltimo se acomodan los

componentes en el panel.

El bloque de cdigo rojo obscuro, toma el valor dado en el spinner, y calcula la

conversin de grados, si se han seleccionado mediante las casillas de activacin,

se mostrar o no el resultado en las casillas de texto correspondientes.

El bloque naranja, crea la apariencia del pnlLongitud agregando las propiedades

tanto del panel mismo como de las etiquetas, cajas de texto, y botones para

realizar las conversiones; se agreg tambin el manejo de eventos para cada

botn que redirecciona el flujo a tres posibles mtodos de conversin segn se

haya elegido. Por ltimo se muestra el acomodo de los componentes en el panel,

en el que se aadi la lnea pnlLongitud.add(new JLabel(" ")); para crear un

espacio en el panel y que no aparecieran los componentes pegados unos a otros.



El bloque naranja obscuro muestra los tres mtodos de conversin de unidades,

que toman los valores de una caja de texto, calculan la conversin y muestran el

resultado en otra caja de texto.

Se debe notar en el ejemplo que el programa est creado de manera modular,

segmentado en mtodos, respetando as el paradigma orientado a objetos.

Ejemplo de cdigo 15. Programa conversor de unidades

package GUI;


import java.awt.GridLayout;

import java.awt.event.MouseAdapter;

import java.awt.event.MouseEvent;




/**

* @author ESAD

*/

publicclass conversores{

//Se declaran de manera global todos los componentes a utilizar

JPanelpnlMoneda = new javax.swing.JPanel();

JLabel lbl2 = new javax.swing.JLabel();

JComboBoxcmbMoneda = new javax.swing.JComboBox();


JTextFieldtxtPesos = new javax.swing.JTextField();

JButtonbtnMoneda = new javax.swing.JButton();

JPanelpnlGrados = new javax.swing.JPanel();

JLabellblCent = new javax.swing.JLabel();

JSpinnerspnCn = new javax.swing.JSpinner();

JCheckBoxcbxK = new javax.swing.JCheckBox();

JTextFieldtxtKv = new javax.swing.JTextField();

JCheckBoxcbxF = new javax.swing.JCheckBox();

JTextFieldtxtFr = new javax.swing.JTextField();

JButtonbtnTemp = new javax.swing.JButton();

JPanelpnlLongitud = new javax.swing.JPanel();




JTextFieldtxtPul = new javax.swing.JTextField();


JTextFieldtxtCm = new javax.swing.JTextField();

JButtonbtnCent = new javax.swing.JButton();


JTextFieldtxtYar = new javax.swing.JTextField();


JTextFieldtxtMt = new javax.swing.JTextField();

JButtonbtnMet = new javax.swing.JButton();


JTextFieldtxtMil = new javax.swing.JTextField();


JTextFieldtxtKm = new javax.swing.JTextField();

JButtonbtnKm = new javax.swing.JButton();

public void aparienciaTotal(){






@Override


System.exit(0);

}

});

aparienciaMoneda();

aparienciaGrados();

aparienciaLongitud();

frame.add(pnlMoneda, BorderLayout.WEST);

frame.add(pnlGrados, BorderLayout.CENTER);

frame.add(pnlLongitud,BorderLayout.EAST);

}

publicvoidaparienciaMoneda(){

//se configuran los componentes de moneda



pnlMoneda.setBackground(new java.awt.Color(255, 255, 255));

pnlMoneda.setBorder(javax.swing.BorderFactory.createTitledBorder(javax.swing.Border

Factory.createLineBorder(new java.awt.Color(153, 0, 0)), "Equivalencia de moneda",

javax.swing.border.TitledBorder.DEFAULT_JUSTIFICATION,

javax.swing.border.TitledBorder.DEFAULT_POSITION, new java.awt.Font("Tahoma", 0,

11), new java.awt.Color(153, 0, 0)));

lbl1.setText("De:");

lbl2.setText("A pesos:");

cmbMoneda.setModel(new javax.swing.DefaultComboBoxModel(new String[] { "Euro",

"Dolar", "Libra" }));

btnMoneda.setText("Convertir");

//Se agrega el manejo de eventos al boton

btnMoneda.addMouseListener(new MouseAdapter() {

@Override

public void mouseClicked(MouseEvent e){

equivalenciaMoneda(); //se invoca al metodo moneda, que sonde se realizarn las

acciones

}

});

//se agregan los componentes al panel moneda

GridLayoutacomodo = new GridLayout(3,2);

pnlMoneda.setLayout(acomodo);

pnlMoneda.add(lbl1);

pnlMoneda.add(cmbMoneda);

pnlMoneda.add(lbl2);

pnlMoneda.add(txtPesos);

pnlMoneda.add(btnMoneda);

}

publicvoidequivalenciaMoneda(){

inteleccion=cmbMoneda.getSelectedIndex();

if(eleccion==0)

txtPesos.setText("16.99");

if(eleccion==1)


if(eleccion==2)


}

publicvoidaparienciaGrados(){

//se configuran los componentes de grados



pnlGrados.setBackground(new java.awt.Color(255, 255, 255));

pnlGrados.setBorder(javax.swing.BorderFactory.createTitledBorder(javax.swing.Border

Factory.createLineBorder(new java.awt.Color(153, 0, 0)), "Equivalencia de Grados",

javax.swing.border.TitledBorder.DEFAULT_JUSTIFICATION,

javax.swing.border.TitledBorder.DEFAULT_POSITION, new java.awt.Font("Tahoma", 1,

11), new java.awt.Color(153, 255, 0)));

lblCent.setText("Centigrados");

cbxK.setText("Kelvin");

cbxF.setText("Fahrenheit");

btnTemp.setText("Convertir");

//Se agrega el manejo de eventos al boton

btnTemp.addMouseListener(new MouseAdapter() {

@Override


equivalenciaGrados(); //se invoca al metodo moneda, que sonde se realizarn las

acciones

}

});



pnlGrados.setLayout(acomodo);

pnlGrados.add(lblCent);

pnlGrados.add(spnCn);

pnlGrados.add(cbxF);

pnlGrados.add(txtFr);

pnlGrados.add(cbxK);

pnlGrados.add(txtKv);

pnlGrados.add(btnTemp);

}

publicvoidequivalenciaGrados(){

intcentigrados= Integer.parseInt(spnCn.getValue().toString());

double fr= ((9.0/5.0)*centigrados)+32;

float kv= (float) (centigrados+273.15);

if(cbxK.isSelected())

txtKv.setText(String.valueOf(kv));



if(cbxF.isSelected())

txtFr.setText(String.valueOf(fr));

}

publicvoidaparienciaLongitud(){

//se configuran los componentes de longitud

pnlLongitud.setBackground(new java.awt.Color(255, 255, 255));

pnlLongitud.setBorder(javax.swing.BorderFactory.createTitledBorder("Equivalencia de

longitud"));

lbl4.setText("Pulgadas");

lbl5.setText("Centimetros");

btnCent.setText("Convertir");

lbl6.setText("Yardas");

lbl7.setText("Metros");

btnMet.setText("Convertir");

lbl8.setText("Millas");

lbl9.setText("Kilometros");

btnKm.setText("Convertir");

//Se agrega el manejo de eventos a cada boton

btnCent.addMouseListener(new MouseAdapter() {

@Override


convertirCm(); //se invoca al metodo moneda, que sonde se realizarn las acciones

}

});

btnMet.addMouseListener(new MouseAdapter() {

@Override


convertirMt(); //se invoca al metodo moneda, que sonde se realizarn las acciones

}

});

btnKm.addMouseListener(new MouseAdapter() {

@Override


convertirKm(); //se invoca al metodo moneda, que sonde se realizarn las acciones

}

});





pnlLongitud.setLayout(acomodo);

pnlLongitud.add(lbl4);

pnlLongitud.add(txtPul);


pnlLongitud.add(txtCm);

pnlLongitud.add(btnCent);

pnlLongitud.add(new JLabel(" "));


pnlLongitud.add(txtYar);


pnlLongitud.add(txtMt);

pnlLongitud.add(btnMet);



pnlLongitud.add(txtMil);


pnlLongitud.add(txtKm);

pnlLongitud.add(btnKm);


}

public void convertirCm(){

intpulgadas=Integer.parseInt(txtPul.getText());

float cm= (float) (pulgadas * 2.56);

txtCm.setText(String.valueOf(cm));

}

public void convertirMt(){

intyardas=Integer.parseInt(txtYar.getText());

float mt= (float) (yardas * 0.91440);

txtMt.setText(String.valueOf(mt));

}

public void convertirKm(){

intmillas=Integer.parseInt(txtMil.getText());



float km= (float) (millas * 1.609344);

txtKm.setText(String.valueOf(km));

}

}

Si ya has introducido el cdigo mostrado en la clase previa (toda la clase completa) para

su ejecucin en el IDE NetBeans, notars que el compilador no permite su ejecucin,

recuerda que para que eso ocurra debe definirse un mtodo main, siguiendo con el

paradigma orientado a objetos, del que se ha separado el arranque del programa en la

clase de llamado, la cual se muestra a continuacin en el ejemplo de cdigo 16:

El cdigo azul es la declaracin del paquete, el autor y la clase, as como sus

respectivas llaves.

Las dos lneas moradas son las que permiten el funcionamiento del programa, la

primera crea un objeto de la clase conversores, que es la clase que se describi

antes, donde se crea toda la apariencia y funcionalidad del programa. La segunda

lnea invoca el mtodo aparienciaTotal(); del objeto previamente creado, y

realizando esta llamada se crea el programa.

Ejemplo de cdigo 16. Clase de llamado

package GUI;

/**

* @author ESAD

*/

public class conv {


conversores c=new conversores();

c.aparienciaTotal();

}

}

Es recomendable que se realicen modificaciones al cdigo presentado en el ejemplo de

cdigo 16 para que se analice el funcionamiento de cada lnea.



2.3. Men

El uso del men facilita la ubicacin de funciones

de un programa o aplicacin, ya que sus

elementos funcionan como accesos rpidos, y con

slo un clic sobre el elemento del men de inters

se llegar a la pantalla o funcin deseada.

Tal como su nombre lo dice, el componente grfico

de men ofrece diferentes opciones de acciones a

realizar dentro de una aplicacin, ya sea ir a otra

ventana, o realizar alguna accin sobre la ventana

actual.

En los siguientes subtemas se ver que los mens deben estar en una barra, cmo

crearla, as como la elaboracin de los elementos y subelementos que el men mostrar.

Tambin se analizarn los mens emergentes.

2.3.1. Barra de men

Las opciones que ofrecen los mens estn contenidas en una barra, as que al crear un

men lo primero que se debe hacer es crear la barra para despus colocar en ella los

elementos que se vayan creando. Para comprender mejor su creacin, se debe analizar el

siguiente ejemplo de cdigo 17.

El sombreado en:

Azul es la definicin del paquete, clases a utilizar, autor, as como la declaracin

de la clase y el mtodo.

Verde tiene la creacin del marco sobre el que se colocar el men.

Morado tiene un panel azul, creado slo para ubicar mejor la barra del men, se

crea la barra del men en la pantalla mediante su constructor new

javax.swing.JMenuBar().

Rojo tiene la adicin de la barra de men al marco.



Al ser la barra de men un contenedor de elementos, slo se requiere declararla, lo que

conforma en s este elemento sern las acciones que se adicionen.

Ejemplo de cdigo 17. Declaracin y uso de barra de men

package GUI;






/**

* @author ESAD

*/

public class menu{







@Override


System.exit(0);

}

});



JMenuBarbarra = new javax.swing.JMenuBar();

frame.add(barra, BorderLayout.PAGE_START);

frame.add(pnl, BorderLayout.PAGE_END);

}

}



En seguida se ver cmo crear elementos del men que son las opciones que se

mostrarn, y que deben estar contenidas en la barra de men para que sean visibles.

2.3.2. Elemento de men

Cada elemento de un men debe ser

creado y configurado. En la seccin

anterior se revisaron los elementos que

debe contener una barra, la cual se

declara. Ahora se estudiar cmo se

crean los elementos que conformarn las

diferentes opciones del men.

En el siguiente ejemplo de cdigo 18 se crean elementos del men, y se aaden a una

barra del men para mostrarlos en la interfaz, en la cual debers ligar cada descripcin

con el cdigo que se explica, para que se comprenda de mejor manera la sintaxis de los

mens a continuacin se presenta una explicacin y el cdigo:




men.

En sombreado morado se tiene un panel azul, creado slo para ubicar mejor en la

pantalla el men (se crea la barra del men). Despus se crean los elementos del

men new javax.swing.JMenu(); y se aaden los elementos del men (add) a la

barra previamente creada. Si se requieren submens (javax.swing.JMenuItem()),

se crean y se aaden al men de donde se debern desplegar.

En sombreado rojo se tiene la adicin de la barra de men al marco.

Ejemplo de cdigo 18. Declaracin y uso de men

package GUI;






/**

* @author ESAD



*/

public class menu{







@Override


System.exit(0);

}

});



frame.add(pnl, BorderLayout.PAGE_END);

JMenuBarbarra = new javax.swing.JMenuBar();

JMenu elemento1 = new javax.swing.JMenu();

elemento1.setText("Elemento1");

JMenu elemento2 = new javax.swing.JMenu();

elemento2.setText("Elemento2");

JMenuItem sub1 = new javax.swing.JMenuItem();

sub1.setText("Sub-Elemento1");

elemento2.add(sub1);

barra.add(elemento1);

barra.add(elemento2);

frame.add(barra, BorderLayout.PAGE_START);

}

}



Se debe entender que el acomodo de mens queda de la siguiente manera, revisa la

siguiente imagen:

Barra de menElementos del men

Sub-men Sub-sub-men

Sub-men

Mens

Para comprender mejor el acomodo de la imagen anterior revisa lo siguiente:

El elemento principal es la barra de men

Despus los elementos del men, que son los que aparecen inmediatamente

sobre la barra, stos se aaden precisamente a la barra.

Si el elemento de men va a desplegar otras opciones se crean submens y stos

se agregan al elemento de men de donde se van a desplegar.

Si el submen requiere tambin que se desplieguen otros sub-submens, se

agregan al submen de donde se deber desplegar.

Adems de los mens tradicionales, como el que se acaba de revisar, tambin existe el

men emergente el cual se estudiar a continuacin.

2.3.3. Men emergente

En ocasiones se requiere contar con un men que no est visible todo el tiempo, que

aparezca slo cuando el usuario as lo requiera, para ahorrar espacio dentro de la interfaz

grfica de usuario, para ello existen los mens emergentes.

El men emergente (popup) no se

encuentra visible al aparecer la ventana

grfica de una aplicacin, deber

agregarse en el manejo de eventos

para que aparezca, su construccin es

similar a los anteriores. Se comienza

con la declaracin del men emergente,

se crean elementos de men y se

aaden al emergente, tal como si se

aadieran a una barra de men.

Observa el siguiente ejemplo de cdigo 19, en el que se ve cmo crear un men

emergente, el cual al igual que en un men normal deber crearse primero sus elementos

y despus aadirse a ste:






men.

Se crea el men emergente (JPopupMenu()). Despus se crean los elementos del

men JMenuItem() y se aaden los elementos del men (add) al men emergente

previamente creado.

En sombreado rojo se tiene la adicin del men emergente al marco.

Ejemplo de cdigo 19. Declaracin y uso de men emergente

package GUI;






/**

* @author ESAD

*/

public class menu{







@Override


System.exit(0);

}

});

JPopupMenu popup = new JPopupMenu();

JMenuItem menu1 = new JMenuItem("Menu item");

JMenuItem menu2 = new JMenuItem("Otro item");

popup.add(menu1);

popup.add(menu2);



frame.add(popup, BorderLayout.PAGE_START);

}

}

En este tema se ha analizado a los mens y su creacin, esta ltima comienza con la

implementacin de los elementos que los compondrn, as como la barra en la que se

posicionar el men completo. Tambin se analizaron los mens emergentes, la nica

diferencia entre ellos es que el men normal siempre est visible para el usuario en la

interfaz grfica, mientras que el men emergente aparecer slo cuando el usuario se

posicione sobre el rea donde se mostrar, de esta manera el men estar disponible

cuando el usuario as lo quiera.

2.3.4. Separador

El separador de men es el mismo concepto del separador de ventana visto en el

subtema 2.2.7. Separador, ste slo es la creacin de una lnea divisoria para separar

elementos de un men, su declaracin es la misma y se aade entre los componentes

que se quiera separar.

Revisa el siguiente ejemplo de cdigo 20 y la imagen siguiente, en donde se est

agregando un submen, despus se coloca un separador y despus otro submen, lo que

mostrar una divisin entre los submens.

Ejemplo de cdigo 20. Declaracin y uso de separador

menu.add(subelemento1);

menu.add(new JSeparator(SwingConstants.HORIZONTAL));

menu.add(subelemento2);

Ejemplo de separador en un men

Por ltimo, cabe resaltar que para un manejo adecuado de los mens se debern agregar

eventos a stos para que generen las acciones requeridas por los mens.



2.4. Ventanas

Hasta ahora se han visto diferentes componentes grficos para crear una sola pantalla,

enseguida se ver cmo crear diferentes pantallas o ventanas en una misma aplicacin.

Es decir se construirn diferentes marcos que se comuniquen entre s, adems de

conocer las ventanas auxiliares que pueden dar informacin a los usuarios (cuadros de

dilogo), ventanas que pueden proporcionar informacin de los archivos que tiene nuestra

computadora (JFileChooser) y el cambio de una ventana (marco) a otra.

Ejemplos de ventanas

2.4.1. Cuadros de dilogo

Existen momentos en que un programa requiere que el usuario confirme o niegue

informacin, ingrese, o seleccione datos o simplemente que conozca lo que est pasando,

para esto se cuenta con los cuadros de dilogo que son de ayuda en estas ocasiones.

Los cuadros de dilogo son sub-

ventanas independientes, se utilizan

generalmente para dar avisos sobre

acciones que est realizando la

aplicacin, ya sea para solicitar

confirmacin de informacin, o para

dar avisos de error o advertencias

(Oracle, 2012).

Existen diferentes tipos de cuadros de dilogo, entre ellos los siguientes:



Dilogo de confirmacin: el dilogo de confirmacin como su nombre lo indica se

utiliza para confirmar alguna accin, el cdigo que lo crea es el marcado en

naranja dentro del ejemplo de cdigo 21, que se presenta ms adelante.

Como se puede observar en el cdigo, el dilogo de confirmacin se igual a un

entero, por lo que el dilogo de confirmacin ofrece tres respuestas, Si, No y

Cancelar, tal y como se muestra en la imagen siguiente. Para saber qu respuesta

brindo el usuario, el dilogo de confirmacin retorna un nmero con la opcin

elegida, siendo 0-Si, 1-No y 2-Cancelar.

Dilogo de entrada: este tipo de cuadro de dilogo solicita el ingreso de algn dato

en particular, el cdigo que lo crea est en morado dentro del ejemplo de cdigo

21, ntese que est igualado a una cadena, porque automticamente este dilogo

retorna en una cadena lo que el usuario haya capturado en el cuadro de dilogo, si

se requiere otro tipo de dato tendr que realizarse el casting (conversin de tipo de

datos) necesario. Este cuadro de dilogo se ejemplifica en la siguiente imagen:

Dilogo de entrada personalizada: este cuadro de dilogo, al igual que el anterior,

solicita el ingreso de algn dato en particular, pero adems la entrada de esos



datos puede personalizarse, en este caso el cdigo que lo crea, est en morado

obscuro dentro del ejemplo de cdigo 21, observa que primero se cre un arreglo

de objetos llamado valores, donde se ingresan los datos de la lista que se quiere

desplegar. La siguiente lnea recibir el objeto elegido del cuadro de dilogo, que

tiene como parmetros el ttulo del cuadro de dilogo, as como el mensaje que

mostrar; se indica que es un mensaje de informacin y despus se pasa el

arreglo de objetos, se indica el valor que mostrar por defecto (valores[0]). El

resultado de ese cdigo implementado se muestra en la siguiente imagen:

Mensaje: en este cuadro de dilogo se muestra un mensaje al usuario, una de las

caractersticas interesantes de este cuadro de dilogo es que puedes indicar el

tipo de mensaje que es y en base a ello colocar un icono representativo (revisa el

cdigo que los crea marcado en verde dentro del ejemplo de cdigo 21), el

resultado de cdigo se muestra en las siguientes imgenes respectivamente:

o Mensaje de cuidado.

o Mensaje de error.

o Mensaje plano.

Dilogo opcional: en este cuadro de dilogo pueden personalizarse los botones

que tendr, as como lo que stos dirn, despus de analizar todos los ejemplos

anteriores, se debe resaltar que no se indica nada sobre los botones que

aparecern, ya que se crean automticamente, pero en este cuadro de dilogo en

particular puedes personalizar los botones. Como podrs ver en el ejemplo de

cdigo 21, en la seccin roja; lo primero es crear un arreglo de objetos con los

botones que contendr. Despus se pasa esto como parmetro. El resultado se

muestra en la siguiente imagen:



Revisa detalladamente el siguiente cdigo, en el que se tienen los bloques que

construyen cada uno de los cuadros de dilogo mencionados. Identifica cada porcin

mencionada, para que puedas comprender mejor la sintaxis.

Ejemplo de cdigo 21. Declaracin y uso de cuadros de dilogo

package GUI;

import javax.swing.JOptionPane;

/**

* @author ESAD

*/

public class ventanas {

public static void main(String[] args){

int a=JOptionPane.showConfirmDialog(null,"Deseas continuar");

String b=JOptionPane.showInputDialog("Ingresa un dato");

Object[] valores = { "Uno", "Dos", "Tres" };

ObjectvalorElegido = JOptionPane.showInputDialog(null,"Elige", "Entrada",

JOptionPane.INFORMATION_MESSAGE, null,valores, valores[0]);

JOptionPane.showMessageDialog(null, "Mensaje", "Cuidado",

JOptionPane.WARNING_MESSAGE);

JOptionPane.showMessageDialog(null, "Algofallo", "Error",

JOptionPane.ERROR_MESSAGE);

JOptionPane.showMessageDialog(null, "Sin icono", "Plano",

JOptionPane.PLAIN_MESSAGE);

Object[] opciones = { "OKI", "NOP" };



JOptionPane.showOptionDialog(null, "Elige OKI Para continuar", "Selecciona",

JOptionPane.DEFAULT_OPTION, JOptionPane.WARNING_MESSAGE,null, opciones,

opciones[0]);

}

}

2.4.2. Ventanas independientes y sus cambios

Una de las ventanas independientes ms empleadas es el selector de archivos, es muy

utilizada, como su nombre lo indica, para seleccionar un archivo o la ruta de alguna

carpeta. Generalmente se usa para la carga de archivos.

En el ejemplo que se muestra a

continuacin slo se crea el selector de

archivos, ste normalmente se utiliza en

un programa ms completo y no de

manera aislada. Por lo general al crear

este tipo de ventanas es porque se leer

o escribir en un archivo, pero por ahora

slo se construir la ventana para fines

didcticos sobre la creacin de

componentes grficos que se ha creado

separado.

A continuacin se presenta en el ejemplo de cdigo 22 y cmo se utiliza:

Lo primero es crear un objeto del tipo selector de archivo e indicar que se muestre,

como se hace en la seccin morada.

Una vez que se muestra para conocer el archivo que se ha elegido se utiliza un

mtodo creado para ello, y se muestra el resultado en consola, como se hace en la

seccin roja.

Ejemplo de cdigo 22. Declaracin y uso de la ventana selector de archivos.

package GUI;

import java.io.File;

import javax.swing.JFileChooser;

/**

* @author ESAD

*/

public class ventanas2 {



public static void main(String[] args){

JFileChooser fc= new JFileChooser();

fc.showOpenDialog(null);

File file = fc.getSelectedFile();

System.out.print(file);

}

}

Una de las prcticas ms comunes al crear programas con componentes grficos es

pasar de una ventana a otra, para hacer esto, lo primero que se debe hacer es crear un

objeto de la clase que crea la ventana (marco) a la que se va a cambiar, despus se

invoca de ese objeto al mtodo que inicia la creacin de la apariencia grfica y por ltimo

se elimina de la pantalla la ventana anterior, tal como se muestra en el ejemplo de cdigo

23.

Ejemplo de cdigo 23. Cambio de ventana.

claseCambioc= new claseCambio();

c.metodoApariencia();

this.dispose();

Con esta informacin se concluye el estudio de las ventanas, lo importante es aprender

que se pueden cambiar de ventanas, para obtener o pasar informacin de una a otra, tal

como lo hacen los programas ms conocidos. Por ejemplo, cuando se quiere imprimir, se

abre una ventana independiente del programa en ejecucin para dar las indicaciones de

la impresin, esto es algo que podrs llegar a requerir al construir programas.

Cierre de la Unidad

Has concluido la segunda unidad del curso, a lo largo de sta se ha visto el tema de

componentes grficos, que son los elementos mediante los que se crean las interfaces

grficas de usuario.

Como parte de este tema se vieron los contenedores, que son aquellos elementos que

conjuntan a los componentes grficos para acomodarlos y crear las interfaces, tambin se

vieron los paneles que ayudan a organizar los componentes y los marcos que son los

contenedores por excelencia donde deben acomodarse todos los elementos de los que se

compondr la interfaz.

Tambin se analizaron los controles, que son los componentes grficos que conforman la

interfaz, entre ellos estn las etiquetas con que se nombran los campos, los botones que

disparan acciones, las casillas de activacin que detectan valores bolanos, las listas



desplegables para que el usuario pueda elegir un elemento de una lista predefinida,

campos de texto para recopilar informacin, reas de texto que son de ayuda para

recopilar grandes cantidades de texto por parte de los usuarios, separadores para

segmentar la apariencia de la interfaz, spinners para acotar el ingreso de informacin y

rboles que despliegan informacin jerrquica.

Adems, se estudiaron las barras de mens, los elementos de stos, y tambin mens

emergentes, que ayudan

Unidad 2. Componentes Graficos

Documents

Transcript of Unidad 2. Componentes Graficos