Hace tiempo me pidieron que realice un tuto para la creacion de interfaces mas amigables al usuario utilizando java, si bien netbeans tiene una biblioteca bastante amplia, a veces es mejor crear nuestros propios controles para darle un toque personal y profesional a nuestras aplicaciones.
¿que necesitamos?
1. Un programa de diseño grafico, photoshop, gimp o cualquier otro
2. El IDE netbeans 6.0, es el que utilizaremos en el tuto
3. GANAS DE APRENDER
Manos a la obra
En este tutorial, realizaremos la construccion de un boton tipo "windows Vista" utilizando el objeto JLabel de Java
Tambien necesitamos 2 pares de iconos de 16x16 pixeles y de 32x32 pixeles, estos en formato gif, veremos su utilidad mas adelante
5. En la clase jcVistaButtons.java, copia/pega/y analiza el siguiente codigo:
¿que necesitamos?
1. Un programa de diseño grafico, photoshop, gimp o cualquier otro
2. El IDE netbeans 6.0, es el que utilizaremos en el tuto
3. GANAS DE APRENDER
Manos a la obra
En este tutorial, realizaremos la construccion de un boton tipo "windows Vista" utilizando el objeto JLabel de Java
1. Con la aplicacion de diseño grafico, realizamos el trabajo para crear las imagenes que utilizaremos en el Componente, estas deben ser tres para representar los 3 estados que tiene un boton (PRESIONADO, DENTRO Y FUERA), si no sabes como, date una vuelta por este tuto: "CREAR BOTON ESTILO WINDOWS VISTA"
3. Ahora abrimos el netbeans y creamos un nuevo proyecto, en las opciones escogemos JAVA - JAVA CLASS LIBRARY, y le das un nombre, por ejemplo jcMouseButtons
Esto solamente nos crea un proyecto vacio, entonces crearemos 2 paquetes (clic derecho sobre SourcePackages - New - New Java Package...) el paquete jcVistaButtons, donde colocaremos los archivos *.java y el paquete ico, donde estaran las imagenes
a buen entendedor ...
a buen entendedor ...
4. En el paquete ico, colocamos todas las imagenes que utilizaremos en nuestro componente, y en el paquete jcVistaButtons, creamos dos clases, jcVistaButtons.java y jcVistaButtonsBeanInfo, dependiendo del nombre que le des a tu componente, el segundo SIEMPRE debe tener el mismo nombre, de la manera Nombre_de_tu_componente_BeanInfo.java, sino no se reconocera esta clase.
Hasta el momento debes tener algo como esto
5. En la clase jcVistaButtons.java, copia/pega/y analiza el siguiente codigo:
01 package jcVistaButtons; 02 import java.awt.Cursor; 03 import java.awt.Dimension; 04 import java.awt.event.MouseEvent; 05 import java.awt.event.MouseListener; 06 /** 07 * @web http://jc-mouse.blogspot.com/ 08 * @author Mouse 09 */ 10 public class jcVistaButtons extends javax.swing.JLabel implements MouseListener { 11 12 public jcVistaButtons(){ 13 super(); 14 //se le da un tamaño 15 this.setPreferredSize(new Dimension(260,60)); 16 //se le coloca una imagen 17 this.setIcon(new javax.swing.ImageIcon(getClass().getResource("/ico/jcbuttons1.png"))); 18 //se cambia de cursor default por otro, el de la "manito" 19 this.setCursor(new Cursor(Cursor.HAND_CURSOR)); 20 //se añade los eventos del mouse 21 this.addMouseListener(this); 22 } 23 24 public void mouseClicked(MouseEvent e) { 25 26 } 27 28 public void mousePressed(MouseEvent e) { 29 this.setIcon(new javax.swing.ImageIcon(getClass().getResource("/ico/jcbuttons3.png"))); 30 } 31 32 public void mouseReleased(MouseEvent e) { 33 this.setIcon(new javax.swing.ImageIcon(getClass().getResource("/ico/jcbuttons2.png"))); 34 } 35 36 public void mouseEntered(MouseEvent e) { 37 this.setIcon(new javax.swing.ImageIcon(getClass().getResource("/ico/jcbuttons2.png"))); 38 } 39 40 public void mouseExited(MouseEvent e) { 41 this.setIcon(new javax.swing.ImageIcon(getClass().getResource("/ico/jcbuttons1.png"))); 42 } 43 }
Esta clase, se extiende de la clase JLabel por tanto tambien heredara todos sus propiedades, tambien le añadimos un MouseListener para capturar los eventos del mouse; tambien para personalizar nuestro boton, cambiamos el Cursor por defecto, por el de la "manito". Las imagens de los botones, se colocan cada uno en su respectivo sitio para que respondan al mouse y cambien dinamicamente.
6. Para personalizar aun mas nuestro componente y darle un toque profesional, en la clase jcVistaButtonBeanInfo, colocamos el codigo:
01 package jcVistaButtons; 02 import java.awt.Image; 03 import java.beans.*; 04 /** 05 * @web http://jc-mouse.blogspot.com/ 06 * @author Mouse 07 */ 08 public class jcVistaButtonsBeanInfo extends SimpleBeanInfo{ 09 Image icon; 10 Image icon32; 11 Image iconM; 12 Image icon32M; 13 14 public jcVistaButtonsBeanInfo(){ 15 icon = loadImage("/ico/jc16c.gif"); 16 icon32 = loadImage("/ico/jc32c.gif"); 17 iconM = loadImage("/ico/jc16m.gif"); 18 icon32M = loadImage("/ico/jc32m.gif"); 19 } 20 21 @Override 22 public Image getIcon(int i){ 23 switch(i) 24 { 25 case 1: 26 return icon; 27 28 case 2: 29 return icon32; 30 31 case 3: 32 return iconM; 33 34 case 4: 35 return icon32M; 36 } 37 return null; 38 } 39 }
Esta clase, Bean que declaramos, que se extiende de SimpleBeanInfo es la encargada de hacer reconocer las caracteristicas de nuestro componente por el IDE, por ejemplo el icono que representara al Swing que creamos en la paleta de componentes de netbeans, tambien puede almacenar una descripcion, lista de propiedades, referencias y metodos que definen al bean.
7. Si llegaste hasta aqui, solamente nos falta con compilar y crear el *.JAR de nuestro componente, para esto nos posicionamos en el panel del proyecto, realizamos un clic derecho sobre este y elegimos la opcion, BUILD o sea CONSTRUIR. El jar que se crea estará en la carpeta DIST del proyecto. Nuestro componente esta listo para ser utilizado.
Para utilizar este componente, primero debemos instalarlo/añadirlo a nuestra paleta de componente de netbeans, esto y como queda el resultado final de nuestro componente realizando un pequeño programa de prueba, en el siguiente video.
