• Author / Uploaded
• Yazmin Adriana

Citation preview

Programación orientada a objetos II Unidad 2. Componentes Gráficos

Ingeniería en Desarrollo de software 5 Cuatrimestre

Programa de la asignatura: Programación orientada a objetos II Unidad 1. Eventos de Java

Clave: 150920518/ 160920518

Universidad abierta y a distancia de México

Ciencias Exactas, Ingenierías y Tecnología | Ingeniería en Desarrollo de Software

1

Programación orientada a objetos II Unidad 2. Componentes Gráficos Índice

Unidad 2. Componentes gráficos Presentación de la unidad .............................................................................................. 4 Propósito ........................................................................................................................ 4 Competencia específica ................................................................................................. 4 Actividad 1. Componentes gráficos ................................................................................ 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 activación ........................................................................................... 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. Menús y ventanas ..................................................................................... 50 Autoevaluación ............................................................................................................. 50 Evidencia de aprendizaje. ............................................................................................ 51

Ciencias Exactas, Ingenierías y Tecnología | Ingeniería en Desarrollo de Software

2

Programación orientada a objetos II Unidad 2. Componentes Gráficos Autorreflexiones ........................................................................................................... 51 Cierre de la unidad ....................................................................................................... 51 Para saber más ............................................................................................................ 52 Fuentes de consulta ..................................................................................................... 53

Ciencias Exactas, Ingenierías y Tecnología | Ingeniería en Desarrollo de Software

3

Programación orientada a objetos II Unidad 2. Componentes Gráficos Unidad 2. Componentes gráficos

Presentación de la unidad Bienvenido a la unidad dos en donde examinaras los componentes que se utilizan para crear aplicaciones gráficas 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 almacén de información, que es el tema que se verá en la siguiente unidad. Por lo tanto en esta unidad deberás poner atención a la sintaxis del uso de los componentes gráficos, que te ayudara a comprender mejor cada forma en que se construyen las interfaces gráficas. No olvides consultar las dudas que te surjan a tu facilitador para una mejor comprensión a los temas y dar continuidad a tu estudio de POO2.

Propósito En esta unidad lograrás:    

Identificar diferentes tipos de componentes gráficos y su codificación. Comprender la sintaxis de creación de diferentes componentes gráficos, así como la manipulación de sus propiedades. Unir diferentes componentes gráficos en una sola clase para crear interfaces gráficas. Crear, programas con interfaz gráfica y manipularlos mediante eventos.

Competencia específica Utilizar las clases y estructuras de los componentes gráficos para crear aplicaciones con interfaces gráficas, mediante el lenguaje de programación JAVA.

Actividad 1. Componentes gráficos Antes comenzar con el contenido temático de esta unidad dos, te presentamos un foro de discusión general, creado para que junto a tus compañeros discutan en torno al tema del “uso de componentes gráficos al crear aplicaciones de software”; en él, conocerás los puntos de vista de tus compañeros.

Ciencias Exactas, Ingenierías y Tecnología | Ingeniería en Desarrollo de Software

4

Programación orientada a objetos II Unidad 2. Componentes Gráficos Propósito: comprender en grupo el tema principal de la unidad “Los componentes” como instrucción a éste. Para comenzar tu participación, ingresa al foro: Componentes gráficos y contesta las siguientes preguntas: ¿Cuáles son los componentes gráficos que conoces? ¿Cuál crees que es el componente más importante para crear cualquier aplicación de software? y ¿Por qué? Recuerda realizar comentarios a la participación de tus compañeros en el foro.

2.1. Contenedores Las aplicaciones más utilizadas cuentan con interfaz GUI (siglas en inglés) que en español significa gráfica de usuario esta interfaz es la carta de presentación de la aplicación, que ofrece al usuario una interacción; esa apariencia debe programarse mediante componentes gráficos. Para tener una idea más clara al respecto, tan solo observa el navegador en el que te encuentras revisando este material, en el podrás distinguir que en la parte superior cuenta con un menú, que también tiene algunos botones y seguramente cuenta con un espacio para escribir texto; pues estos elementos que acabamos de mencionar son justamente componentes gráficos. Todos los componentes gráficos son objetos y como tales para declararlos se debe invocar la clase a la que pertenece, el componente en cuestión e ir utilizando los métodos que tienen predefinidos para configurar sus características. Todos esos elementos se encuentran en el paquete javax.swing (algunos pertenecen a java.awt) y son subclase de JComponent, por tanto deberemos importar dicha librería (recuerda que una librería es un conjunto de funcionalidades estándares compartidas, que ya están codificadas y solo debemos utilizar) para el uso de estos componentes. (Ceballos, 2006). Finalmente solo falta mencionar que los contenedores son supra-componentes gráficos que, precisamente como su nombre lo indica ayudan a contener, agrupar y organizar otros componentes gráficos dentro de ellos, esto se hace para tener un mejor control sobre la ubicación de dichos componentes en la interfaz gráfica que se esté construyendo. En los siguientes subtemas “paneles” y “marco”, veremos cómo crear contenedores, así como sus características 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 gráfica.

Ciencias Exactas, Ingenierías y Tecnología | Ingeniería en Desarrollo de Software

5

Programación orientada a objetos II Unidad 2. Componentes Gráficos Entonces decimos que los paneles son secciones que pueden configurarse de diferentes tamaños, colores, márgenes, etc. Estos sirven para segmentar la apariencia gráfica de una aplicación, pudiendo crear divisiones en la GUI. Las propiedades de los paneles son muy diversas, pero entre las que más destacan son los bordes y color de fondo, pues son estas características las que ayudan a segmentar una aplicación. En seguida podrás observar un ejemplo que muestra la sintaxis para construir paneles y su uso, Veamos el siguiente bloque de código: Ejemplo de código 1. Declaración 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);

Ciencias Exactas, Ingenierías y Tecnología | Ingeniería en Desarrollo de Software

6

Programación orientada a objetos II Unidad 2. Componentes Gráficos 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 código presentado.  En azul aparece la definición del paquete donde se encuentra la clase y la importación de bibliotecas, recuerda que esto es importante, pues el agregar bibliotecas se indica que se usarán clases y métodos predefinidos, también se encuentra la declaración de la clase y el método main, así como el cierre de las llaves correspondientes.  La sección verde declara el marco sobre el que se mostrará el panel.  La sección 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 además cuenta con un borde.  Por último en la sección roja se agregan los panales al marco.

Cómo pudiste observar se hablo del marco (la ventana) que es el contenedor principal, donde se encontrarán los panales, por lo tanto continua con el siguiente tema para que comprendas la definición 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 comúnmente llamados frames, tal como el nombre de la clase los define (JFrame). Los marcos son los contenedores principales al crear aplicaciones gráficas, ya que cualquier otro componente gráfico que se cree, debe estar dentro de un marco. Nota: el marco es la ventana sobre la que se construye la apariencia gráfica de un programa. Veamos el siguiente ejemplo de código, donde:  Se sombrea en azul la definición del paquete, librería utilizada, autor, así como la declaración de la clase y el método.  En sombreado morado se coloca el código para declarar el marco, que como se ha dicho anteriormente, los componentes gráficos son objetos y se declaran como

Ciencias Exactas, Ingenierías y Tecnología | Ingeniería en Desarrollo de Software

7

Programación orientada a objetos II Unidad 2. Componentes Gráficos tal con la palabra reservada new, el constructor para crear marcos recibe como parámetro el título que tendrá el marco. Una vez declarado el marco que hemos llamado frame, se configuran sus atributos mediante métodos que ya se encuentran previamente definidos en la clase JFrame. En este caso se configuraron 3 atributos: o setLocation: recibe como parámetro dos enteros que son las coordenadas x, y (en pixeles), para indicar dónde se ubicará el marco, respecto al ancho y alto de la pantalla, toma en cuenta que la posición 0,0 es la esquina superior izquierda. o setVisible: recibe como parámetro un valor booleano, en este caso true para indicar que el marco debe ser visible. o setSize: este método recibe dos valores enteros que indican el ancho y alto del marco, en este mismo orden. Ejemplo de código 2. Declaración 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 código 2 de declaración de un marco, éste generará una salida como la que se muestra en la siguiente imagen, de la cual se recomienda cambiar el tamaño y posición del marco y volver a ejecutar el código para ir comprendiendo mejor sus propiedades.

Ciencias Exactas, Ingenierías y Tecnología | Ingeniería en Desarrollo de Software

8

Programación orientada a objetos II Unidad 2. Componentes Gráficos

Salida de pantalla del marco Una vez definido el marco para agregar elementos dentro de éste, se utiliza el método add, y un administrador de diseño llamado layout, esto permite acomodar en algún orden todos los componentes que se agreguen al marco. Como ya se mencionó anteriormente para construir interfaces graficas se utilizan librerías ya predefinidas; las bibliotecas de clases Java para el desarrollo de interfaces gráficas de usuario son Swing y AWT, estas proporcionan los siguientes administradores de diseño para el acomodo de componentes (Oracle, 2012): 

BorderLayout: esta distribución acomoda los componentes en máximo 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

Ciencias Exactas, Ingenierías y Tecnología | Ingeniería en Desarrollo de Software

9

Programación orientada a objetos II Unidad 2. Componentes Gráficos 

BoxLayout: esta distribución acomoda todos los componentes uno tras de otro en una sola fila o columna, según el espacio disponible, a continuación observa el ejemplo de éste:

Ejemplo de BoxLayout 

CardLayout: permite implementar un área que contiene diferentes componentes en diferentes momentos, observa el ejemplo:

Lo señalado sería el área implementada.

Ejemplo de CardLayout 

FlowLayout: esta distribución 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 distribución acomoda los componentes en filas y columnas, ajusta los elementos a que tengan un tamaño similar, tal como lo veras en el siguiente ejemplo:

Ciencias Exactas, Ingenierías y Tecnología | Ingeniería en Desarrollo de Software

10

Programación orientada a objetos II Unidad 2. Componentes Gráficos

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 diseño de los elementos verticales y horizontales de manera separada, por lo que cada una cuenta con una configuración independiente, tal como lo veras a continuación:

Vertical

Horizontal Ejemplo de GroupLayout



SpringLayout: esta distribución permite definir la relación de espacio entre los componentes y sus bordes, observa el ejemplo:

Ciencias Exactas, Ingenierías y Tecnología | Ingeniería en Desarrollo de Software

11

Programación orientada a objetos II Unidad 2. Componentes Gráficos Espacio

Ejemplo de SpringLayout

De forma predeterminada cada contenedor tiene asignado un diseño del tipo BorderLayOut, también 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 demás componentes gráficos.

2.2. Controles En los siguientes apartados observaras todo lo relacionado con el tema controles, con los que podrás comenzar a crear apariencias gráficas más 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 verán esos componentes gráficos, ya que son aquellos elementos que ayudan a conformar la apariencia de una aplicación.

2.2.1. Etiqueta El primer componente de los controles que veremos es uno de los más utilizados para colocar textos en la apariencia gráfica de una aplicación sin que se requiera modificarlos. Por lo general este componente es utilizado para el nombrado de campos. Al igual que todos los componentes las etiquetas tienen una gran cantidad de propiedades, entre las más comúnmente utilizadas se encuentra, la tipografía de la fuente, así como el color. Como ejemplo de la creación de etiquetas, veamos el siguiente código, en donde se representa el uso de sus propiedades: Ejemplo de código 3. Declaración y uso de etiquetas package GUI;

Ciencias Exactas, Ingenierías y Tecnología | Ingeniería en Desarrollo de Software

12

Programación orientada a objetos II Unidad 2. Componentes Gráficos 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);

Ciencias Exactas, Ingenierías y Tecnología | Ingeniería en Desarrollo de Software

13

Programación orientada a objetos II Unidad 2. Componentes Gráficos } } El ejemplo previo se encuentra conformado de la siguiente manera:  Se sombrea en azul la definición del paquete, librerías a utilizar, autor, así como la declaración de la clase y el método.  En sombreado verde se tiene la creación del marco sobre el que se colocarán las etiquetas.  En sombreado morado se tienen 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 parámetro el tipo de letra, el estilo deseado y el tamaño. 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 gráfica no se ve.  En sombreado rojo se tiene la adición de las etiquetas al marco. Como has visto las etiquetas pueden configurarse para que personalices su apariencia y también puedes investigar sobre otras propiedades para que puedas ver cómo funcionan al ejecutar el programa. Te invitamos a continuar con el siguiente tema, para que continúes involucrándote con el manejo de componentes gráficos.

2.2.2. Botones El tema que trataremos en este apartado es el de botones, en este veremos cómo se construyen y se manipulan sus propiedades, para que puedas ir construyendo interfaces gráficas con la funcionalidad (manejo de eventos) que los botones proporcionan. Estos componentes son típicamente utilizados para recibir eventos y desencadenar el funcionamiento de las aplicaciones. Por lo general el texto que tienen los botones indica la acción que este desencadenará. Veamos el siguiente ejemplo, donde podrás observar la creación de botones, así como la personalización de sus propiedades:  Se sombrea en azul la definición del paquete, librerías a utilizar, autor, así como la declaración de la clase y el método.  En sombreado verde se tiene la creación del marco sobre el que se colocarán las etiquetas.  En sombreado morado se tienen los botones, en donde veras que:

Ciencias Exactas, Ingenierías y Tecnología | Ingeniería en Desarrollo de Software

14

Programación orientada a objetos II Unidad 2. Componentes Gráficos o



El primer botón configura la propiedad setMnemonic, que indica la letra con la que se podrá colocar el foco en ese elemento. Realizando alt+b (el mnemónico especificado). o El segundo botón configura el color de la letra. o Y el tercer botón solo tiene agregado un texto. En sombreado rojo se tiene la adición de los botones al marco.

Ejemplo de código 4. Declaración 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");

Ciencias Exactas, Ingenierías y Tecnología | Ingeniería en Desarrollo de Software

15

Programación orientada a objetos II Unidad 2. Componentes Gráficos 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 más utilizado, por lo que siempre que se crea un botón, se debe tener asociado el manejo del evento que desencadenará la ejecución de la acción que deba realizar la aplicación. Antes de continuar con el siguiente componente (casilla de activación) 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 método que tratará la información, y el programa funcione como se requiere.

2.2.3. Casilla de activación En las ocasiones en que requieres permitir que un usuario realice selecciones múltiples de una o varias opciones de un conjunto de opciones dado, es útil recurrir a las casillas de activación. Las casillas de activación son componentes gráficos utilizados para realizar selecciones múltiples, 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 código donde:   

Se sombrea en azul la definición del paquete, librerías a utilizar, autor, así como la declaración de la clase y el método. Sombreado verde se tiene la creación del marco sobre el que se colocarán las etiquetas. Sombreado morado se tienen las casillas de activación, en el que 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 código. Recuerda estos componentes solo pueden tener dos valores Verdadero/ Falso (True/False).

Ciencias Exactas, Ingenierías y Tecnología | Ingeniería en Desarrollo de Software

16

Programación orientada a objetos II Unidad 2. Componentes Gráficos o



La tercera casilla tiene un texto y se configuro de manera que éste se vea en rojo. En sombreado rojo se tiene la adición de las casillas de activación al marco.

Ejemplo de código 5. Declaración y uso de casillas de activación package GUI; import java.awt.BorderLayout; import java.awt.Color; import java.awt.event.WindowAdapter; import java.awt.event.WindowEvent; importjavax.swing.*; /** * @author ESAD */ 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);

Ciencias Exactas, Ingenierías y Tecnología | Ingeniería en Desarrollo de Software

17

Programación orientada a objetos II Unidad 2. Componentes Gráficos frame.add(check1, BorderLayout.NORTH); frame.add(check2, BorderLayout.SOUTH); frame.add(check3, BorderLayout.CENTER); } } El uso de las casillas de activación como en el ejemplo anterior requiere que, al estar codificando un programa, se detecte si la casilla ha sido activada, esto se hace mediante un método de la clase JCheckBox, el cual se muestra a continuación: Ejemplo de código 6. Detección de activación de casilla casilla.isSelected(); Este método retornará un valor booleano, para saber si se activó (true) o no (false), por lo general este resultado suele acompañarse de una condición (if) para indicar que deberá realizar en programa en cada caso. Por último solo recuerda que si quieres que los usuarios realicen elecciones sobre múltiples opciones debes utilizar casillas de activación, 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 información a un programa, pero esta información 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 gráfico lista desplegable. Este componente es precisamente una lista de opciones, de las cuales el usuario solo podrá elegir una opción. Las listas desplegables ofrecen al usuario varias opciones de elección para un mismo concepto, pudiendo elegir solo uno de ellos. Veamos el siguiente ejemplo de código, donde se crea una lista desplegable:  Se sombrea en azul la definición del paquete, librerías a utilizar, autor, así como la declaración de la clase y el método.  En sombreado verde se tiene la creación del marco sobre el que se colocará la lista.  En sombreado morado se tiene el ejemplo, donde se creó la lista y se le añadió un modelo, indicando lo que debe estar visible, como: o El modelo que es la configuración de los elementos que deben estar dentro de la lista. o Si no se agregan las opciones al modelo, estas no pueden agregarse directamente a la lista, pues la lista solo recibe modelos.  En sombreado rojo se tiene la adición de la lista al marco.

Ciencias Exactas, Ingenierías y Tecnología | Ingeniería en Desarrollo de Software

18

Programación orientada a objetos II Unidad 2. Componentes Gráficos Ejemplo de código 7. Declaración 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 continuación: Ejemplo de código 8. Detección del elemento seleccionado lista.getSelectedItem().toString(); lista.getSelectedIndex();

Ciencias Exactas, Ingenierías y Tecnología | Ingeniería en Desarrollo de Software

19

Programación orientada a objetos II Unidad 2. Componentes Gráficos La primer opción es obteniendo el elemento (item), el cual es seleccionado y convertido a cadena (String). La conversión es necesaria pues el método getSelectedItem() retorna un valor tipo objeto, y por lo general lo que requerimos es el texto elegido, por ello se hace la conversióntoString();. La segunda opción 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 método devuelve entonces un entero. Toma en cuenta que si quieres que el usuario solo elija de una lista predefinida, lo más conveniente es que utilices el componente gráfico lista desplegable. Pero si quieres que el usuario sea quien ingrese la información directamente, puedes utilizar campos de texto, que es nuestro siguiente tema.

2.2.5. Campo de texto Los campos de texto son uno de los componentes gráficos más utilizados para la creación de GUIs, los elementos que hemos visto anteriormente requieren de trabajo para su configuración y obtención de datos, pero en particular los campos de texto deben también contar con algún tipo de validación de la información que se está recibiendo. Los contenedores, contienen componentes, las etiquetas sirven para colocar textos inamovibles en la GUI, los botones reciben eventos, las casillas de activación se activan o no, las listas desplegables tiene algún elemento de la lista elegido, pero el campo de texto proporciona libertad al usuario de ingresar información como él lo requiera, ya sea correcta o no, por ello es muy importante realizar alguna validación a los datos ingresados mediante este componente. Primero veamos el siguiente ejemplo, en el cual se describe el código para la implementación de cajas de texto:  Se sombrea en azul la definición del paquete, librerías a utilizar, el autor, así como la declaración de la clase y el método.  En sombreado verde se tiene la creación del marco en el que se colocarán los campos de texto.  En sombreado morado se tiene la declaración de dos campos de texto, 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 adición del campo de texto al marco.

Ejemplo de código 9. Declaración y uso de campo de texto package GUI; import java.awt.BorderLayout; import java.awt.event.WindowAdapter;

Ciencias Exactas, Ingenierías y Tecnología | Ingeniería en Desarrollo de Software

20

Programación orientada a objetos II Unidad 2. Componentes Gráficos 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 configuración de los campos de texto ahora veamos cómo obtener lo que el usuario haya ingresado y también como validarlo. Es importante resaltar que lo que el campo de texto tiene dentro siempre es una cadena, pues así está estipulado en su definición. 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()).

Ciencias Exactas, Ingenierías y Tecnología | Ingeniería en Desarrollo de Software

21

Programación orientada a objetos II Unidad 2. Componentes Gráficos -En el ejemplo 2 sombreado morado, supongamos que lo que debe ingresar el usuario es un número entero, entonces se declara un entero, se obtiene el texto y se convierte en entero (Integer.parseInt). -En el ejemplo 3 sombreado verde, 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 tamaño (length()) y se valida que ese tamaño sea igual a 10 Ejemplo de código 10. Declaración y uso de campo de texto String texto=campoTexto1.getText(); intentrada= Integer.parseInt(campoTexto2.getText()); if (campoTexto3.getText().length() == 10){ // código 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 atención en lo que se necesita para poder programarlo adecuadamente. Los campos de texto como has visto reciben información del usuario, de la cual, típicamente reciben información breve, para las ocasiones en que requieres mostrar o recibir una cantidad mayor de información debes utilizar otro componente llamado área de texto, el cual será revisado en la siguiente sección.

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 recepción de textos pequeños, es decir de una sola línea. Mientras que el área de texto puede recibir varias líneas de texto y obviamente se utiliza para la recepción de textos grandes. Para ello es importante que lo comprendas con el siguiente ejemplo, donde:   



Se sombrea en azul la definición del paquete, librerías a utilizar, autor, así como la declaración de la clase y el método. En sombreado verde se tiene la creación del marco sobre el que se colocará el área de texto. En sombreado morado se tienen dos áreas de texto, en donde la primera tiene configurado un tamaño de 20 columnas, es decir que todo el texto que se escriba se acomodará a ese ancho, la segunda área tiene un pequeño texto y se dejó su propiedad de edición en falso, lo que indica que el texto ahí no se puede editar, esto es útil para cuando se quiere mostrar un texto de información al usuario sin brindarle la posibilidad de modificarlo. En sombreado rojo se tiene la adición del área de texto al marco.

Ciencias Exactas, Ingenierías y Tecnología | Ingeniería en Desarrollo de Software

22

Programación orientada a objetos II Unidad 2. Componentes Gráficos Ejemplo de código 11. Declaración 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); } }

Ciencias Exactas, Ingenierías y Tecnología | Ingeniería en Desarrollo de Software

23

Programación orientada a objetos II Unidad 2. Componentes Gráficos En el ejemplo anterior para obtener el texto introducido por un usuario también se usa el método getText(), tal como en el campo de texto. Y el texto obtenido se tendrá en una cadena. Por último ten en cuenta que las áreas de texto solo se utilizan cuando requieres recibir o mostrar una gran cantidad de información, 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 podrás revisarlos en el siguiente apartado.

2.2.7. Separador Para mantener una apariencia gráfica ordenada, comúnmente se utilizan secciones en la interfaz, para tener así también tener ordenados los componentes gráficos con que se cree esta. Una de las formas de hacer esto es mediante paneles, y otra manera es utilizar separadores, que son componentes gráficos que ayudan en la división de interfaces. Los separadores son líneas que se pintan sobre los marcos de manera horizontal o vertical, para dividir el espacio de un marco. Veamos el siguiente ejemplo de código, donde se demuestra y explica la creación y uso de separadores:  Se sombrea en azul la definición del paquete, librerías a utilizar, autor, así como la declaración de la clase y el método.  En sombreado verde se tiene la creación del marco sobre en el cual se aplicará el separador, así como la declaración de las etiquetas de apoyo para mostrar el ejemplo de uso de los separadores.  En sombreado morado se tiene el ejemplo del separador, que se declara (con new) y se indica la dirección, en este caso es horizontal, vea que al añadir los componentes al marco se hizo, de la siguiente manera: o Componente – separador – componente. Indicando que el separador debía ubicarse entre ellos.  En sombreado rojo se tiene la adición de las etiquetas de apoyo al marco, así como del separador. Ejemplo de código 12. Declaración y uso de separador package GUI; import java.awt.BorderLayout; import java.awt.event.WindowAdapter; import java.awt.event.WindowEvent; importjavax.swing.*;

Ciencias Exactas, Ingenierías y Tecnología | Ingeniería en Desarrollo de Software

24

Programación orientada a objetos II Unidad 2. Componentes Gráficos /** * @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 serán 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 información, pero esta información puede ser elegida de un conjunto de valores ordenados de manera consecutiva, para estas ocasiones es recomendable utilizar el componente gráfico spinner. Este componente es una pequeña 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.

Ciencias Exactas, Ingenierías y Tecnología | Ingeniería en Desarrollo de Software

25

Programación orientada a objetos II Unidad 2. Componentes Gráficos El spinner es comúnmente utilizado con números, pero también pueden colocarse textos y fechas en las opciones que brinda. La intención al utilizar este componente es que los elementos que contengan estén ordenados en algún orden predeterminado. Veamos el siguiente ejemplo de código, donde se plasma la creación y uso del componente spinner:  Se sombrea en azul la definición del paquete, librerías a utilizar, autor, así como la declaración de la clase y el método.  En sombreado verde se tiene la creación del marco, sobre él se colocarán los spinner que se crearon en bloque de código anterior.  En sombreado morado se tienen dos spinner: o El primero cuenta con una configuración de tipo numérica, donde, se tienen 4 parámetros, (el número donde aparecerá, número mínimo, número máximo, incremento). De esta manera se tienen los elementos ya definidos. o El segundo spinner tiene un modelo de tipo lista, donde se colocan los elementos que se quieren en el spinner.  En sombreado rojo se tiene la adición de los spinner al marco. Ejemplo de código 13. Declaración 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){

Ciencias Exactas, Ingenierías y Tecnología | Ingeniería en Desarrollo de Software

26

Programación orientada a objetos II Unidad 2. Componentes Gráficos 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 método, spinner.getValue().toString();. El método 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 estén en orden consecutivo, ya que este componente gráfico permite el movimiento de valor de manera ascendente o descendente (flechas arriba o abajo).

2.2.9. Árbol Este componente gráfico a diferencia de los anteriores crea un árbol de información 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 información. 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 podríamos comprarlo como carpetas y archivos. Para su creación, se requieren padres e hijos, los cuales normalmente son utilizados para mostrar archivos, o información que pueda ser categorizada de manera jerárquica. Veamos el siguiente ejemplo de código donde se crea y maneja un árbol:  

Se sombrea en azul la definición del paquete, librerías a utilizar, autor, así como la declaración de la clase y el método. En sombreado verde se tiene la creación del marco sobre el que se colocará el árbol.

Ciencias Exactas, Ingenierías y Tecnología | Ingeniería en Desarrollo de Software

27

Programación orientada a objetos II Unidad 2. Componentes Gráficos 



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 serán raíces; después se crean las hojas del árbol, y se van agregando (add) a la raíz a la que pertenecerán. o El último paso es añadir ese modelo creado al árbol declarado. Tal como en la lista desplegable que primero se crea el modelo y después se agrega a la lista. El árbol también primero se crea su modelo y después se agrega este al árbol. En sombreado rojo se tiene la adición del árbol al marco.

Ejemplo de código 14. Declaración 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

Ciencias Exactas, Ingenierías y Tecnología | Ingeniería en Desarrollo de Software

28

Programación orientada a objetos II Unidad 2. Componentes Gráficos 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 además de crear y manipular componentes gráficos de manera aislada, aprendas como utilizarlos de manera conjunta para crear GUIs. El ejemplo queda como la imagen que se muestra a continuación:

Ciencias Exactas, Ingenierías y Tecnología | Ingeniería en Desarrollo de Software

29

Programación orientada a objetos II Unidad 2. Componentes Gráficos

GUI del programa conversor de unidades

La imagen cuenta con tres secciones que se describen a continuación:  Equivalencia de moneda, se tiene una lista desplegable para elegir una moneda, se oprime el botón “convertir” y muestra la equivalencia en la caja de texto que esta junto a pesos.  Equivalencia de grados, tiene un spinner numérico para ingresar los grados centígrados, las casillas de activación si fueron seleccionadas mostraran la equivalencia en las cajas de texto que están junto a ellas, si no se eligió, no muestra nada al pulsar el botón convertir.  Equivalencia de longitud se ingresa el número de pulgadas, yardas y/o millas y al oprimir el botón convertir muestra en la caja de texto su equivalencia en centímetros, metros y/o millas. Ahora analicemos el código que creó la interfaz gráfica mostrada en la imagen anterior, así como la funcionalidad de esa interfaz:  El código con sombreado azul: contiene la declaración del paquete, el autor, la clase, definición del autor y las llaves correspondientes.  El bloque de código sombreado rosa: tiene la declaración de todos los componentes gráficos que se estarán utilizando en el programa, nótese que estas declaraciones están fuera de todos los métodos, lo que significa que están declarados a nivel de clase, recuerden que esto se hace cuando las variables se utilizarán en toda la clase sin distinción, esto tiene la intención de poder manipular cada uno de los componentes gráficos desde cualquier parte de la clase.  La sección morada es el método que conjunta la apariencia total: o Dentro de este método se crea el marco principal, y la definición de sus características, o Además se mandan llamar los métodos de aparienciaMoneda(); aparienciaGrados(); aparienciaLongitud(); que cada uno de esos métodos

Ciencias Exactas, Ingenierías y Tecnología | Ingeniería en Desarrollo de Software

30

Programación orientada a objetos II Unidad 2. Componentes Gráficos













construye la apariencia de los paneles que conforman por partes la apariencia total, o También en este bloque al final se añaden los paneles que crean los métodos mencionados en el punto anterior al marco principal. El bloque de código verde claro, crea la apariencia del pnlMoneda, en este método se configuran las propiedades del panel, además de las etiquetas, la lista desplegable, la caja de texto donde se colocará el resultado y el botón convertir, se agrega al botón el manejo del evento mouseClicked y cuando lo detecte redireccionará el flujo del programa al método equivalenciaMoneda(); y por último se acomodan los componentes gráficos mencionados en el panel, mediante el administrador de diseño GridLayout. El bloque de código verde obscuro, es el método 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 código rojo claro, crea la apariencia del pnlGrados, en este método se configuran las propiedades del panel, además de las etiquetas, el spinner, las casillas de selección y el botón que activa la conversión, que re-direcciona el flujo del programa al método equivalenciaGrados(); y por último se acomodan los componentes en el panel. El bloque de código rojo obscuro, toma el valor dado en el spinner, y calcula la conversión de grados, si se han seleccionado mediante las casillas de activación, 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ó también el manejo de eventos para cada botón que re-direcciona el flujo a tres posibles métodos de conversión según se haya elegido. Por último se muestra el acomodo de los componentes en el panel, en el que se añadió la línea 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 métodos de conversión de unidades, que toman los valores de una caja de texto, calculan la conversión y muestran el resultado en otra caja de texto.

Nótese en el ejemplo que el programa esta creado de manera modular, segmentado en métodos, respetando así el paradigma orientado a objetos. Ejemplo de código 15. Programa conversor de unidades package GUI; import java.awt.BorderLayout; import java.awt.GridLayout; import java.awt.event.MouseAdapter;

Ciencias Exactas, Ingenierías y Tecnología | Ingeniería en Desarrollo de Software

31

Programación orientada a objetos II Unidad 2. Componentes Gráficos 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();

Ciencias Exactas, Ingenierías y Tecnología | Ingeniería en Desarrollo de Software

32

Programación orientada a objetos II Unidad 2. Componentes Gráficos 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

Ciencias Exactas, Ingenierías y Tecnología | Ingeniería en Desarrollo de Software

33

Programación orientada a objetos II Unidad 2. Componentes Gráficos public void mouseClicked(MouseEvent e){ equivalenciaMoneda(); //se invoca al metodo moneda, que sonde se realizarán 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

Ciencias Exactas, Ingenierías y Tecnología | Ingeniería en Desarrollo de Software

34

Programación orientada a objetos II Unidad 2. Componentes Gráficos public void mouseClicked(MouseEvent e){ equivalenciaGrados(); //se invoca al metodo moneda, que sonde se realizarán 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");

Ciencias Exactas, Ingenierías y Tecnología | Ingeniería en Desarrollo de Software

35

Programación orientada a objetos II Unidad 2. Componentes Gráficos 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 realizarán las acciones } }); btnMet.addMouseListener(new MouseAdapter() { @Override public void mouseClicked(MouseEvent e){ convertirMt(); //se invoca al metodo moneda, que sonde se realizarán las acciones } }); btnKm.addMouseListener(new MouseAdapter() { @Override public void mouseClicked(MouseEvent e){ convertirKm(); //se invoca al metodo moneda, que sonde se realizarán las acciones } });

//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);

Ciencias Exactas, Ingenierías y Tecnología | Ingeniería en Desarrollo de Software

36

Programación orientada a objetos II Unidad 2. Componentes Gráficos 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 código mostrado en la clase previa (toda la clase completa) para su ejecución en el IDE NetBeans, notarás que el compilador no permite su ejecución, pues recuerda que para que eso ocurra debe definirse un método main, siguiendo con el paradigma orientado a objetos, del que se ha separado el arranque del programa en la clase llamado la cual se muestra a continuación:  El código azul es la declaración del paquete, el autor y la clase, así como sus respectivas llaves.  Las dos líneas moradas son las que permiten el funcionamiento del programa, la primera crea un objeto de la clase conversores, que es la clase que se describió antes, donde se crea toda la apariencia y funcionalidad del programa. La segunda línea invoca el método aparienciaTotal(); del objeto previamente creado, y realizando esta llamada se crea el programa.

Ciencias Exactas, Ingenierías y Tecnología | Ingeniería en Desarrollo de Software

37

Programación orientada a objetos II Unidad 2. Componentes Gráficos Ejemplo de código 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 código presentado en el ejemplo 16 para que “juegues” con él y veas el funcionamiento que cada línea crea.

Actividad 2. Contenedores y controles En esta actividad se solicita que se realice un programa con apariencia gráfica, este programa deberá contener el uso de todos los componentes gráficos que se han visto hasta este momento (contenedores -paneles y marcos- y controles -etiqueta, botón, casilla de activación, lista desplegable, campo de texto, área de texto, separador, spinner y árbol). Esto con la finalidad de que practiques la construcción de componentes gráficos y la manipulación de sus propiedades. Propósito: Crear un programa en base a componentes gráficos, donde se manipulen las propiedades de los diferentes tipos de contenedores y controles gráficos. Para comenzar con tu práctica, 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 gráficos, incluyendo la estructura algorítmica (pasos) y sintáctica (código) vistos durante la unidad. 2. Copia todo el código en un procesador de textos, sombrea cada parte del código y describe lo que muestras, envía además del proyecto el documento con la descripción de tu código. 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 retroalimentación.

Ciencias Exactas, Ingenierías y Tecnología | Ingeniería en Desarrollo de Software

38

Programación orientada a objetos II Unidad 2. Componentes Gráficos 2.3. Menú El uso del menú facilita la ubicación de funciones de un programa o aplicación, ya que sus elementos funcionan como accesos rápidos, y con solo un clic sobre el elemento del menú de interés se llegará a la pantalla o función deseada. Tal como su nombre lo dice, el componente gráfico de menú ofrece diferentes opciones de acciones a realizar dentro de una aplicación, ya sea ir a otra ventana, o realizar alguna acción sobre la ventana actual. En los siguientes subtemas veremos que los menús deben estar en una barra, cómo crearla, así como crear los elementos y subelementos que el menú mostrará. También veremos los menús emergentes.

2.3.1. Barra de menú Las opciones que ofrecen los menús están contenidas en una barra, así que al crear un menú lo primero que se debe hacer es crear la barra para después colocar en ella los elementos que se vayan creando. Para que comprendas mejor el cómo crearla, presta atención al siguiente ejemplo en donde encontraras sombreado en:   



Azul: la definición del paquete, librerías a utilizar, autor, así como la declaración de la clase y el método. Verde: se tiene la creación del marco sobre el que se colocará el ménu. 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 adición 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 serán las acciones que se adicionen.

Ejemplo de código 17. Declaración 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.*; /**

Ciencias Exactas, Ingenierías y Tecnología | Ingeniería en Desarrollo de Software

39

Programación orientada a objetos II Unidad 2. Componentes Gráficos * @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 cómo crear elementos del menú que son las opciones que se nos mostrarán; 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 sección anterior se vio que los elementos se deben contener en una barra la cual se declara, ahora veremos cómo se crean los elementos que conformarán las diferentes opciones del menú. En el siguiente ejemplo de código se crean elementos de menú, y se añaden a una barra de menú para mostrarlos en la interfaz, en el cual deberás ligar cada descripción con el código que se explica, para que comprendas mejor la sintaxis de los menús, veamos a continuación la explicación y código:

Ciencias Exactas, Ingenierías y Tecnología | Ingeniería en Desarrollo de Software

40

Programación orientada a objetos II Unidad 2. Componentes Gráficos   



Se sombrea en azul la definición del paquete, librerías a utilizar, autor, así como la declaración de la clase y el método. En sombreado verde se tiene la creación del marco sobre el que se colocará el menú. En sombreado morado se tiene un panel azul, creado solo para ubicar mejor en la pantalla el menú (se crea la barra del menú). Después se crean los elementos del menú new javax.swing.JMenu(); y se añaden los elementos del menú (add)a la barra previamente creada. Si se requieren submenús (javax.swing.JMenuItem()), se crean y se añaden al menú de donde se deberán desplegar. En sombreado rojo se tiene la adición de la barra de menú al marco.

Ejemplo de código 18. Declaración 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);

Ciencias Exactas, Ingenierías y Tecnología | Ingeniería en Desarrollo de Software

41

Programación orientada a objetos II Unidad 2. Componentes Gráficos 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); } } Entiéndase entonces que el acomodo de menús queda de la siguiente manera: Elementos del menú

Barra de menú

Sub-menú Sub-menú

Sub-sub-menú

Menús Para comprender mejor el acomodo de la imagen anterior revisa lo siguiente:  El elemento principal es la barra de menú  Después los elementos del menú, que son los que aparecen inmediatamente sobre la barra, estos se añaden precisamente a la barra.  Si el elemento de menú va a desplegar otras opciones se crean submenús y estos se agregan al elemento de menú de donde se van a desplegar.  Si el submenú requiere también que se desplieguen otros sub-submenús, se agregan estos al submenú de donde se deberá desplegar. Además de los menús tradicionales como el que acabamos de revisar también existe el menú emergente el cual veremos a continuación.

2.3.3. Menú emergente

Ciencias Exactas, Ingenierías y Tecnología | Ingeniería en Desarrollo de Software

42

Programación orientada a objetos II Unidad 2. Componentes Gráficos 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 gráfica de usuario, para ello existen los menús emergentes. El menú emergente (popup) al aparecer la ventana gráfica de una aplicación no se ve, deberán agregarse manejo de eventos para que aparezcan, su construcción es similar a los anteriores, se declara el menú emergente, se crean elementos de menú y se añaden al emergente, tal como si se añadieran a una barra de menú. Veamos el siguiente ejemplo, donde se ve cómo crear un menú emergente, el cual al igual que en un menú normal deberán crearse sus elementos y después añadirse a este:  Se sombrea en azul la definición del paquete, librerías a utilizar, autor, así como la declaración de la clase y el método.  En sombreado verde se tiene la creación del marco sobre el que se colocará el menú.  Se crea el menú emergente (JPopupMenu()). Después se crean los elementos del menú JMenuItem() y se añaden los elementos del menú (add) al menú emergente previamente creado.  En sombreado rojo se tiene la adición del menú emergente al marco.

Ejemplo de código 19. Declaración 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() {

Ciencias Exactas, Ingenierías y Tecnología | Ingeniería en Desarrollo de Software

43

Programación orientada a objetos II Unidad 2. Componentes Gráficos @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 menús y que para crearlos debemos construir también los elementos que los compondrán, así como la barra en la que se posicionara el menú completo. También vimos los menús emergentes, la única diferencia entre ellos es que el menú normal esta siempre visible para el usuario en la interfaz gráfica, 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 creación de una línea divisoria para separar elementos de un menú, su declaración es la misma y solo se añade entre los componentes que se quiera separar. Observa el siguiente ejemplo de código y su imagen, en donde se está agregando un submenú, después se coloca un separador y después otro submenú, lo que mostrará una división entre los submenús. Ejemplo de código 20. Declaración y uso de separador menu.add(subelemento1); menu.add(new JSeparator(SwingConstants.HORIZONTAL)); menu.add(subelemento2);

Ciencias Exactas, Ingenierías y Tecnología | Ingeniería en Desarrollo de Software

44

Programación orientada a objetos II Unidad 2. Componentes Gráficos Ejemplo de separador en un menú Por último cabe resaltar que para un manejo adecuado de los menús se deberán agregar eventos a estos para que generen las acciones requeridas por los menús.

2.4. Ventanas Hasta ahora se han visto diferentes componentes gráficos con los que se crean en una sola pantalla, ahora veremos cómo crear diferentes pantallas o ventanas en una misma aplicación. Es decir construiremos diferentes marcos que se comuniquen entre sí, además de conocer las ventanas auxiliares que pueden dar información a los usuarios (cuadros de dialogo), ventanas que pueden proporcionarnos información 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 información, 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 aplicación, ya sea para solicitar confirmación de información, o para dar avisos de error o advertencias (Oracle, 2012). Existen diferentes tipos de cuadros de dialogo, entre ellos los siguientes: 

Dialogo de confirmación: El dialogo de confirmación como su nombre lo indica se utiliza para confirmar alguna acción, el código que lo crea es el marcado en naranja dentro del ejemplo de código 21 que más adelante se mostrara. Como podrás observar en el código el dialogo de confirmación se igualo a un entero, como se puede ver en la imagen siguiente que el dialogo de confirmación ofrece tres respuestas, Si, No y Cancelar, y para saber qué respuesta brindo el usuario, el dialogo de confirmación retorna un número con la opción elegida, siendo 0-Si, 1-No y 2-Cancelar.

Ciencias Exactas, Ingenierías y Tecnología | Ingeniería en Desarrollo de Software

45

Programación orientada a objetos II Unidad 2. Componentes Gráficos

Dialogo de confirmación. 

Dialogo de entrada: Este tipo de cuadro de dialogo solicita el ingreso de algún dato en particular, el código que lo crea está en morado dentro del ejemplo de código 21, nótese que está igualado a una cadena, pues automáticamente 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 (conversión 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 algún dato en particular, pero además la entrada de esos datos puede personalizarse, en este caso el código que lo crea, está en morado obscuro dentro del ejemplo de código 21, nótese que primero se creó un arreglo de objetos llamado valores, donde se ingresan los datos de la lista que se quiere desplegar. La siguiente línea recibirá el objeto elegido del cuadro de dialogo, que tiene como parámetros el título del cuadro de diálogo, así como el mensaje que mostrará se indica que es un mensaje de información y después se pasa el arreglo de objetos, se indica también el valor que mostrará por defecto (valores[0]).El resultado de ese código implementado se muestra en la siguiente imagen.

Dialogo de entrada personalizada.

Ciencias Exactas, Ingenierías y Tecnología | Ingeniería en Desarrollo de Software

46

Programación orientada a objetos II Unidad 2. Componentes Gráficos 

Mensaje: Lo que realiza es mostrar un mensaje al usuario, una de las características 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 (véase el código que los crea marcado en verde dentro del Ejemplo de código 21), el resultado de código se muestra en las siguientes imágenes: 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 dirán, si has observado en todos los ejemplos anteriores no se indica nada sobre los botones que aparecerán, ya que estos se crean automáticamente, pero en este cuadro de dialogo en particular puedes personalizar los botones. Como podrás ver en el ejemplo de código 21, en la sección roja; lo primero es crear un arreglo de objetos con los botones que contendrá. Después se pasa esto como parámetro. Y el resultado se muestra en la siguiente imagen.

Ciencias Exactas, Ingenierías y Tecnología | Ingeniería en Desarrollo de Software

47

Programación orientada a objetos II Unidad 2. Componentes Gráficos

Mensaje de cuidado. Revisa detalladamente el siguiente código, donde se tienen los bloques que construyen cada uno de los cuadros de dialogo mencionados. Identifica cada porción mencionada, para que puedas comprender mejor la sintaxis. Ejemplo de código 21. Declaración 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" };

Ciencias Exactas, Ingenierías y Tecnología | Ingeniería en Desarrollo de Software

48

Programación orientada a objetos II Unidad 2. Componentes Gráficos 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, más 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 continuación solo se crea el selector de archivos, éste normalmente se utiliza en un programa más 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 didácticos sobre la creación de componentes gráficos que se ha creado separado. A continuación veremos cómo se utiliza en un ejemplo, pero para ello deberás 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 sección morada.  Una vez que se muestra para conocer el archivo que se ha elegido se utiliza un método creado para ello, y se muestra el resultado en consola, como se hace en la sección roja. Ejemplo de código 22. Declaración 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); } }

Ciencias Exactas, Ingenierías y Tecnología | Ingeniería en Desarrollo de Software

49

Programación orientada a objetos II Unidad 2. Componentes Gráficos Una de las prácticas más comunes al crear programas con componentes gráficos es pasar de una ventana a otra, para hacer esto, lo primero que se debe hacer es crear un objeto de la clase que crea la ventana (marco) a la que se va a cambiar, después se invoca de ese objeto al método que inicia la creación de la apariencia gráfica y por último se elimina de la pantalla la ventana anterior, tal como se muestra en el ejemplo de código 23. Ejemplo de código 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 información de una a otra, tal como lo hacen los programas más conocidos. Por ejemplo cuando se quiere imprimir, se abre una ventana independiente del programa en ejecución para dar las indicaciones de la impresión, esto es algo que podrás llegar a requerir al construir programas.

Actividad 3. Menús y ventanas Ahora que aprendiste todas las características de funcionamiento para los menús y ventanas, estás listo para realizar las siguientes instrucciones. Propósito: Construir menús y ventanas gráficas, así como identificar su declaración e implementar su manipulación. Instrucciones: 1. Identifica los diferentes tipos de menús y ventanas gráficas vistas en el desarrollo de la unidad. 2. Identifica su estructura algorítmica (pasos) y sintáctica (código). 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. Envía el archivo al facilitador(a) para recibir retroalimentación. 7. Consulta la escala de evaluación para conocer los parámetros de la actividad.

Autoevaluación Para reforzar los conocimientos relacionados con los temas que se abordaron en esta segunda unidad del curso, es necesario que resuelvas la actividad de autoevaluación .

Ciencias Exactas, Ingenierías y Tecnología | Ingeniería en Desarrollo de Software

50

Programación orientada a objetos II Unidad 2. Componentes Gráficos Recuerda que es muy importante leer cuidadosamente los planteamientos indicados y elegir la opción adecuada para cada uno.

Evidencia de aprendizaje. Programa con componentes gráficos Como parte de la evaluación de esta unidad, es necesario realizar un programa que resuelva alguna problemática de tu entorno y que utilices componentes gráficos. Ingresa al aula virtual para realizar la actividad. Propósito: Realizar un programa modular utilizando componentes gráficos. Instrucciones: 1. Identifica los diferentes componentes gráficos presentados durante esta unidad. 2. Identifica la estructura algorítmica (pasos) y sintáctica (código) para manejar componentes gráficos. 3. Crea un proyecto en NetBeans. El proyecto deberá contener las clases necesarias para que construyas un programa que resuelva algún problema de tu entorno, y que utilice interfaces gráficas con el uso de todos los tipos de componentes gráficos vistos en la unidad (Por ejemplo una calculadora de intereses, calculadora científica, cálculos de pago de nómina, 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. Envía el archivo al facilitador(a) a través de la sección de Evidencias.

Autorreflexiones Además de enviar tu trabajo de la Evidencia de aprendizaje, es importante que ingreses al foro Preguntas de Autorreflexión y consultes las preguntas que tu Facilitador(a) presente, a partir de ellas, debes elaborar tu Autorreflexión en un archivo de texto llamado POO2_U2_ATR_XXYZ. Posteriormente envía 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 gráficos, que son los elementos mediante los que se crean las interfaces gráficas de usuario. Como parte de este tema se vieron los contenedores, que son aquellos elementos que conjuntan a los componentes gráficos para acomodarlos y crear las interfaces, también se

Ciencias Exactas, Ingenierías y Tecnología | Ingeniería en Desarrollo de Software

51

Programación orientada a objetos II Unidad 2. Componentes Gráficos vieron los paneles que ayudan a organizar los componentes y los marcos que son los contenedores por excelencia donde deben acomodarse todos los elementos de los que se compondrá la interfaz. También se vieron los controles, que son los componentes gráficos que conforman la interfaz, entre ellos están las etiquetas con que se nombran los campos, los botones que disparan acciones, las casillas de activación que detectan valores boléanos, las listas desplegables para que el usuario pueda elegir un elemento de una lista predefinida, campos de texto para recopilar información, áreas de texto que son de ayuda para recopilar grandes cantidades de texto por parte de los usuarios, separadores para segmentar la apariencia de la interfaz, spinners para acotar el ingreso de información y árboles que despliegan información jerárquica. Además se vieron las barras de menús, los elementos de estos, y también menús emergentes, que ayudan a tener concentrada la información de un programa y al elegir cualquiera de las opciones que se presente y se pueda redirigir el flujo del programa. Por último se vieron las ventanas, para saber cómo 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 conexión a bases de datos, todo lo que se ha visto en esta unidad te será de utilidad, ya que para mostrar información obtenida de la base de datos requieres componentes gráficos donde colocar dicha información. Es aconsejable que revises nuevamente la unidad en caso de que los temas que se acaban de mencionar no te sean familiares o no los recuerdes, de no ser este tu caso, ya estás preparado(a) para seguir con la unidad tres, en donde continuarás con la revisión de conexión a base de datos, para al final de la materia logres crear aplicaciones más completas con almacenamiento de datos.

Para saber más Es importante que instales un IDE en tu computadora personal para que pases todos los ejemplos de código y veas cómo funcionan, de esta manera podrás analizar el funcionamiento de los códigos presentados. *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 dirección electrónica: (Oracle,The Java Tutorials, Consultado Enero, 2012) http://docs.oracle.com/javase/tutorial/uiswing/components/index.html

Ciencias Exactas, Ingenierías y Tecnología | Ingeniería en Desarrollo de Software

52

Programación orientada a objetos II Unidad 2. Componentes Gráficos En esta página obtendrás 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 O´Reilly



Francisco Javier Ceballos 2006 Interfaces gráficas y aplicaciones para internet, 2da Edición España RA-MA



Oracle 2011 The JAVA Tutorials Estados Unidos de America Oracle



Eckstein, R., Loy, M., Wood, D. (1998) JAVA Swing. Estados Unidos de América: O´Reilly.



Ceballos, F. (2006) Interfaces gráficas y aplicaciones para internet, 2da Edición. España: RA-MA.



Oracle (2011) The JAVA Tutorials. Estados Unidos de América: Oracle.

1998 JAVA Swing Estados Unidos

Ciencias Exactas, Ingenierías y Tecnología | Ingeniería en Desarrollo de Software

53