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!!!
Yo soy yo :) JC Mouse, Soy orgullosamente boliviano soy fundador y CEO de la web jc-Mouse.net uno de las pocas web en emprendimiento y tecnología en Bolivia.
Toda la información que encuentres en este sitio es y sera completamente gratis siempre, puedes copiar, descargar y re-publicar si así lo deseas en otros blogs o sitios web, solo te pido a cambio que dejes una referencia a esta web. Esto nos ayuda a crecer y seguir aportando. Bye
Enjoy! :)
Instagram es una red social y aplicación para subir fotos y videos. Sus usuarios también pueden aplicar efectos fotográf...
En este post realizaremos un pequeño ejemplo de validación de archivos XML utilizando el esquema XSD y el lenguaje PHP (...
En esta ocasión aprenderemos a conectaros con una base de datos Oracle desde Laravel. Es un tutorial sencillo y cortito,...
Segunda parte del tutorial [Introducción a Scene Builder y MVC (Parte I)]. En esta segunda parte, completaremos el diseñ...
Continuando el post de «Introducción a Retrofit» donde realizamos una breve preparación a lo que es el uso de la librerí...
Hace un par de años atras google para el aniversario del juego de Pacman saco un doodle en su homenaje, ese doodle que s...
Los comentarios estan cerrados
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, aprenderemos como conectar Visual Basic 6 con SQL Server, abrir una tabla, leer su contenido y mostrar est...
Lo que veremos en este post es la configuración del driver para PHP de SQL Server que ha creado Microsoft el cual permit...
Google Bard la inteligencia artificial de Google se actualiza con una mejora que entra a competir con el resto de IAs y...
hola interesante entrada, me preguntaba si existe alguna lib que permita que toda la app tome el estilo metro.
Gracias.
Excelente blog felicitaciones
no que yo conozca :/pero puedes lograr el estilo metro en tus aplicaciones quitando el borde a tus JFrames