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

Crea una libreria TimeChooser – Selector de Tiempo

Crea una libreria TimeChooser – Selector de Tiempo

En este post crearemos un componente gráfico para java que nos permitirá seleccionar la hora del día de una manera senci...

Ejemplo Cliente-Servidor en Android

Ejemplo Cliente-Servidor en Android

Continuando con estos post de Cliente/Servidor, en esta oportunidad realizaremos un ejemplo usando un dispositivo móvil...

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

Impresión de reportes

Impresión de reportes

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

Crea tu lector de códigos QR

Crea tu lector de códigos QR

En este post desarrollaremos una aplicación que nos permitirá leer un código QR y capturar la información que contiene y...

Gráficos iReport con parámetros tipo Date

Gráficos iReport con parámetros tipo Date

Matando dos pájaros de un solo tiro :), doy respuesta a un par de preguntas que están relacionadas, en este post veremos...

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

“Material Design es una guía integral para el diseño visual, de movimientos y de interacción en distintas platafor...

Un TextView autocompletado nos facilita el ingreso de información en aplicaciones móviles ya que te muestra posibles opc...

Un Tabbed Activity te permite cambiar la vista entre  fragmentos desplazando el dedo  de izquierda a derecha o de derech...

Este 12 de Mayo de 2017 se produjo un ataque masivo mundial del ransomware WannaCry  el  que afecto a más de 200000 comp...

Android Bolivia

Bandera en Alto