Botón en java de Windows 8 Modern UI

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:

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:

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.

El proyecto completo en Netbeans 6.9 lo bajas haciendo clic AQUI

Botón en java de Windows 8 Modern UI

Tags

Últimas entradas

Convierte tus fotos al estilo Ghibli gratis y fácil: Guia paso a paso

Edita fotografias gratis con esta IA de Google

Que es y como se usa la App de la ANH Abastecimiento

Fin de una era. RIP Skype 2003-2025

Ggwave: Conoce el idioma que usan las IAs para comunicarse

Artículos similares

Obtener Metadatos de un ResultSet

Crear y mover objetos en tiempo de ejecución

MariaDB: Tablas Virtuales (Vistas – View)

Netbeans «Problemas de Referencia»

Crear XML desde una base de datos con jDom

JTable con imágenes

JC Mouse | Bolivia