BLC

Crear Men con JRibbon - Leccin 001 | Pgina 1

Crear Men con JRibbon

BLC
INTRODUCCIN
Muchos de nosotros hemos utilizado el Microsoft Office a partir de su versin 2007 y a
veces nos ha entrado el bichito, de cmo podemos darle una apariencia similar a nuestro
programa.
Personalmente en mis inicios lo haca con JTabbedPane para las pestaas, JPanel para
los grupos, y bueno, dentro JButton (botones) y JLabel (etiquetas), an as no dejaba de
ser super dificil el diseo.
Hoy aprenderemos como hacer una cinta de opciones al mejor estilo de Microsoft Office
pero en nuestras aplicaciones Java usando el componente JRibbon.

JRibbon es un componente avanzado de Java, para aplicaciones de escritorio, que se

encuentra en la librera Flamingo, creado por Kirill Grouchnikov.

BLC

Crear Men con JRibbon - Leccin 001 | Pgina 2

LO QUE UTILIZAREMOS EN ESTE TUTORIAL

Windows 7 Home Premium de 64 bits.

JDK 7
Netbeans 8.0
Libreras JAR (clic para descargar desde MEGA):
flamingo- 7.2.jar
substance- 7.2.jar
laf- plugin- 7.2.jar
laf- widget- 7.2.jar
trident- 7.2.jar

EMPEZAMOS
Abrimos nuestro IDE Netbeans 8.0, y creamos un proyecto del tipo Aplicacin Java.

BLC

Crear Men con JRibbon - Leccin 001 | Pgina 3

Una vez tengamos el proyecto vaco vamos a agregar las libreras necesarias para que
podamos usar las clases que nos proporciona flamingo.
Para ello haremos clic derecho en Libraries y luego seleccionaremos la opcin Add
JAR/Folder.

Buscamos las libreras que hemos descargado y seguidamente hacemos clic en Open.

Seguidamente definimos nuestra estructura de paquetes (esto puede variar dependiendo

de sus gustos) y crear una clase llamada FramePrincipal.java

BLC

Crear Men con JRibbon - Leccin 001 | Pgina 4

FramePrincipal.java heredar de JRibbonFrame y le crearemos un constructor por

defecto, tambin le crearemos un mtodo main para que se pueda ejecutar.
// La clase FramePrincipal heredar de JRibbonFrame
public class FramePrincipal extends JRibbonFrame {
// Crearemos un constructor por defecto
public FramePrincipal() {
// Le asignaremos algunas propiedades a nuestra ventana
this.setTitle("Tutorial JRibbon");
this.setDefaultCloseOperation(EXIT_ON_CLOSE);
this.setSize(800, 400);
this.setLocationRelativeTo(null);
// [Siguiendo con el constructor]
}
public static void main(String[] args) {
new FramePrincipal().setVisible(true);
}
}

Corremos nuestro programa y quedar de la siguiente manera:

BLC

Crear Men con JRibbon - Leccin 001 | Pgina 5

No es la gran cosa, pero seguiremos avanzando, ahora crearemos algunos JRibbonBand

(Grupo) para posteriormente agregarlos a un JRibbonTask (Pestaa).
// [Siguiendo con el constructor]
// Creamos un grupo que ser para el portapapeles
JRibbonBand rbbPortapapeles = new JRibbonBand("Portapapeles", null);
// Crearemos los botones de comando Pegar, Cortar, Copiar y Pegar Formato
JCommandButton btnPegar = new JCommandButton("Pegar", null);
JCommandButton btnCortar = new JCommandButton("Cortar", null);
JCommandButton btnCopiar = new JCommandButton("Copiar", null);
JCommandButton btnPegarFormato = new JCommandButton("Pegar Formato", null);
// Luego agregaremos cada botn a nuestro JRibbonBand y le asignaremos una
// prioridad con respecto al grupo que puede ser TOP, MEDIUM y LOW
// Al botn PEGAR le asignaremos la prioridad TOP porque queremos que sobresalte
// de los dems botones.
rbbPortapapeles.addCommandButton(btnPegar, RibbonElementPriority.TOP);
// A los dems botones por ser secundarios se asignaremos la prioridad MEDIUM
rbbPortapapeles.addCommandButton(btnCortar, RibbonElementPriority.MEDIUM);
rbbPortapapeles.addCommandButton(btnCopiar, RibbonElementPriority.MEDIUM);
rbbPortapapeles.addCommandButton(btnPegarFormato, RibbonElementPriority.MEDIUM);
// Ahora nos queda asignarle las polticas de cambio de tamao
rbbPortapapeles.setResizePolicies((List) Arrays.asList(
new CoreRibbonResizePolicies.Mirror(rbbPortapapeles.getControlPanel()),
new IconRibbonBandResizePolicy(rbbPortapapeles.getControlPanel())
));
// Posteriormente crearemos un JRibbonTask que ser nuestra pestaa INICIO
RibbonTask rbtInicio = new RibbonTask("Inicio", rbbPortapapeles);
// Y lo agregaremos a la cinta de opciones
this.getRibbon().addTask(rbtInicio);

Hasta ac correremos nuestro programa tendramos la siguiente ventana

BLC

Crear Men con JRibbon - Leccin 001 | Pgina 6

Ahora agregaremos una carpeta llamada imgenes a nuestro proyecto el cual contendr
las imgenes para nuestros iconos, si no desean buscar iconos por su cuenta los pueden
descargar desde haciendo clic aqu.

Y modificaremos nuestro cdigo

// [Siguiendo con el constructor]
// Creamos un grupo que ser para el portapapeles
JRibbonBand rbbPortapapeles = new JRibbonBand("Portapapeles", null);
// Agregaremos el siguiente codigo para obtener nuestro icono con 40 de alto por
// 40 de ancho para el boton pegar
ImageWrapperResizableIcon iconPegar = ImageWrapperResizableIcon.getIcon(
getClass().getResource("/pe/blc/tutoriales/flamingo/imagenes/pegar.png"),
new Dimension(40, 40));
JCommandButton btnPegar = new JCommandButton("Pegar", iconPegar);
ImageWrapperResizableIcon iconCortar = ImageWrapperResizableIcon.getIcon(
getClass().getResource("/pe/blc/tutoriales/flamingo/imagenes/cortar.png",
new Dimension(16, 16));
JCommandButton btnCortar = new JCommandButton("Cortar", iconCortar);
ImageWrapperResizableIcon iconCopiar = ImageWrapperResizableIcon.getIcon(
getClass().getResource("/pe/blc/tutoriales/flamingo/imagenes/copiar.png",
new Dimension(16, 16));
JCommandButton btnCopiar = new JCommandButton("Copiar", iconCopiar);
ImageWrapperResizableIcon iconPegarFormato = ImageWrapperResizableIcon.getIcon(
getClass().getResource(
"/pe/blc/tutoriales/flamingo/imagenes/pegar_formato.png",
new Dimension(40, 40));
JCommandButton btnPegarFormato = new JCommandButton("Pegar Formato",
iconPegarFormato);

BLC

Crear Men con JRibbon - Leccin 001 | Pgina 7

Ntese que para los botones Cortar, Copiar y Pegar Formato las dimensiones del icono
cambian por 16 por 16 para cuestiones estticas.
Si ejecutamos el programa tendramos algo como esto:

Si hacemos clic en algn botn pues simplemente no har nada entonces agregaremos un
ActionListener al botn pegar:
...
JCommandButton btnPegar = new JCommandButton("Pegar", null);
btnPegar.addActionListener(new ActionListener() {
@Override
public void actionPerformed(ActionEvent e) {
JOptionPane.showMessageDialog(rootPane,
"Hiciste clic en el botn pegar");
}
});
...

Si corremos el programa hasta este punto tendramos lo siguiente:

BLC

Crear Men con JRibbon - Leccin 001 | Pgina 8

Ahora para darle un toque especial, modificaremos el mtodo main y agregaremos el

LookAndFeel de Substance para hacerlo ms parecido a Microsoft Office 2007.
...
public static void main(String[] args) {
try {
UIManager.setLookAndFeel(
new SubstanceOfficeBlue2007LookAndFeel());
} catch (Exception e) { }
new FramePrincipal().setVisible(true);
}
...

Y as pueden ir agregando ms botones, ms grupos y pestaas, no se queden solo con

este tutorial, investiguen ms sobre este poderoso componente que nuestro amigo Kirill
ha creado para nosotros, sin ms que decir me despido de ustedes y espero haber ayudado
en su reto de aprender un poco ms cada da. Muchas gracias.

Para descargar el proyecto hacer clic aqu.