Como hacer tabs/pestañas en ADF JSF.
Vamos a imaginar que queremos mostrar la información de una cámara en varias pestañas:
- Vista General.
- Características.
- Especificaciones.
Primero vamos hacer la parte del front-end:
Es una cámara muy buena para las personas que quieren iniciarse en la fotografía.
Es semi profesional y por la cantidad de dinero que cuesta es una buena oportunidad.
Potente Zoom de 100x y calidad de imagen HD.
Reconocimiento de escena.
Multiples funciones de disparo.
Funciones decuerpo compacto.
Semi Reflex.
14 millones de píxeles
Fotografía: JPEG (Exif Ver. 2.3*³) (Regla de diseño para
sistema de archivo de cámara / compatible con DPOF)
Vídeo: AVI (Motion JPEG)
Audio: formato WAVE, sonido monoaural
En el código anterior podemos ver que estamos construyendo primero las pestañas dentro de un <af:panelHeader>, esto es un plus, no es una regla que se halla que seguir, en esta oportunidad lo use para que le diera un poco mas de estética a las pestañas, después de eso vemos que cada pestaña tiene 3 propiedades:
selected: esta propiedad está amarrada a una variablebooleanen el backing bean la cual indica si la pestaña tiene que estar seleccionada o no.actionListener:Esta propiedad invoca un método en el backing bean que debe ser ejecutado cada vez que se presione la pestaña.immediate: esta propiedad indica que se cambiará de pestaña así el ciclo de vida de JSF este en otra fase. Ahora con mis palabras, esto indica que si presionamos esta pestaña se cambiará a la misma así JSF este validando campos requeridos.
Después creamos el contenido de cada pestaña dentro de un
<af:panelHeader> el cual tiene la propiedad rendered que sirve para mostrar/ocultar el mismo, este boolean esta en el backing bean llamado datoJavaTabsBean. Si no tienes idea de lo que hablo puedes ver este tutorial de ADF y JSF para que tengas una mejor idea.
Ahora vamos a ver el código del backing bean:
package bbeans;
import javax.faces.event.ActionEvent;
/**
* @author http://datojava.blogspot.com/
*/
public class DatoJavaTabsBean {
// Booleans que indican que pestaña estara seleccionada
boolean tabVistaGeneral = true;
boolean tabCaracterisitcas = false;
boolean tabEspecificaciones = false;
// Metodo para mostrar solo la pestaña "Vista General"
public void cambiarTabVistaGeneral(ActionEvent actionEvent) {
tabVistaGeneral = true;
tabCaracterisitcas = false;
tabEspecificaciones = false;
}
// Metodo para mostrar solo la pestaña "Caracteristicas"
public void cambiarTabCaracterisiticas(ActionEvent actionEvent) {
tabVistaGeneral = false;
tabCaracterisitcas = true;
tabEspecificaciones = false;
}
// Metodo para mostrar solo la pestaña "Especificaciones"
public void cambiarTabEspecificaciones(ActionEvent actionEvent) {
tabVistaGeneral = false;
tabCaracterisitcas = false;
tabEspecificaciones = true;
}
//Getter y Setters de las variables que JSF pueda acceder a ellos desde el front-end
public boolean isTabVistaGeneral() {
return tabVistaGeneral;
}
public void setTabVistaGeneral(boolean tabVistaGeneral) {
this.tabVistaGeneral = tabVistaGeneral;
}
public boolean isTabCaracterisitcas() {
return tabCaracterisitcas;
}
public void setTabCaracterisitcas(boolean tabCaracterisitcas) {
this.tabCaracterisitcas = tabCaracterisitcas;
}
public boolean isTabEspecificaciones() {
return tabEspecificaciones;
}
public void setTabEspecificaciones(boolean tabEspecificaciones) {
this.tabEspecificaciones = tabEspecificaciones;
}
}
El backing bean es sencillo, posee tres métodos que sirven para controlar el comportamiento de las pestañas y tres variables para mostrar/ocultar el contenido de las mismas dependiendo del caso. Si tienes una sugerencia o consulta no olvides comentar.
No hay comentarios :
Publicar un comentario