Sigueme en Facebook Sigueme en Twitter Sigueme en Instagram Sigueme en Youtube
JC Mouse Bolivia
Index / Java / Proyectos / Crea un TextBox estilo Metro para java

Crea un TextBox estilo Metro para java

Autor 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

Si te ha gustado podrías compartirlo o dejar un comentario. ¡Muchas gracias!
Autor: JC Mouse

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! :)

También Te Podría Interesar

Truco para Instagram

Truco para Instagram

Instagram es una red social y aplicación para subir fotos y videos. Sus usuarios también pueden aplicar efectos fotográf...

Validación XML con Esquema XSD en PHP

Validación XML con Esquema XSD en PHP

En este post realizaremos un pequeño ejemplo de validación de archivos XML utilizando el esquema XSD y el lenguaje PHP (...

Conexión a base de datos Oracle con Laravel

Conexión a base de datos Oracle con Laravel

En esta ocasión aprenderemos a conectaros con una base de datos Oracle desde Laravel. Es un tutorial sencillo y cortito,...

Introducción a Scene Builder y MVC (Parte II)

Introducción a Scene Builder y MVC (Parte II)

Segunda parte del tutorial [Introducción a Scene Builder y MVC (Parte I)]. En esta segunda parte, completaremos el diseñ...

Cliente Retrofit – Web Service

Cliente Retrofit – Web Service

Continuando el post de «Introducción a Retrofit» donde realizamos una breve preparación a lo que es el uso de la librerí...

Descargar Doodle Google Pacman

Descargar Doodle Google Pacman

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

2 comentarios en “Crea un TextBox estilo Metro para java”

  1. Jose F dice:

    hola interesante entrada, me preguntaba si existe alguna lib que permita que toda la app tome el estilo metro.

    Gracias.
    Excelente blog felicitaciones

    1. Mouse dice:

      no que yo conozca :/pero puedes lograr el estilo metro en tus aplicaciones quitando el borde a tus JFrames

Los comentarios estan cerrados

Comparte lo que sabes

Categorias

Últimas entradas

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

Herramientas

Generador de Enlaces a Whatsapp