Componente Accordion
Este es un ejemplo de cómo el componente accordion puede contener otros componentes. De hecho es el código fuente del acordeón que se puede ver en la página principal de este blog.
Este es el resultado final:
Tiene tres pestañas, la primera contiene una lista, la segunda un árbol, y la tercera un movieclip sencillo
Lo primero de todo será arrastrar al stage una instancia del componente list y otra del componente tree. Una vez en el stage, las borramos. De esta forma, quedan en la librería
También he colocado en el stage una instancia del componente accordion, le he asignado altura y anchura, y el nombre de instancia "accordion" ( sin las comillas ). Ésta instancia no hay que borrarla
También he creado un movieclip con la información de contacto. Su linkage ( o vinculación ) es "contact" ( también sin las comillas )
Quiero que las secciones de descargas y enlaces recogan los datos de xmls externos, para que todo sea más facil de mantener y actualizar. Puedes ver el xml para las descargas aquí, y el de los enlaces aquí
Por tanto, nuestro código cargará esos dos xmls, y cuando los haya cargado asignará el dataProvider correspondiente de cada uno de los componentes:
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 );
Eso es todo. Enhorabuena si no te has dormido antes de llegar aquí.