Documentos de Académico
Documentos de Profesional
Documentos de Cultura
Unidad 2. Componentes Graficos
Unidad 2. Componentes Graficos
Programa de la asignatura:
Programacin orientada a objetos II
Unidad 1. Eventos de Java
Presentacin de la unidad
Bienvenido a la unidad dos en donde examinaras 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 almacn 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, que te ayudara a comprender mejor cada forma en que se
construyen las interfaces grficas.
No olvides consultar las dudas que te surjan a tu facilitador para una mejor comprensin a
los temas y dar continuidad a tu estudio de POO2.
Propsito
En esta unidad logrars:
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 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 solo
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 y seguramente cuenta con un espacio para escribir texto; pues estos elementos
que acabamos de mencionar son justamente componentes grficos.
Todos los componentes grficos son objetos y como tales para declararlos se debe
invocar 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 tanto deberemos importar dicha librera (recuerda que una librera es un
conjunto de funcionalidades estndares compartidas, que ya estn codificadas y solo
debemos utilizar) para el uso de estos componentes. (Ceballos, 2006).
Finalmente solo falta mencionar que los contenedores son supra-componentes 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, veremos cmo crear contenedores, as
como sus caractersticas y propiedades configurables.
2.1.1. Paneles
El primer tipo de contenedores que revisaremos son los paneles, estos ayudan a definir
secciones dentro de una interfaz grfica.
Cmo pudiste observar se hablo del marco (la ventana) que es el contenedor principal,
donde se encontrarn los panales, por lo tanto continua con el siguiente tema para que
comprendas la definicin de un marco y 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 al 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.
Veamos el siguiente ejemplo de cdigo, donde:
Se sombrea en azul la definicin del paquete, librera 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
Ejemplo de BorderLayout
BoxLayout: esta distribucin acomoda todos los componentes uno tras de otro en
una sola fila o columna, segn el espacio disponible, a continuacin observa el
ejemplo de ste:
Ejemplo de BoxLayout
Lo sealado
sera el rea
implementada.
Ejemplo de CardLayout
De izquierda a derecha.
Ejemplo de FlowLayout
10
Ejemplo de GridLayout
Ejemplo de GridBagLayout
Vertical
Horizontal
Ejemplo de GroupLayout
11
Ejemplo de SpringLayout
2.2. Controles
En los siguientes apartados observaras todo lo relacionado con el tema controles, con los
que podrs comenzar a crear apariencias grficas ms sofisticadas para los programas
que vayas creando.
Realizando un recuento de la unidad, en el 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 veremos 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, veamos el siguiente cdigo, en donde se
representa el uso de sus propiedades:
Ejemplo de cdigo 3. Declaracin y uso de etiquetas
package GUI;
12
13
2.2.2. Botones
El tema que trataremos en este apartado es el de botones, en este veremos 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 este desencadenar.
Veamos el siguiente ejemplo, donde podrs observar la creacin de botones, as como la
personalizacin de sus propiedades:
Se sombrea en azul la definicin del paquete, libreras a utilizar, autor, as como la
declaracin de la clase y el mtodo.
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:
14
15
16
17
18
19
20
21
22
23
2.2.7. Separador
Para mantener una apariencia grfica ordenada, comnmente se utilizan secciones en la
interfaz, para tener as tambin tener ordenados los componentes grficos con que se
cree esta. Una de las formas de hacer esto 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.
Veamos el siguiente ejemplo de cdigo, donde se demuestra y explica la creacin y uso
de separadores:
Se sombrea en azul la definicin del paquete, libreras a utilizar, autor, as como la
declaracin de la clase y el mtodo.
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;
import java.awt.BorderLayout;
import java.awt.event.WindowAdapter;
import java.awt.event.WindowEvent;
importjavax.swing.*;
24
2.2.8. Spinner
Existen situaciones en las que requerimos que los usuarios nos den 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 fechitas se puede ir incrementando o reduciendo su
valor.
25
26
2.2.9. rbol
Este componente grfico a diferencia de los anteriores crea un rbol de informacin como
tal, permitiendo 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 podramos
comprarlo 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.
Veamos el siguiente ejemplo de cdigo donde se crea y maneja un rbol:
27
28
29
30
31
32
33
34
35
36
37
38
39
En seguida veremos cmo crear elementos del men que son las opciones que se nos
mostrarn; las cuales deben estar contenidas en la barra de men para que sean visibles.
40
41
Barra de men
Sub-men
Sub-men
Sub-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, estos se aaden precisamente a la barra.
Si el elemento de men va a desplegar otras opciones se crean submens y estos
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 estos al submen de donde se deber desplegar.
Adems de los mens tradicionales como el que acabamos de revisar tambin existe el
men emergente el cual veremos a continuacin.
42
43
2.3.4. Separador
El separador de men es el mismo concepto del separador de ventana visto
anteriormente (2.2.7. Separador), ste solo es la creacin de una lnea divisoria para
separar elementos de un men, su declaracin es la misma y solo se aade entre los
componentes que se quiera separar.
Observa el siguiente ejemplo de cdigo y su imagen, 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);
44
2.4. Ventanas
Hasta ahora se han visto diferentes componentes grficos con los que se crean en una
sola pantalla, ahora veremos cmo crear diferentes pantallas o ventanas en una misma
aplicacin. Es decir construiremos diferentes marcos que se comuniquen entre s, adems
de conocer las ventanas auxiliares que pueden dar informacin a los usuarios (cuadros de
dialogo), ventanas que pueden proporcionarnos informacin de archivos que tiene nuestra
computadora (JFileChooser) y el cambio de una ventana (marco) a otra.
45
Dialogo de confirmacin.
Dialogo de entrada: Este tipo de cuadro de dialogo 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, pues automticamente este dialogo
retorna en una cadena lo que el usuario haya capturado en el cuadro de dialogo, si
se requiere otro tipo de dato tendr que realizarse el casting (conversin de tipo de
datos) necesario. Este cuadro de dialogo se ejemplifica en la siguiente imagen.
Dialogo de entrada.
46
Mensaje de cuidado.
Mensaje de error.
Mensaje plano.
47
Mensaje de cuidado.
Revisa detalladamente el siguiente cdigo, donde se tienen los bloques que construyen
cada uno de los cuadros de dialogo mencionados. Identifica cada porcin mencionada,
para que puedas comprender mejor la sintaxis.
Ejemplo de cdigo 21. Declaracin y uso de cuadros de dialogo
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" };
48
49
Autoevaluacin
Para reforzar los conocimientos relacionados con los temas que se abordaron en esta
segunda unidad del curso, es necesario que resuelvas la actividad de autoevaluacin .
50
Autorreflexiones
Adems de enviar tu trabajo de la Evidencia de aprendizaje, es importante que ingreses
al foro Preguntas de Autorreflexin y consultes las preguntas que tu Facilitador(a)
presente, a partir de ellas, debes elaborar tu Autorreflexin en un archivo de texto llamado
POO2_U2_ATR_XXYZ. Posteriormente enva tu archivo mediante la herramienta
Autorreflexiones.
Cierre de la unidad
Has concluido la segunda unidad del curso, a lo largo de esta 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
51
Para saber ms
Es importante que instales un IDE en tu computadora personal para que pases todos los
ejemplos de cdigo y veas cmo funcionan, de esta manera podrs analizar el
funcionamiento de los cdigos presentados.
*Nota: se recomienda que instales NetBeans 7.0, como IDE, por su facilidad de uso, este
puede ser descargado gratuitamente de la siguiente liga:
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 direccin electrnica:
(Oracle,The Java Tutorials, Consultado Enero, 2012)
http://docs.oracle.com/javase/tutorial/uiswing/components/index.html
52
Fuentes de consulta
Eckstein, R., Loy, M., Wood, D. (1998) JAVA Swing. Estados Unidos de Amrica:
OReilly.
53