design-nation.blog/en

Accordion component

This is a simple example of how the accordion component can contain other components. In fact it's the source code of the accordion implemented in this blog's homepage.

Here´s the final result:

It has three tabs, the first one contains a list component, the second one contains a tree component, and the third one contains a single movieclip

So, first of all, you have to drag an instance of the list component and an instance of the tree component to the stage, and after that, delete them both, so they are included in the lybrary

I've also placed on the stage an instance of the accordion component, and I've setted its width and height, and setted its instance name to "accordion" ( without the quotes ). Don't delete the accordion instance.

I've also created a movieclip that contains the contact information. It's linkage name is "contact" ( without the quotes )

I also want both the downloads and link sections to load its own data from XML files, so everything will be easier to maintain and update. So, you can see the downloads_en.xml here.

You can review the tree_en.xml file here

So, the actionscript code will load both the "downloads_en.xml" file and the "tree_en.xml" file and, when loaded, will set the dataproviders of the list and the tree:

import mx.controls.Tree;
import mx.controls.List;

//var language: String = "es";

_global.style.setStyle("fontFamily", "TrebuchetMS" );
_global.style.setStyle("fontSize", 12);
_global.style.setStyle("themeColor", "haloOrange");


var ac = this.accordion;

ac.createChild( List, "downloadsF", { label: "Downloads", _width: 200, _height: 236 } );
ac.createChild( Tree, "linksF", { label: "Links", _width: 200, _height: 236 } );
ac.createChild( "contact", "contactF", { label: "Contact" } );

var myList = ac.getChildAt( 0 );
myList.vScrollPolicy = "auto";
myList.dataProvider = [ { label: "loading data", data: 0 } ];

myListXML  = new XML( );
myListXML.ignoreWhite = true;
myListXML[ "theList" ] = myList;

myListXML.onLoad = function( success )
{
 if ( success )
 {
  var theDP: Array = new Array( );		
  var elements: Array = this.firstChild.childNodes;
  var numElem: Number = elements.length;
  
  for ( var k: Number= 0; k< numElem; k++ )
  {
   theDP.addItem( { label: elements[ k ].attributes[ "label" ], data: elements[ k ].attributes[ "data" ] } );
  }
  		
  this[ "theList" ].dataProvider = theDP;
 }
}


if ( language=="es" )
{
 myListXML.load( "http://www.design-nation.net/enlaces/downloads.xml" );
}
else
{
 myListXML.load( "http://www.design-nation.net/enlaces/downloads_en.xml" );
}




var myTree = accordion.getChildAt( 1 );
myTree.vScrollPolicy = "auto";
myTree.setStyle("openEasing", mx.transitions.easing.Back.easeInOut );

myTreeDataProvider = new XML(); 
myTreeDataProvider.ignoreWhite = true;
           
if (language=="es"){
 myTreeDataProvider.load("http://www.design-nation.net/enlaces/tree.xml?ran="+ Math.random());
}else{
 myTreeDataProvider.load("http://www.design-nation.net/enlaces/tree_en.xml?ran=" + Math.random());	
}
           
myTreeDataProvider.onLoad = function(){ 
 myTree.dataProvider = this;
}

eventListener = new Object();
eventListener[ "tree" ] = myTree;
eventListener[ "list" ] = myList;
           
eventListener.change = function(eventObject){
 if ( eventObject.target._name == "linksF" )
 {
  var theSelectedNode = eventObject.target.selectedNode;
  			   
  var theSelectedNodeLabel = theSelectedNode.attributes.label;
  var esLink = theSelectedNode.attributes.isLink;
  var esBranch = this.tree.getIsBranch( theSelectedNode )
  if ( esBranch ){
   if ( this.tree.getIsOpen( theSelectedNode ) ){
    this.tree.setIsOpen( theSelectedNode, false, true );
   }else{
    this.tree.setIsOpen( theSelectedNode, true, true );
   }
  }else{
   if ( esLink ){
    var theSelectedNodeURL = theSelectedNode.attributes.url;		
    getURL( theSelectedNodeURL );
   }
  }
 }
 if ( eventObject.target._name == "downloadsF" )
 {
  getURL( myList.selectedItem.data );
 }
}

myTree.addEventListener("change", eventListener);
myList.addEventListener( "change", eventListener );

And that's all.