Si bien se pueden encontrar en google estilos java (Look and Feel) listos para cambiar la apariencia de nuestras aplicaciones, hacer uso de ellos tiene sus pros y sus contras, un pro, nos ahorran tiempo al diseñar nuestra GUI pero a su vez un contra, nos volvemos esclavos de esos estilos porque no podemos cambiarlos y debemos conformarnos con lo que podamos encontrar, otras veces hay que pagar licencias y algunos son muy bonitos pero consumen muchos recursos.
Una alternativa es personalizar nuestros propios componentes, lleva más tiempo si, pero con un poco de paciencia podemos crear nuestra propia paleta de swing que podremos reutilizar en los proyectos que queramos, y eso es lo que haremos en este tutorial, personalizaremos un JComboBox dándole un aspecto más minimalista que esta de moda 🙂 el estilo Metro de Windows 8
En la imagen de abajo, veras que dividimos el jcombo en tres partes, que son las que modificaremos:
Proyecto: Personalizar un JComboBox
IDE: Netbeans 7.x
Nivel: Avanzado
Tiempo: 20 minutos
Proyecto Swing ComboBox
1. Crea un nuevo proyecto, FILE -> NEW PROJECT -> JAVA -> JAVA CLASS LIBRARY, dale el nombre de «CustomComboBox» y crea la siguiente estructura:
Tenemos dos clases:
2. Para modificar un swing java podemos hacer uso de sus propiedades pero esto nos limita mucho, si queremos cambiar toda la apariencia, debemos hacer uso de la clase BasicComboBoxUI, de esta forma podremos acceder y sobreescribir los métodos de los diferentes componentes que forman un combobox para darle el estilo que queramos.
Abre la clase CustomUI que creamos en el paso 1 y pega el siguiente código:
01 package org.bolivia.combo; 02 import java.awt.Color; 03 import java.awt.Component; 04 import java.awt.Graphics; 05 import java.awt.Rectangle; 06 import javax.swing.BorderFactory; 07 import javax.swing.DefaultListCellRenderer; 08 import javax.swing.ImageIcon; 09 import javax.swing.JButton; 10 import javax.swing.JComponent; 11 import javax.swing.JList; 12 import javax.swing.ListCellRenderer; 13 import javax.swing.plaf.ComboBoxUI; 14 import javax.swing.plaf.basic.BasicArrowButton; 15 import javax.swing.plaf.basic.BasicComboBoxUI; 16 /** 17 * @web https://www.jc-mouse.net/ 18 * @author Mouse 19 */ 20 public class CustomUI extends BasicComboBoxUI{ 21 22 private ImageIcon espacio = new ImageIcon(getClass().getResource("/org/bolivia/res/espacio.png")); 23 private Color red = new Color(153,3,3); 24 25 public static ComboBoxUI createUI(JComponent c) { 26 return new CustomUI(); 27 } 28 29 @Override 30 protected JButton createArrowButton() { 31 BasicArrowButton basicArrowButton = new BasicArrowButton(BasicArrowButton.SOUTH, //Direccion de la flecha 32 Color.WHITE, //Color de fondo 33 new Color(130,7,7),//sombra 34 new Color(130,7,7),//darkShadow 35 Color.WHITE //highlight 36 ); 37 //se quita el efecto 3d del boton, sombra y darkShadow no se aplican 38 basicArrowButton.setBorder(BorderFactory.createLineBorder(red,2)); 39 basicArrowButton.setContentAreaFilled(false); 40 return basicArrowButton; 41 } 42 43 //Se puede usar un JButton para usar un icono personalizado en lugar del arrow 44 /* 45 @Override 46 protected JButton createArrowButton() { 47 JButton button = new JButton(); 48 //se quita el efecto 3d del boton, sombra y darkShadow no se aplican 49 button.setText(""); 50 button.setBorder(BorderFactory.createLineBorder(red,2)); 51 button.setContentAreaFilled(false); 52 button.setIcon( new ImageIcon(getClass().getResource("/org/bolivia/res/estrella.png")) ); 53 return button; 54 } 55 */ 56 57 @Override 58 public void paintCurrentValueBackground(Graphics g, 59 Rectangle bounds, 60 boolean hasFocus) 61 { 62 g.setColor( red ); 63 g.fillRect(bounds.x, bounds.y, bounds.width, bounds.height); 64 } 65 66 //Pinta los items 67 @Override 68 protected ListCellRenderer createRenderer() 69 { 70 return new DefaultListCellRenderer() { 71 72 @Override 73 public Component getListCellRendererComponent(JList list,Object value,int index, 74 boolean isSelected,boolean cellHasFocus) { 75 76 super.getListCellRendererComponent(list,value,index,isSelected,cellHasFocus); 77 list.setSelectionBackground(red); 78 if (isSelected) 79 { 80 setBackground( red ); 81 setForeground(Color.WHITE); 82 } 83 else 84 { 85 setBackground( Color.WHITE ); 86 setForeground( new Color(70,70,70)); 87 } 88 if (index!=-1) { 89 setIcon( espacio ); 90 } 91 return this; 92 } 93 }; 94 } 95 }
Explicación:
20 Nuestra clase se extiende de BasicComboBoxUI
22 Aquí hacemos referencia a una imagen PNG, esta imagen es transparente (importante) y tiene las dimensiones 12×50 pixeles, utiliza cualquier edito de imágenes para crearla y colócala en el paquete «res»
23 El color principal de todo el componente, en este caso un rojo intenso
29,41 El contenedor del Arrow (flecha) es un BasicArrowButton que se extiende de un JButton y por tanto tiene las mismas propiedades que este, pero claro modificado para mostrar una flecha, lo que hacemos aquí es crear nuestro propio button con los colores que queremos ademas para seguir con el estilo minimalista, eliminamos el estilo 3d del jbutton
44,54 Como dijimos arriba, el encargado de pintar la flecha es un jbutton modificado, pero si lo que queremos es usar un icono propio, podemos hacer uso de un JButton en lugar de un BasicArrowButton . De esta forma podemos lograr un efecto como este:
58,64 pintamos de rojo la sección donde va el item seleccionado
67,94 Finalmente modificaremos la apariencia (tamaño, color) de la lista de items del combobox
3. Para terminar, abre la clase SComboBox.java y pega el siguiente código
01 package org.bolivia.combo; 02 import java.awt.Color; 03 import java.awt.Dimension; 04 import javax.swing.BorderFactory; 05 import javax.swing.JComboBox; 06 /** 07 * @web https://www.jc-mouse.net/ 08 * @author Mouse 09 */ 10 public class SComboBox extends JComboBox{ 11 12 /** Constructor */ 13 public SComboBox() 14 { 15 Dimension dimension = new Dimension(200,32); 16 setPreferredSize(dimension); 17 setSize(dimension); 18 setForeground(Color.WHITE); 19 setBorder(BorderFactory.createLineBorder(new Color(71, 71, 71), 2)); 20 setUI(CustomUI.createUI(this)); 21 setVisible(true); 22 } 23 24 }
Lo que hacemos aquí es extender esta clase de un JComboBox, modificamos algunas propiedades y asignamos la clase CustomUI
4. Finalmente clic derecho sobre el proyecto, CLEAN AND BUILD para crear el JAR
Nuestro componente no tiene propiedades nuevas, solamente le cambiamos la apariencia
Una vez que instalemos esta nuevo swing, podremos usarla ya sea gráficamente arrastrando esta al diseñador de netbeans o ya sea por código de la siguiente manera:
SComboBox combo = new SComboBox(); combo.setModel( new DefaultComboBoxModel( new String[] { "Enero", "Febrero", "Marzo", "Diciembre" }) ); add(combo);
Descargas
Proyecto en Netbeans 7.x AQUI
enjoy!!!
En tutoriales pasados creábamos demasiadas líneas de código en el mismo lugar para dibujar en la pantalla, cosa que nos[...]
A continuación te mostramos una guía sobre la nueva nueva función ‘estado‘ de WhatsApp. Primero que nada, a[...]
En este post personalizaremos un componente JComboBox para que sus elementos acepten tablas (JTable) en lugar de texto s[...]
PROBLEMA: Se tiene un JTable con 19 columnas y 50 registros, se desea personalizar el JTable de la siguiente manera:[...]
En este post crearemos una aplicación sencilla para mandar mensajes de texto desde android. Necesitamos IDE: Eclipse + S[...]
1. En la ventana de comandos de matlab escribe «mbuild -setup«, sin comillas y presiona enter. >> mbuild -setup We[...]
