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

Tablas virtuales en java (View)

Tablas virtuales en java (View)

Una Vista (View) es una Tabla Virtual cuyo contenido está definido por una consulta (SELECT), al igual que una tabla rea...

PanoramaImageView: Vista panorámica

PanoramaImageView: Vista panorámica

En este post haremos uso de PanoramaImageView para agregar a una aplicación android, una vista panorámica de 180° y 360°...

Crear componente Switch de Android para Java Swing

Crear componente Switch de Android para Java Swing

En este post crearemos un componente que solo hay en android y que no esta disponible en la paleta de controles de Netbe...

Login estilo Google

Login estilo Google

Google tiene entre su formulario de autenticación de usuario para sus diferentes servicios (gmail, blogger, youtube, g+)...

Reporte Padrón electoral con imágenes y Data Matrix

Reporte Padrón electoral con imágenes y Data Matrix

En este post diseñaremos un reporte de un padrón electoral con dos columnas que contendrá los certificados de sufragio e...

JASYPT : Cifrado simplificado Java

JASYPT : Cifrado simplificado Java

Jasypt es una biblioteca java que permite agregar capacidades básicas de encriptación a proyectos con el mínimo esfuerzo...

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

En este post veremos como imprimir secciones de un formulario en java implementando la Interface Printable. La clase que...

En este post aprenderemos lo que es la clonación de objetos en java o lo que es lo mismo, generación de nuevas instancia...

El índice TIOBE (TIOBE, The Importance of Being Earnest – “La importancia de ser honesto” – refe...

SDKMAN! es una herramienta para la administración de versiones paralelas de varios programas de desarrollo de software c...

Android Bolivia

MAUS