Navegación por tabs en Rails

Muchos sitios utilizan esta manera de navegación en sus aplicaciones, pero no sólo porque se ha convertido en una moda alrededor de desarrolladores sino debido a que mejora enormemente la experiencia con los usuarios y la usabilidad de nuestras aplicacion.

linkedin.png

En Rails existe una forma muy simple de hacerlo gracias al desarrollo del Italiano Paolo Dona con su plugin widgets (antes llamado tabnav) el cual estoy aplicando en mi ultimo proyecto y he quedado fascinado. En otro proyecto me hice yo mismo un sistema muy simple de navegación basado en que controlador y acción estaban en cierto momento siendo visitados. Esto fue muy efectivo pero el código que comenzo a salir era algo como esto…


<li><a href="/forums/list"
<% if ((params[:controller] == "forums") || (params[:controller] == "topics") || (params[:controller] == "replies")) %>
class='current'
<% end %>
accesskey="F"><u>F</u>oros</a></li>

Simple, pero horriblemente poco DRY y cuando quería agregar un nuevo tab era bastante complicado… ni hablar de tabs anidados. Me puse a buscar una forma de mejorar esto y di con el fantastico plugin para Rails Tabnav… y aqui como se implementa.

Instala el plugin en tu actual proyecto y listo, ubicate en la raiz de tu proyecto Rails y ejecuta via Terminal.


$> ruby script/plugin install svn://svn.seesaw.it/widgets/trunk

Para crear un widgets (o menu tabnav) debes hacer con,

$> ruby script/generate tabnav main

specwidget.png

Lo anterior crea _main_tabnav.rhtml y sus comentarios explican todo por si solo y se guardan en una ruta como la que tenemos a la derecha

Y finalmente en mi caso este fue el resultado.

mi-menu.png

Link | El blog de Seesaw, los creadores del plugin

Guardado en: rubyonrails |

6 Comments

  • Monday, 8 October 2007, 23:44

    Yo funciono con una mezcla de “case controller.controller_name” y “case controller.action_name” (poniendo toda la logica de los menus en un partial o en un helper), pero ya es hora de un “refactoring” pq que ha crecido demasiado. Le echaré un vistazo al plugin para ver como funciona la cosa!

    Saludos,
    Rodrigo

  • Tuesday, 9 October 2007, 0:21

    Claro es lo mismo que me sucedio… al comienzo metes un código raro en algun lado, pero cuando comienzas a crecer con la aplicación te empieza a quedar la crema… refactor refactor refactor. Sirve para soltar la mano :)

  • Saturday, 13 October 2007, 13:36

    Igual con un helper queda mas limpio:

    “>Foros
    “>Inicio

    La logica la pones en el helper.

    #application_helper.rb
    def current_if_params(cnt)
    return (controller.controller_name.to_sym == cnt) ? ‘current’ : ”
    end

    Por supuesto, si ademas necesitas evaluar la accion lo puedes hacer como parametro opcional del helper, o si quieres evaluar multiples controladores, puedes pasar una expresion regular o un array:

    def current_if_params(*pars)
    return (pars.include?(controller.controller_name.to_sym)) ? ‘current’ : ”
    end

    Asi tambien puedes hacer:
    “>Foros

  • Saturday, 13 October 2007, 13:37

    shit me comio el html, sorry!

  • Saturday, 13 October 2007, 14:04

    Gracias por el tip!.

    Tengo que definitivamente poner alguna forma para que primero…

    El codigo se vea bien en mi blog…

    y en los comments también .

  • Sunday, 30 December 2007, 17:23
    By Ernesto73@ono.com

    ¿habeis hecho funcionar correctamente el tabnav?
    lo digo porque siempre me da el siguiente error:

    undefined method `tabnav’ for #:0×48c91b0>

    gracias por cualquier ayuda,

    ern.

Leave a comment