domingo, 25 de marzo de 2012

Tutorial : GUI para Administración de Productos - Parte 7.1



En esta parta vamos a crear la interface para el manejo de los productos, podremos ver como hacemos uso de nuestras clases creadas previamente, y también como es posible hacer GUI's de manera rápida utilizando Netbeans. Verán el uso de componentes como JInternalFrames, Jpanel, Jtable y la clase SwingWorker, asi como la creacion de un TableModel personalizado.
Primero vamos a crear un paquete dentro de UI al cual llamaremos modules y dentro productos, así tendremos las cosas un poco más ordenadas.

Pensemos como queremos nuestra interfaz, podemos hacerlo basado en cuanta información vamos a presentar y el tamaño donde se ejecutara la aplicación.
Nuestra premisas entonces podrían ser, es una aplicación Desktop por lo tanto su tamaño debe ser de 1024x768 a más (no creo que alguien use aun 800x600), nuestra tabla solo contiene 3 campos a mostrar, recuerden que el id del producto no debe ser visto por los usuarios.

Para crearla, click derecho en nuestro paquete y elegimos :

Y le ponemos de nombre FrmProductos

Ahora nuestro IDE debiera verse similar a esto :

 
Puede que varíe un poco dependiendo del S.O., lo importante es que en la parte derecha aparece la paleta de componentes, para insertarlos en nuestra ventana o marco solo hay que seleccionar y arrastrarlos.
Pueden apreciarlo en este video :


Primero le daremos un titulo al formulario, dentro de la ventana Propiedades ubicamos la propiedad Title o Titulo y escribimos Administración de Productos, asi también les agregamos los botones de Cerrar y Maximizar.



Nuestro formulario debe verse asi :

 
Para definir los nombres de nuestras columnas en la tabla, hacemos anticlick en la misma y vamos a la opcion Table Contents o Contenido de la Tabla, en la ventana vamos a la segunda pestaña, Columnas y en la tabla mostrada elegimos la primera fila, quitamos los checks de Editable y Resizable, por ultimo elimnamos la ultima fila, debemos tener una ventana como esta.

 
Los pasos se puede ver en el video a continuación:

Vamos a cambiar nuestro boton Aceptar por el texto Agregar asi como el nombre de la variable y además que tenga un nemonico que seria la letra A, además de un texto de ayuda para cuando el mouse esté encima de nuestro control.


Algunos se dirán y si quiero que mis botones tengan imágenes ?, he aquí los pasos :
Crearemos un paquete icons dentro de nuestro paquete ui.

Ok, ahora vamos a la carpeta nuestro proyecto y dentro de la carpeta src navegamos hasta la carpeta icons,una vez ahi pegamos los iconos que nos gustaría utilizar, en mi caso estoy usando los iconos Oxygen.
 
En nuestro IDE, ya aparecen nuestros icono agregados.
 
Bueno pongamos un icono en nuestros botones.
Seleccionamos el boton Agregar y picamos en la propiedad icon, presionamos el botón de explorar,

 
en la pantalla a continuación en Paquete o Package elegimos el paquete icons y luego el icono que deseamos en mi caso save.png

 Nuestro botón se verá así :

Agregamos una caja de búsqueda y los botones Imprimir y Exportar, nuestro formulario final se vea así.
 
Veamos como va quedando por completo nuestra aplicación.

Para despejar algunas dudas que podrían sucitarse al ver esta pantalla, el tema o como se le llama en Java, el LookAndFeel es automatico, viene en el JDK desde la version 1.6, se llama Nimbus, y Netbeans cuando genera el codigo, lo hace incluyendo este LookAndFeel.


Para integrar nuestro menus con los JinternalFrame siga este Tutorial
 
 Viene de 

No hay comentarios:

Publicar un comentario

 
Powered by Blogger