Beanform: componente visual personalizado en Netbeans



Hoy crearemos nuestro propio componente visual que agregaremos a la paleta gráfica del editor visual y lo podremos reusar en todos nuestros proyectos.

Requisitos

Este tutorial ha sido realizado usando Java 8 de Oracle y el Apache Netbeans 9. He usado Windows 10, pero el tutorial funciona igual en todas las plataformas que soporte Netbeans.

Conocimientos Previos (Teoría)

Como probablemente ya sabes, la especificación Java Bean nos habla acerca de unos objetos que cumplen ciertas características ideales para ser usados con interfaces gráficas. En netbeans se les conoce como beanforms y sí… nos permite crear componentes visuales que podemos arrastrar y soltar con el editor.

Manos a la obra

Selección de tipo de archivo: Tipo de archivo BeanForm
Tipo de archivo BeanForm

En un proyecto abierto seleccionamos el menú File > New File y seleccionamos el tipo de archivo «Bean Form» que se encuentra en la categoría «Java Swing GUI Forms».

Establecer el nombre del nuevo Bean

Posteriormente le ponemos el nombre a nuestra clase.

Super clase

Posteriormente deberemos de poner le nombre totalmente calificado de la clase que queramos que sea nuestro componente personalizado. En mi caso como quiero que sea un botón elegiré javax.swing.JButton.

Creación de nueva categoría en paleta de componentes visuales de Netbeans

Para guardar aparte nuestro componente crearemos una nueva categoría

Creación de nueva categoría en paleta de componentes

Apertura del administrador de paleta

Para agregar nuestro nuevo componente deberemos de abrir el administrador de la paleta de componentes, esto lo podemos hacer directamente desde la paleta de componentes.

Una vez abierto el administrador de la paleta de componentes seleccionamos agregar nuevo proyecto y seleccionamos nuestro proyecto actual

Elección del proytecto actual

Seleccionamos el componente que vamos a modificar de la lista de beans detectados

Posteriormente seleccionamos la categoría en que deseamos que aparezca

Tras terminar el asistente ya podremos arrastrar y soltar nuestro componente personalizado y todas las modificaciones que le hagamos se verán inmediatamente reflejadas sin que tengamos que volver a agregar el componente.

Bean en el diseñador de formularios

En la paleta de propiedades ya saldrán las propiedades de clase que hayamos creado y que les hayamos puesto sus respectivos setter y getter

El código completo de nuestro componente de ejemplo queda así para que lo puedan probar:

/*
 * To change this license header, choose License Headers in Project Properties.
 * To change this template file, choose Tools | Templates
 * and open the template in the editor.
 */
package examples;

import java.awt.Color;
import javax.swing.JButton;

/**
 *
 * @author ruslan.lopez
 */
public class LblBotonColores extends JButton {

    private boolean cambioColor;

    private boolean azul = true;

    public boolean getCambioColor() {
        return cambioColor;
    }

    public void setCambioColor(boolean cambioColor) {
        this.cambioColor = cambioColor;
    }

    /**
     * Creates new form LblBotonColores
     */
    public LblBotonColores() {
        initComponents();
        setBackground(Color.blue);
        setForeground(Color.white);
    }

    /**
     * This method is called from within the constructor to initialize the form.
     * WARNING: Do NOT modify this code. The content of this method is always
     * regenerated by the Form Editor.
     */
    @SuppressWarnings("unchecked")
    // <editor-fold defaultstate="collapsed" desc="Generated Code">                          
    private void initComponents() {

        addActionListener(new java.awt.event.ActionListener() {
            public void actionPerformed(java.awt.event.ActionEvent evt) {
                lblBotonColoresActionRealizada(evt);
            }
        });
    }// </editor-fold>                        

    private void lblBotonColoresActionRealizada(java.awt.event.ActionEvent evt) {                                                
        if (cambioColor) {
            if (azul) {
                setBackground(Color.red);
                azul = !azul;
            } else {
                setBackground(Color.blue);
                azul = !azul;
            }
        }
    }                                               


    // Variables declaration - do not modify                     
    // End of variables declaration                   
}

Espero les haya sido de utilidad, no duden en escribir su comentario si tienen dudas, les dejo una captura de como se ve nuestro componente.


Fuentes

Print Friendly, PDF & Email