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

Dibujando con Canvas

Dibujando con Canvas

La clase Canvas (Lienzo)  de Android es una superficie que nos permite pintar figuras, texto e imágenes utilizando para...

Escalar imagen en java

Escalar imagen en java

Esta aplicacion permite escalar una imagen desde java sin perder las proporciones de la misma, utiliza SCALE_AREA_AVERAG...

Código CSS en Java/Netbeans

Código CSS en Java/Netbeans

Los objetos como JLabel o JButton nos permiten hacer uso de código CSS en su propiedad TEXT, asi podemos adornar el text...

Crea un Themes WordPress con Netbeans – Configuracion

Crea un Themes WordPress con Netbeans – Configuracion

Este post te enseña una manera que tengo de configurar Netbeans para crear y ejecutar un proyecto php utilizando el CMS...

Conectar java con Firebird

Conectar java con Firebird

En este tutorial veremos la forma de conectarse a una base de datos de Firebird utilizando el lenguaje Java y el IDE Net...

Cambiar plataforma JDK en Netbeans

Cambiar plataforma JDK en Netbeans

Es recomendable tener actualizado la Maquina Virtual Java de nuestro equipo para poder disfrutar de las mejoras que trae...

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

Los números narcisistas o números de Armstrong son aquellos números enteros positivos  cuya suma de las n-ésimas potenci...

En la convención de Chain React  en Portland (Oregon), Marc Horowitz ingeniero de software en Facebook presentó el motor...

En un post anterior [Introducción a VueJS framework para el desarrollo FrontEnd] realizamos una breve introducción a Vue...

La programación y la electrónica están a la orden del día. Cada vez son más importantes y prácticamente forman parte de...

Android Bolivia

MAUS