Cómo crear un arbol Flex desde un XML

Arbol Flex desde 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="https://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 httpsService
var arbol:XML;
 
//Se ejecuta cada vez que se pincha en el " arbol Flex desde un XML "
//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://codifica.me/String =  nodoXML.@url;
var location:String=ExternalInterface.call(
"function (param) {" +
"window.location = param;"+
"}",url);
}
 
//Si falla la peticion del httpsService
//Aquí se captura el error
//Y se muestra por pantalla
private function httpsService_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 httpsService ha funcionado bien
//Se recoge el XML el la variable arbol
//Y se le asigna como dataprovider al tree
private function httpsService_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 httpsService
//Para obtener el XML de una URL en concreto
private function loadTree():void {
httpsService.url = 'https://urlDelMXL/fichero.xml';
httpsService.send();
}
 
]]>
</mx:Script>
<!–FIN ACTION SCRIPT–>
<mx:httpsService id="httpsService"
resultFormat="e4x"
fault="httpsService_fault(event);"
result="httpsService_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>

<?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="https://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 httpsService var arbol:XML; //Se ejecuta cada vez que se pincha en el " arbol Flex desde un XML " //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://www.codifica.me/String = nodoXML.@url; var location:String=ExternalInterface.call( "function (param) {" + "window.location = param;"+ "}",url); } //Si falla la peticion del httpsService //Aquí se captura el error //Y se muestra por pantalla private function httpsService_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 httpsService ha funcionado bien //Se recoge el XML el la variable arbol //Y se le asigna como dataprovider al tree private function httpsService_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 httpsService //Para obtener el XML de una URL en concreto private function loadTree():void { httpsService.url = 'https://urlDelMXL/fichero.xml'; httpsService.send(); } ]]> </mx:Script> <!–FIN ACTION SCRIPT–> <mx:httpsService id="httpsService" resultFormat="e4x" fault="httpsService_fault(event);" result="httpsService_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="https://www.codifica.me">
 
<categoria nombre="Cat1" url="https://www.codifica.me">
 
<categoria nombre="Cat1.1" url="https://www.codifica.me"/>
 
</categoria>
 
<categoria nombre="Cat2" url="https://www.codifica.me">
 
<categoria nombre="Cat2.1" url="https://www.codifica.me"/>
 
<categoria nombre="Cat2.2" url="https://www.codifica.me">
 
<categoria nombre="Cat2.2.1" url="https://www.codifica.me"/>
 
<categoria nombre="Cat2.2.2" url="https://www.codifica.me"/>
 
</categoria>
 
</categoria>
 
</categoria>

En la imagen podéis ver el resultado: