Flex - Control TabNavigator

Introducción

El control TabNavigator es un contenedor de navegador que tiene una colección de contenedores secundarios, pero solo uno de ellos a la vez es visible.

Declaración de clase

A continuación se muestra la declaración de mx.containers.TabNavigator clase -

public class TabNavigator 
   extends ViewStack 
      implements IFocusManagerComponent

Propiedades protegidas

No Señor	Descripción de propiedad
1	tabBar : mx.controls:TabBar Una referencia a TabBar dentro de este TabNavigator.
2	tabBarStyleFilters : Object [solo lectura] El conjunto de estilos para pasar de TabNavigator a tabBar.

Métodos públicos

No Señor	Método y descripción
1	TabNavigator() Constructor.
2	getTabAt(index:int):Button Devuelve la pestaña del control TabBar del navegador en el índice especificado.

Métodos protegidos

No Señor	Método y descripción
1	measure():void [anular] Calcula los tamaños predeterminados y los valores mínimo y máximo de este contenedor TabNavigator.
2	updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void [anular] Responde a los cambios de tamaño configurando las posiciones y los tamaños de las pestañas y los elementos secundarios de este contenedor.

Métodos heredados

Esta clase hereda métodos de las siguientes clases:

mx.containers.ViewStack
mx.core.Container
mx.core.UIComponent
mx.core.FlexSprite
flash.display.Sprite
flash.display.DisplayObjectContainer
flash.display.InteractiveObject
flash.display.DisplayObject
flash.events.EventDispatcher
Object

Ejemplo de control Flex TabNavigator

Sigamos los siguientes pasos para verificar el uso del control TabNavigator en una aplicación Flex creando una aplicación de prueba:

Paso	Descripción
1	Cree un proyecto con un nombre HelloWorld en un paquete com.tutorialspoint.client como se explica en el capítulo Flex - Crear aplicación .
2	Modifique HelloWorld.mxml como se explica a continuación. Mantenga el resto de los archivos sin cambios.
3	Compile y ejecute la aplicación para asegurarse de que la lógica empresarial funcione según los requisitos.

A continuación se muestra el contenido del archivo mxml modificado src/com.tutorialspoint/HelloWorld.mxml.

<?xml version = "1.0" encoding = "utf-8"?>
<s:Application xmlns:fx = "http://ns.adobe.com/mxml/2009"
   xmlns:s = "library://ns.adobe.com/flex/spark"
   xmlns:mx = "library://ns.adobe.com/flex/mx
   width = "100%" height = "100%" minWidth = "500" minHeight = "500">
   
   <fx:Style source = "/com/tutorialspoint/client/Style.css" />	   
   <s:BorderContainer width = "630" height = "480" id = "mainContainer" 
      styleName = "container">
      <s:VGroup width = "100%" height = "100%" gap = "50" 
         horizontalAlign = "center" verticalAlign = "middle">
      <s:Label id = "lblHeader" text = "Complex Controls Demonstration" 
         fontSize = "40" color = "0x777777" styleName = "heading" />
            
         <s:Panel id = "tabNavigatorPanel" title = "Using TabNavigator" 
            width = "500" height = "300" >
            <s:layout>
               <s:HorizontalLayout  gap = "10" verticalAlign = "middle" 
                  horizontalAlign = "center" />	
            </s:layout>				
               
            <mx:TabNavigator id = "tabNavigator" width = "95%" height = "90%">
               <s:NavigatorContent label = "Section 1" width = "100%" 
                  height = "100%">
                  <s:VGroup verticalAlign = "middle" horizontalAlign = "center" 
                     width = "100%" height = "100%">
                     <s:Label text = "Contents for Section 1" />	
                  </s:VGroup>							
               </s:NavigatorContent>
                  
               <s:NavigatorContent label = "Section 2" width = "100%" 
                  height = "100%">
                  <s:VGroup verticalAlign = "middle" horizontalAlign = "center"
                     width = "100%" height = "100%">
                     <s:Label text = "Contents for Section 2" />	
                  </s:VGroup>							
               </s:NavigatorContent>
                  
               <s:NavigatorContent label = "Section 3" width = "100%" 
                  height = "100%">
                  <s:VGroup verticalAlign = "middle" horizontalAlign = "center" 
                     width = "100%" height = "100%">
                     <s:Label text = "Contents for Section 3" />	
                  </s:VGroup>							
               </s:NavigatorContent>
                  
               <s:NavigatorContent label = "Section 4" width = "100%" 
                  height = "100%">
                  <s:VGroup verticalAlign = "middle" horizontalAlign = "center" 
                     width = "100%" height = "100%">
                     <s:Label text = "Contents for Section 4" />	
                  </s:VGroup>							
               </s:NavigatorContent>
            </mx:TabNavigator>
         </s:Panel>
      </s:VGroup>	 
   </s:BorderContainer>	
</s:Application>

Una vez que esté listo con todos los cambios realizados, compilemos y ejecutemos la aplicación en modo normal como hicimos en el capítulo Flex - Crear aplicación . Si todo está bien con su aplicación, producirá el siguiente resultado: [ Pruébelo en línea ]

↰ Previous page