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!!!
HeidiSQL es un software libre y de código abierto que permite conectarse a servidores MySQL, MariaDB, Percona Server, Mi[...]
En este post realizaremos un proyecto en VUE que se conectara a un REST API y utilizara un servicio del mismo para[...]
Este post te enseña una manera que tengo de configurar Netbeans para crear y ejecutar un proyecto php utilizando el CMS[...]
Según Santa Wikipedia: «Un archivo binario es un archivo informático que contiene información de cualquier tipo codifica[...]
La internacionalización permite a las aplicaciones adaptarse a los diferentes idiomas y regiones sin necesidad de cambio[...]
Cuando escribimos aplicaciones para android debemos tener cuidado al diseñar la interfaz en la posición que tomaran los[...]