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:

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

También Te Podría Interesar

Dimask: La mascara de la Belleza (Descargar)

La Belleza está en la Simetría ¿Qué es lo que nos hace considerar un rostro bello? ¿Está influenciado nuestro criterio p...

Esteganografia LSB en Java – [Proyecto Completo]

Mensajes ocultos utilizando el método de Inserción en el bit menos significativo (Least Significant Bit Insertion) El mé...

Actualizar JComboBox al cambiar valor de otro JComboBox

Cuando se trabaja con base de datos, estos datos son dinámicos, cambian con el tiempo y es necesario que esos cambios se...

Convertir imágenes JPG a PDF

En este post vemos un ejemplo de como convertir un archivo de imagen JPG en un archivo PDF utilizando para ellos la libr...

Hangman: El juego del ahorcado en java

El Juego del ahorcado o Hangman, es un clásico juego de mesa que consiste en adivinar la palabra secreta, si no lo consi...

Script PHP – Mouse responde

«Mouse Responde…» simula ser un alma en pena que responde cualquier pregunta que le hagan, al estilo del juego de...

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

Jaed dice:

2 noviembre, 2012 a las 22:53

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:
  
  11 noviembre, 2012 a las 21:29
  
  :/ si se puede, este botón se extiende de un jbutton por lo que el actionpercommand esta presente, fíjate bien tu codigo 🙂
toborochi dice:

26 enero, 2013 a las 15:02

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:
  
  6 febrero, 2013 a las 1:44
  
  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 :/