sábado, 29 de agosto de 2009

Ocultar pestañas en TabNavigator

Hoy veremos como se pueden ocultar las pestañas en un TabNavigator de Flex 3. Es un problema que parece trivial (en otros entornos realmente lo es), pero en Flex dado el manejo interno que hace Flex del TabNavigator no es tan directo, o por lo menos la forma de añadir pestañas en un mxml puede llevar a un uso incorrecto.

Cuando tenemos un TabNavigator, para añadir una pestaña tan sólo debemos añadir como hijo un contenedor, es decir cualquier clase que herede de la clase mx.Container (Box, Container, viewStack, etc...). Veamos un ejemplo:
Una vez que tenemos el TabNavigator creado, podemos decidir ocultar ciertas pestañas en determinadas circunstancias, o bien usando estados (mx:States) o con código actionScript. Para tratar de ocultar una pestaña la tendencia natural es usar el atributo visible y el includeInLayout (para no dejar huecos entre las pestañas) sobre los hijos que hemos añadido en el TabNavigator, con lo que obtendremos un resultado erróneo, ya que se mostrará el TabNavigator con la pestaña vacía en su interior.

A grosso modo, cuando nosotros añadimos un hijo en el TabNavigator internamente crea una pestaña (tab), en la que incluye el botón con el que se representa la pestaña y añade el contenido que nosotros hemos especificado. Por tanto, si queremos hacer que la pestaña desaparezca completamente debemos acceder al tab y establecer las dos propiedades mencionadas antes: visible e includeInLayout a valor false. Para acceder al tab debemos hacer uso de la función getTabAt del TabNavigator, con la que obtendremos la pestaña (un objeto de tipo mx.Button). Usando el ejemplo anterior, el código para ocultar la "pestaña 2, " resultante sería algo así:

 ...
var pestana:Button =
tabNavigator.getTabAt(1);
pestana.visible = false;
pestana.includeInLayout= false;
...

Cómo vemos de esta forma simple podemos jugar con las pestañas para ocultarlas y visualizarlas, y no sólo eso, sino que podemos acceder a las pestañas (tabs), para cambiar cualquiera de sus propiedades.

3 comentarios: