KoolMoves AS3 API Documentation | All Packages | All Classes | Index | Frames No Frames |
Class Accordion

Package | km.components
Class | public class Accordion
Inheritance | Accordion UIComponent flash.display.Sprite

The Accordion component class.

Example

    import km.components.*;

    var acc:Accordion = new Accordion();

    acc.panelPlacement = Accordion.LEFT;
    acc.operationMode = Accordion.MODE_MAX_ONE;
    acc.sizeToContent = true;

    acc.setSize(400,320);
    acc.move(40,40);

    var s1:Shape = new Shape();
    var s2:Shape = new Shape();
    var s3:Shape = new Shape();
    var s4:Shape = new Shape();

    s1.graphics.beginFill(0xff0000);
    s1.graphics.drawCircle(50,50,30);
    s2.graphics.beginFill(0x00ff00);
    s2.graphics.drawCircle(50,50,60);
    s3.graphics.beginFill(0x0000ff);
    s3.graphics.drawCircle(20,20,20);
    s4.graphics.beginFill(0xffff00);
    s4.graphics.drawCircle(80,80,20);

    var p1:AccordionPanel = new AccordionPanel();
    p1.header.label.valign = 'bottom';

    acc.addPanel(p1,'caption 1', s1);
    var p2:AccordionPanel = acc.addPanel(p1.clone(),'caption 2', s2);
    var p3:AccordionPanel = acc.addPanel(p1.clone(),'caption 3', s3);
    var p4:AccordionPanel = acc.addPanel(p1.clone(),'caption 4', s4);

    p1.duotone = [0x600000,0xffe0e0];
    p2.duotone = [0x006000,0xe0ffe0];
    p3.duotone = [0x000060,0xe0e0ff];
    p4.duotone = [0x606000,0xffffe0];

    addChild(acc);

Public Properties
Hide Inherited Public Properties
Show Inherited Public Properties

| Property | Defined by
--- | --- | ---
|  | duotone : Array The duotone property can be used to convert the colors of the component into duotone. | UIComponent
|  | enabled : Boolean Specifies if the component is enabled. If a component is disabled, it will be turned into grayscale and become partly transparent. | UIComponent
|  | height : Number | UIComponent
|  | numPanels : int [read-only] Gets the number of panels the accordion contains. | Accordion
|  | onChange : Function onChange handler. | Accordion
|  | operationMode : int Specifies the operation mode of the accordion. 0 = always one panel open, 1 = max one panel open, 2 = multiple open panels allowed. | Accordion
|  | oppositeHeaderSide : Boolean Gets or sets if the header should be on the opposite side. | Accordion
|  | panelPlacement : int Get or set where the panels will be placed from. Possible values are Accordion.LEFT (= 0), Accordion.RIGHT (= 1), Accordion.TOP (= 2), Accordion.BOTTOM (= 3). | Accordion
|  | panels : Array [read-only] Gets the panels the accordion contains. | Accordion
|  | sizeToContent : Boolean Gets or sets if the panels should be sized to the content they contain. If sizeToContent is set to true and the content of a panel is changed in a way that affects the size of the content, the update function of the accordion should be called manually, so it can reset itself to the new content size. | Accordion
|  | toolTip : String Text to use as toolTip when ToolTip is enabled. | UIComponent
|  | width : Number | UIComponent
|  | x : Number | UIComponent
|  | y : Number | UIComponent

Public Methods
Hide Inherited Public Methods
Show Inherited Public Methods

| Method | Defined by
--- | --- | ---
|  | Accordion() | Accordion
|  | addPanel(panel:AccordionPanel, headerText:String = null, content:DisplayObject = null):AccordionPanel Adds a panel to the component. | Accordion
|  | clone():* Returns a clone of the component. The skin of the component is cloned but other things like the text of a label or the items of a list aren't. | UIComponent
|  | closePanel(panel:AccordionPanel, animated:Boolean = true):void Closes the specified panel. | Accordion
|  | getContentArea(panel:AccordionPanel):Rectangle Gets the area available for content of the specified panel. | Accordion
|  | getPanelAt(index:int):AccordionPanel Returns the panel at the specified index. | Accordion
|  | isOpen(panel:AccordionPanel):Boolean Returns if the specified panel is open. | Accordion
|  | lockPanel(panel:AccordionPanel):void Locks the specified panel so header clicks have no effect. | Accordion
|  | move(x:int, y:int, animationMode:int = 0, animationFrames:int = 12, easeInOut:Boolean = false):void Moves the component to the specified coordinates. | UIComponent
|  | openPanel(panel:AccordionPanel, animated:Boolean = true):void Opens the specified panel. | Accordion
|  | removePanel(panel:AccordionPanel):AccordionPanel Removes the specified panel from the component. | Accordion
|  | setAnimation(duration:int, easeInOut:Boolean = true, openCloseEffect:int = 0):void Controls the panel animation. | Accordion
|  | setProperties(o:Object):void Sets a number of properties at once. | UIComponent
|  | setSize(w:int, h:int):void Sets the size width and height. | UIComponent
|  | unlockPanel(panel:AccordionPanel):void Unlocks the specified panel. | Accordion

Events
Hide Inherited Events
Show Inherited Events

| Event | Summary | Defined by
--- | --- | --- | ---
|  | animationComplete | The animationComplete event is broadcasted when an animated move is completed. | UIComponent
|  | change | The change event is broadcasted when there's a change in what panels are open or closed. When panels are opened or closed by scripting, the event is not broadcasted. It's also possible to use the onChange handler. | Accordion
|  | panelAnimationComplete | The panelAnimationComplete event is broadcasted when all panels have arrived at the right position. | Accordion

Public Constants

| Constant | Defined by
--- | --- | ---
|  | BOTTOM : int = 3 [static] | Accordion
|  | LEFT : int = 0 [static] | Accordion
|  | MODE_ALWAYS_ONE : int = 0 [static] | Accordion
|  | MODE_MAX_ONE : int = 1 [static] | Accordion
|  | MODE_MULTI : int = 2 [static] | Accordion
|  | RIGHT : int = 1 [static] | Accordion
|  | TOP : int = 2 [static] | Accordion

Property detail

numPanels | property

`numPanels:int` [read-only]

Gets the number of panels the accordion contains.

Implementation
`public function get numPanels():int`

onChange | property |

`public var onChange:Function`

onChange handler.

operationMode | property |

`operationMode:int` [read-write]

Specifies the operation mode of the accordion.
0 = always one panel open, 1 = max one panel open, 2 = multiple open panels allowed.

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

oppositeHeaderSide | property |

`oppositeHeaderSide:Boolean` [read-write]

Gets or sets if the header should be on the opposite side.

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

panelPlacement | property |

`panelPlacement:int` [read-write]

Get or set where the panels will be placed from.
Possible values are Accordion.LEFT (= 0), Accordion.RIGHT (= 1), Accordion.TOP (= 2), Accordion.BOTTOM (= 3).

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

panels | property |

`panels:Array` [read-only]

Gets the panels the accordion contains.

Implementation
`public function get panels():Array`

sizeToContent | property |

`sizeToContent:Boolean` [read-write]

Gets or sets if the panels should be sized to the content they contain.
If sizeToContent is set to true and the content of a panel is changed in a way that affects the size of the content, the update function of the accordion should be called manually, so it can reset itself to the new content size.

Implementation
`public function get sizeToContent():Boolean`
`public function set sizeToContent(value:Boolean):void`
Constructor detail

Accordion | () | constructor

`public function Accordion()`
Method detail

addPanel | () | method

`public function addPanel(panel:AccordionPanel, headerText:String = null, content:DisplayObject = null):AccordionPanel`

Adds a panel to the component.

Parameters

| `panel:AccordionPanel`
| `headerText:String` (default = `null`)``
| `content:DisplayObject` (default = `null`)``

Returns

| `AccordionPanel`

closePanel | () | method |

`public function closePanel(panel:AccordionPanel, animated:Boolean = true):void`

Closes the specified panel.

Parameters

| `panel:AccordionPanel`
| `animated:Boolean` (default = `true`)``

getContentArea | () | method |

`public function getContentArea(panel:AccordionPanel):Rectangle`

Gets the area available for content of the specified panel.

Parameters

| `panel:AccordionPanel`

Returns

| `Rectangle`

Example

     import km.components.*;

     var acc:Accordion = new Accordion();

     acc.panelPlacement = Accordion.TOP;
     acc.operationMode = Accordion.MODE_ALWAYS_ONE;
     acc.sizeToContent = true;

     acc.setSize(400,320);
     acc.move(40,40);

     var s1:Shape = new Shape();

     s1.graphics.beginFill(0xff0000);
     s1.graphics.drawCircle(50,50,30);

     var p1:AccordionPanel = acc.addPanel(new AccordionPanel(), 'caption 1', s1);
     var p2:AccordionPanel = acc.addPanel(new AccordionPanel(), 'caption 2');

     p1.duotone = [0x600000,0xffe0e0];
     p2.duotone = [0x006000,0xe0ffe0];

     addChild(acc);

     var ca:Rectangle = acc.getContentArea(p2);
     var rt:RichTextEditor = new RichTextEditor();
     rt.setSize(ca.width, ca.height);

     p2.contentHolder.addChild(rt);

     // update the rich text editor now so it is redrawn and
     // after that, update the accordion so it can reset itself
     // to the right content size of the panels. If sizeToContent
     // wouldn't be set to true, the following two lines wouldn't
     // be required.

     rt.updateNow();
     acc.update();

getPanelAt | () | method |

`public function getPanelAt(index:int):AccordionPanel`

Returns the panel at the specified index.

Parameters

| `index:int`

Returns

| `AccordionPanel`

isOpen | () | method |

`public function isOpen(panel:AccordionPanel):Boolean`

Returns if the specified panel is open.

Parameters

| `panel:AccordionPanel`

Returns

| `Boolean`

lockPanel | () | method |

`public function lockPanel(panel:AccordionPanel):void`

Locks the specified panel so header clicks have no effect.

Parameters

| `panel:AccordionPanel`

openPanel | () | method |

`public function openPanel(panel:AccordionPanel, animated:Boolean = true):void`

Opens the specified panel.

Parameters

| `panel:AccordionPanel`
| `animated:Boolean` (default = `true`)``

removePanel | () | method |

`public function removePanel(panel:AccordionPanel):AccordionPanel`

Removes the specified panel from the component.

Parameters

| `panel:AccordionPanel`

Returns

| `AccordionPanel`

setAnimation | () | method |

`public function setAnimation(duration:int, easeInOut:Boolean = true, openCloseEffect:int = 0):void`

Controls the panel animation.

Parameters

| `duration:int` — the amount of msec (between 0 and 5000) the animation takes.
| `easeInOut:Boolean` (default = `true`)`` — 0 = cover / uncover, 1 = push / pull, 2 = fold / unfold .
| `openCloseEffect:int` (default = `0`)``

unlockPanel | () | method |

`public function unlockPanel(panel:AccordionPanel):void`

Unlocks the specified panel.

Parameters

| `panel:AccordionPanel`

Event detail

change | event

Event object type: `flash.events.Event`

The change event is broadcasted when there's a change in what panels are open or closed.
When panels are opened or closed by scripting, the event is not broadcasted.
It's also possible to use the onChange handler.

panelAnimationComplete | event |

Event object type: `flash.events.Event`

The panelAnimationComplete event is broadcasted when all panels have arrived at the right position.

Constant detail

BOTTOM | constant

`public static const BOTTOM:int = 3`

LEFT | constant |

`public static const LEFT:int = 0`

MODE_ALWAYS_ONE | constant |

`public static const MODE_ALWAYS_ONE:int = 0`

MODE_MAX_ONE | constant |

`public static const MODE_MAX_ONE:int = 1`

MODE_MULTI | constant |

`public static const MODE_MULTI:int = 2`

RIGHT | constant |

`public static const RIGHT:int = 1`

TOP | constant |

`public static const TOP:int = 2`

Last update : 04/05/2008