Aprende Java Aprende Php Aprende C++ Aprende HTML 5 Aprende JavaScript Aprende JSON Aprende MySQL Aprende SQLServer Aprende Visual Basic 6 Aprende PostgreSQL Aprende SQLite Aprende Redis Aprende Kotlin Aprende XML Aprende Linux VSC Aprende Wordpress Aprende Laravel Aprende VueJS Aprende JQuery Aprende Bootstrap Aprende Netbeans Aprende Android
Sigueme en Facebook Sigueme en Twitter Sigueme en Instagram Sigueme en Youtube Sigueme en TikTok Sigueme en Whatsapp
Home / Java / Proyectos / Crea un TextBox estilo Metro para java

Crea un TextBox estilo Metro para java

Por jc mouse lunes, octubre 20, 2014

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.

objetivo

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:

proyecto metro

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

icono boton

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 mouseEnteredmouseExited 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

MetroTextBox

propiedades

DESCARGAS

Proyecto Netbeans 7.x AQUI

Libreria MetroTextBox.jar AQUI

enjoy!!!

Tags

Artículos similares

Personaliza JTable «MetroUI»

Un JTable es un componente swing de java que nos permite presentar datos en forma tabular, si bien haciendo uso de IDe[...]

Aprende a usar transacciones con Laravel

Por lo general se usan transacciones a nivel base de datos y posteriormente se llaman estos a través de procedimientos a[...]

Encriptación simétrica en java

En este post veremos un ejemplo sencillo de encriptación/desencriptación simétrica que el API de Java nos permite realiz[...]

Uso de BorderPane

BorderPane es un layout que distribuye los nodos hijos en 5 posiciones TOP, LEFT, BOTTOM, RIGHT y CENTER Los nodos hijos[...]

Animación de JProgressBar con hilos

Si nuestra aplicación tiene que llevar a cabo un cierto trabajo que no sabemos cuanto durará y que a la vez consume much[...]

Uso del condicional IF

En este post conocernos lo que son las Estructuras de Control IF en los script de Bash. Estas estructuras nos ayudan a c[...]