En el area de las interfaces graficas de usuario, la navegación por pestañas se refiere a la posibilidad de que varios paneles con información estén contenidos dentro de una sola ventana principal, usando pestañas para alternar entre ellos.

Existen muchas formas de crear un sistema de navegación por pestañas en tu aplicación Ruby on Rails. En este artículo vamos a explicarte como puedes hacer gracias al plugin Rails Widgets de SeeSaw.

Este plugin contiene diversas componentes de interfaz para mejorar la navegación dentro de tu web, pero de momento nos vamos a centrar en una de ellas: la componente Tabnav.

Para instalar Rails Widgets, solo tienes que ejecutar el siguiente código en la carpeta raíz de tu proyecto:

ruby script/plugin install http://rails-widgets.googlecode.com/svn/widgets

Ahora ya puedes crear tu primer navegador. Solo tienes que escribir el siguiente código:

ruby script/generate tabnav main

Observa como en tu proyecto se ha creado una nueva carpeta en /app/views/widgets. Dentro del carpeta encontrarás una nueva vista llamada _main_tabnav.rhtml.

Ahora tienes que añadir la componente en tus plantillas mediante el siguiente código:

<% tabnav :main do %>
...tu contenido
<% end %>

Et voilà. Ya tienes funcionando tu sistema de navegación por pestañas.

Comprobarás que la componente ha creado una pestaña para cada uno de los controladores de tu proyecto, pero si lo deseas, puedes personalizarlas. Para ello, modifica la vista /app/views/widgets/_main_tabnav.rhtml y añade el siguiente código:

add_tab do |t|
t.named 'Invoices'
t.links_to :controller => 'invoices'
end

add_tab do |t|
t.named 'Best Orders'
t.links_to :controller => 'orders', :action => 'list'
end

add_tab do |t|
t.named 'Options'
t.links_to :controller => 'options'
end if session[:role] == 'Admin'

La flexibilidad del sistema es total. El primer ejemplo permite crear una pestaña y asociarla al método predeterminado del controlador Invoices. En el segundo ejemplo, te mostramos cómo puedes llamar a una acción concreta de tu controlador cuando el usuario selecciona la pestaña. Por último, en el tercer ejemplo puedes ver cómo crear una pestaña condicional.

Así de sencillo. Puedes crear tantos sistemas de pestañas como quieras, y personalizarlos de acuerdo a tus necesidades.

Puedes obtener más información en la página oficial de Rails Widgets o en la presentación que sus creadores hicieron en RailsToItaly.