En esta ocasión trataré sobre el uso del componente tabPanel de RichFaces usándolo con funciones JavaScript para dos casos en particular:

• Hacer el cambio de tabs.
• Verificar si un tab está activo.

El tabPanel presenta 3 maneras para realizar el cambio de un tab a otro mediante el atributo switchType:

• client (se carga la información de todos los tabs).
• ajax (se carga la información mediante ajax, cada vez que se entra al tab).
• server (se carga la información cada vez que se entra al tab, actualizando toda la página).

Antes de comenzar, como nota importante, he probado esta forma de usar el tabPanel con las versiones 3.2.1 y la 3.3.0.GA de RichFaces.

Para todos los ejemplos utilizaré el código siguiente:

<h:form id="miFormulario" >
 
  <!-- para los casos ajax y server switchType tendrá los valores 'ajax' y 'server' respectivamente -->
  <rich:tabPanel id="testTabPanel" switchType="client" >
 
    <rich:tab id="tabUno" label="Tab Uno" >
      <!-- contenido del tab uno -->
    </rich:tab>
 
    <rich:tab id="tabDos" label="Tab Dos" >
      <!-- contenido del tab dos -->
    </rich:tab>
 
  </rich:tabPanel>
 
</h:form>

1. Cambio de tabs:

Para realizar el cambio de tabs, se obtendrá mediante JavaScript el elemento cuyo id tenga la foma <id del tab>_shifted, así:

function irAlTabUno() {
  // se obtiene el elemento:
  var tabUno = document.getElementById('miFormulario:tabUno_shifted');
  // esta es la línea que realizará el cambio de tab
  // si el tab se encuentra activo entonces no hará nada:
  tabUno.onclick();
}
 
function irAlTabDos() {
  document.getElementById('miFormulario:tabDos_shifted').onclick();
}

El ‘truco’ es obtener mediante JavaScript el elemento correcto (al cual hacerle onclick), lo que hace RichFaces es crear un HTML <table> dentro de la celda que contiene la pestaña con el mismo id que le dimos al tab pero concatenándole ‘_shifted’.

Existe una manera en particular para hacer el cambio pero sólo si se encuentra en modo ‘client’, la cual es usando una de las funciones del archivo tabPanel.js de RichFaces:

function irAlTabUno() {
  RichFaces.switchTab('miFormulario:testTabPanel', 'miFormulario:tabUno', 'Tab Uno');
}
 
function irAlTabDos() {
  RichFaces.switchTab('miFormulario:testTabPanel', 'miFormulario:tabDos', 'Tab Dos');
}

O usando rich:clientId()

function irAlTabUno() {
  RichFaces.switchTab('#{rich:clientId('testTabPanel')}', '#{rich:clientId('tabUno')}', 'Tab Uno');
}
 
function irAlTabDos() {
  RichFaces.switchTab('#{rich:clientId('testTabPanel')}' ,'#{rich:clientId('tabDos')}', 'Tab Dos');
}

Donde la función RichFaces.switchTab() recibe 3 parámetros: el id del tabPanel, el id del tab al cual queremos ir, y el label del mismo tab destino.

2. Verificar si un tab está activo:

Aquí también usaremos una de las funciones del archivo tabPanel.js de RichFaces:

function estaActivoTabUno() {
  return RichFaces.isTabActive('miFormulario:tabUno_lbl');
}
 
function estaActivoTabDos() {
  return RichFaces.isTabActive('miFormulario:tabDos_lbl');
}

Igual que en el caso anterior de cambio de tabs, el ‘truco’ es usar el HTML <td> que crea RichFaces con el mismo id que le dimos al tab pero concatenándole ‘_lbl’. Entonces llamamos a la función RichFaces.isTabActive() que recibe como parámetro este id.

Conclusión:

Normalmente cambiar de tab es tan sencillo como hacer clic en el tab al cual queremos cambiar, y conocer el tab activo se realiza mediante el atributo ’selectedTab’ del rich:tabPanel (con un backing bean de por medio). Por eso esta manera de hacer ambas cosas mediante JavaScript es para casos muy particulares como por ejemplo, verificar que no se realice el cambio de tabs sin antes haber validado/guardado la información de cada tab independiente (cada tab posee un formulario), previa pregunta de confirmación al usuario con un javascript:confirm(‘…’).

Related posts:

1. Carga dinámica de combos usando JSF y richfaces

Autor: Otto Theo

• Entrada Anterior: Maven en detalle – Parte 1
• Siguiente Entrada: Maven en detalle – Parte 2