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Ì.