FLEX: Como crear un Árbol obteniendo los datos de un XML

Flex dispone de muchos componentes predefinidos, uno de ellos es el componente Tree, con este componente y un poco de Action Script podemos mostrar los datos obtenidos de un XML en forma de árbol.

Flex nos proporciona el objeto HTTPService con el que podemos obtener los datos (XML) de una URL, una vez hemos hecho la llamada, guardamos el resultado en una variable de tipo XML y después le asignamos esta variable al árbol como su DataProvider.

CÓDIGO:

<?xml version=”1.0″ encoding=”utf-8″?>
<mx:Application xmlns:mx=”http://www.adobe.com/2006/mxml” layout=”absolute” width=”272″ height=”484″ creationComplete=”loadTree();”>
<!–ACTION SCRIPT–>
<mx:Script>
<![CDATA[
import mx.controls.Alert;
import flash.external.*;
import mx.rpc.events.*;

//En esta variable se recoge el valor del XML recibido por HTTPService
var arbol:XML;

//Funcion que se ejecuta cada vez que se pincha en el arbol
//Del item selecionado (nodo XML) se obtiene su parametro URL
//Mediante el objeto window del navegador se invoca la URL
private function clickHandler(event:MouseEvent):void{
var nodoXML:XML = arbolOrganizacion.selectedItem as XML;
var https://codigojavaoracle.com/String[email protected];
var location:String=ExternalInterface.call(
"function (param) {" +
"window.location = param;"+
"}",url);
}

//Si falla la peticion del HTTPService
//Aquí se captura el error
//Y se muestra por pantalla
private function httpService_fault(evt:FaultEvent):void {
var title:String = evt.type + " (" + evt.fault.faultCode + ")";
var text:String = evt.fault.faultString;
Alert.show(text, title);
}

//Si la llamada por HTTPService ha funcionado bien
//Se recoge el XML el la variable arbol
//Y se le asigna como dataprovider al tree
private function httpService_result(evt:ResultEvent):void {
arbol = XML(evt.result);
arbolOrganizacion.dataProvider = arbol;
arbolOrganizacion.validateNow();
arbolOrganizacion.expandItem(arbol, true, false);
}

//Una vez se carga el SWF esta es la primera
//Funcion que se ejecuta se utiliza HTTPService
//Para obtener el XML de una URL en concreto
private function loadTree():void {
httpService.url = 'http://urlDelMXL/fichero.xml';
httpService.send();
}

]]>
</mx:Script>
<!–FIN ACTION SCRIPT–>
<mx:HTTPService id=”httpService”
resultFormat=”e4x”
fault=”httpService_fault(event);”
result=”httpService_result(event)” />

<mx:Canvas x=”0″ y=”0″ width=”272″ height=”484″ backgroundColor=”#FFFFFF”>
<mx:Tree id=”arbolOrganizacion” x=”0″ y=”0″
height=”484″ width=”272″
labelField=”@nombre”
fontFamily=”Arial” click=”clickHandler(event);”>
</mx:Tree>
</mx:Canvas>
</mx:Application>

 

El XML asociado sería algo así:

<categoria nombre=”Categorias” url=”http://www.lamandarinamecanica.es“>

<categoria nombre=”Cat1″ url=”http://www.lamandarinamecanica.es“>

<categoria nombre=”Cat1.1″ url=”http://www.lamandarinamecanica.es”/>

</categoria>

<categoria nombre=”Cat2″ url=”http://www.lamandarinamecanica.es“>

<categoria nombre=”Cat2.1″ url=”http://www.lamandarinamecanica.es”/>

<categoria nombre=”Cat2.2″ url=”http://www.lamandarinamecanica.es“>

<categoria nombre=”Cat2.2.1″ url=”http://www.lamandarinamecanica.es”/>

<categoria nombre=”Cat2.2.2″ url=”http://www.lamandarinamecanica.es”/>

</categoria>

</categoria>

</categoria>

El resultado:

MWSnap226 168x300 FLEX: Como crear un Árbol obteniendo los datos de un XML

email FLEX: Como crear un Árbol obteniendo los datos de un XML

Artículos relaccionados