Documentos de Académico
Documentos de Profesional
Documentos de Cultura
Programa de la asignatura:
Programación orientada a objetos II
Clave:
Ingeniería: TSU:
15142421 / 16142421
Índice
Unidad 2. Componentes gráficos ....................................................................................... 3
Presentación de la Unidad ................................................................................................. 3
Propósito ........................................................................................................................... 3
Competencia específica..................................................................................................... 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 activación .............................................................................................. 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 diálogo ................................................................................................ 48
2.4.2. Ventanas independientes y sus cambios ............................................................... 52
Cierre de la Unidad .......................................................................................................... 53
Cara saber más ............................................................................................................... 54
Fuentes de consulta ........................................................................................................ 55
Presentación de la Unidad
Por lo tanto, en esta unidad deberás poner atención a la sintaxis del uso de los
componentes gráficos, porque te ayudará a comprender mejor cómo se construyen las
interfaces gráficas.
No olvides consultar las dudas que te surjan con tu Docente en línea para una mejor
comprensión de los temas y dar continuidad a tu estudio de POO2.
Propósito
Al término de esta unidad lograrás:
Competencia específica
2.1. Contenedores
Las aplicaciones más utilizadas cuentan con interfaz GUI (siglas en inglés) que en
español significa interfaz gráfica de usuario; esta interfaz es la carta de presentación de la
aplicación, que ofrece al usuario una interacción; esa apariencia debe programarse
mediante componentes gráficos. Para tener una idea más clara al respecto, tan sólo
observa el navegador en el que te encuentras revisando este material, en el podrás
distinguir que en la parte superior cuenta con un menú, que también tiene algunos
botones, seguramente también cuenta con un espacio para escribir texto, estos elementos
que se acaban de mencionar son justamente componentes gráficos.
Todos los componentes gráficos son objetos y para declararlos como tales se debe
señalar la clase a la que pertenece el componente en cuestión e ir utilizando los métodos
que tienen predefinidos para configurar sus características. Todos esos elementos se
encuentran en el paquete javax.swing (algunos pertenecen a java.awt) y son subclase de
JComponent, por esta razón se deberá importar dicha clase. Una clase es una
abstracción que define un tipo de objeto especificando qué propiedades y operaciones
disponibles va a tener.
Finalmente, sólo falta mencionar que los contenedores son supracomponentes gráficos
que, precisamente como su nombre lo indica, ayudan a contener agrupar y organizar
otros componentes gráficos dentro de ellos, esto se hace para tener un mejor control
sobre la ubicación de dichos componentes en la interfaz gráfica que se esté
construyendo.
2.1.1. Paneles
El primer tipo de contenedores que se revisa son los paneles, éstos ayudan a definir
secciones dentro de una interfaz gráfica.
Los paneles son secciones que pueden configurarse en diferentes tamaños, colores,
márgenes, etcétera; sirven para segmentar la apariencia gráfica de una aplicación, porque
pueden crear divisiones en la GUI.
Las propiedades de los paneles son muy diversas, pero entre las que más destacan son
los bordes y color de fondo, debido a que son estas características las que ayudan a
segmentar una aplicación.
En seguida podrás observar un ejemplo que muestra la sintaxis para construir paneles y
su uso.
import java.awt.BorderLayout;
import java.awt.Color;
import java.awt.event.WindowAdapter;
import java.awt.event.WindowEvent;
import javax.swing.*;
/**
* @author ESAD
*/
frame.addWindowListener(new WindowAdapter() {
@Override
public void windowClosing(WindowEvent e){
System.exit(0);
}
});
frame.add(pnl, BorderLayout.PAGE_START);
frame.add(pnl2, BorderLayout.CENTER);
frame.add(pnl3, BorderLayout.PAGE_END);
}
}
Como pudiste observar, se habló del marco (la ventana) que es el contenedor principal,
donde se encontrarán los paneles, el siguiente tema ayudará a comprender tanto la
definición 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 comúnmente llamados frames, tal como el nombre de la clase los define
(JFrame). Los marcos son los contenedores principales para crear aplicaciones gráficas,
ya que cualquier otro componente gráfico que se cree, debe estar dentro de un marco.
Se sombrea en azul la definición del paquete, clase utilizada, autor, así como la
declaración de la clase y el método.
En sombreado morado se coloca el código para declarar el marco, que como se
ha dicho anteriormente, los componentes gráficos son objetos y se declaran como
tal con la palabra reservada new, el constructor para crear marcos recibe como
parámetro el título que tendrá el marco. Una vez declarado el marco que se ha
llamado frame, se configuran sus atributos mediante métodos que ya se
encuentran previamente definidos en la clase JFrame. En este caso se
configuraron tres atributos:
o setLocation: recibe como parámetro dos enteros que son las coordenadas
x, y (en pixeles), para indicar dónde se ubicará el marco, respecto al ancho
y alto de la pantalla, toma en cuenta que la posición 0,0 es la esquina
superior izquierda.
o setVisible: recibe como parámetro un valor booleano, en este caso true
para indicar que el marco debe ser visible.
o setSize: este método recibe dos valores enteros que indican el ancho y alto
del marco, en este mismo orden.
Ahora que ya identificaste las partes del código 2 de declaración de un marco, éste
generará una salida, como la que se muestra en la siguiente imagen, de la cual se
recomienda cambiar el tamaño y posición del marco y volver a ejecutar el código para ir
comprendiendo mejor sus propiedades.
Una vez definido el marco para agregar elementos dentro de éste, se utiliza el método
add, y un administrador de diseño llamado layout, esto permite acomodar en algún orden
todos los componentes que se agreguen al marco.
BoxLayout: esta distribución acomoda todos los componentes uno tras de otro en
una sola fila o columna, según el espacio disponible, en la siguiente imagen se
puede observar un ejemplo.
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 revisarán los demás componentes gráficos.
2.2. Controles
En los siguientes apartados se hablará sobre el tema controles, con ello se pueden crear
apariencias gráficas más 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 verán esos componentes gráficos, ya que
son aquellos elementos que ayudan a conformar la apariencia de una aplicación.
2.2.1. Etiqueta
El primer componente de los controles que se abordará es uno de los más utilizados para
colocar textos en la apariencia gráfica de una aplicación, 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 más comúnmente utilizadas se encuentra la tipografía de la fuente,
así como el color.
import java.awt.BorderLayout;
import java.awt.Color;
import java.awt.event.WindowAdapter;
import java.awt.event.WindowEvent;
importjavax.swing.*;
/**
* @author ESAD
*/
frame.addWindowListener(new WindowAdapter() {
@Override
public void windowClosing(WindowEvent e){
System.exit(0);
}
});
etiq2.setForeground(Color.yellow);
frame.add(etiq1, BorderLayout.PAGE_START);
frame.add(etiq2, BorderLayout.CENTER);
frame.add(etiq3, BorderLayout.PAGE_END);
}
}
Como has visto las etiquetas pueden configurarse para que personalices su apariencia y
también puedes investigar sobre otras propiedades para que puedas ver cómo funcionan
al ejecutar el programa. Se te invita a continuar con el siguiente tema, para que sigas
involucrándote con el manejo de componentes gráficos.
2.2.2. Botones
Revise el siguiente ejemplo, donde se podrá observar la creación de botones, así como la
personalización de sus propiedades:
Se sombrea en azul la definición del paquete, clases a utilizar, autor, así como la
declaración de la clase y el método.
En sombreado verde se tiene la creación del marco sobre el que se colocarán las
etiquetas.
En sombreado morado se tienen los botones, en donde veras que:
o El primer botón configura la propiedad setMnemonic, que indica la letra con
la que se podrá colocar el foco en ese elemento. Realizando alt+b (el
mnemónico especificado).
o El segundo botón configura el color de la letra.
o Y el tercer botón sólo tiene agregado un texto.
En sombreado rojo se tiene la adición de los botones al marco.
import java.awt.BorderLayout;
import java.awt.Color;
import java.awt.event.WindowAdapter;
import java.awt.event.WindowEvent;
importjavax.swing.*;
/**
* @author ESAD
*/
frame.addWindowListener(new WindowAdapter() {
@Override
frame.add(btn, BorderLayout.LINE_START);
frame.add(btn2, BorderLayout.CENTER);
frame.add(btn3, BorderLayout.LINE_END);
}
}
Se sombrea en azul la definición del paquete, clases a utilizar, autor, así como la
declaración de la clase y el método.
Sombreado verde se tiene la creación del marco sobre el que se colocarán las
etiquetas.
Sombreado morado se tienen las casillas de activación, en el que observarás que:
o La primer casilla sólo 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
código. Recuerda éstos componentes sólo 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 adición de las casillas de activación al marco.
Ejemplo de código 5. Declaración y uso de casillas de activación
package GUI;
import java.awt.BorderLayout;
import java.awt.Color;
import java.awt.event.WindowAdapter;
import java.awt.event.WindowEvent;
importjavax.swing.*;
/**
* @author ESAD
*/
frame.addWindowListener(new WindowAdapter() {
@Override
public void windowClosing(WindowEvent e){
System.exit(0);
}
});
frame.add(check1, BorderLayout.NORTH);
frame.add(check2, BorderLayout.SOUTH);
frame.add(check3, BorderLayout.CENTER);
}
}
El uso de las casillas de activación 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 método de la clase JCheckBox, el cual se muestra a continuación:
Este método retornará un valor booleano, para saber si se activó (true) o no (false), por lo
general este resultado suele acompañarse de una condición (if) para indicar que deberá
realizar en programa en cada caso.
Por último, sólo recuerda que si quieres que los usuarios realicen elecciones sobre
múltiples opciones, debes utilizar casillas de activación, en el caso que sólo quieres que
elijan un valor, utiliza listas desplegables, que es el siguiente subtema.
Se sombrea en azul la definición del paquete, clases a utilizar, autor, así como la
declaración de la clase y el método.
En sombreado verde se tiene la creación del marco sobre el que se colocará la
lista.
En sombreado morado se tiene el ejemplo, donde se creó la lista y se le añadió un
modelo, indicando lo que debe estar visible, como:
o El modelo que es la configuración 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 sólo recibe modelos.
En sombreado rojo se tiene la adición de la lista al marco.
import java.awt.event.WindowAdapter;
import java.awt.event.WindowEvent;
importjavax.swing.*;
/**
* @author ESAD
*/
frame.addWindowListener(new WindowAdapter() {
@Override
public void windowClosing(WindowEvent e){
System.exit(0);
}
});
frame.add(lista1);
}
}
Toma en cuenta que si quieres que el usuario sólo elija de una lista predefinida, lo más
conveniente es que utilices el componente gráfico lista desplegable. Pero si quieres que el
usuario sea quien ingrese la información directamente, puedes utilizar campos de texto,
que es el siguiente tema.
Los campos de texto son uno de los componentes gráficos más utilizados para la creación
de los GUI, los elementos que se han visto anteriormente requieren de trabajo para su
configuración y obtención de datos, pero en particular los campos de texto deben también
contar con algún tipo de validación de la información que se está recibiendo.
Se sombrea en azul la definición del paquete, clases a utilizar, el autor, así como
la declaración de la clase y el método.
En sombreado verde se tiene la creación del marco en el que se colocarán los
campos de texto.
En sombreado morado se tiene la declaración de dos campos de texto, al primero
sólo se le agrega un texto, y al segundo se le configura el tipo de letra y color.
En sombreado rojo se tiene la adición del campo de texto al marco.
import java.awt.BorderLayout;
import java.awt.event.WindowAdapter;
import java.awt.event.WindowEvent;
importjavax.swing.*;
/**
* @author ESAD
*/
frame.addWindowListener(new WindowAdapter() {
@Override
public void windowClosing(WindowEvent e){
System.exit(0);
}
});
frame.add(campo1, BorderLayout.LINE_START);
frame.add(campo2, BorderLayout.LINE_END);
}
}
Es importante resaltar que el campo de texto tiene dentro una cadena, porque así está
estipulado en su definición. 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 número 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 tamaño (length()) y se valida que ese tamaño sea igual a 10.
if (campoTexto3.getText().length() == 10){
// código 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 atención en lo que se necesita
para poder programarlo adecuadamente. Los campos de texto como has visto reciben
información del usuario, de la cual, típicamente reciben información breve, para las
ocasiones en que requieres mostrar o recibir una cantidad mayor de información debes
utilizar otro componente llamado área de texto, el cual será revisado en la siguiente
sección.
Se sombrea en azul la definición del paquete, clases a utilizar, autor, así como la
declaración de la clase y el método.
En sombreado verde se tiene la creación 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 tamaño de 20 columnas, es decir que todo el texto que se escriba
se acomodará a ese ancho, la segunda área tiene un pequeño texto y se dejó su
propiedad de edición en falso, lo que indica que el texto ahí no se puede editar,
esto es útil para cuando se quiere mostrar un texto de información al usuario sin
brindarle la posibilidad de modificarlo.
En sombreado rojo se tiene la adición del área de texto al marco.
import java.awt.BorderLayout;
import java.awt.event.WindowAdapter;
import java.awt.event.WindowEvent;
importjavax.swing.*;
/**
* @author ESAD
*/
frame.setVisible(true);
frame.setSize(500, 500);
frame.addWindowListener(new WindowAdapter() {
@Override
public void windowClosing(WindowEvent e){
System.exit(0);
}
});
frame.add(area1, BorderLayout.LINE_START);
frame.add(area2, BorderLayout.LINE_END);
}
}
En el ejemplo anterior para obtener el texto introducido por un usuario también se usa el
método 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 sólo se utilizan cuando se
requiere recibir o mostrar una gran cantidad de información, 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
podrás revisarlos en el siguiente apartado.
2.2.7. Separador
Los separadores son líneas 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.
Véase el siguiente ejemplo de código 12, donde se demuestra y explica la creación y uso
de separadores:
Se sombrea en azul la definición del paquete, clases a utilizar, autor, así como la
declaración de la clase y el método.
En sombreado verde se tiene la creación del marco sobre en el cual se aplicará el
separador, así como la declaración 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 dirección, en este caso es horizontal, vea que al añadir los
componentes al marco se hizo, de la siguiente manera:
o Componente – separador – componente.
Indicando que el separador debía ubicarse entre ellos.
En sombreado rojo se tiene la adición de las etiquetas de apoyo al marco, así
como del separador.
package GUI;
import java.awt.BorderLayout;
import java.awt.event.WindowAdapter;
import java.awt.event.WindowEvent;
importjavax.swing.*;
/**
* @author ESAD
*/
frame.addWindowListener(new WindowAdapter() {
@Override
public void windowClosing(WindowEvent e){
System.exit(0);
}
});
frame.add(etiq1, BorderLayout.PAGE_START);
frame.add(new JSeparator(SwingConstants.HORIZONTAL), BorderLayout.CENTER);
frame.add(etiq2, BorderLayout.PAGE_END);
}
}
2.2.8. Spinner
Se sombrea en azul la definición del paquete, clases a utilizar, autor, así como la
declaración de la clase y el método.
En sombreado verde se tiene la creación del marco, sobre él se colocarán los
spinner que se crearon en bloque de código anterior.
En sombreado morado se tienen dos spinner:
o El primero cuenta con una configuración de tipo numérica, donde, se tienen
4 parámetros, (el número donde aparecerá, número mínimo, número
máximo, 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 adición de los spinner al marco.
import java.awt.BorderLayout;
import java.awt.event.WindowAdapter;
import java.awt.event.WindowEvent;
importjavax.swing.*;
/**
* @author ESAD
*/
frame.addWindowListener(new WindowAdapter() {
@Override
public void windowClosing(WindowEvent e){
System.exit(0);
}
});
frame.add(spn1, BorderLayout.PAGE_START);
frame.add(spn2, BorderLayout.PAGE_END);
}
}
Los spinners deben utilizarse cuando se quieren acotar los valores que el usuario pueda
proporcionar al programa, de manera que los valores predefinidos estén en orden
consecutivo, ya que este componente gráfico permite el movimiento de valor de manera
ascendente o descendente (flechas arriba o abajo).
2.2.9. Árbol
Este componente gráfico a diferencia de los anteriores crea un árbol de información, 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 información.
import java.awt.BorderLayout;
import java.awt.event.WindowAdapter;
import java.awt.event.WindowEvent;
importjavax.swing.*;
/**
* @author ESAD
*/
frame.addWindowListener(new WindowAdapter() {
@Override
public void windowClosing(WindowEvent e){
System.exit(0);
}
});
frame.add(arbol, BorderLayout.CENTER);
}
}
import java.awt.BorderLayout;
import java.awt.GridLayout;
import java.awt.event.MouseAdapter;
import java.awt.event.MouseEvent;
import java.awt.event.WindowAdapter;
import java.awt.event.WindowEvent;
importjavax.swing.*;
/**
* @author ESAD
*/
publicclass conversores{
frame.addWindowListener(new WindowAdapter() {
@Override
public void windowClosing(WindowEvent e){
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.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 realizarán las
acciones
}
});
publicvoidequivalenciaMoneda(){
inteleccion=cmbMoneda.getSelectedIndex();
if(eleccion==0)
txtPesos.setText("16.99");
if(eleccion==1)
txtPesos.setText("12.64");
if(eleccion==2)
txtPesos.setText("20.27");
}
publicvoidaparienciaGrados(){
//se configuran los componentes de grados
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");
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());
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");
btnMet.addMouseListener(new MouseAdapter() {
@Override
public void mouseClicked(MouseEvent e){
convertirMt(); //se invoca al metodo moneda, que sonde se realizarán las acciones
}
});
btnKm.addMouseListener(new MouseAdapter() {
@Override
public void mouseClicked(MouseEvent e){
convertirKm(); //se invoca al metodo moneda, que sonde se realizarán las acciones
}
});
pnlLongitud.add(lbl4);
pnlLongitud.add(txtPul);
pnlLongitud.add(lbl5);
pnlLongitud.add(txtCm);
pnlLongitud.add(btnCent);
pnlLongitud.add(new JLabel(" "));
pnlLongitud.add(lbl6);
pnlLongitud.add(txtYar);
pnlLongitud.add(lbl7);
pnlLongitud.add(txtMt);
pnlLongitud.add(btnMet);
pnlLongitud.add(new JLabel(" "));
pnlLongitud.add(lbl8);
pnlLongitud.add(txtMil);
pnlLongitud.add(lbl9);
pnlLongitud.add(txtKm);
pnlLongitud.add(btnKm);
pnlLongitud.add(new JLabel(" "));
}
Si ya has introducido el código mostrado en la clase previa (toda la clase completa) para
su ejecución en el IDE NetBeans, notarás que el compilador no permite su ejecución,
recuerda que para que eso ocurra debe definirse un método 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 continuación en el ejemplo de código 16:
El código azul es la declaración del paquete, el autor y la clase, así como sus
respectivas llaves.
Las dos líneas 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
línea invoca el método aparienciaTotal(); del objeto previamente creado, y
realizando esta llamada se crea el programa.
2.3. Menú
El uso del menú facilita la ubicación de funciones
de un programa o aplicación, ya que sus
elementos funcionan como accesos rápidos, y con
sólo un clic sobre el elemento del menú de interés
se llegará a la pantalla o función deseada.
En los siguientes subtemas se verá que los menús deben estar en una barra, cómo
crearla, así como la elaboración de los elementos y subelementos que el menú mostrará.
También se analizarán los menús emergentes.
Las opciones que ofrecen los menús están contenidas en una barra, así que al crear un
menú lo primero que se debe hacer es crear la barra para después colocar en ella los
elementos que se vayan creando. Para comprender mejor su creación, se debe analizar el
siguiente ejemplo de código 17.
El sombreado en:
Azul es la definición del paquete, clases a utilizar, autor, así como la declaración
de la clase y el método.
Verde tiene la creación del marco sobre el que se colocará el menú.
Morado tiene un panel azul, creado sólo 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 adición de la barra de menú al marco.
import java.awt.BorderLayout;
import java.awt.Color;
import java.awt.event.WindowAdapter;
import java.awt.event.WindowEvent;
importjavax.swing.*;
/**
* @author ESAD
*/
frame.addWindowListener(new WindowAdapter() {
@Override
public void windowClosing(WindowEvent e){
System.exit(0);
}
});
frame.add(barra, BorderLayout.PAGE_START);
frame.add(pnl, BorderLayout.PAGE_END);
}
}
En seguida se verá cómo crear elementos del menú que son las opciones que se
mostrarán, y que deben estar contenidas en la barra de menú para que sean visibles.
Se sombrea en azul la definición del paquete, clases a utilizar, autor, así como la
declaración de la clase y el método.
En sombreado verde se tiene la creación del marco sobre el que se colocará el
menú.
En sombreado morado se tiene un panel azul, creado sólo para ubicar mejor en la
pantalla el menú (se crea la barra del menú). Después se crean los elementos del
menú new javax.swing.JMenu(); y se añaden los elementos del menú (add) a la
barra previamente creada. Si se requieren submenús (javax.swing.JMenuItem()),
se crean y se añaden al menú de donde se deberán desplegar.
En sombreado rojo se tiene la adición de la barra de menú al marco.
import java.awt.BorderLayout;
import java.awt.Color;
import java.awt.event.WindowAdapter;
import java.awt.event.WindowEvent;
importjavax.swing.*;
/**
* @author ESAD
*/
frame.addWindowListener(new WindowAdapter() {
@Override
public void windowClosing(WindowEvent e){
System.exit(0);
}
});
elemento2.add(sub1);
barra.add(elemento1);
barra.add(elemento2);
frame.add(barra, BorderLayout.PAGE_START);
}
}
Sub-menú
Sub-menú Sub-sub-menú
Menús
Además de los menús tradicionales, como el que se acaba de revisar, también existe el
menú emergente el cual se estudiará a continuación.
En ocasiones se requiere contar con un menú que no esté visible todo el tiempo, que
aparezca sólo cuando el usuario así lo requiera, para ahorrar espacio dentro de la interfaz
gráfica de usuario, para ello existen los menús emergentes.
Se sombrea en azul la definición del paquete, clases a utilizar, autor, así como la
declaración de la clase y el método.
En sombreado verde se tiene la creación del marco sobre el que se colocará el
menú.
Se crea el menú emergente (JPopupMenu()). Después se crean los elementos del
menú JMenuItem() y se añaden los elementos del menú (add) al menú emergente
previamente creado.
En sombreado rojo se tiene la adición del menú emergente al marco.
import java.awt.BorderLayout;
import java.awt.Color;
import java.awt.event.WindowAdapter;
import java.awt.event.WindowEvent;
importjavax.swing.*;
/**
* @author ESAD
*/
frame.addWindowListener(new WindowAdapter() {
@Override
public void windowClosing(WindowEvent e){
System.exit(0);
}
});
frame.add(popup, BorderLayout.PAGE_START);
}
}
En este tema se ha analizado a los menús y su creación, esta última comienza con la
implementación de los elementos que los compondrán, así como la barra en la que se
posicionará el menú completo. También se analizaron los menús emergentes, la única
diferencia entre ellos es que el menú normal siempre está visible para el usuario en la
interfaz gráfica, mientras que el menú emergente aparecerá sólo 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
Por último, cabe resaltar que para un manejo adecuado de los menús se deberán agregar
eventos a éstos para que generen las acciones requeridas por los menús.
2.4. Ventanas
Hasta ahora se han visto diferentes componentes gráficos para crear una sola pantalla,
enseguida se verá cómo crear diferentes pantallas o ventanas en una misma aplicación.
Es decir se construirán diferentes marcos que se comuniquen entre sí, además de
conocer las ventanas auxiliares que pueden dar información a los usuarios (cuadros de
diálogo), ventanas que pueden proporcionar información de los archivos que tiene nuestra
computadora (JFileChooser) y el cambio de una ventana (marco) a otra.
Ejemplos de ventanas
Diálogo de entrada: este tipo de cuadro de diálogo solicita el ingreso de algún dato
en particular, el código que lo crea está en morado dentro del ejemplo de código
21, nótese que está igualado a una cadena, porque automáticamente este diálogo
retorna en una cadena lo que el usuario haya capturado en el cuadro de diálogo, si
se requiere otro tipo de dato tendrá que realizarse el casting (conversión de tipo de
datos) necesario. Este cuadro de diálogo se ejemplifica en la siguiente imagen:
datos puede personalizarse, en este caso el código que lo crea, está en morado
obscuro dentro del ejemplo de código 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 línea recibirá el objeto elegido del cuadro de diálogo, que
tiene como parámetros el título del cuadro de diálogo, así como el mensaje que
mostrará; se indica que es un mensaje de información y después se pasa el
arreglo de objetos, se indica el valor que mostrará por defecto (valores[0]). El
resultado de ese código implementado se muestra en la siguiente imagen:
o Mensaje de cuidado.
o Mensaje de error.
o Mensaje plano.
import javax.swing.JOptionPane;
/**
* @author ESAD
*/
public class ventanas {
Lo primero es crear un objeto del tipo selector de archivo e indicar que se muestre,
como se hace en la sección morada.
Una vez que se muestra para conocer el archivo que se ha elegido se utiliza un
método creado para ello, y se muestra el resultado en consola, como se hace en la
sección roja.
import java.io.File;
import javax.swing.JFileChooser;
/**
* @author ESAD
*/
public class ventanas2 {
Una de las prácticas más comunes al crear programas con componentes gráficos 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, después se
invoca de ese objeto al método que inicia la creación de la apariencia gráfica y por último
se elimina de la pantalla la ventana anterior, tal como se muestra en el ejemplo de código
23.
Cierre de la Unidad
Has concluido la segunda unidad del curso, a lo largo de ésta se ha visto el tema de
componentes gráficos, que son los elementos mediante los que se crean las interfaces
gráficas de usuario.
Como parte de este tema se vieron los contenedores, que son aquellos elementos que
conjuntan a los componentes gráficos para acomodarlos y crear las interfaces, también 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.
También se analizaron los controles, que son los componentes gráficos que conforman la
interfaz, entre ellos están las etiquetas con que se nombran los campos, los botones que
disparan acciones, las casillas de activación que detectan valores boléanos, las listas
desplegables para que el usuario pueda elegir un elemento de una lista predefinida,
campos de texto para recopilar información, á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 información y
árboles que despliegan información jerárquica.
Además, se estudiaron las barras de menús, los elementos de éstos, y también menús
emergentes, que ayudan a tener concentrada la información de un programa y al elegir
cualquiera de las opciones que se presente y se pueda redirigir el flujo del programa.
Por último se analizaron las ventanas, para saber cómo cambiar de una a otra, así como
el despliegue de cuadros de diálogo que ayudan a retroalimentar a los usuarios sobre el
funcionamiento del programa.
Es aconsejable que revises nuevamente la unidad en caso de que los temas que se
acaban de mencionar no te sean familiares o no los recuerdes, de no ser este tu caso, ya
estás preparado(a) para seguir con la unidad tres, en donde continuarás con la revisión de
conexión a base de datos, para que al final de la materia logres crear aplicaciones más
completas con almacenamiento de datos.
Es importante que instales un IDE en tu computadora personal para que pases todos los
ejemplos de código y veas cómo funcionan, de esta manera podrás analizar el
funcionamiento de los códigos presentados.
Se recomienda que instales NetBeans 7.0, como IDE, por su facilidad de uso,
puede ser descargado gratuitamente. Recuperado de
http://netbeans.org/downloads/
Si deseas conocer todas las propiedades asociadas a cada tipo de componente, revisa la
tabla de los componentes de swing con las propiedades que cada uno puede asociar, que
encontraras en la siguiente dirección electrónica:
(Oracle,The Java Tutorials. Recuperado de
http://docs.oracle.com/javase/tutorial/uiswing/components/index.html
En esta página obtendrás todos las propiedades para cada componente con que cuenta
JAVA, está escrito directamente por los autores del lenguaje.
Fuentes de consulta