Download Crear Menú con JRibbon INTRODUCCIÓN

BLC
Crear Menú con JRibbon - Lección 001 | Página 1
Crear Menú con JRibbon
BLC
INTRODUCCIÓN
Muchos de nosotros hemos utilizado el Microsoft Office a partir de su versión 2007 y a
veces nos ha entrado el bichito, de cómo podemos darle una apariencia similar a nuestro
programa.
Personalmente en mis inicios lo hacía con JTabbedPane para las pestañas, JPanel para
los grupos, y bueno, dentro JButton (botones) y JLabel (etiquetas), aún así no dejaba de
ser super dificil el diseño.
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 librería Flamingo, creado por Kirill Grouchnikov.
BLC
Crear Menú con JRibbon - Lección 001 | Página 2
LO QUE UTILIZAREMOS EN ESTE TUTORIAL
●
●
●
●
Windows 7 Home Premium de 64 bits.
JDK 7
Netbeans 8.0
Librerías 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 Aplicación Java.
BLC
Crear Menú con JRibbon - Lección 001 | Página 3
Una vez tengamos el proyecto vacío vamos a agregar las librerías necesarias para que
podamos usar las clases que nos proporciona flamingo.
Para ello haremos clic derecho en Libraries y luego seleccionaremos la opción Add
JAR/Folder.
Buscamos las librerías 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 - Lección 001 | Página 4
FramePrincipal.java heredará de JRibbonFrame y le crearemos un constructor por
defecto, también le crearemos un método 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 - Lección 001 | Página 5
No es la gran cosa, pero seguiremos avanzando, ahora crearemos algunos JRibbonBand
(Grupo) para posteriormente agregarlos a un JRibbonTask (Pestaña).
// [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 botón a nuestro JRibbonBand y le asignaremos una
// prioridad con respecto al grupo que puede ser TOP, MEDIUM y LOW
// Al botón PEGAR le asignaremos la prioridad TOP porque queremos que sobresalte
// de los demás botones.
rbbPortapapeles.addCommandButton(btnPegar, RibbonElementPriority.TOP);
// A los demás 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 políticas de cambio de tamaño
rbbPortapapeles.setResizePolicies((List) Arrays.asList(
new CoreRibbonResizePolicies.Mirror(rbbPortapapeles.getControlPanel()),
new IconRibbonBandResizePolicy(rbbPortapapeles.getControlPanel())
));
// Posteriormente crearemos un JRibbonTask que será nuestra pestaña INICIO
RibbonTask rbtInicio = new RibbonTask("Inicio", rbbPortapapeles);
// Y lo agregaremos a la cinta de opciones
this.getRibbon().addTask(rbtInicio);
Hasta acá correremos nuestro programa tendríamos la siguiente ventana
BLC
Crear Menú con JRibbon - Lección 001 | Página 6
Ahora agregaremos una carpeta llamada imágenes a nuestro proyecto el cual contendrá
las imágenes para nuestros iconos, si no desean buscar iconos por su cuenta los pueden
descargar desde haciendo clic aquí.
Y modificaremos nuestro código
// [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 - Lección 001 | Página 7
Nótese que para los botones Cortar, Copiar y Pegar Formato las dimensiones del icono
cambian por 16 por 16 para cuestiones estéticas.
Si ejecutamos el programa tendríamos algo como esto:
Si hacemos clic en algún botón pues simplemente no hará nada entonces agregaremos un
ActionListener al botón pegar:
...
JCommandButton btnPegar = new JCommandButton("Pegar", null);
btnPegar.addActionListener(new ActionListener() {
@Override
public void actionPerformed(ActionEvent e) {
JOptionPane.showMessageDialog(rootPane,
"Hiciste clic en el botón pegar");
}
});
...
Si corremos el programa hasta este punto tendríamos lo siguiente:
BLC
Crear Menú con JRibbon - Lección 001 | Página 8
Ahora para darle un toque especial, modificaremos el método main y agregaremos el
LookAndFeel de Substance para hacerlo más 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 más botones, más grupos y pestañas, no se queden solo con
este tutorial, investiguen más sobre este poderoso componente que nuestro amigo Kirill
ha creado para nosotros, sin más que decir me despido de ustedes y espero haber ayudado
en su reto de aprender un poco más cada día. Muchas gracias.
Para descargar el proyecto hacer clic aquí.