Sigueme en Facebook Sigueme en Twitter Sigueme en Instagram Sigueme en Youtube
JC Mouse Bolivia
Index / Componentes / Java / Botón en java de Windows 8 Modern UI

Botón en java de Windows 8 Modern UI

Autor jc mouse viernes, octubre 26, 2012

En este tutorial crearemos un botón con el estilo del nuevo windows 8 Modern UI que primero se conoció como Metro UI.  Este nuevo estilo se caracteriza por ser minimalista, es decir sencillo.

  • Utilizaremos el editor Netbeans 6.9 o superior
  • Una imagen *.PNG de 30×30 pixeles
  • 15 minutos de tu valioso tiempo.

1. Crea un nuevo proyecto en Netbeans. Archivo -> Proyecto nuevo. “Aplicación Java” y coloca el nombre de “ButtonModernUI“, de-selecciona  la opción donde dice “Crear clase principal“, no necesitamos un archivo main para este proyecto.

2. Ahora debemos crear la estructura de nuestro componente, bien podría ser un solo paquete pero es mejor acostumbrarse a tener todo ordenado en carpetas diferentes según la función que cumplan en el proyecto.

Para crear un paquete, debemos hacer clic derecho sobre el proyecto “Paquete de fuentes” e ir creando uno a uno las carpetas, ahora el nombre que les demos puede ser cualquiera, no hay una regla fija, si estandares, pero no afecta mucho nuestro trabajo, así que la estructura que tendremos es:

- jc
-- Bolivia
--- ModernUI
---- Button
---- Resources

El paquete “Resources” nos servirá para almacenar archivos que utilicemos en el componente, en este caso, una imagen de dimensiones 30×30 pixeles:

pc verde

El paquete “Button“, contendrá la clase jButton que crearemos a continuación.

3. En el paquete “Button“, crea una nueva clase. Clic derecho  (sobre el paquete) – >Nuevo -> Clase java.

Dale el nombre de “ButtonMUI.java“.

Hasta el momento debes tener algo como esto:

estructura kawaii

4. Toca crear el código java, nuestro button se extenderá de un Jbutton y ademas utilizaremos un Mouselistener para capturar los eventos del usuario sobre el componente, pues entonces añadimos el EXTENDS y el IMPLEMENTS, tenemos:

package jc.Bolivia.ModernUI.Button;
import java.awt.event.MouseEvent;
import java.awt.event.MouseListener;
import javax.swing.JButton;
/**
 * @web https://www.jc-mouse.net
 * @author Mouse
 */
public class ButtonMUI extends JButton implements MouseListener{

    public void mouseClicked(MouseEvent e) {
        throw new UnsupportedOperationException("Not supported yet.");
    }

    public void mousePressed(MouseEvent e) {
        throw new UnsupportedOperationException("Not supported yet.");
    }

    public void mouseReleased(MouseEvent e) {
        throw new UnsupportedOperationException("Not supported yet.");
    }

    public void mouseEntered(MouseEvent e) {
        throw new UnsupportedOperationException("Not supported yet.");
    }

    public void mouseExited(MouseEvent e) {
        throw new UnsupportedOperationException("Not supported yet.");
    }

}

5. Ahora declaramos las variables que utilizaremos en la clase, las cuales son:

    /** Icono por el boton */
    private Icon icono = new ImageIcon(getClass().getResource("/jc/Bolivia/ModernUI/Resources/pc_mui8.png"));
    ImageIcon imagenIcon = (ImageIcon) icono;
    private Image image = imagenIcon.getImage();    
    private Image image_default = image;    
    /** Color para el fondo del boton*/
    private Color button_pressed = new Color(0,0,0);
    private Color button_released = new Color(227, 162, 26);
    /** Color para el texto */
    private Color texto_released = new Color(0,0,0);
    private Color texto_pressed = new Color(255,255,255);

6. Así también, declaramos en el constructor de la clase las propiedades con los valores para obtener el estilo de windows 8.

    /**
 * Constructor de clase
 */
    @SuppressWarnings("LeakingThisInConstructor")
    public ButtonMUI()
    {
        this.setText("ModernUIButton");
        this.setPreferredSize( new Dimension(140,32 ) );
        this.setSize( new Dimension(140,32 ) );
        this.setBorderPainted(false);
        this.setContentAreaFilled(false);
        this.setHorizontalAlignment(javax.swing.SwingConstants.LEFT);
        this.setCursor(Cursor.getPredefinedCursor( Cursor.HAND_CURSOR ));
        this.setBackground( this.button_released );
        this.setOpaque(true);
        this.setVisible(true);
        this.addMouseListener(this);
    }

7. Sobreescribiremos los métodos paintComponent para pintar la imagen cuadrada en el botón con las dimensiones de la altura del control para que cuando se redimensione el boton, la imagen permanesca siempre cuadrada y setIcon para agregar la imagen en el componente, pero no colocarla como normalmente se lo hace en el JButton.

    /**
 * se pinta la imagen con dimensiones de ancho y alto iguales al alto del jbutton
 */
    @Override
    protected void paintComponent(Graphics g) {        
        super.paintComponent(g);
        g.drawImage(image,  getWidth() - this.getHeight(), 0 , this.getHeight() , this.getHeight() , this);
    }

    /**
 * Se sobreescribe el metodo SETICON para utilizar el mismo metodo para colocar el icono
 */
    @Override
    public void setIcon(Icon icon)
    {
        if( icon != null )
        {
            this.icono = icon;
            imagenIcon = (ImageIcon) icono;
            this.image = imagenIcon.getImage();                        
        }
        else
        {
            this.image = this.image_default;
        }
        this.repaint();
    }

 

8. Para terminar debemos completar el código  en los eventos del ratón para obtener el efecto de cambio de color cuando se presione el botón. Los eventos que utilizaremos son mousePressed y mouseReleased, el resto de los eventos los dejamos vacios.

public void mouseClicked(MouseEvent e) {}

    /** Cuando se presiona el boton se cambian los colores de fondo y de texto */
    public void mousePressed(MouseEvent e) {
        //capturamos valores iniciales
        this.button_released = this.getBackground();
        this.texto_released = this.getForeground();
        //se colocan los nuevos colores
        this.setForeground( this.texto_pressed );
        this.setBackground( this.button_pressed );
    }

    /** Cuando se leventa el mouse del jbutton se retoman los colores originales */
    public void mouseReleased(MouseEvent e) {
        this.setBackground( this.button_released);
        this.setForeground( this.texto_released );
    }

    public void mouseEntered(MouseEvent e) {}

    public void mouseExited(MouseEvent e) {}

    public void componentResized(ComponentEvent e) { }

Uniendo todo el código tenemos:

package jc.Bolivia.ModernUI.Button;
import java.awt.Color;
import java.awt.Cursor;
import java.awt.Dimension;
import java.awt.Graphics;
import java.awt.Image;
import java.awt.event.MouseEvent;
import java.awt.event.MouseListener;
import javax.swing.Icon;
import javax.swing.ImageIcon;
import javax.swing.JButton;
/**
 * @web https://www.jc-mouse.net
 * @author Mouse
 */
public class ButtonMUI extends JButton implements MouseListener{

    /** Icono por el boton */
    private Icon icono = new ImageIcon(getClass().getResource("/jc/Bolivia/ModernUI/Resources/pc_mui8.png"));
    ImageIcon imagenIcon = (ImageIcon) icono;
    private Image image = imagenIcon.getImage();
    private Image image_default = image;
    /** Color para el fondo del boton*/
    private Color button_pressed = new Color(0,0,0);
    private Color button_released = new Color(227, 162, 26);
    /** Color para el texto */
    private Color texto_released = new Color(0,0,0);
    private Color texto_pressed = new Color(255,255,255);

    /**
 * Constructor de clase
 */
    @SuppressWarnings("LeakingThisInConstructor")
    public ButtonMUI()
    {
        this.setText("ModernUIButton");
        this.setPreferredSize( new Dimension(140,32 ) );
        this.setSize( new Dimension(140,32 ) );
        this.setBorderPainted(false);
        this.setContentAreaFilled(false);
        this.setHorizontalAlignment(javax.swing.SwingConstants.LEFT);
        this.setCursor(Cursor.getPredefinedCursor( Cursor.HAND_CURSOR ));
        this.setBackground( this.button_released );
        this.setOpaque(true);
        this.setVisible(true);
        this.addMouseListener(this);
    }

     /**
 * se pinta la imagen con dimensiones de ancho y alto iguales al alto del jbutton
 */
    @Override
    protected void paintComponent(Graphics g) {
        super.paintComponent(g);
        g.drawImage(image,  getWidth() - this.getHeight(), 0 , this.getHeight() , this.getHeight() , this);
    }

    /**
 * Se sobreescribe el metodo SETICON para utilizar el mismo metodo para colocar el icono
 */
    @Override
    public void setIcon(Icon icon)
    {
        if( icon != null )
        {
            this.icono = icon;
            imagenIcon = (ImageIcon) icono;
            this.image = imagenIcon.getImage();
        }
        else
        {
            this.image = this.image_default;
        }
        this.repaint();
    }

     public void mouseClicked(MouseEvent e) {}

    /** Cuando se presiona el boton se cambian los colores de fondo y de texto */
    public void mousePressed(MouseEvent e) {
        //capturamos valores iniciales
        this.button_released = this.getBackground();
        this.texto_released = this.getForeground();
        //se colocan los nuevos colores
        this.setForeground( this.texto_pressed );
        this.setBackground( this.button_pressed );
    }

    /** Cuando se leventa el mouse del jbutton se retoman los colores originales */
    public void mouseReleased(MouseEvent e) {
        this.setBackground( this.button_released);
        this.setForeground( this.texto_released );
    }

    public void mouseEntered(MouseEvent e) {}

    public void mouseExited(MouseEvent e) {}

}

Para terminar debemos compilar el proyecto.  clic derecho sobre el proyecto y “Limpiar y Construir” o “Clean and Build”.

Para utilizar este componente swing en otro proyecto, debemos añadirlo como lo haríamos con cualquier otro swing. Puedes buscar en el blog/web la entrada correspondiente para instalar nuevas librerías.

MUI button

El proyecto completo en Netbeans 6.9 lo bajas haciendo clic AQUI

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

Paso de parámetros entre dos Activity

Paso de parámetros entre dos Activity

En este tutorial veremos como pasar parámetros de un activity a otro activity, no hay mucho que decir así que manos a la...

Pilas con C Sharp (Ejercicio Resuelto)

Pilas con C Sharp (Ejercicio Resuelto)

Desarrolle un programa en consola con un menú para el usuario que permita agregar elementos a una pila, eliminar element...

Modificar las pestañas de JTabbedPane

Modificar las pestañas de JTabbedPane

En este tutorial veremos lo fácil que es personalizar las pestañas de un JTabbedPane con unas cuantas lineas de código y...

Cifrado francmasón PigPen

Cifrado francmasón PigPen

El cifrado francmasón es un cifrado por sustitución simple que cambia las letras por símbolos. Sin embargo, el uso de sí...

NBANDROID-V2 plugin para Netbeans

NBANDROID-V2 plugin para Netbeans

Cuando Android estaba en sus inicios, varios IDEs (Entorno de Desarrollo Integrado​​) se disputaban el dominio por su de...

Convertir objetos java en XML

Convertir objetos java en XML

Continuando con el estudio del meta lenguaje XML (Lenguaje de Marcado Extensible) bastante utilizado en el intercambio d...

4 comentarios en “Botón en java de Windows 8 Modern UI”

  1. Jaed dice:

    disculpa la molestia pero hice los botones y quiero crear una aplicación mvc pero no puedo agregar un ActionPerformed ya que no me da la opcion y con los otros botones si.

    1. Mouse dice:

      :/ si se puede, este botón se extiende de un jbutton por lo que el actionpercommand esta presente, fíjate bien tu codigo 🙂

  2. toborochi dice:

    No me carga la imagen cual puede ser el problema sigo tu codigo al pie de la letra pero no carga la imagen

    1. Mouse dice:

      este ejemplo viene con el proyecto para descarga, en el se encuentra el jar del swing, prueba en tu pc, si funciona, es que estas olvidando algo :/

Los comentarios estan cerrados

Comparte lo que sabes

Categorias

Últimas entradas

“MyBatis es una herramienta de persistencia Java que se encarga de mapear sentencias SQL y procedimientos almacena...

MyBatis es un framework de persistencia Java que se encarga de mapear sentencias SQL y procedimientos almacenados a part...

Webcam Capture es un API  que permite usar una cámara web incorporada o externa directamente desde código Java utilizand...

im4java es una interfaz pura de Java para la línea de comandos de ImageMagick. La interfaz de la línea de comandos de IM...

Herramientas

Generador de Enlaces a Whatsapp