viernes, 6 de noviembre de 2015

Contenedor swing

Contenedores Java Swing

Después de haber visto los componentes atómicos, componentes de texto y los Menús en Java Swing, ya tenemos lo suficiente para darle una repasada a los diferentes Contenedores que esta librería nos provee......



Que Son?

Tal como se ha mencionado en las primeras entradas sobre java Swing, los contenedores son componentes que permiten almacenar, alojar o contener otros elementos gráficos.....nuevamente mencionamos que es el Tapiz donde vamos a pintar....... 

Cuales Son?

Java Swing provee algunos contenedores útiles para diferentes casos, así cuando desarrollamos una Ventana podemos decidir de que manera presentar nuestros elementos, como serán alojados y de que forma serán presentados al usuario......veamos.... 

JFrame
Este contenedor es uno de los principales y mas usados (ya lo hemos visto anteriormente), representa la ventana Principal de nuestra aplicación, en el podemos alojar otros contenedores.

JDialog
Este contenedor representa una ventana de tipo Ventana de diálogo, también puede ser un contenedor principal aunque es mas recomendable dadas sus propiedades, que sea usada como ventana secundaria, es decir, un JFrame como ventana Principal y el resto de ventanas como un JDialog (Ya veremos el porqué).
 
JPanel
Este contenedor es uno de los mas simples, permite la creación de paneles independientes donde se almacenan otros componentes, de esta manera decidimos que elementos se alojan en que paneles y dado el caso podemos usar sus propiedades para ocultar, mover o delimitar secciones... cuando alojamos elementos en un panel, los cambios mencionados se aplican a todo su conjunto...es decir, si nuestro panel tiene 5 botones y ocultamos solo el panel, los botones también se ocultan....
 
JScrollPane
Este contenedor permite vincular barras de scroll o desplazamiento en nuestra aplicación, puede ser utilizado tanto en paneles como en otros componentes como un JTextArea, hay que tener en cuenta que no es simplemente poner un scroll, es alojar el componente (en este caso panel o área de texto) en elJScrollPane....

JSplitPane
Este componente permite la creación de un contenedor dividido en 2 secciones, muchas veces usado en aplicaciones donde una sección presenta una lista de propiedades y otra sección presenta el elemento al que le aplicamos dicha lista....cada sección puede ser manipulada por aparte y redimensionar sus componentes (Mas utilizado cuando se trabaja con layouts...después lo veremos).

JTabbedPane
Este tal vez sea otro de los componentes mas usados, permite la creación de una pestañas en nuestra ventana, cada pestaña representa un contenedor independiente donde podemos alojar paneles u otros elementos.

JDesktopPane
Este contenedor aloja componentes de tipoJInternalFrame, estos representan ventanas internas, permitiendo así crear ventanas dentro de una ventana principal, al momento de su creación podemos manipular sus propiedades para definir si queremos redimensionarlas, cerrarlas, ocultarlas entre otras....

También podemos definir una posición inicial de cada ventana interna, sin embargo después de presentadas podemos moverlas por toda la ventana Principal donde se encuentran alojadas.

JToolBar
Este contenedor representa una Barra de herramientas dentro de nuestra aplicación, en el podemos alojar diferentes componentes que consideremos útiles, botones, check, radios, campos entre otros.......esta barra de herramientas puede ser manipulada permitiendo cambiar su ubicación con tan solo arrastrarla al extremo que queramos, o sacarla de la ventana para que nuestras opciones se encuentren como una ventana independiente.

DISEÑO DE FORMULARIOS DESDE CÓDIGO

La ventana de diseño es una gran herramienta que nos permite diseñar formularios de forma relativamente sencilla. Simplemente tenemos que añadir los componentes del formulario: botones, etiquetas, cuadros de textos, etc, y cambiar sus propiedades según nos interese.


Todo esto tiene un código asociado que se genera de forma automática, y del que no nos hemos preocupado hasta el momento.

Por ejemplo, cada vez que añades un botón o una etiqueta, se generan automáticamente las instrucciones de código que permiten crear dicho botón o dicha etiqueta. También se genera el código que permite cambiar el texto del botón, 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 añade en su ventana un botón (JButton), una etiqueta (JLabel) y un cuadro de texto (JTextField).

2. El nombre del botón será “btnBoton”, el de la etiqueta “etiEtiqueta” y el del cuadro de texto “txtCuadroTexto”.

3. A continuación asigna un texto a cada elemento. La ventana final podría tener un aspecto como el que sigue:



4. Todas estas operaciones que has realizado tienen asociado unas instrucciones de código que se han generado automáticamente. Para estudiar estas instrucciones, activa el botón Origen en la parte superior de la pantalla:




5. En el código, observarás una línea llamada Código Generado. Esta línea está señalada en color azul (al igual que todas las instrucciones generadas automáticamente) Observarás que tiene un + en la parte izquierda. Si haces clic sobre el signo + aparecerá el código generado automáticamente:




6. El código generado (señalado 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.



En esta explicación guiada, se diseñará el formulario entero directamente desde código, sin usar la ventana de diseño. De esta forma, se podrá entender mejor la generación de código del NetBeans y se tendrá más control sobre los componentes.

Crear un formulario de datos en  java.

N°1.- Abrir NetBeans y crear un "New Project"--"java"--"Java Class Library". 
(Dar el nombre que uno quiera no influye en nuestro objetivo). 

(Tutorial) Crear un formulario de datos en NetBeans java

Para efectos del ejemplo lo llamare Formulario1 

N°2.- En nuestro Source Packages, daremos click secundario, y crearemos un package llamado Presentacion,otro llamado Negocio.Modelo y otro llamado Negocio.Control 
(Esto lo hacemos para tener un código mas limpio) 
Nos quedara algo así... 

(Tutorial) Crear un formulario de datos en NetBeans java

Trabajaremos en Presentacion primeramente. 

Presentacion 

N°3.- En nuestro package Presentacion le damos click secundario, seleccionamos "new" y le damos a "JFrame Form". (En caso de no estar abajo sale other... buscan "Swing GUI Forms" y dentro de el tiene que aparecer "JFrame Form" ) . 

Lo creare con el nombre de "InterfazFormulario".. 

(Tutorial) Crear un formulario de datos en NetBeans java

En este ejemplo pediremos los siguientes datos (Nombre, apellidos, RUT, email, telefono) 
seran obligatorios todos los datos (El rut es para los chilenos asique su codigo lo enseñare al final de este pequeño tutorial). 

para este fin tendremos estos jlabel: 
Nombre, Apellidos, Rut, Email, Telefono, y que sus Nombres de variables seran "JLNombre" en el caso del nombre... 
(en caso de tener titulo crear un jlabel con el titulo). 

Ponerle nombre visible por el usuario es click secundario y "Edit Text" 
Ponerle nombre a la variable es click secundario y "Change Variable Name" 

Nos quedara algo asi: 

(Tutorial) Crear un formulario de datos en NetBeans java

N°4.-Crearemos los JTextField: 
uno para cada Dato, excepto para el rut que necesita 2, con el siguiente nombre de varible 
por ejemplo: para el Nombre se llamara "txtNombre" para el Apellido se llamara "txtApellidos", 
(RUT; txtRut .... txtValidador). 


le damos click secundario "Edit Text" y le borramos el contenido sin ningun espacio luego agrandamos el textfield en caso de achicarse este... 


Nos quedara algo así... 

(Tutorial) Crear un formulario de datos en NetBeans java


N°5.- Le damos un titulo al JFrame eso se hace dandolo click secundario encima del frame en cualquier lugar que no sea ni un jlabel o un JtextField y damos en "Propiedades", luego en donde dice "title" escribimos "Formulario" 

(Tutorial) Crear un formulario de datos en NetBeans java

N°6.- Ahora crearemos botones "Button". crearemos 3 uno para "Guardar" uno para "Limpiar" y uno para "Salir" en los cuales al igual que en los jlabel y textfield vamos a ponerle nombre de variable... 
Guardar = BotonGuardar; Limpiar = BotonLimpiar; Salir = BotonSalir. 

(Tutorial) Crear un formulario de datos en NetBeans java

N°7.- Agregaremos fondo a un Formulario, esto lo aremos con una clase y una imagen... 
Crearemos una clase llamada "FondoFormulario" (Java Class, en Presentacion) y a su vez crearemos un nuevo package llamado "Presentacion.Imagenes" (donde pondremos todas las imagenes). 

en FondoFormulario.java pondremos el siguiente codigo: 

//Inicio del código 

package Presentacion; 

/** 

* @ author Chino 
*/ 
import java.awt.Graphics; 
import javax.swing.ImageIcon; 
public class FondoFormulario extends javax.swing.JPanel { 
public FondoFormulario(){ 
this.setSize(395, 493); 

@ Override 
public void paintComponent(Graphics g){ 
ImageIcon imagenFondo = new ImageIcon(getClass().getResource("/Presentacion/Imagenes/FondoFormulario.png" ) ) ; 

g.drawImage(imagenFondo.getImage(),0,0,395, 493, null); 
setOpaque(false); 
super.paintComponent(g); 


}


//Fin del código 

Nos quedara algo así... 

(Tutorial) Crear un formulario de datos en NetBeans java

hasta el momento no hemos programado nada solamente nos hemos centrado en lo gráfico y aun no tiene fondo nuestro formulario, así que ahora empezaremos con un poco para programar que se ponga la imagen de fondo.... 

N°8.- 

Le damos Click secundario sobre el JForm principal y vamos a "Events" -- "Window" -- "windowOpened" 

y ahí instanciamos la clase que posee el fondo y la aplicamos de la siguiente manera.. 

(deberan importar la libreria "import java.awt.BorderLayout ; " eso se debe escribir abajo del nombre del package )

(Tutorial) Crear un formulario de datos en NetBeans java

(Tutorial) Crear un formulario de datos en NetBeans java

N°9.- Un detalle importante tendremos que cambiar de color los JLABEL dado que el fondo que escogí es oscuro por lo tanto las dejare amarillas y para efectos del ejemplo también sirve que vean como se hace 
Click secundario sobre el JLabel a cambiar el color y "Propiedades" 

(Tutorial) Crear un formulario de datos en NetBeans java

y ahora al ejecutarlo obtendremos el siguiente resultado... 

(Tutorial) Crear un formulario de datos en NetBeans java

N°10.- Pero su tamaño puede ser cambiado por el usuario, por lo que debemos meternos denuevo a las propiedades del JForm principal y cambiar esa virtud... 

(Tutorial) Crear un formulario de datos en NetBeans java

Por fin en estos 10 pasos hemos terminado la parte netamente gráfica de este asunto. 

Ahora la parte programable de este Proyecto... 

N°1.- Empezaremos por el mas facil el BotonSalir que le daremos click secundario iremos a "Events" - "Action" - "ActionPerformed". 

y escribiremos ahí "dispose ( ) ; " o "System.exit(0) ;" o "this.dispose ( ) ;" cualquiera nos sirve pero deben elegir una y dado que solo es una ventana YO elijo "dispose ( ) ;" 

(Tutorial) Crear un formulario de datos en NetBeans java

N°2.- Ahora Programaremos el BotonLimpiar con el cual dejaremos todos los JTextField nuevamente sin ninguna escritura... 
Esto se hace de la siguiente manera 
ej: 
txtNombre.setText( "" ) ; 
con esto se dice que a la variable txtNombre le llevamos (set) un String vacio ( "" ) y asi con todas las variables..

nos quedaria un codigo así: 

(Tutorial) Crear un formulario de datos en NetBeans java

N°3.- Se Programara el botón Guardar con las siguientes cosas. no se guardara en ninguna parte solamente en RAM (de momento), se validara que se hallan llenado los campos obligatorios y se mostrara en un JOptionPane lo que se guardara a futuro... 

N°3.1.- Validar llenado de campos obligatorios 
Esto lo haremos de la siguiente manera Preguntaremos al programa si los campos están llenados en caso de que no sea así le mandamos un mensaje al usuario que diga que por favor llene el campo faltante y le ponemos la sentencia "return" para que asi no siga adelante con las demás acciones... 

(Tutorial) Crear un formulario de datos en NetBeans java

N°3.2 Ningún nombre y ningún apellido posee números, el teléfono no posee letras (al menos en Chile no), el RUT no posee letras por lo cual aquí haremos algo interesante que solucionara algunas cosas que hay que hacer para validar números...(nos evitaremos el validarlos con un try catch que algunas veces queda mal y el error es mucho mas grande)... 

Diremos que el tipo de tecla que será capturado en el JTextField serán letras y cuando sea un numero diremos que eso no se escriba y que se consuma el evento... esto lo aremos de la siguiente manera... 

Nos posamos sobre el JTextField que queramos editar, le damos click secundario vamos a "Events" -- "Key" -- "KeyTyped"... 
ahí capturamos el evento (que es cuando el usuario apreta una tecla) en un char y lo analizamos y decimos al programa, ¿es un dígito ese char? si es un dígito entonces consumimos el evento (osea lo hacemos nulo, que no lo escriba en el JTextField), sino solo se escribe... 
(Verán como les servirá en un futuro esta parte) 

(Tutorial) Crear un formulario de datos en NetBeans java


y así quedaría cuando queremos introducir solo números... 

(Tutorial) Crear un formulario de datos en NetBeans java

N°3.3 Ahora veremos que nuestro usuario no meta demasiados caracteres y en algunos casos solo los necesarios, para practicas del ejercicio solo se hará con la longitud del texto 
por lo cual también debemos entrar en el KeyTyped contar la longitud de nuestro texto y si es mayor a la longitud que nosotros queremos dar entonces que consuma el evento... 
(se añade arriba del paso 3.2 como veremos a continuación ) 

(Tutorial) Crear un formulario de datos en NetBeans java


N°4 Haremos que cuando sea llenado un campo "aparezca" una imagen de un Ticket al lado haciendo semejanza de que el campo esta correctamente llenado... veamos como se hace esto... 

N°4.1 Crearemos JLabels del porte de nuestra imagen o del tamaño que necesitemos en este ejercicio se necesitan 5 JLabels para ingresar imagenes... 
Agrandaremos el JFrame principal para tener espacio y los colocaremos en el (los JLabels) primero los dejaremos de un porte diferente y luego borramos lo que dice... ahora le daremos click secundario 1.- cambiaremos su nombre de variable por 
ej: JLNombre --- txtNombre --- JLImagenNombre 
y así con todas los JLabels que contendrán imágenes 
teniendo esto le diremos cual sera su tamaño, el cual para este ejercicio lo dejaremos en 30 x 30 de la siguiente manera: 

(Tutorial) Crear un formulario de datos en NetBeans java

N°4.2 Programaremos el JTextField para que cuando se rellene y el usuario pase a otra casilla salga el ticket verde... 
esto se hace con el evento llamado FocusLost 
entonces en el JTextField le damos click secundario "Events" -- "Focus" -- "FocusLost" 
En el cual preguntamos si la longitud del texto escrito es superior a 2 o 3 letras entonces que el JLabel de la imagen cambie por un ticket caso contrario que la imagen sea un null. 
lo que se hace de la siguiente manera: 

(primero debes iniciar una variable que contenga nuestro icono de la siguiente manera y en ese lugar dado que la ocuparemos mas de una vez...): 

(Tutorial) Crear un formulario de datos en NetBeans java

y luego hacemos vamos a "Events" -- "Focus" -- "FocusLost" 

(Tutorial) Crear un formulario de datos en NetBeans java

Una vez creado esto con todos nuestros JTextField tendremos que reeditar nuestro fondo dado que ahora no tiene las mismas dimensiones entonces para saber las dimensiones de nuestro JFrame principal damos doble click en cualquier borde de este y nos aparecerá un mensaje que nos dirá el largo y ancho separados por una coma... 

Entonces vamos al FondoFormulario.java y editamos donde dice "this.setSize(aqui damos nuestros 2 valores separados por una coma) ; 
Lo mismo abajo, PERO deben darle un poco mas de largo y de ancho para que la imagen no se vea apretada... 
(Eso lo van arreglando a medida de las ejecuciones) 

(Tutorial) Crear un formulario de datos en NetBeans java

Ya con eso tendríamos el siguiente resultado ... 

(Tutorial) Crear un formulario de datos en NetBeans java

BONUS TRACK CHILENOS 

Para auto calcular el código verificador se hace lo siguiente numero 1 se bloquea el txtValidador para que el usuario no pueda seleccionarlo 

(Tutorial) Crear un formulario de datos en NetBeans java

Luego en FocusLost de el txtRut aremos unos ciclos que permiten calcular el código verificador 

(Tutorial) Crear un formulario de datos en NetBeans java

Y ya esta.... Es un poco difícil de entender quizá no me especifique bien pero si lo ocuparan dirán "Que clase de brujería es esta" xD 
pero si navegan un rato por la net verán que es lo mismo que hacen todos para calcularlo 

Negocio.Control 

En esta parte crearemos una clase la cual poseerá solo atributos y en casos apartados puede tener uno que otro método entonces dentro de Negocio.Control le damos click secundario y "New" -- "Java Class"... 
Yo le llamare "Persona" y le daré los atributos que pedimos en la interfaz gráfica, are un constructor por defecto y uno con valores por parámetros, nos quedara algo así: 

(Tutorial) Crear un formulario de datos en NetBeans java

Negocio.Modelo 

En este package es donde albergaremos la mayor cantidad de métodos y la menor cantidad de atributos 
Para tener todos los atributos de Persona lo aremos de la siguiente manera: 

Haremos una clase de nombre Agenda ( Negocio.Modelo le damos click secundario y "New" -- "Java Class"...) 

Ahora lo que resta es hacer Metodos para utilizar los atributos y luego implementarlos en la Interfaz 
Así que crearemos el método guardar, el cual nos guardará en un arraylist o un vector o como le llamen... 
se hace así 

(creación de un vector importando la clase java.util.vector) 

(Tutorial) Crear un formulario de datos en NetBeans java

Por consiguiente debemos llenar ese vector de Personas, pero los vectores se auto crean con capacidad de llenarse con Object (es por defecto del que hizo ese código) por lo que una ves que yo entregue al vector una clase de tipo Persona el la guardara como tipo Object por lo cual al sacar nosotros la información debemos devolver el Object a Persona... (si les resulta estresante o enredado es cosa de ver el código y lo entenderán) 

N°1.1.- Guardar: 
En este método lo que se hará es Guardar lo que tiene Persona en el Vector de la siguiente manera 

(Tutorial) Crear un formulario de datos en NetBeans java

N°1.2.- Mostrar Agenda 
En este método lo que se hará simplemente es en una variable llamada "Linea" albergaremos las lineas, valga la redundancia, de todas las personas en el vector (recordar que como todo lo que hay en ese vector es de tipo Object hay que devolverlo a Persona antes de poder ocuparlo) 

(Tutorial) Crear un formulario de datos en NetBeans java

Muy Bien con eso tenemos lista la parte de Negocio  

Ahora solo resta juntar Negocio con Presentacion y el código estará completo 

Lo que haremos es mostrar la agenda en un JOptionPane para no tener que desarrollar un JFrame nuevo o meterle un JtextArea al Frame ya hecho. 

nos dirigimos al JFrame principal y al boton Guardar le llevaremos el metodo Guardar que acabamos de crear de la siguiente manera 

Modificar Guardar... 

(Tutorial) Crear un formulario de datos en NetBeans java

Crear un BotonMostrar para ver si se guarda el curso completo en nuestro Vector 

(Tutorial) Crear un formulario de datos en NetBeans java

Y los resultados que tiene nuestro Programa son.... 

Resultados 

(Guardar Exitoso) 
(Tutorial) Crear un formulario de datos en NetBeans java

(Mostrar Exitoso) 
(Tutorial) Crear un formulario de datos en NetBeans java



Espero este post sea de su agrado.... si leyeron hasta aquí ps los amo xD y si hay alguna parte que crean que esta mal o que tenga que editar díganme y se arreglara.... 

Faltas de ortografía lo siento pero son las 3 de la mañana y mañana tengo trabajo solo quería compartir el conocimiento aunque puedo editarlo si es que son muchas