IC Programación Orientada a Objetos I. Programación de Interfaces Gráficas de Usuario (GUI) 2

Transcripción

1 IC Programación Orientada a Objetos I 10 Programación de Interfaces Gráficas de Usuario (GUI) 2 1 INTRODUCCIÓN Es difícil pensar en que una aplicación desarrollada actualmente, sea atractiva para los usuarios si carece de una interfaz amigable e intuitiva. Las interfaces de modo texto o en líneas de comandos difícilmente pueden tener estas características. Hoy en día las aplicaciones en modo gráfico no son solamente más atractivas, sino que también le permiten al usuario ser más productivo, ya que es más fácil tener más elementos (componentes) dentro de una misma vista (ventana) y también ayudan a evitar que datos erróneos ingresados por los usuarios sean procesados, lo cuál puede costar tiempo de procesamiento y de transmisión de datos. 2 OBJETIVO (COMPETENCIA) El alumno conocerá los principales componentes que proporciona el API de Java para crear aplicaciones en un ambiente gráfico. Además de comprender el concepto de programación orientada a eventos. Que es Swing? En las primeras versiones de Java, Sun Microsystems proporcionó a los desarrolladores un conjunto de clases para el desarrollo de interfases gráficas llamado AWT (Abstract Windowing Toolkit). AWT fué un avance significante para su epoca, sin embargo, el mal diseño de su arquitectura, la cantidad de "bugs" que este contenía y sobre todo, la enorme cantidad de recursos que tomaba, forzaron a Sun a desarrollar una nueva versión de los componentes gráficos. Este nuevo paquete de clases se llama Swing.

2 A los componentes de Swing también se les conoce como "Lightweight Components" (Componentes Ligeros) a diferencia de AWT que se les conoce como "Heavyweight Components". Esto es por la mejora que se les hizo en cuanto a consumo de recursos se refiere. No todos los componentes de Swing son tan "ligeros", existen algunos que dada su naturaleza, es imposible hacerlos de esta manera. Tal como en AWT todos los componentes son derivados de la clase Component, en Swing todos los componentes son derivados de la clase JComponent. ( La mayoria de los componentes que se reescribieron, se les diferencía de los componentes AWT porque los nombres de las clases comienzan con "J"). Los componentes principales para una aplicación gráfica son: JFrame, JApplet, JDialog y JWindow. Estos son paneles principales que contienen otros paneles hijos donde se colocan todos los demás componentes visuales como botones, cajas de texto, etc. Estos componentes hijos son: JRootPane, JLayeredPane, ContentPane, etc, son los que se encargan de hacer todo el trabajo gráfico. Manejo de Eventos Uno de los principales objetivos de la programación gráfica es permitirle al usuario interactuar con la aplicación, y esa interacción se programa en los eventos. Cuando un usuario realiza alguna acción - como dar un click a un botón, cerrar una ventana, seleccionar un objeto de una lista, o simplemente mover el mouse - Java considera eso como un evento. Crear un Proyecto GUI en Net Beans Despues de montar un "Local Directory" para trabajar con esta práctica, selecciona "NEW > JFrame Form" y escribe el nombre de la clase principal.

3 La interfase que te proporciona NetBeans es una parte visual donde se podrán seleccionar los componentes de la paleta de componentes, y la otra es texto, donde se podrá escribir el código de la aplicación.

4 Para insertar los componentes solo hay que dar click en alguno dentro de la paleta de componentes visuales y despues dar un click en la ventana de la forma.

5 Cuando se ha insertado un componente, se proporciona tambien las "propiedades" de dicho objeto. Aquí se pueden editar muchos de los atributos como color, tamaño, texto que despliega etc.

6 Antes de Comenzar a colocar los componentes, debemos seleccionar un tipo de LayeredPane, que es como vamos a distribuir nuestros componentes gráficos en la forma. NetBeans proporciona un Layout que resultará muy sencillo de utilizar al momento de colocar los componentes y distribuirlos en la ventana... "Absolute Layout".

7 Para colocar los componentes, es recomendable insertar los componentes en varios JPanel (ContentPane).

8 Código Automático Una de las grandes ventajas de utilizar un IDE visual como Net Beans, es que el mismo programa escribe el código por nosotros. Ahorrandonos así tiempo al programar. No todo el código fuente es desarrollado de forma automática, solo el código para formar la "interfase visual" que presentará nuestro programa al usuario final, es decir... el código de la parte funcional sigue siendo parte de nuestro trabajo. Para poder hacer esto, NetBeans agrega ciertos

9 comentarios a nuestros archivos.java que nosotros no podremos ver. Estos comentarios o "etiquetas", le permiten al IDE encontrar las partes del código que fueron escritas de manera automática. Net Beans no nos permitirá modificar el código que escribe el IDE. Y para poderlo identificar, el código protegido aparece sombreado en azul, y las partes en donde se nos permite codificar aparecen en blanco. Programar eventos en NetBeans Para aprovechar mejor el poder del IDE de NetBeans, pondremos como ejemplo la creación de eventos. Basta con saber que es lo que queremos que pase cuando el usuario haga algo con algunos de los componentes de la ventana. Por ejemplo, si deseamos que se ejecute algún proceso o método cuando el usuario de click a un botón, podremos seleccionar en el IDE dicho botón con un click derecho, y NetBeans nos mostrará un menú. Seleccionamos "Events" y el tipo de evento que queremos programar como "mouse" y dentro de mouse seleccionamos "mouseclicked" para indicar que deseamos programar algo para que se ejecute cuando el usuario dá click en el botón.

10 A continuación se presentan algunos ejemplos sencillos de aplicaciones con JFrame: JFrame Este programa presenta una ventana con JFrame y un texto dentro de ella. import javax.swing.jframe;

11 import javax.swing.jlabel; public class HelloWorldSwing { public static void main(string[] args) { JFrame frame = new JFrame("Titulo de la Ventana"); final JLabel label = new JLabel("Hola Mundo Cuel "); frame.getcontentpane().add(label); frame.setdefaultcloseoperation(jframe.exit_on_close); frame.pack(); frame.setvisible(true); JButton Este programa presenta una ventana con un botón. Al presionar el botón se hace sonar la bocina de la computadora. import javax.swing.jframe; import javax.swing.jbutton; import java.awt.toolkit; import java.awt.borderlayout; import java.awt.event.actionlistener; import java.awt.event.actionevent; public class Beeper extends JFrame implements ActionListener {

12 JButton button; public static void main(string args[]){ new Beeper(); Beeper(){ button = new JButton("Click Me"); getcontentpane().add(button, BorderLayout.CENTER); button.addactionlistener(this); this.setdefaultcloseoperation(jframe.exit_on_close); this.pack(); this.setvisible(true); this.show(); public void actionperformed(actionevent e) { Toolkit.getDefaultToolkit().beep(); Cajas de Dialogo Este programa presenta una caja de texto y un botón. Al presionar el botón, se muestra una "caja de dialogo" con el texto que el usuario escribió en la caja de texto. import javax.swing.*; import java.awt.*; import java.awt.event.*; public class MiDialog extends JFrame implements ActionListener{ String msg;

13 JTextField texto; /** Creates a new instance of MiDialog */ public MiDialog() { super("titulo de la Ventana"); JPanel contentpane = new JPanel(new BorderLayout()); texto = new JTextField(10); JButton boton = new JButton("Click me!"); boton.addactionlistener( this ); contentpane.add(texto, BorderLayout.NORTH ); contentpane.add(boton, BorderLayout.CENTER); this.setcontentpane(contentpane); this.setdefaultcloseoperation(jframe.exit_on_close); this.pack(); this.setvisible(true); public static void main(string[] argv) { new MiDialog(); public void actionperformed(actionevent e) { msg = texto.gettext(); JOptionPane.showMessageDialog(this,"Esto es lo que escrebiste: "+msg,"titulillo", JOptionPane.PLAIN_MESSAGE);

14 4 PROCEDIMIENTO (DESCRIPCIÓN) A EQUIPO NECESARIO MATERIAL DE APOYO Computadoras con NetBeans instalado Práctica Impresa API de Java B DESARROLLO DE LA PRÁCTICA

15 4 PROCEDIMIENTO (DESCRIPCIÓN) Diario Personal Hacer un programa que presente en una ventana un calendario y una caja de texto. En el calendario deberán aparecer los días del mes actual y el nombre del mes en la parte superior. Cuando el usuario seleccione alguno de los dias, se deberá mostrar un área de texto, un botón y el día que se ha seleccionado. El usuario podrá introducir todo lo que ha hecho en el día. Cuando presione el botón, el programa guardará el texto en un archivo y volverá a mostrar el calendario. Cuando el usuario vuelva a seleccionar un día donde ya se haya guardado información, se mostrará el texto que escribió únicamente (aún si el usuario cerró abrió la aplicación). El calendario deberá también tener la opción de permitir seleccionar otro mes por medio de dos botones para ir al mes anterior y al siguiente. La aplicación podría verse algo así:

16 C CÁLCULOS Y REPORTE 5 RESULTADOS Y CONCLUSIONES 6 ANEXOS Java 2 SE Online API Specification