Curso de Java Bsico

EJERCICIO GUIADO. JAVA: DISEO DE FORMULARIOS DESDE CDIGO

La Ventana de Diseo
La ventana de diseo es una gran herramienta que nos permite disear formularios de forma relativamente sencilla. Simplemente tenemos que aadir los componentes del formulario: botones, etiquetas, cuadros de textos, etc, y cambiar sus propiedades segn nos interese. Todo esto tiene un cdigo asociado que se genera de forma automtica, y del que no nos hemos preocupado hasta el momento. Por ejemplo, cada vez que aades un botn o una etiqueta, se generan automticamente las instrucciones de cdigo que permiten crear dicho botn o dicha etiqueta. Tambin se genera el cdigo que permite cambiar el texto del botn, o cambiar el texto de la etiqueta. Un buen ejercicio para comprobar esto puede ser el siguiente: Ejercicio guiado 1. 1. Crea un proyecto y aade en su ventana un botn (JButton), una etiqueta (JLabel) y un cuadro de texto (JTextField). 2. El nombre del botn ser btnBoton, el de la etiqueta etiEtiqueta y el del cuadro de texto txtCuadroTexto. 3. A continuacin asigna un texto a cada elemento. La ventana final podra tener un aspecto como el que sigue:

4. Todas estas operaciones que has realizado tienen asociado unas instrucciones de cdigo que se han generado automticamente. Para estudiar estas instrucciones, activa el botn Origen en la parte superior de la pantalla:

http://procesinc.com/

Curso de Java Bsico 5. En el cdigo, observars una lnea llamada Cdigo Generado. Esta lnea est sealada en color azul (al igual que todas las instrucciones generadas automticamente) Observars que tiene un + en la parte izquierda. Si haces clic sobre el signo + aparecer el cdigo generado automticamente:

Haz clic en el + para ver el cdigo generado.

6. El cdigo generado (sealado en azul) no puede ser modificado, sin embargo es interesante estudiarlo para entenderlo. En l puedes encontrar como se crean los componentes, como se asigna el texto a stos etc.
Aqu se crea el botn, la etiqueta y el cuadro de texto

Aqu se asigna el texto a cada elemento

ETC

http://procesinc.com/

Curso de Java Bsico En esta explicacin guiada, se disear el formulario entero directamente desde cdigo, sin usar la ventana de diseo. De esta forma, se podr entender mejor la generacin de cdigo del NetBeans y se tendr ms control sobre los componentes. Ejercicio guiado 2 A. CREACIN DEL PROYECTO 1. Crear un nuevo proyecto con las siguientes caractersticas: a. El nombre del proyecto ser OPERACIONES. b. El nombre del paquete ser VENTANAS. c. El nombre del formulario ser VENTANAPRINCIPAL. El aspecto que tendr la ventana de proyectos debe ser el siguiente:
Nombre del proyecto. Nombre del paquete. Nombre del formulario.

2. Una vez creado el proyecto, iremos directamente a la ventana de cdigo, pulsando el botn Origen. No usaremos la ventana de diseo en este proyecto.

B. ESTRUCTURA DEL CDIGO (estructura de una clase)

3. Analizaremos el cdigo del programa ahora. Empezaremos por arriba:

En la parte superior del cdigo vers un comentario. En este comentario aparece el nombre del fichero que contiene el cdigo, que como puedes observar tiene el mismo que el del JFrame. Tambin aparece la fecha de creacin del fichero.

Observars tambin una instruccin que indica que este fichero (ventanaprincipal.java) pertenece al paquete ventanas.

Tambin vers otro comentario donde aparece el nombre del autor. Este comentario se puede cambiar para que aparezca tu nombre.

http://procesinc.com/

Curso de Java Bsico

4. Un proyecto en java est formado por mdulos denominados CLASES. El proyecto que acabamos de crear tiene un solo mdulo: el JFrame que define la ventana principal, llamado precisamente ventanaprincipal. Por tanto, se puede decir que nuestro proyecto tiene una clase llamada ventanaprincipal.

El proyecto operaciones tiene una clase llamada ventanaprincipal, que pertenece al paquete ventanas.

5. Para programar una clase se sigue la siguiente sintaxis: public class nombredelaclase { programacin de la clase }

6. Esto lo puedes observar claramente en el cdigo de tu proyecto:

http://procesinc.com/

Curso de Java Bsico

Programacin de la clase ventanaprincipal

7. Dentro de la clase, tenemos una serie de funciones y procedimientos llamados MTODOS. Es en los mtodos donde se programan los eventos que pueden suceder sobre el formulario. 8. Hay un mtodo especial muy importante denominado CONSTRUCTOR. Dentro de este mtodo se programa el diseo de la ventana y las caractersticas iniciales de la ventana. El constructor se puede distinguir fcilmente porque tiene el mismo nombre que la clase. En nuestro ejemplo, ventanaprincipal.

Observars que el constructor contiene una llamada a un mtodo llamado initComponents. El mtodo initComponents define caractersticas iniciales de la ventana, y es cdigo generado automticamente. Si quieres verlo, solo tienes que desplegar la parte de Cdigo Generado:

http://procesinc.com/

Curso de Java Bsico

Clic aqu para ocultar el cdigo generado

El mtodo initComponents al que hace referencia el constructor es un mtodo generado automticamente, y no puede ser modificado. Puedes verlo dentro de la seccin de Cdigo Generado. Este mtodo define algunas caractersticas iniciales de la ventana.

El contenido del mtodo initComponents no resulta interesante para el ejercicio que estamos realizando, as que puedes ocultar de nuevo el Cdigo Generado, haciendo clic en el smbolo menos -

9. Otro mtodo importante que hay que mencionar es el mtodo main. Este mtodo es el que se ejecuta cuando arranca el programa. Se puede decir que el programa parte de aqu. La tarea que desempea este mtodo es la de generar la ventana principal y mostrarla en pantalla. El mtodo main, es similar a la funcin main del lenguaje C. En el caso del java, el NetBeans genera automticamente el mtodo main, de forma que no tendremos que hacer cambios en l.

C. DISEO DE LA VENTANA DESDE CDIGO

Vamos ahora a disear la ventana de nuestro programa (sin usar la ventana de diseo, solo a partir de cdigo). Al final de esta explicacin, la ventana del proyecto tendr el siguiente aspecto:

Para conseguir esto, sigue los siguientes pasos:

10. Para realizar el diseo de la ventana, crearemos un mtodo propio al que llamaremos por ejemplo CreacionVentana. Un buen sitio para colocar este mtodo puede ser debajo del constructor:

http://procesinc.com/

Curso de Java Bsico

El mtodo donde disearemos nuestra ventana

11. Lo primero que se va a hacer es definir caractersticas propias de la ventana, como por ejemplo su ttulo, tamao, etc. Recuerda que la forma de hacer referencia a la propia ventana es a travs de la palabra reservada this. As pues, programa lo siguiente dentro del mtodo CreacionVentana:

Este cdigo hace lo siguiente: Usa el mtodo setTitle de la ventana para definir el texto de la barra de ttulo. Usa el mtodo setSize de la ventana para definir un tamao de 500x300. Usa el mtodo setLocation de la ventana para definir la posicin de la ventana en la posicin (100,100) de la pantalla.

http://procesinc.com/

Curso de Java Bsico

Con setTitle cambias la barra de ttulo

Con setLocation decides la posicin de la ventana

Con setSize defines el ancho y alto de la ventana

12. Para que esto tenga efecto, es necesario que el mtodo CrearVentana sea llamado desde el constructor, al igual que sucede con el mtodo initComponents:

13. Ya puedes ejecutar el programa. En el momento en que se ejecuta el programa, el constructor llama al mtodo CreacionVentana y se definen las caractersticas programadas.

http://procesinc.com/

Curso de Java Bsico

14. Ahora vamos a empezar a aadir componentes a la ventana. Concretamente, empezaremos creando la etiqueta que contiene el texto Nmero 1: y luego definiremos algunas caractersticas propias para finalmente situarla en la ventana. Al comienzo de la clase, despus del public class, donde se suelen definir las variables globales, aade el siguiente cdigo:

Este cdigo declara una variable de tipo JLabel (etiqueta) y le da el nombre etiNum1. 15. Al escribir este cdigo, aparecer un error en la lnea, ya que ser necesario importar la librera donde se encuentra el tipo de objeto JLabel. Podrs usar la bombilla del NetBeans para agregar el import correspondiente automticamente. 16. Los imports aparecern en la parte superior del cdigo. Puedes observarlo:

Importacin de la librera para el objeto JLabel, que define las etiquetas. (Agregada automticamente al pulsar la bombilla del NetBeans)

17. Ahora agrega este cdigo a tu mtodo CreacionVentana:

18. La explicacin del cdigo es la siguiente: La primera lnea construye la etiqueta llamada etiNum1 que fue delarada antes. etiNum1 = new JLabel(); Generalizando: para crear un objeto llamado xxx del tipo tipoobjeto, se tendr que hacer lo siguiente:

http://procesinc.com/

Curso de Java Bsico

En la zona de las variables globales se declarar la variable del objeto de la siguiente forma: tipoobjeto xxx;

Luego, dentro de la clase, se construye el objeto siguiendo la siguiente sintaxis: xxx = new tipoobjeto();

En el ejemplo, la etiqueta creada, cuyo nombre es etiNum1, tiene que contener el texto Nmero 1:. Esto lo hacemos con el tpico mtodo setText: etiNum1.setText(Nmero 1: );

Hay que definir la posicin que tendr el objeto y el tamao. Para ello, se usar el mtodo setBounds. Este mtodo recibe la posicin (x, y) del objeto y el ancho y el alto. En el ejemplo, la etiqueta est situada en la posicin (10,10) de la ventana y tiene un ancho de 100 y un alto de 20: etiNum1.setBounds(10,10,100,20);

Finalmente, hay que colocar la etiqueta en el panel de contenidos de la ventana. Para ello, se usa el mtodo add del panel de contenidos. Recuerda que para obtener este panel se usa el mtodo getContentPane: this.getContentPane().add(etiNum1);

19. Es buena idea que ejecutes el programa para ver el aspecto de la ventana ahora.

20. Hemos aadido una etiqueta. Ahora aadiremos la siguiente. Para ello, primero tienes que declarar la etiqueta en la zona de las variables globales:

21. Luego, en el mtodo ConstruirVentana, aadiremos el siguiente cdigo:

http://procesinc.com/

Curso de Java Bsico

22. Este cdigo es prcticamente igual al anterior. En l se constuye la etiqueta declarada antes con el nombre etiNum2. Luego se le asigna el texto Nmero 2:, luego se usa el mtodo setBounds para situarla en la posicin (10, 60) y asignarle un ancho de 100 y un alto de 20. Finalmente se aade la etiqueta al panel de contenidos de la ventana. 23. Ejecuta el programa y observa el aspecto de la ventana ahora:

24. Sigamos aadiendo elementos. Ahora aadiremos un cuadro de texto llamado txtNum1. Primero declara la variable del cuadro de dilogo en la zona de variables globales:

Tendrs que agregar el import correspondiente para el tipo de objeto JTextField. 25. Luego aade el siguiente cdigo en el mtodo CreacionVentana:

26. Este cdigo realiza lo siguiente: La primera lnea construye el cuadro de texto llamado txtNum1. Los JTextField son objetos del tipo cuadro de texto.

http://procesinc.com/

Curso de Java Bsico Esta lnea se subrayar en rojo ya que ser necesario aadir el import para la librera de los JTextField. La siguiente lnea introduce la cadena 0 dentro del cuadro de texto. La siguiente lnea asigna la posicin y el tamao a travs del mtodo setBounds. Y finalmente, la ltima lnea aade el cuadro de texto al panel de contenidos de la ventana.

27. Ejecuta el programa y comprueba el funcionamiento de este cdigo. 28. Ahora se aadir un nuevo cuadro de texto llamado txtNum2. El cdigo es similar. Declara la variable global:

29. Y ahora aade el cdigo que construye el objeto en el mtodo ConstruirVentana. Este cdigo es similar al del cuadro de texto anterior. Solo cambia el nombre del objeto y la posicin donde se colocar:

30. Ejecuta el programa y comprueba como va el diseo de la ventana:

http://procesinc.com/

Curso de Java Bsico

31. Ahora le toca el turno a los botones. Primero declararemos una variable del tipo JButton en la zona de variables globales (ser necesario aadir el import correspondiente a la clase JButton a travs de la bombilla). El botn se llamar btnSumar:

32. Y a continuacin construiremos y le daremos forma al botn, aadiendo el siguiente cdigo en el mtodo ConstruirVentana:

33. La explicacin del cdigo anterior es similar a los anteriores: La primera lnea construye el botn btnSumar. A continuacin se asigna el texto Sumar al botn. Luego se asigna la posicin y el tamao del botn con el mtodo setBounds. Finalmente se aade el botn al panel de contenido de la ventana.

http://procesinc.com/

Curso de Java Bsico 34. Ejecuta el programa y observa el aspecto de la ventana. 35. Ahora se aadir otro botn llamado btnRestar. Declara la variable JButton:

36. Tienes que escribir el siguiente cdigo:

37. El cdigo es prcticamente igual que el del primer botn. Solo cambia el nombre del botn, el texto y la posicin y tamao del botn. 38. Ejecuta el programa para ver como queda la ventana.

http://procesinc.com/

Curso de Java Bsico

CONCLUSIN La ventana de diseo de NetBeans es una herramienta que nos permite disear las ventanas sin tener que programar cdigo. Es posible prescindir de la ventana de diseo y realizar todo el diseo de la ventana programando. El diseo de la ventana se tiene que hacer en el constructor de la clase. Los componentes de una ventana son variables globales cuyo tipo se corresponde a distintas clases de objetos: JLabel, JTextField, JButton, etc... Para construir un objeto hay que declararlo como una variable global: TipoObjeto NombreObjeto; Y luego, dentro de la clase, construirlo, usando la siguiente sintaxis: NombreObjeto = new TipoObjeto(); Luego se pueden usar distintos mtodos del objeto para trabajar con l.

http://procesinc.com/