viernes, noviembre 25, 2011

ComboBox Desplegable y busqueda integrada (Autocompletar)

La idea es ir escribiendo en el comboBox, y que este vaya iterando los items hasta llegar facilmente al deseado, al estilo de Google Suggest.

Este ejemplo es valido para Netbeans 7.01, y usa de base los proyectos creados con
Nuevo Proyecto - Java - Java Desktop Application

Primero baje las librerías "bundle" de swingx. No del sitio oficial, que esta caído, sino de aca: http://java.net/downloads/swingx/releases

En Herramientas - Palette, fabrique una nueva paleta de herramientas llamada SwingX



Integre las librerias a la paleta de herramientas segun: http://wiki.netbeans.org/AvbravotutorialSwingX, pero bajela las librerias desde mi vinculo.



Netbeans mostrara las paletas disponibles sobre las cuales integrar estos nuevos elementos. Escoja la creada anteriormente [] SwingX. Cuando toque [Finalizar] parecera que Netbeans se cuelga, ya que tarda un buen rato en integrar todo.

De la nueva Paleta SwingX arrastre un elemento JXComboBox,



 y pongale un nombre, por ejemplo, cachoBox


Pase a vista de código, y agregue arriba, despues del package, las siguientes líneas. Chequee que las tenga a todas:

import org.jdesktop.application.Action;
import org.jdesktop.application.ResourceMap;
import org.jdesktop.application.SingleFrameApplication;
import org.jdesktop.application.FrameView;
import org.jdesktop.application.TaskMonitor;
import java.awt.event.ActionEvent;
import java.awt.event.ActionListener;
import javax.swing.Timer;
import javax.swing.Icon;
import javax.swing.JDialog;
import javax.swing.JFrame;


import org.jdesktop.swingx.autocomplete.AutoCompleteDecorator;


En el constructor del proyector, despues de las lineas

super(app);
initComponents();

ponga algo asi como

cachoBox.setEditable(true); //para poder escribir adentro
cachoBox.setModel(new javax.swing.DefaultComboBoxModel(new String[] { "alejandro", "berenice", "juan", "ana", "bartolo", "diana", "cesar" }));
cachoBox.setName("cachoBox");
AutoCompleteDecorator.decorate(this.cachoBox);

El programa tendría que verse corriendo como


Espero que les sirva. Citando al Dr Nick Riviera: ¡adios a todos!

4 comentarios:

María José Castría dijo...

tenes idea de como hacer que solo muestre en el desplegable lo que machee con lo que escribis???

María José Castría dijo...

Es posible hacer que sólo queden en la parte desplegable lo que machee con lo que voy escribiendo?
por ejemplo: si pongo la "a" que aparezcan sólo los que comienzan/contienen "a"

Sergio Alonso dijo...

Mmmm supongo que habría que mirar dentro de las propiedades, o sobrecargar algún método de la librería base.

Nunca me lo había planteado.

Joel Clemente Serrano dijo...

Excelente post, gracias, me ayudó mucho.