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 http://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

SQLite: Encriptación de datos

SQLite: Encriptación de datos

SQLite es un sistema de gestión de bases de datos relacional,  escrita en C, si se desea hacer uso de encriptación con S...

Imagenes en Access y Java

Imagenes en Access y Java

Aplicación en Java realida con el IDE de Netbeans 6.9 para trabajar con images en Base de Datos en Access 2003, el progr...

Efecto Taringa! en vivo

Efecto Taringa! en vivo

En la pagina de Taringa, existe una sección donde se puede ver lo que pasa en ese foro al momento, “Taringa! en vi...

Uso de Tiles para crear fondo para aplicaciones

Uso de Tiles para crear fondo para aplicaciones

Un Tile o azulejo, es una parte seccionada de una imagen, por ejemplo la imagen de abajo (chica anime) esta dividida en...

Exportar registros MySQL a Excel

Exportar registros MySQL a Excel

Java Excel API es un API para java que permite a los desarrolladores leer y escribir en hojas de cálculo Excel. jexcelap...

Guía básica: Trabajando con GitHub y Netbeans

Guía básica: Trabajando con GitHub y Netbeans

Netbeans tiene soporte para trabajar con varias herramientas de control de versiones, GIT es una de ellas, esta herramie...

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

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

*

Comparte lo que sabes

Categorias

Últimas entradas

Si quieres cambiar el nombre de tus atributos sin tener que reescribir código java por X o Y razón, GSON te permite reno...

Un JList nos permite almacenar objetos en una lista y mostrarlos gráficamente en una serie vertical en el cual el usuari...

El proyecto “Java Decompiler” tiene como objetivo desarrollar herramientas para descompilar y analizar byte...

En este post aprenderemos lo que es un JSON Web Token, como crear nuestro propio token de acceso y como usarlo en un Ser...

Android Bolivia

Bandera en Alto