Pantallazo

Mejorando jTree : Cada nodo con su ícono

Me canse de buscar información en la red para hacer esto y la verdad que no encontré nada que se le parezca, nada.
La idea es simple, usar un jTree de Menú en una aplicación, pero para esto debe poder contar con un icono personalizado en cada uno de los nodos (sino queda muy poco profesional). Netbeans y similares no te lo permiten directamente y los pocos blogs que hablan del tema solo rescatan como poner un icono por carpeta y por hoja.

La ayuda viene metiendose en lo que es java y pensandoló como un truco. Veamos primero un pantallazo del “producto” terminado para que no me tilden de mentiroso ;)

Una imágen vale más que mil palabras, así que continuemos.

El modelo de Datos

La verdad que no es tan simple, hay que crear varias clases de soporte, especificando, son 3. Los nombres los puse en Ingles porque en español quedaban muy largos y horribles o para mantener el estandar de java =).

Muestro el diagrama de clases y luego lo explico.

  • TreeEntry : Es la clase base y va a haber una instancia por cada nodo del árbol. Guarda el titulo del nodo y su icono. Además guarda un ArrayList<TreeEntry> para guardar los nodos hijos que tenga.
  • IconTreeModel: Clase que implementa TreeModel, para poder pasarselo al jTree y que diseñe. No solo implelemta los métodos, sino que también se encarga de llenar los nodos del árbol, ¿acá? – si, acá.
  • IconTreeRenderer: Hereda de DefaultTreeCellRenderer y define como se pinta cada nodo, ésta es la clase más importante ya que define un jLabel por cada nodo y setea su icono. Éste es el secreto de la torta.
  • Ventana: Una clase que contiene al jTree en uso.

¿Cómo utilizarlo?

Paso 1
Vamos a IconTreeModel y en el contructor esta la forma de cargar el árbol, es solo cuestión de sentarse. Pero por si no lo entienden:

// Creo el nodo inicial, todos los demas cuelgan de este
// Por más que no se muestre
root = new TreeEntry("_ROOT_", null);

// Creo un nodo y lo llamo proyecto
TreeEntry proyectos;
root.add(proyectos = new TreeEntry("Proyectos","folder_accept.png"));

// Creo otro nodo y se lo agrego al anterior para q sea hija
TreeEntry p1;
proyectos.add(p1=new TreeEntry("Tesis","accept_page.png"));

Paso 2
Seteamos nuestro jTree, para ello hay dos partes, la primera es setear el modelo, para ello en el constructor le pasamos un new IconTreeModel().

jtree.setModel(new IconTreeModel());

Si están usando Netbeans tienen que ir a “Propiedades – Model – Custom Code” y ahi lo agregan.

Luego tenemos que setear el Renderer y ponerlo más lindo:

jTreeProyectos.setCellRenderer(new IconTreeRenderer());
jTreeProyectos.setOpaque(false);
jTreeProyectos.setRootVisible(false);
jTreeProyectos.setRowHeight(26);
jTreeProyectos.setExpandsSelectedPaths(true);
jTreeProyectos.setBackground(null);

¿Qué hacer después?

Muchas cosas, podes mejorarlo pasandole los listeners para que reaccionen a los clicks, o cargar la lista dinamicamente desde un XML.
Se que van a estar llenos de dudas, por eso dejo el código fuente de las 3 clases base para que lo vean y analizen. Si alguien me lo pide puedo armar un proyecto completo sobre el tema para que vean como funciona y subirlo.

Descarga los archivos Fuente

25 comments on “Mejorando jTree : Cada nodo con su ícono

  1. boto a fabor de tu proposicion de hacer todo un proyecto!!
    para poder entendre mejor!!

    muchissimas gracias.
    eres un crack

    • bueno, ahora estoy un poco complicado con los tiempos, pero cuando me haga un lugar armo un menú de prueba y lo subo, que no creo q sea tan complicado ya q lo estoy usando en otro proyecto ..

      • muchisimas gracias Luga.
        te lo agradezco

  2. luga, has podido armar el menu de prueba?
    es que estoy muy interesado!
    un saludio

  3. ho!! a mi tambien me iria de fabula, casi lo tengo pero aun me faian ciertos aspectos!!

    saludos!

    • vacaciones XD perdón pero las necesitaba !!

      Apenas retorno a las pistas armo algo muy básico y lo subo

  4. hola luga.
    he conseguido montar todo un prollecto con tus classes y funciona de pelicula. pero te queria hacer una consulta, el fondo de mi arbol me sale en gris i lo quisiera en blanco.

    se te acude un metodo??

    gracias!

    • public Main(){
      JTree jTree = new JTree();

      /**
      *Establece el TreeModel que
      *proporcionará los datos.
      */
      jTree.setModel(new IconTreeModel());
      /**
      *Establece el TableCellRenderer utilizado
      *por JTable para dibujar los valores
      *individuales de esta columna
      */
      jTree.setCellRenderer(new IconTreeRenderer());
      /**
      *De ser cierto, componente de las pinturas
      *cada píxel dentro de sus límites.
      */
      jTree.setOpaque(false);
      //hace que el primer nodo no sea visible
      jTree.setRootVisible(false);
      //tamaño de cada linea del arbol
      jTree.setRowHeight(26);
      //configura el ExpandsSelectedPaths
      jTree.setExpandsSelectedPaths(true);
      //quita el color de la seleccion
      jTree.setBackground(null);

      JScrollPane PaneTree = new JScrollPane(jTree);
      JScrollPane PaneEsquerra = new JScrollPane();

      JSplitPane splitPane1 = new JSplitPane(JSplitPane.HORIZONTAL_SPLIT , true, PaneTree, PaneEsquerra);

      JFrame frame = new JFrame();

      frame.add(splitPane1);
      frame.setSize(300, 400);
      frame.setVisible(true);

      }

      esto es lo que he echo para ejecutar el programa
      usando tus classes

      • Hey !! perdón pero como estoy de vacaciones, me las estoy tomando muy literales y casi ni abro el blog, necesitaba tirar la compu x la ventana un tiempo =P.

        Bueno, sobre el fondo del árbol ignoro, pero creo que se puede hacer con el netbeans.

        Me alegro que hayas podido armar un proyecto con esta solución por ahí estaría bueno que cuentes en que se te complicó así mejoramos este intento de guía =D

  5. Gracias por el ejemplo funciono perfecto.
    El mejor que he visto sobre este tema quiza no se explique muy bien hasta no sentarte y analizar las clases que estan para descargarse. A quien no le quede solo que analice el codigo y listo.

    Saludos

    • si, es cierto hay que sentarse y leer código, ya cuando tenga algo de tiempo (mañana supongo) me voy a poner a mejorarlo y por ahi subo un ejemplo …

      • mejorar? que eso es posible? jajaja
        estupendo haver hsta donde se llega xD

        me funciona de lujo en el progrma

  6. Bueno estoy interesado para ahcer un menu de sistema para aplicacion escritorio ..

    haber si alguien tiene uno pues

    el menu debera cargarse desde base de datos..

  7. Hola, una pregunta… Como hago para que al dar clic en un elemento del Jtree, me aparezca una imagen o una pagina web o lo que contenga el archivo en el label que está al lado????

    • emm… no entiendo la pregunta, si te pudieras explayar más te ayudo

  8. como hago para que al darle click derecho a la raiz del arbol pueda mostrar un Popup en el q pueda elegir una opcionde crear nuevo o algo asi…muchas gracias les agradeceria de todo corazon

    • 1)- Fijate algún evento del JTree que se dispare con los clicks.
      Yo uso el

      treeMenuValueChanged(javax.swing.event.TreeSelectionEvent evt)

      para capturar los clicks derechos sobre los nodos.

      2)- Una vez q tengas eso, podes armar el menú de manera gráfica con Netebeans siguiendo:
      Crear un Menú con el Botón Derecho en Java/Netbeans – JPopupMenu

      Más no podría decirte sin ponerme a hacerlo . Espero q te sea útil.

  9. hola luga, muy bueno el tutorial, tengo una pequeña consulta, pude hacer este menu, pero no puedo cambiar los iconos que en tu captura aparecen con un menos. Eso es posible cambiarlo, que haga uno cuando este expandido el nodo y otro para el collpasado. A los que me refieron son a los nodos que tienen hijos, que en tu captura por ejemplo tienen dos iconos, a mi el primero me sale por defecto y a vos te sale un menos.
    saludos.

  10. Perdon por la molestia, disculpa lo que pasa q tenia dudas que si al final hiciste un proyecto para poder entender mejor, podrias compartilo lo que pasa que me llamo la atencion y quiero utilizarlo en mi proyecto de la universidad,
    de antemano,
    muchissimas gracias.

    • Hey, la verdad que nunca lo hice, estoy muy complicado con los tiempos y no es una de mis prioridades, pero con éste código más un poco de “renegar” tendría que salir.

  11. GRACIAS TE LO ADRESCO FELIZ ME HAZ HECHO EL DIA

  12. no pudiste hacer el proyecto..?? es la unica informacion al respecto que encuentro en la red… estoy muy interesado en el.
    Ayuda por favor.

  13. Podrias subir los ejemplos de nuevo… que el FBI acaba de cerrar Megaupload

  14. puedes subirlo todo en un nuevo servidor ???

  15. ¿Dónde puedo descargar las clases, que el sitio Megaupload está cerrado por el FBI?

Deja un comentario

Fill in your details below or click an icon to log in:

Logo de WordPress.com

You are commenting using your WordPress.com account. Log Out / Cambiar )

Twitter picture

You are commenting using your Twitter account. Log Out / Cambiar )

Facebook photo

You are commenting using your Facebook account. Log Out / Cambiar )

Connecting to %s