flexlib :: library Documentation | All Packages | All Classes | Index | Frames No Frames |
AccordionBase

Package | flexlib.baseClasses
Class | public class AccordionBase
Inheritance | AccordionBase mx.core.Container
Implements | mx.managers.IHistoryManagerClient, mx.managers.IFocusManagerComponent
Subclasses | HAccordion, VAccordion

AccordionBase is a copy/paste version of the original Accordion class in the Flex framework.

The only modifications made to this class were to change some properties and methods from private to protected so we can override them in a subclass.

An Accordion navigator container has a collection of child containers, but only one of them at a time is visible. It creates and manages navigator buttons (accordion headers), which you use to navigate between the children. There is one navigator button associated with each child container, and each navigator button belongs to the Accordion container, not to the child. When the user clicks a navigator button, the associated child container is displayed. The transition to the new child uses an animation to make it clear to the user that one child is disappearing and a different one is appearing.

The Accordion container does not extend the ViewStack container, but it implements all the properties, methods, styles, and events of the ViewStack container, such as `selectedIndex` and `selectedChild`.

An Accordion container has the following default sizing characteristics:

Characteristic | Description
--- | ---
Default size | The width and height of the currently active child.
Container resizing rules | Accordion containers are only sized once to fit the size of the first child container by default. They do not resize when you navigate to other child containers by default. To force Accordion containers to resize when you navigate to a different child container, set the resizeToContent property to true.
Child sizing rules | Children are sized to their default size. The child is clipped if it is larger than the Accordion container. If the child is smaller than the Accordion container, it is aligned to the upper-left corner of the Accordion container.
Default padding | -1 pixel for the top, bottom, left, and right values.

MXML Syntax Show MXML Syntax
Hide MXML Syntax

The `<mx:Accordion>` tag inherits all of the tag attributes of its superclass, with the exception of scrolling-related attributes, and adds the following tag attributes:

        <mx:Accordion
          Properties
          headerRenderer="IFactory"
          historyManagementEnabled="true|false"
          resizeToContent="false|true"
          selectedIndex="undefined"
             Styles
          headerHeight="depends on header font styles"
          headerStyleName="No default"
          horizontalGap="8"
          openDuration="250"
          openEasingFunction="undefined"
          paddingBottom="-1"
          paddingTop="-1"
          textRollOverColor="0xB333C"
          textSelectedColor="0xB333C"
          verticalGap="-1"
             Events
          change="No default"
          >
            ...
            child tags
            ...
        </mx:Accordion>

See also

mx.containers.accordionClasses.AccordionHeader

Public Properties

| Property | Defined By
--- | --- | ---
|  | headerRenderer : IFactory A factory used to create the navigation buttons for each child. | AccordionBase
|  | historyManagementEnabled : Boolean If set to true, this property enables history management within this Accordion container. | AccordionBase
|  | resizeToContent : Boolean If set to true, this Accordion automatically resizes to the size of its current child. | AccordionBase
|  | selectedChild : Container A reference to the currently visible child container. | AccordionBase
|  | selectedIndex : int The zero-based index of the currently visible child container. | AccordionBase

Protected Properties

| Property | Defined By
--- | --- | ---
|  | accMinHeight : Number | AccordionBase
|  | accPreferredHeight : Number | AccordionBase
|  | accPreferredWidth : Number | AccordionBase
|  | contentHeight : Number [read-only] The height of the area, in pixels, in which content is displayed. | AccordionBase
|  | contentWidth : Number [read-only] The width of the area, in pixels, in which content is displayed. | AccordionBase
|  | tween : Tween | AccordionBase
|  | tweenContentHeight : Number | AccordionBase
|  | tweenContentWidth : Number | AccordionBase
|  | tweenNewSelectedIndex : int | AccordionBase
|  | tweenOldSelectedIndex : int | AccordionBase

Public Methods

| Method | Defined By
--- | --- | ---
|  | AccordionBase() Constructor. | AccordionBase
|  | getHeaderAt(index:int):Button Returns a reference to the navigator button for a child container. | AccordionBase
|  | loadState(state:Object):void | AccordionBase
|  | saveState():Object | AccordionBase

Events

| Event | Summary | Defined By
--- | --- | --- | ---
|  | change | Dispatched when the selected child container changes. | AccordionBase

Styles

| Style | Description | Defined By
--- | --- | --- | ---
|  | fillAlphas | Type: Array CSS Inheritance: no Deprecated Since 3.0: Please Use headerStyleName Specifies the alpha transparency values used for the background fill of components. You should set this to an Array of either two or four numbers. Elements 0 and 1 specify the start and end values for an alpha gradient. If elements 2 and 3 exist, they are used instead of elements 0 and 1 when the component is in a mouse-over state. The global default value is `[ 0.60, 0.40, 0.75, 0.65 ]`. Some components, such as the ApplicationControlBar container, have a different default value. For the ApplicationControlBar container, the default value is `[ 0.0, 0.0 ]`. | AccordionBase
|  | fillColors | Type: Array Format: Color CSS Inheritance: no Deprecated Since 3.0: Please Use headerStyleName Specifies the colors used to tint the background fill of the component. You should set this to an Array of either two or four uint values that specify RGB colors. Elements 0 and 1 specify the start and end values for a color gradient. If elements 2 and 3 exist, they are used instead of elements 0 and 1 when the component is in a mouse-over state. For a flat-looking control, set the same color for elements 0 and 1 and for elements 2 and 3, The default value is `[ 0xFFFFFF, 0xCCCCCC, 0xFFFFFF, 0xEEEEEE ]`. Some components, such as the ApplicationControlBar container, have a different default value. For the ApplicationControlBar container, the default value is `[ 0xFFFFFF, 0xFFFFFF ]`. | AccordionBase
|  | focusAlpha | Type: Number CSS Inheritance: no Deprecated Since 3.0: Please Use headerStyleName Specifies the alpha transparency value of the focus skin. The default value is`0.4`. | AccordionBase
|  | focusRoundedCorners | Type: String CSS Inheritance: no Deprecated Since 3.0: Please Use headerStyleName Specifies which corners of the focus rectangle should be rounded. This value is a space-separated String that can contain any combination of `"tl"`, `"tr"`, `"bl"` and `"br"`. For example, to specify that the right side corners should be rounded, but the left side corners should be square, use `"tr br"`. The `cornerRadius` style property specifies the radius of the rounded corners. The default value depends on the component class; if not overridden for the class, default value is `"tl tr bl br"`. | AccordionBase
|  | focusSkin | Type: Class CSS Inheritance: no Deprecated Since 3.0: Please Use headerStyleName Skin used to draw the focus rectangle. The default value is`mx.skins.halo.HaloFocusRect`. | AccordionBase
|  | focusThickness | Type: Number Format: Length CSS Inheritance: no Deprecated Since 3.0: Please Use headerStyleName Thickness, in pixels, of the focus rectangle outline. The default value is`2`. | AccordionBase
|  | headerHeight | Type: Number Format: Length CSS Inheritance: no Height of each accordion header, in pixels. The default value is automatically calculated based on the font styles for the header. | AccordionBase
|  | headerStyleName | Type: String CSS Inheritance: no Name of the CSS style declaration that specifies styles for the accordion headers (tabs). You can use this class selector to set the values of all the style properties of the AccordionHeader class, including `fillAlphas`, `fillColors`, `focusAlpha`, `focusRounderCorners`, `focusSkin`, `focusThickness`, and `selectedFillColors`. | AccordionBase
|  | horizontalGap | Type: Number Format: Length CSS Inheritance: no Number of pixels between children in the horizontal direction. The default value is 8. | AccordionBase
|  | openDuration | Type: Number Format: Time CSS Inheritance: no Duration, in milliseconds, of the animation from one child to another. The default value is 250. | AccordionBase
|  | openEasingFunction | Type: Function CSS Inheritance: no Tweening function used by the animation from one child to another. | AccordionBase
|  | paddingBottom | Type: Number Format: Length CSS Inheritance: no Number of pixels between the container's bottom border and its content area. The default value is -1, so the bottom border of the last header overlaps the Accordion container's bottom border. | AccordionBase
|  | paddingTop | Type: Number Format: Length CSS Inheritance: no Number of pixels between the container's top border and its content area. The default value is -1, so the top border of the first header overlaps the Accordion container's top border. | AccordionBase
|  | selectedFillColors | Type: Array Format: Color CSS Inheritance: no Deprecated Since 3.0: Please Use headerStyleName The two colors used to tint the background of the component when in its selected state. Pass the same color for both values for "flat" looking control. The default value is `undefined`, which means the colors are derived from `themeColor`. | AccordionBase
|  | textRollOverColor | Type: uint Format: Color CSS Inheritance: yes Color of header text when rolled over. The default value is 0x2B333C. | AccordionBase
|  | textSelectedColor | Type: uint Format: Color CSS Inheritance: yes Color of selected text. The default value is 0x2B333C. | AccordionBase
|  | verticalGap | Type: Number Format: Length CSS Inheritance: no Number of pixels between children in the vertical direction. The default value is -1, so the top and bottom borders of adjacent headers overlap. | AccordionBase

Property Detail

accMinHeight | property

`protected var accMinHeight:Number`

accPreferredHeight | property |

`protected var accPreferredHeight:Number`

accPreferredWidth | property |

`protected var accPreferredWidth:Number`

contentHeight | property |

`contentHeight:Number` [read-only]

The height of the area, in pixels, in which content is displayed. You can override this getter if your content does not occupy the entire area of the container.

Implementation
`protected function get contentHeight():Number`

contentWidth | property |

`contentWidth:Number` [read-only]

The width of the area, in pixels, in which content is displayed. You can override this getter if your content does not occupy the entire area of the container.

Implementation
`protected function get contentWidth():Number`

headerRenderer | property |

`headerRenderer:IFactory`

A factory used to create the navigation buttons for each child. The default value is a factory which creates a `mx.containers.accordionClasses.AccordionHeader`. The created object must be a subclass of Button and implement the `mx.core.IDataRenderer` interface. The `data` property is set to the content associated with the header.

This property can be used as the source for data binding.

Implementation
`public function get headerRenderer():IFactory`
`public function set headerRenderer(value:IFactory):void`

See also

mx.containers.accordionClasses.AccordionHeader

historyManagementEnabled | property |

`historyManagementEnabled:Boolean`

If set to `true`, this property enables history management within this Accordion container. As the user navigates from one child to another, the browser remembers which children were visited. The user can then click the browser's Back and Forward buttons to move through this navigation history.

The default value is `true`.

Implementation
`public function get historyManagementEnabled():Boolean`
`public function set historyManagementEnabled(value:Boolean):void`

See also

mx.managers.HistoryManager

resizeToContent | property |

`resizeToContent:Boolean`

If set to `true`, this Accordion automatically resizes to the size of its current child.

The default value is `false`.

Implementation
`public function get resizeToContent():Boolean`
`public function set resizeToContent(value:Boolean):void`

selectedChild | property |

`selectedChild:Container`

A reference to the currently visible child container. The default value is a reference to the first child. If there are no children, this property is `null`.

Note: You can only set this property in an ActionScript statement, not in MXML.

This property can be used as the source for data binding.

Implementation
`public function get selectedChild():Container`
`public function set selectedChild(value:Container):void`

selectedIndex | property |

`selectedIndex:int`

The zero-based index of the currently visible child container. Child indexes are in the range 0, 1, 2, ..., n - 1, where n is the number of children. The default value is 0, corresponding to the first child. If there are no children, this property is `-1`.

The default value is `0`.

This property can be used as the source for data binding.

Implementation
`public function get selectedIndex():int`
`public function set selectedIndex(value:int):void`

tween | property |

`protected var tween:Tween`

tweenContentHeight | property |

`protected var tweenContentHeight:Number`

tweenContentWidth | property |

`protected var tweenContentWidth:Number`

tweenNewSelectedIndex | property |

`protected var tweenNewSelectedIndex:int`

tweenOldSelectedIndex | property |

`protected var tweenOldSelectedIndex:int`

Constructor Detail

AccordionBase | () | Constructor

`public function AccordionBase()`

Constructor.

Method Detail

getHeaderAt | () | method

`public function getHeaderAt(index:int):Button`

Returns a reference to the navigator button for a child container.

Parameters

| `index:int` — Zero-based index of the child.

Returns

| `Button` — Button object representing the navigator button.

loadState | () | method |

`public function loadState(state:Object):void`

Parameters

| `state:Object`

saveState | () | method |

`public function saveState():Object`

Returns

| `Object`

Event Detail

change | Event

Event Object Type: `mx.events.IndexChangedEvent`
IndexChangedEvent.type property = `mx.events.IndexChangedEvent.CHANGE`

Dispatched when the selected child container changes.

Mercredi Juillet 4 2012, 09:36 PM +02:00