Flex - Control ToggleButtonBar

Introducción

El control ToggleButtonBar proporciona un grupo de botones horizontal o vertical que mantienen su estado seleccionado o no seleccionado.

Declaración de clase

A continuación se muestra la declaración de mx.controls.ToggleButtonBar clase -

public class ToggleButtonBar
   extends ButtonBar

Propiedades publicas

No Señor	Descripción de propiedad
1	selectedIndex : int [anular] Índice del botón seleccionado.
2	toggleOnClick : Boolean Especifica si el usuario puede anular la selección del botón seleccionado actualmente.

Métodos públicos

No Señor	Método y descripción
1	ToggleButtonBar() Constructor.

Métodos heredados

Esta clase hereda métodos de las siguientes clases:

mx.controls.ButtonBar
mx.controls.NavBar
mx.containers.Box
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 ToggleButtonBar

Sigamos los siguientes pasos para verificar el uso del control ToggleButtonBar 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" />
   <fx:Script>
      <![CDATA[
         import mx.events.ItemClickEvent;
         private function sectionClickHandler(event:ItemClickEvent):void {
            sectionContents.text = "Contents for " + event.label;
         }
      ]]>
   </fx:Script>
   
   <fx:Declarations>
      <fx:Array id = "sectionList">
         <fx:String>Section 1</fx:String>
         <fx:String>Section 2</fx:String>
         <fx:String>Section 3</fx:String>
         <fx:String>Section 4</fx:String>
         <fx:String>Section 5</fx:String>
      </fx:Array>
   </fx:Declarations>   
   
   <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 = "toggleButtonBarPanel" title = "Using ToggleButtonBar"
            width = "500" height = "300" >
            <s:layout>
               <s:VerticalLayout  gap = "10" verticalAlign = "middle"
                  horizontalAlign = "center" paddingTop = "10" />	
            </s:layout>
               
            <mx:ToggleButtonBar itemClick = "sectionClickHandler(event);" 
               dataProvider = "{sectionList}" />
            <s:BorderContainer width = "90%" height = "70%" 
               borderColor = "0x323232">
               <s:VGroup verticalAlign = "middle" 
                  horizontalAlign = "center" width = "100%" height = "100%">
                  <s:Label id = "sectionContents"
                     text = "Contents for Section 1" />	
               </s:VGroup>	
            </s:BorderContainer>							
         </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