Unidad 2. Componentes Graficos

Programacin orientada a objetos II
Unidad 2. Componentes Grficos
Ingeniera en Desarrollo de software 5 Cuatrimestre
Programa de la asignatura: Programacin orientada a objetos II Unidad 1. Eventos de Java
Clave: 150920518/ 160920518
Universidad abierta y a distancia de Mxico
Ciencias Exactas, Ingenieras y Tecnologa | Ingeniera en Desarrollo de Software

ndice
Unidad 2. Componentes grficos Presentacin de la unidad .............................................................................................. 4 Propsito ........................................................................................................................ 4 Competencia especfica ................................................................................................. 4 Actividad 1. Componentes grficos ................................................................................ 4 2.1. Contenedores .......................................................................................................... 5 2.1.1. Paneles ................................................................................................................ 5 2.1.2. Marco ................................................................................................................... 7 2.2. Controles ............................................................................................................... 12 2.2.1. Etiqueta .............................................................................................................. 12 2.2.2. Botones .............................................................................................................. 14 2.2.3. Casilla de activacin ........................................................................................... 16 2.2.4. Lista desplegable ............................................................................................... 18 2.2.5. Campo de texto .................................................................................................. 20 2.2.6. rea de texto ...................................................................................................... 22 2.2.7. Separador .......................................................................................................... 24 2.2.8. Spinner ............................................................................................................... 25 2.2.9. rbol ................................................................................................................... 27 Actividad 2. Contenedores y controles ......................................................................... 38 2.3. Men ..................................................................................................................... 39 2.3.1. Barra de men.................................................................................................... 39 2.3.2. Elemento de men ............................................................................................. 40 2.3.3. Men emergente ................................................................................................ 42 2.3.4. Separador .......................................................................................................... 44 2.4. Ventanas ............................................................................................................... 45 2.4.1. Cuadros de dialogo ............................................................................................ 45 2.4.2.Ventanas independientes y sus cambios ............................................................. 49 Actividad 3. Mens y ventanas ..................................................................................... 50 Autoevaluacin ............................................................................................................. 50 Evidencia de aprendizaje. ............................................................................................ 51

Autorreflexiones ........................................................................................................... 51 Cierre de la unidad ....................................................................................................... 51 Para saber ms ............................................................................................................ 52 Fuentes de consulta ..................................................................................................... 53

Unidad 2. Componentes grficos
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: 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.
Actividad 1. Componentes grficos

Antes comenzar con el contenido temtico de esta unidad dos, te presentamos un foro de discusin general, creado para que junto a tus compaeros discutan en torno al tema del uso de componentes grficos al crear aplicaciones de software; en l, conocers los puntos de vista de tus compaeros.

Propsito: comprender en grupo el tema principal de la unidad Los componentes como instruccin a ste. Para comenzar tu participacin, ingresa al foro: Componentes grficos y contesta las siguientes preguntas: Cules son los componentes grficos que conoces? Cul crees que es el componente ms importante para crear cualquier aplicacin de software? y Por qu? Recuerda realizar comentarios a la participacin de tus compaeros en el foro.
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.

Entonces decimos que los paneles son secciones que pueden configurarse de diferentes tamaos, colores, mrgenes, etc. Estos sirven para segmentar la apariencia grfica de una aplicacin, pudiendo 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, pues 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, Veamos el siguiente bloque de cdigo: 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; importjavax.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); } } Ahora explicaremos el cdigo presentado. En azul aparece la definicin del paquete donde se encuentra la clase y la importacin de bibliotecas, recuerda que esto es importante, pues el 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 adems cuenta con un borde. Por ltimo en la seccin roja se agregan los panales al marco.
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

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 hemos llamado frame, se configuran sus atributos mediante mtodos que ya se encuentran previamente definidos en la clase JFrame. En este caso se configuraron 3 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 { public static void main (String args[]){ JFrame frame=new JFrame("Marco / Frame"); frame.setLocation(200, 200); frame.setVisible(true); frame.setSize(300, 300); } } Ahora que ya identificaste las partes del el 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 graficas se utilizan libreras ya predefinidas; las bibliotecas de clases Java para el desarrollo de interfaces grficas de usuario son Swing y AWT, estas 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, estas 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:
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.
CardLayout: permite implementar un rea que contiene diferentes componentes en diferentes momentos, observa el ejemplo:
Ejemplo de CardLayout 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 en seguida:
De izquierda a derecha.
Ejemplo de FlowLayout
GridLayout: esta distribucin acomoda los componentes en filas y columnas, ajusta los elementos a que tengan un tamao similar, tal como lo veras en el siguiente ejemplo:
10

Ejemplo de GridLayout
GridBagLayout: alinea los elementos en filas y columnas, como el anterior, con la diferencia de que permite que un componente cubra varias filas y/o columnas presentados en el siguiente ejemplo:
Ejemplo de GridBagLayout 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 lo veras a continuacin:
Horizontal Ejemplo de GroupLayout
Vertical
SpringLayout: esta distribucin permite definir la relacin de espacio entre los componentes y sus bordes, observa el ejemplo:
11

Espacio
Ejemplo de SpringLayout
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 hemos visto los contenedores (paneles y marcos), as como las distribuciones (layout) para el acomodo de componentes dentro de los contenedores. En los temas siguientes veremos los dems componentes grficos.
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

import java.awt.BorderLayout; import java.awt.Color; import java.awt.event.WindowAdapter; import java.awt.event.WindowEvent; importjavax.swing.*; /** * @author ESAD */ public class etiquetas { public static void main (String args[]){ JFrame frame=new JFrame("Marco / Frame"); frame.setLocation(200, 200); frame.setVisible(true); frame.setSize(300, 300); frame.addWindowListener(new WindowAdapter() { @Override public void windowClosing(WindowEvent e){ System.exit(0); } });
JLabel etiq1= new javax.swing.JLabel(); etiq1.setText("Ejemplo1"); etiq1.setFont(new java.awt.Font("Calibri", 1, 11)); JLabel etiq2= new javax.swing.JLabel(); etiq2.setText("Ejemplo2"); etiq2.setForeground(Color.yellow); JLabel etiq3= new javax.swing.JLabel(); etiq3.setText("Ejemplo3"); etiq3.setVisible(false); frame.add(etiq1, BorderLayout.PAGE_START); frame.add(etiq2, BorderLayout.CENTER); frame.add(etiq3, BorderLayout.PAGE_END);
13

} } El ejemplo previo se encuentra conformado de la siguiente manera: 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 las etiquetas, en este ejemplo se crearon tres etiquetas, a las que se les coloco un texto (setText) y diferentes propiedades a cada una, de las cuales: o En la primera etiqueta se configuro 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 La segunda etiqueta se configuro 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. Te invitamos a continuar con el siguiente tema, para que contines involucrndote con el manejo de componentes grficos.
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

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 solo tiene agregado un texto. En sombreado rojo se tiene la adicin de los botones al marco. o
Ejemplo de cdigo 4. Declaracin y uso de botones package GUI; import java.awt.BorderLayout; import java.awt.Color; import java.awt.event.WindowAdapter; import java.awt.event.WindowEvent; importjavax.swing.*; /** * @author ESAD */ public class marco { public static void main (String args[]){ JFrame frame=new JFrame("Marco / Frame"); frame.setLocation(200, 200); frame.setVisible(true); frame.setSize(300, 300); frame.addWindowListener(new WindowAdapter() { @Override public void windowClosing(WindowEvent e){ System.exit(0); } });
JButtonbtn = new javax.swing.JButton(); btn.setText("Boton1"); btn.setMnemonic('B'); JButton btn2 = new javax.swing.JButton(); btn2.setText("Boton2");
15

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 manejado de eventos ms utilizado, por lo que 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 recordarte, que en los botones debes hacer el manejo de eventos, para que estos (botones) re-direccionen el flujo del programa hacia el mtodo que tratar la informacin, y 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 solo dos valores; Verdadero o Falso, es decir, solo sabremos si se activ o no, para comprender mejor lo dicho observa el siguiente ejemplo de cdigo donde: Se sombrea en azul la definicin del paquete, libreras a utilizar, autor, as como la declaracin de la clase y el mtodo. 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 veras que: o o La primer casilla solo tiene configurado el texto con el que aparecer. La segunda casilla tiene su propiedad de seleccionado en activado (setSelected(true); ), por lo que aparecer la casilla activa al ejecutar el cdigo. Recuerda estos componentes solo pueden tener dos valores Verdadero/ Falso (True/False).
16

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. o
Ejemplo de cdigo 5. Declaracin y uso de casillas de activacin package GUI; import java.awt.BorderLayout; import java.awt.Color; import java.awt.event.WindowAdapter; import java.awt.event.WindowEvent; importjavax.swing.*; /** * @author ESAD */ public class casilla { public static void main (String args[]){ JFrame frame=new JFrame("Marco / Frame"); frame.setLocation(200, 200); frame.setVisible(true); frame.setSize(300, 300); frame.addWindowListener(new WindowAdapter() { @Override public void windowClosing(WindowEvent e){ System.exit(0); } }); JCheckBox check1 = new javax.swing.JCheckBox(); check1.setText("Chek1"); JCheckBox check2 = new javax.swing.JCheckBox(); check2.setText("Chek2"); check2.setSelected(true); JCheckBox check3 = new javax.swing.JCheckBox(); check3.setText("Chek3"); check3.setForeground(Color.red);
17

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 solo recuerda que si quieres que los usuarios realicen elecciones sobre mltiples opciones debes utilizar casillas de activacin, en el caso que solo 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 solo podr elegir una opcin. Las listas desplegables ofrecen al usuario varias opciones de eleccin para un mismo concepto, pudiendo elegir solo uno de ellos. Veamos el siguiente ejemplo de cdigo, donde se crea una lista desplegable: 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 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, estas no pueden agregarse directamente a la lista, pues la lista solo recibe modelos. En sombreado rojo se tiene la adicin de la lista al marco.
18

Ejemplo de cdigo 7. Declaracin y uso de lista desplegable package GUI; import java.awt.event.WindowAdapter; import java.awt.event.WindowEvent; importjavax.swing.*; /** * @author ESAD */ public class lista { public static void main (String args[]){ JFrame frame=new JFrame("Marco / Frame"); frame.setLocation(200, 200); frame.setVisible(true); frame.setSize(300, 300); frame.addWindowListener(new WindowAdapter() { @Override public void windowClosing(WindowEvent e){ 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();
19

La primer opcin es obteniendo el elemento (item), el cual es seleccionado y convertido a cadena (String). La conversin es necesaria pues el mtodo getSelectedItem() retorna un valor tipo objeto, y por lo general lo que requerimos es el texto elegido, por ello se hace la conversintoString();. 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 solo 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 nuestro siguiente tema.
2.2.5. Campo de texto

Los campos de texto son uno de los componentes grficos ms utilizados para la creacin de GUIs, los elementos que hemos 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, contienen 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 veamos el siguiente ejemplo, en el cual se describe el cdigo para la implementacin de cajas de texto: Se sombrea en azul la definicin del paquete, libreras 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, donde el primero solo 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; import java.awt.BorderLayout; import java.awt.event.WindowAdapter;
20

import java.awt.event.WindowEvent; importjavax.swing.*; /** * @author ESAD */ public class campoTexto { public static void main (String args[]){ JFrame frame=new JFrame("Marco / Frame"); frame.setLocation(200, 200); frame.setVisible(true); frame.setSize(300, 300); frame.addWindowListener(new WindowAdapter() { @Override public void windowClosing(WindowEvent e){ 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 previo muestra solo la configuracin de los campos de texto ahora veamos cmo obtener lo que el usuario haya ingresado y tambin como validarlo. Es importante resaltar que lo que el campo de texto tiene dentro siempre es una cadena, pues as est estipulado en su definicin. Veamos los siguientes tres ejemplos donde: -En el ejemplo 1 sombreado azul, supongamos 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()).
21

-En el ejemplo 2 sombreado morado, supongamos 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, supongamos 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 estos tres ejemplos pueden darse muchos otros todo depende de lo que se requiera del programa, as que pon 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. Para ello es importante que lo comprendas con el siguiente ejemplo, donde: 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 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.
22

Ejemplo de cdigo 11. Declaracin y uso de rea de texto package GUI; import java.awt.BorderLayout; import java.awt.event.WindowAdapter; import java.awt.event.WindowEvent; importjavax.swing.*; /** * @author ESAD */ public class areaTexto { 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); } }); 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); } }
23

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 ten en cuenta que las reas de texto solo se utilizan cuando requieres recibir o mostrar una gran cantidad de informacin, si no requieres esto mejor utiliza los campos de texto que vimos en el apartado anterior y ahorra espacio en tu interfaz. Uno de los elementos que ayudan a ordenar las interfaces son los separadores, pues estos 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 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

/** * @author ESAD */ public class separador { public static void main (String args[]){ JFrame frame=new JFrame("Marco / Frame"); frame.setLocation(200, 200); frame.setVisible(true); frame.setSize(100, 150); frame.addWindowListener(new WindowAdapter() { @Override public void windowClosing(WindowEvent e){ System.exit(0); } }); JLabel etiq1= new javax.swing.JLabel(); etiq1.setText("Etiqueta1"); JLabel etiq2= new javax.swing.JLabel(); etiq2.setText("Etiqueta2"); frame.add(etiq1, BorderLayout.PAGE_START); frame.add(new JSeparator(SwingConstants.HORIZONTAL), BorderLayout.CENTER); frame.add(etiq2, BorderLayout.PAGE_END); } } Los separadores te sern de utilidad para dar un mejor orden y apariencia a las interfaces que implantes.
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

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 algn orden predeterminado. Veamos el siguiente ejemplo de cdigo, donde se plasma la creacin y uso del componente spinner: 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 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; import java.awt.BorderLayout; import java.awt.event.WindowAdapter; import java.awt.event.WindowEvent; importjavax.swing.*; /** * @author ESAD */ public class ejemploSpinner{ public static void main (String args[]){ JFrame frame=new JFrame("Marco / Frame"); frame.setLocation(200, 200); frame.setVisible(true); frame.setSize(200, 200); frame.addWindowListener(new WindowAdapter() { @Override public void windowClosing(WindowEvent e){
26

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 le valor que se ha seleccionado en el spinner, y retorna un objeto, por lo que debemos convertir el objeto en cadena toString(), para que podamos 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 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: 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 colocar el rbol.
27

En sombreado morado se tiene el rbol del cual: o Lo primero es declara 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; import java.awt.BorderLayout; import java.awt.event.WindowAdapter; import java.awt.event.WindowEvent; importjavax.swing.*; /** * @author ESAD */ public class arbol{ public static void main (String args[]){ JFrame frame=new JFrame("Marco / Frame"); frame.setLocation(200, 200); frame.setVisible(true); frame.setSize(200, 500); frame.addWindowListener(new WindowAdapter() { @Override public void windowClosing(WindowEvent e){ System.exit(0); } }); JTreearbol= new javax.swing.JTree(); javax.swing.tree.DefaultMutableTreeNode e1 = new
28

javax.swing.tree.DefaultMutableTreeNode("Inicio"); javax.swing.tree.DefaultMutableTreeNode e2 = new javax.swing.tree.DefaultMutableTreeNode("Segmento1"); javax.swing.tree.DefaultMutableTreeNode e3 = new javax.swing.tree.DefaultMutableTreeNode("E1-S1"); e1.add(e2); e2.add(e3); e3 = new javax.swing.tree.DefaultMutableTreeNode("E2-S1"); e2.add(e3); e3 = new javax.swing.tree.DefaultMutableTreeNode("E2-S1"); e2.add(e3); e2 = new javax.swing.tree.DefaultMutableTreeNode("Segmento 2"); e3 = new javax.swing.tree.DefaultMutableTreeNode("E1-S2"); e2.add(e3); e3 = new javax.swing.tree.DefaultMutableTreeNode("E2-S2"); 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 veamos un ejemplo de un programa conversor de unidades, de manera que adems de crear y manipular componentes grficos de manera aislada, aprendas como utilizarlos de manera conjunta para crear GUIs. El ejemplo queda como la imagen que se muestra a continuacin:
29

GUI del programa conversor de unidades
La imagen 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 esta junto a pesos. Equivalencia de grados, tiene un spinner numrico para ingresar los grados centgrados, las casillas de activacin si fueron seleccionadas mostraran 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 analicemos el cdigo 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, ntese 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
30

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 redireccionar 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();), y en base a este 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 re-direcciona 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 re-direcciona 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.
Ntese en el ejemplo que el programa esta 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.BorderLayout; import java.awt.GridLayout; import java.awt.event.MouseAdapter;
31

import java.awt.event.MouseEvent; import java.awt.event.WindowAdapter; import java.awt.event.WindowEvent; importjavax.swing.*; /** * @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(); JLabel lbl1 = new javax.swing.JLabel(); 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(); JLabel lbl4 = new javax.swing.JLabel(); JTextFieldtxtPul = new javax.swing.JTextField(); JLabel lbl5 = new javax.swing.JLabel(); JTextFieldtxtCm = new javax.swing.JTextField(); JButtonbtnCent = new javax.swing.JButton(); JLabel lbl6 = new javax.swing.JLabel(); JTextFieldtxtYar = new javax.swing.JTextField(); JLabel lbl7 = new javax.swing.JLabel(); JTextFieldtxtMt = new javax.swing.JTextField(); JButtonbtnMet = new javax.swing.JButton(); JLabel lbl8 = new javax.swing.JLabel(); JTextFieldtxtMil = new javax.swing.JTextField(); JLabel lbl9 = new javax.swing.JLabel();
32

JTextFieldtxtKm = new javax.swing.JTextField(); JButtonbtnKm = new javax.swing.JButton();
public void aparienciaTotal(){ JFrame frame=new JFrame("Marco / Frame"); frame.setLocation(200, 200); frame.setVisible(true); frame.setSize(600, 250); 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.setBackground(new java.awt.Color(255, 255, 255)); pnlMoneda.setBorder(javax.swing.BorderFactory.createTitledBorder(javax.swing.BorderFa ctory.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
33

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) txtPesos.setText("12.64"); if(eleccion==2) txtPesos.setText("20.27"); } publicvoidaparienciaGrados(){ //se configuran los componentes de grados pnlGrados.setBackground(new java.awt.Color(255, 255, 255)); pnlGrados.setBorder(javax.swing.BorderFactory.createTitledBorder(javax.swing.BorderFa ctory.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
34

public void mouseClicked(MouseEvent e){ equivalenciaGrados(); //se invoca al metodo moneda, que sonde se realizarn las acciones } }); //se agregan los componentes al panel moneda GridLayoutacomodo = new GridLayout(4,2); 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");
35

lbl9.setText("Kilometros"); btnKm.setText("Convertir");
//Se agrega el manejo de eventos a cada boton btnCent.addMouseListener(new MouseAdapter() { @Override public void mouseClicked(MouseEvent e){ convertirCm(); //se invoca al metodo moneda, que sonde se realizarn las acciones } }); btnMet.addMouseListener(new MouseAdapter() { @Override public void mouseClicked(MouseEvent e){ convertirMt(); //se invoca al metodo moneda, que sonde se realizarn las acciones } }); btnKm.addMouseListener(new MouseAdapter() { @Override public void mouseClicked(MouseEvent e){ convertirKm(); //se invoca al metodo moneda, que sonde se realizarn las acciones } });
//se agregan los componentes al panel moneda GridLayoutacomodo = new GridLayout(9,2); pnlLongitud.setLayout(acomodo); 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);
36

pnlLongitud.add(new JLabel(" ")); pnlLongitud.add(lbl8); pnlLongitud.add(txtMil); pnlLongitud.add(lbl9); pnlLongitud.add(txtKm); pnlLongitud.add(btnKm); pnlLongitud.add(new JLabel(" ")); } 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, pues 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 llamado la cual se muestra a continuacin: 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.
37

Ejemplo de cdigo 16. Clase de llamado package GUI; /** * @author ESAD */ public class conv { public static void main (String args[]){ conversores c=new conversores(); c.aparienciaTotal(); } } Es recomendable que realices modificaciones al cdigo presentado en el ejemplo 16 para que juegues con l y veas el funcionamiento que cada lnea crea.
Actividad 2. Contenedores y controles

En esta actividad se solicita que se realice un programa con apariencia grfica, este programa deber contener el uso de todos los componentes grficos que se han visto hasta este momento (contenedores -paneles y marcos- y controles -etiqueta, botn, casilla de activacin, lista desplegable, campo de texto, rea de texto, separador, spinner y rbol). Esto con la finalidad de que practiques la construccin de componentes grficos y la manipulacin de sus propiedades. Propsito: Crear un programa en base a componentes grficos, donde se manipulen las propiedades de los diferentes tipos de contenedores y controles grficos. Para comenzar con tu prctica, realiza las siguientes instrucciones: 1. Crea un proyecto en Netbeans, que contenga las clases necesarias para completar un programa, demostrando los diferentes tipos de contenedores y controles grficos, incluyendo la estructura algortmica (pasos) y sintctica (cdigo) vistos durante la unidad. 2. Copia todo el cdigo en un procesador de textos, sombrea cada parte del cdigo y describe lo que muestras, enva adems del proyecto el documento con la descripcin de tu cdigo. 3. Guarda la actividad con el nombre POO2_U2_A2_XXYZ. Sustituye las XX por las dos primeras letras del primer nombre, la Y por la inicial del apellido paterno y la Z por la inicial del apellido materno. Ingresa al apartado de tareas, sube tu archivo para el facilitador(a) y recibe retroalimentacin.
38

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 solo 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 veremos que los mens deben estar en una barra, cmo crearla, as como crear los elementos y subelementos que el men mostrar. Tambin veremos 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 que comprendas mejor el cmo crearla, presta atencin al siguiente ejemplo en donde encontraras sombreado en: Azul: la definicin del paquete, libreras a utilizar, autor, as como la declaracin de la clase y el mtodo. Verde: se tiene la creacin del marco sobre el que se colocar el mnu. Morado: se tiene un panel azul, creado solo para ubicar mejor la barra del men, se crea la barra del men en la pantalla mediante su constructor new javax.swing.JMenuBar(). Rojo se tiene la adicin de la barra de men al marco.
Al ser la barra de men un contenedor de elementos, solo requerimos declararla, lo que conforma en si este elemento sern las acciones que se adicionen.
Ejemplo de cdigo 17. Declaracin y uso de barra de men package GUI; import java.awt.BorderLayout; import java.awt.Color; import java.awt.event.WindowAdapter; import java.awt.event.WindowEvent; importjavax.swing.*; /**
39

* @author ESAD */ public class menu{ public static void main (String args[]){ JFrame frame=new JFrame("Marco / Frame"); frame.setLocation(200, 200); frame.setVisible(true); frame.setSize(300, 200); frame.addWindowListener(new WindowAdapter() { @Override public void windowClosing(WindowEvent e){ System.exit(0); } }); JPanelpnl = new javax.swing.JPanel(); pnl.setBackground(Color.CYAN); JMenuBarbarra = new javax.swing.JMenuBar(); frame.add(barra, BorderLayout.PAGE_START); frame.add(pnl, BorderLayout.PAGE_END); } }
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.
2.3.2. Elemento de men

Cada elemento de un men debe ser creado y configurado; Por lo tanto en la seccin anterior se vio que los elementos se deben contener en una barra la cual se declara, ahora veremos cmo se crean los elementos que conformarn las diferentes opciones del men. En el siguiente ejemplo de cdigo se crean elementos de men, y se aaden a una barra de men para mostrarlos en la interfaz, en el cual debers ligar cada descripcin con el cdigo que se explica, para que comprendas mejor la sintaxis de los mens, veamos a continuacin la explicacin y cdigo:
40

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 colocar el men. En sombreado morado se tiene un panel azul, creado solo 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; import java.awt.BorderLayout; import java.awt.Color; import java.awt.event.WindowAdapter; import java.awt.event.WindowEvent; importjavax.swing.*; /** * @author ESAD */ public class menu{ public static void main (String args[]){ JFrame frame=new JFrame("Marco / Frame"); frame.setLocation(200, 200); frame.setVisible(true); frame.setSize(300, 200); frame.addWindowListener(new WindowAdapter() { @Override public void windowClosing(WindowEvent e){ System.exit(0); } }); JPanelpnl = new javax.swing.JPanel(); pnl.setBackground(Color.CYAN); frame.add(pnl, BorderLayout.PAGE_END);
41

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); } } Entindase entonces que el acomodo de mens queda de la siguiente manera:
Elementos del men Sub-men Sub-men Sub-sub-men Barra de 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.
2.3.3. Men emergente
42

En ocasiones se requiere contar con un men que no est visible todo el tiempo, que se vea solo 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) al aparecer la ventana grfica de una aplicacin no se ve, debern agregarse manejo de eventos para que aparezcan, su construccin es similar a los anteriores, se declara el men emergente, se crean elementos de men y se aaden al emergente, tal como si se aadieran a una barra de men. Veamos el siguiente ejemplo, donde se ve cmo crear un men emergente, el cual al igual que en un men normal debern crearse sus elementos y despus aadirse a este: 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 colocar el 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; import java.awt.BorderLayout; import java.awt.Color; import java.awt.event.WindowAdapter; import java.awt.event.WindowEvent; importjavax.swing.*; /** * @author ESAD */ public class menu{ public static void main (String args[]){ JFrame frame=new JFrame("Marco / Frame"); frame.setLocation(200, 200); frame.setVisible(true); frame.setSize(300, 200); frame.addWindowListener(new WindowAdapter() {
43

@Override public void windowClosing(WindowEvent e){ 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 hemos visto los mens y que para crearlos debemos construir tambin los elementos que los compondrn, as como la barra en la que se posicionara el men completo. Tambin vimos los mens emergentes, la nica diferencia entre ellos es que el men normal esta siempre visible para el usuario en la interfaz grfica, mientras que el men emergente surgir solo cuando el usuario se posicione sobre el rea donde se mostrar, de esta manera el men solo ser disponible cuando el usuario as lo quiera.
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

Ejemplo de separador en un men Por ltimo cabe resaltar que para un manejo adecuado de los mens se debern agregar eventos a estos para que generen las acciones requeridas por los mens.
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.
2.4.1. Cuadros de dialogo

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 dialogo que son de ayuda en estas ocasiones. Los cuadros de dialogo 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 dialogo, entre ellos los siguientes: Dialogo de confirmacin: El dialogo 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 ms adelante se mostrara. Como podrs observar en el cdigo el dialogo de confirmacin se igualo a un entero, como se puede ver en la imagen siguiente que el dialogo de confirmacin ofrece tres respuestas, Si, No y Cancelar, y para saber qu respuesta brindo el usuario, el dialogo de confirmacin retorna un nmero con la opcin elegida, siendo 0-Si, 1-No y 2-Cancelar.
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. Dialogo de entrada personalizada: Este cuadro de dialogo 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, ntese 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 dialogo, 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 tambin el valor que mostrar por defecto (valores[0]).El resultado de ese cdigo implementado se muestra en la siguiente imagen.
Dialogo de entrada personalizada.
46

Mensaje: Lo que realiza es mostrar un mensaje al usuario, una de las caractersticas interesantes de este cuadro de dialogo es que puedes indicar el tipo de mensaje que es y en base a ello colocar un icono representativo (vase el cdigo que los crea marcado en verde dentro del Ejemplo de cdigo 21), el resultado de cdigo se muestra en las siguientes imgenes: o Mensaje de cuidado. o Mensaje de error. o Mensaje plano.
Mensaje de cuidado.
Mensaje de error.
Mensaje plano. Dialogo opcional: En este cuadro de dialogo pueden personalizarse los botones que tendr, as como lo que estos dirn, si has observado en todos los ejemplos anteriores no se indica nada sobre los botones que aparecern, ya que estos se crean automticamente, pero en este cuadro de dialogo 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. Y el resultado se muestra en la siguiente imagen.
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

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 utilizadas es el selector de archivos, este es muy utilizado como su nombre lo indica para seleccionar un archivo o la ruta de alguna carpeta. Generalmente esto es utilizado para la carga de archivos. En el ejemplo que se muestra a continuacin solo 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 leeremos o escribiremos en un archivo, pero por ahora solo construiremos la ventana para fines didcticos sobre la creacin de componentes grficos que se ha creado separado. A continuacin veremos cmo se utiliza en un ejemplo, pero para ello debers leer lo siguiente: Lo primero es crear un objeto del tipo selector de archivo e indicar que se muestre, tal 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); } }
49

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 esto terminamos el estudio de las ventanas, lo importante es que aprendas que puede 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.
Actividad 3. Mens y ventanas

Ahora que aprendiste todas las caractersticas de funcionamiento para los mens y ventanas, ests listo para realizar las siguientes instrucciones. Propsito: Construir mens y ventanas grficas, as como identificar su declaracin e implementar su manipulacin. Instrucciones: 1. Identifica los diferentes tipos de mens y ventanas grficas vistas en el desarrollo de la unidad. 2. Identifica su estructura algortmica (pasos) y sintctica (cdigo). 3. Crea un proyecto en NetBeans, que contenga un programa donde apliques todos los contenedores y controles identificados en los puntos 1 y 2. 4. Guarda la actividad con el nombre POO2_U2_A3_XXYZ. Sustituye las XX por las dos primeras letras del primer nombre, la Y por la inicial del apellido paterno y la Z por la inicial del apellido materno. 5. Ingresa al apartado de tareas y sube tu archivo 6. Enva el archivo al facilitador(a) para recibir retroalimentacin. 7. Consulta la escala de evaluacin para conocer los parmetros de la actividad.
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

Recuerda que es muy importante leer cuidadosamente los planteamientos indicados y elegir la opcin adecuada para cada uno.
Evidencia de aprendizaje. Programa con componentes grficos

Como parte de la evaluacin de esta unidad, es necesario realizar un programa que resuelva alguna problemtica de tu entorno y que utilices componentes grficos. Ingresa al aula virtual para realizar la actividad. Propsito: Realizar un programa modular utilizando componentes grficos. Instrucciones: 1. Identifica los diferentes componentes grficos presentados durante esta unidad. 2. Identifica la estructura algortmica (pasos) y sintctica (cdigo) para manejar componentes grficos. 3. Crea un proyecto en NetBeans. El proyecto deber contener las clases necesarias para que construyas un programa que resuelva algn problema de tu entorno, y que utilice interfaces grficas con el uso de todos los tipos de componentes grficos vistos en la unidad (Por ejemplo una calculadora de intereses, calculadora cientfica, clculos de pago de nmina, etc.). 4. Guarda la actividad con el nombre POO2_U2_EA_XXYZ. Sustituye las XX por las dos primeras letras del primer nombre, la Y por la inicial del apellido paterno y la Z por la inicial del apellido materno. 5. Enva el archivo al facilitador(a) a travs de la seccin de Evidencias.
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

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 vieron 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 vieron las barras de mens, los elementos de estos, y tambin mens emergentes, que ayudan a tener concentrada la informacin de un programa y al elegir cualquiera de las opciones que se presente y se pueda redirigir el flujo del programa. Por ltimo se vieron las ventanas, para saber cmo cambiar de una a otra, as como el despliegue de cuadros de dialogo que ayudan a retroalimentar a los usuarios sobre el funcionamiento del programa. La siguiente unidad trata sobre conexin a bases de datos, todo lo que se ha visto en esta unidad te ser de utilidad, ya que para mostrar informacin obtenida de la base de datos requieres componentes grficos donde colocar dicha informacin. 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 ests preparado(a) para seguir con la unidad tres, en donde continuars con la revisin de conexin a base de datos, para al final de la materia logres crear aplicaciones ms completas con almacenamiento de datos.
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

En esta pgina obtendrs todos las propiedades para cada componente con que cuenta JAVA, est escrito directamente por los duelos del lenguaje.
Fuentes de consulta
Robert Eckstein, Marc Loy, Dave Wood de America OReilly 1998 JAVA Swing Estados Unidos
Francisco Javier Ceballos 2006 Interfaces grficas y aplicaciones para internet, 2da Edicin Espaa RA-MA Oracle 2011 The JAVA Tutorials Estados Unidos de America Oracle
Eckstein, R., Loy, M., Wood, D. (1998) JAVA Swing. Estados Unidos de Amrica: OReilly. Ceballos, F. (2006) Interfaces grficas y aplicaciones para internet, 2da Edicin. Espaa: RA-MA. Oracle (2011) The JAVA Tutorials. Estados Unidos de Amrica: Oracle.
53

Unidad 2. Componentes Graficos

Enviado por

Dados do documento

Direitos autorais

Formatos disponíveis

Compartilhar este documento

Compartilhar ou incorporar documento

Opções de compartilhamento

Você considera este documento útil?

Este conteúdo é inapropriado?

Direitos autorais:

Formatos disponíveis

Unidad 2. Componentes Graficos

Enviado por

Direitos autorais:

Formatos disponíveis

Programacin orientada a objetos II

Unidad 2. Componentes Grficos

Ingeniera en Desarrollo de software 5 Cuatrimestre

Programa de la asignatura: Programacin orientada a objetos II Unidad 1. Eventos de Java

Clave: 150920518/ 160920518

Universidad abierta y a distancia de Mxico

Ciencias Exactas, Ingenieras y Tecnologa | Ingeniera en Desarrollo de Software

Programacin orientada a objetos II

Ciencias Exactas, Ingenieras y Tecnologa | Ingeniera en Desarrollo de Software

Programacin orientada a objetos II

Ciencias Exactas, Ingenieras y Tecnologa | Ingeniera en Desarrollo de Software

Programacin orientada a objetos II

Actividad 1. Componentes grficos

Ciencias Exactas, Ingenieras y Tecnologa | Ingeniera en Desarrollo de Software

Programacin orientada a objetos II

Ciencias Exactas, Ingenieras y Tecnologa | Ingeniera en Desarrollo de Software

Programacin orientada a objetos II

Ciencias Exactas, Ingenieras y Tecnologa | Ingeniera en Desarrollo de Software

Programacin orientada a objetos II

Ciencias Exactas, Ingenieras y Tecnologa | Ingeniera en Desarrollo de Software

Programacin orientada a objetos II

Ciencias Exactas, Ingenieras y Tecnologa | Ingeniera en Desarrollo de Software

Programacin orientada a objetos II

Ciencias Exactas, Ingenieras y Tecnologa | Ingeniera en Desarrollo de Software

Programacin orientada a objetos II

Ciencias Exactas, Ingenieras y Tecnologa | Ingeniera en Desarrollo de Software

Programacin orientada a objetos II

Horizontal Ejemplo de GroupLayout

Ciencias Exactas, Ingenieras y Tecnologa | Ingeniera en Desarrollo de Software

Programacin orientada a objetos II

Ciencias Exactas, Ingenieras y Tecnologa | Ingeniera en Desarrollo de Software

Programacin orientada a objetos II

Ciencias Exactas, Ingenieras y Tecnologa | Ingeniera en Desarrollo de Software

Programacin orientada a objetos II

Ciencias Exactas, Ingenieras y Tecnologa | Ingeniera en Desarrollo de Software

Programacin orientada a objetos II

Ciencias Exactas, Ingenieras y Tecnologa | Ingeniera en Desarrollo de Software

Programacin orientada a objetos II

2.2.3. Casilla de activacin

Ciencias Exactas, Ingenieras y Tecnologa | Ingeniera en Desarrollo de Software

Programacin orientada a objetos II

Ciencias Exactas, Ingenieras y Tecnologa | Ingeniera en Desarrollo de Software

Programacin orientada a objetos II

2.2.4. Lista desplegable

Ciencias Exactas, Ingenieras y Tecnologa | Ingeniera en Desarrollo de Software

Programacin orientada a objetos II

Ciencias Exactas, Ingenieras y Tecnologa | Ingeniera en Desarrollo de Software

Programacin orientada a objetos II

2.2.5. Campo de texto

Ciencias Exactas, Ingenieras y Tecnologa | Ingeniera en Desarrollo de Software

Programacin orientada a objetos II

Ciencias Exactas, Ingenieras y Tecnologa | Ingeniera en Desarrollo de Software

Programacin orientada a objetos II

2.2.6. rea de texto

Ciencias Exactas, Ingenieras y Tecnologa | Ingeniera en Desarrollo de Software

Programacin orientada a objetos II

Ciencias Exactas, Ingenieras y Tecnologa | Ingeniera en Desarrollo de Software

Programacin orientada a objetos II

Ciencias Exactas, Ingenieras y Tecnologa | Ingeniera en Desarrollo de Software

Programacin orientada a objetos II

Ciencias Exactas, Ingenieras y Tecnologa | Ingeniera en Desarrollo de Software

Programacin orientada a objetos II

Ciencias Exactas, Ingenieras y Tecnologa | Ingeniera en Desarrollo de Software

Programacin orientada a objetos II