Flex - Accordian Control

Introducción

El control Accordian 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.Accordian clase -

public class Accordion 
   extends Container
      implements IHistoryManagerClient, IFocusManagerComponent

Propiedades publicas

No Señor	Descripción de propiedad
1	headerRenderer : IFactory Una fábrica utilizada para crear los botones de navegación para cada niño.
2	historyManagementEnabled : Boolean Si se establece en true, esta propiedad habilita la gestión del historial dentro de este contenedor Accordion.
3	resizeToContent : Boolean Si se establece en verdadero, este acordeón cambia automáticamente de tamaño al tamaño de su hijo actual.
4	selectedChild : INavigatorContent Una referencia al contenedor secundario visible actualmente.
5	selectedIndex : int El índice de base cero del contenedor secundario visible actualmente.

Propiedades protegidas

No Señor	Descripción de propiedad
1	contentHeight : Number [solo lectura] La altura del área, en píxeles, en la que se muestra el contenido.
2	contentWidth : Number [solo lectura] El ancho del área, en píxeles, en la que se muestra el contenido.

Métodos públicos

No Señor	Método y descripción
1	Accordion() Constructor.
2	getHeaderAt(index:int):Button Devuelve una referencia al botón del navegador de un contenedor secundario.
3	loadState(state:Object):void Carga el estado de este objeto.
4	saveState():Object Guarda el estado de este objeto.

Eventos

No Señor	Descripción del evento
1	change Se envía cuando cambia el contenedor secundario seleccionado.

Métodos heredados

Esta clase hereda métodos de las siguientes clases:

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 Accordian

Sigamos los siguientes pasos para verificar el uso del control Accordian 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 = "accordianPanel" title = "Using Accordian" 
            width = "500" height = "300" >
            <s:layout>
               <s:HorizontalLayout  gap = "10" verticalAlign = "middle" 
                  horizontalAlign = "center" />	
            </s:layout>				
               
            <mx:Accordion id = "accordion" 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:Accordion>
         </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