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

Impresión de reportes

Existen diferentes métodos par imprimir reportes hechos con JasperReport en aplicaciones hechas en java, en este post te[...]

Elimina el fondo de tus fotografías en 5 segundos

Si te gusta realizar tus propios memes o foto montajes pero tienes poca o nula experiencia en editores gráficos como Pho[...]

«Hola Bolivia» mi primera aplicación android

Cuando se inicia el aprendizaje de un lenguaje de programación, nunca debe faltar el clásico «Hola Mundo» 🙂 en Android n[...]

Client REST usando GSON y Volley

En este post crearemos un cliente android para consumir un recurso de un REST API utilizando las librerías GSON y Volley[...]

Depuración avanzada en PHP

Xdebug es una extensión para PHP que nos ayuda con la depuración y el desarrollo de aplicaciones. Contiene un depurador[...]

Agrega un Cliente REST a tu Visual Studio Code

Existen muchos clientes REST disponibles tanto para instalar en tu PC como para utilizar directamente desde la nube, sin[...]