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.
Comentarios
Very nice. BTW - What are you using to format your actionscript above? It's so easy to read! Is this just a manual application of CSS?
Publicado por: Erik | May 3, 2004 08:02 PM
Thanks,
About the formatting: It's made by a plugin made by Sean Voisen. You can find all the info about it here:
http://voisen.org/archives/projects/000239.php
Publicado por: Cesar Tardaguila | May 3, 2004 09:53 PM
Cool work, man :) It was very useful for me.
I've only noted a little error inside the code (it looks a typed err) :
var myTree = accordion.getChildAt( 1 );
it should be :
var myTree = ac.getChildAt( 1 );
thanks,
marco casario
Publicado por: Marco Casario | July 21, 2004 07:36 PM