En este tutorial personalizaremos un JTextField java para darle la apariencia de un TextBox de Windows Metro.
El TextBox de windows metro tiene un estilo minimalista, sencillo y sin efectos en 3d, tiene también un botón en el lado derecho que aparece cuando se pasa el mouse por ese sector y su función es el de limpiar el texto que se escribe en el textbox.
Proyecto
1. Crea un nuevo proyecto en Netbeans FILE -> NEW PROJECT -> JAVA -> JAVA CLASS LIBRARY, el nombre del proyecto sera «MetroTextBox» y debe tener la siguiente estructura:
En el paquete org.boliva.tbox creamos una clase llamada MetroTextBox
En el paquete org.bolivia.resources colocaremos dos imágenes en formato PNG que sera el icono X del textbox
Estas dos imágenes nos permitirán trabajar con diferentes estilo, veremos un ejemplo al final. tienen una dimensión de 16×16 pixeles
2. Abre la clase MetroTextBox y pega el siguiente código:
01 package org.bolivia.tbox; 02 import java.awt.Color; 03 import java.awt.Cursor; 04 import java.awt.Dimension; 05 import java.awt.Insets; 06 import java.awt.event.ComponentEvent; 07 import java.awt.event.ComponentListener; 08 import java.awt.event.MouseEvent; 09 import java.awt.event.MouseListener; 10 import javax.swing.BorderFactory; 11 import javax.swing.ImageIcon; 12 import javax.swing.JButton; 13 import javax.swing.JTextField; 14 import javax.swing.border.Border; 15 /** 16 * @web https://www.jc-mouse.net/ 17 * @author Mouse 18 */ 19 public class MetroTextBox extends JTextField implements ComponentListener { 20 21 private final JButton button = new JButton();//X 22 private Color borderColor = Color.black; 23 //imagenes X 24 private ImageIcon iconBlack =new ImageIcon(getClass().getResource("/org/bolivia/resources/metro_x_b.png")); 25 private ImageIcon iconWhite =new ImageIcon(getClass().getResource("/org/bolivia/resources/metro_x_w.png")); 26 private boolean xBlackIcon =true; 27 private Dimension dimension = new Dimension(300,42);//tamaño del textbox 28 //la altura del boton 29 private int heightBtn = dimension.height - 10; 30 31 /**Constructor de clase */ 32 public MetroTextBox() 33 { 34 setSize(dimension); 35 setPreferredSize(dimension); 36 37 //propiedades del button 38 button.setText(""); 39 button.setBorderPainted(false); 40 button.setContentAreaFilled(false); 41 button.setMargin(new Insets(2, 2, 2, 2)); 42 button.setVisible(true); 43 button.setFocusPainted(false); 44 button.setCursor(new Cursor(Cursor.HAND_CURSOR)); 45 add( button ); 46 setVisible(true); 47 addComponentListener(this); 48 setSelectionColor(button.getBackground()); 49 updateButton(); 50 // 51 button.addMouseListener( new MouseListener(){ 52 53 @Override 54 public void mouseClicked(MouseEvent e) { 55 ((JTextField) button.getParent()).setText(""); //elimina contenido 56 } 57 58 @Override 59 public void mousePressed(MouseEvent e) {/*...*/} 60 61 @Override 62 public void mouseReleased(MouseEvent e) {/*...*/} 63 64 @Override 65 public void mouseEntered(MouseEvent e) { 66 button.setOpaque(true); 67 button.setIcon( (xBlackIcon)? iconBlack:iconWhite ); 68 } 69 70 @Override 71 public void mouseExited(MouseEvent e) { 72 button.setOpaque(false); 73 button.setIcon( null ); 74 } 75 76 }); 77 78 } 79 //------------ 80 public boolean isxDarkIcon() { 81 return xBlackIcon; 82 } 83 84 public void setxDarkIcon(boolean xDarkIcon) { 85 this.xBlackIcon = xDarkIcon; 86 } 87 88 public Color getBotonColor() { 89 return button.getBackground(); 90 } 91 92 public void setBotonColor(Color botonColor) { 93 button.setBackground(botonColor); 94 setSelectionColor(button.getBackground()); 95 } 96 97 public Color getBorderColor() { 98 return borderColor; 99 } 100 101 public void setBorderColor(Color borderColor) { 102 this.borderColor = borderColor; 103 updateBorder(); 104 } 105 //------------ 106 /** Actualiza las propiedades del borde del TextField */ 107 private void updateBorder() 108 { 109 Border border = BorderFactory.createLineBorder( borderColor ,2); 110 setBorder(BorderFactory.createCompoundBorder(border, 111 BorderFactory.createEmptyBorder(10, 10, 10, button.getSize().width + 5 ))); 112 113 } 114 115 /** Ajusta la dimension y posicion del boton X*/ 116 private void updateButton() 117 { 118 //tamaño boton 119 heightBtn = this.getSize().height - 10; 120 button.setSize( new Dimension(heightBtn, heightBtn)); 121 button.setPreferredSize( new Dimension(heightBtn, heightBtn) ); 122 //posicion 123 button.setLocation(getWidth()-button.getWidth()-5, 5); 124 updateBorder(); 125 } 126 127 //------------ 128 @Override 129 public void componentResized(ComponentEvent e) { 130 updateButton(); 131 } 132 133 @Override 134 public void componentMoved(ComponentEvent e) {/*...*/} 135 136 @Override 137 public void componentShown(ComponentEvent e) {/*...*/} 138 139 @Override 140 public void componentHidden(ComponentEvent e) {/*...*/} 141 //------------ 142 }
19 Nuestro MetroTextBox se extiende de un JTextField e implementa la interface ComponentListener.
21 Utilizamos un JButton el cual pintaremos dentro el JTextField
24,25 Cargamos los iconos para el boton
38,44 en el constructor de la clase, especificamos las propiedades del boton, es decir, le quitamos el efecto 3d que tiene, ajustamos los margenes y asignamos un cursor HAND que es el que tiene la forma de una manito.
45,48 iniciamos también las propiedades necesarias para el JTextField y le añadimos el JButton
49 updateButton() hacemos llamado a un método privado, este método tiene la tarea de ajustar el tamaño del botón y su posición respecto al JTextField, lo usaremos también cuando el MetroTextBox cambie de tamaño.
51,76 Asignamos un MouseListener al botón y sobrescribiremos el método mouseClicked para que cuando el usuario haga clic en el botón, se borre todo lo que se escribió en el textfield. También sobre escribimos los métodos mouseEntered y mouseExited para que el icono X del boton aparesca cuando el boton esta sobre el componente y desaparezca cuando esta fuera.
80,104 Aquí declaramos los métodos que nos permiten modificar propiedades del nuevo componente desde la paleta de controles de Netbeans, claro estos métodos están también disponibles desde código.
Para terminar clic derecho sobre el proyecto CLEAN AND BUILD para crear el JAR
DESCARGAS
Proyecto Netbeans 7.x AQUI
Libreria MetroTextBox.jar AQUI
enjoy!!!
Un JTable es un componente swing de java que nos permite presentar datos en forma tabular, si bien haciendo uso de IDe[...]
Por lo general se usan transacciones a nivel base de datos y posteriormente se llaman estos a través de procedimientos a[...]
En este post veremos un ejemplo sencillo de encriptación/desencriptación simétrica que el API de Java nos permite realiz[...]
BorderPane es un layout que distribuye los nodos hijos en 5 posiciones TOP, LEFT, BOTTOM, RIGHT y CENTER Los nodos hijos[...]
Si nuestra aplicación tiene que llevar a cabo un cierto trabajo que no sabemos cuanto durará y que a la vez consume much[...]
En este post conocernos lo que son las Estructuras de Control IF en los script de Bash. Estas estructuras nos ayudan a c[...]