Flex - Contrôle accordéon

introduction

Le contrôle Accordian est un conteneur de navigateur qui a une collection de conteneurs enfants, mais un seul d'entre eux à la fois est visible.

Déclaration de classe

Voici la déclaration pour mx.containers.Accordian classe -

public class Accordion 
   extends Container
      implements IHistoryManagerClient, IFocusManagerComponent

Propriétés publiques

Sr. Non	Propriété et description
1	headerRenderer : IFactory Une fabrique utilisée pour créer les boutons de navigation pour chaque enfant.
2	historyManagementEnabled : Boolean Si elle est définie sur true, cette propriété active la gestion de l'historique dans ce conteneur Accordion.
3	resizeToContent : Boolean S'il est défini sur true, cet accordéon se redimensionne automatiquement à la taille de son enfant actuel.
4	selectedChild : INavigatorContent Une référence au conteneur enfant actuellement visible.
5	selectedIndex : int Index de base zéro du conteneur enfant actuellement visible.

Propriétés protégées

Sr. Non	Propriété et description
1	contentHeight : Number [lecture seule] Hauteur de la zone, en pixels, dans laquelle le contenu est affiché.
2	contentWidth : Number [lecture seule] La largeur de la zone, en pixels, dans laquelle le contenu est affiché.

Méthodes publiques

Sr. Non	Méthode et description
1	Accordion() Constructeur.
2	getHeaderAt(index:int):Button Renvoie une référence au bouton du navigateur pour un conteneur enfant.
3	loadState(state:Object):void Charge l'état de cet objet.
4	saveState():Object Enregistre l'état de cet objet.

Événements

Sr. Non	Description de l'évenement
1	change Distribué lorsque le conteneur enfant sélectionné change.

Méthodes héritées

Cette classe hérite des méthodes des classes suivantes -

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

Exemple de contrôle Flex Accordian

Suivons les étapes suivantes pour vérifier l'utilisation du contrôle Accordian dans une application Flex en créant une application de test -

Étape	La description
1	Créez un projet avec un nom HelloWorld sous un package com.tutorialspoint.client comme expliqué dans le chapitre Flex - Créer une application .
2	Modifiez HelloWorld.mxml comme expliqué ci-dessous. Gardez le reste des fichiers inchangé.
3	Compilez et exécutez l'application pour vous assurer que la logique métier fonctionne conformément aux exigences.

Voici le contenu du fichier mxml modifié 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>

Une fois que vous êtes prêt avec tous les changements effectués, laissez-nous compiler et exécuter l'application en mode normal comme nous l'avons fait dans le chapitre Flex - Créer une application . Si tout va bien avec votre application, elle produira le résultat suivant: [ Essayez-le en ligne ]

↰ Previous page