Leer o cargar un archivo XML en un dataGrid de Adobe FLEX
Bienvenidos a Ver Tutoriales.com, en esta ocasión os traigo un código muy sencillo, rápido y util que sirve para leer archivos xml sencillos en flex.
Como ya sabeis, los archivos xml está expandiendose de una manera rapidisima por su sencillez y versatilidad, para comunicar diferentes lenguajes como por ejemplo mysql y flex, utilizando php y de paso pues generamos el xml con este. Algo enrevesado pero para una consulta rápida funciona.
En este caso, vamos a cargar en un datagrid de flex los diferentes campos de este archivo xml.
Así que os pego el primero la estructura del archivo ‘ver-tutoriales.xml’:
<tutoriales>
<tutorial>
<titulo>leer xml</titulo>
<nivel>facil</nivel>
<videotutorial>no</videotutorial>
</tutorial>
<tutorial>
<titulo>escribir xml</titulo>
<nivel>medio</nivel>
<videotutorial>no</videotutorial>
</tutorial>
<tutorial>
<titulo>Borrar xml</titulo>
<nivel>dificil</nivel>
<videotutorial>si</videotutorial>
</tutorial>
</tutoriales>
Y ahora el código funcional:
<?xml version=”1.0″ encoding=”utf-8″?>
<mx:Application xmlns:mx=”http://www.adobe.com/2006/mxml” layout=”absolute”><mx:HTTPService id=”servicio” url=”ver-tutoriales.xml”/>
<mx:Panel layout=”absolute” left=”30″ top=”30″ bottom=”100″ right=”30″>
<mx:DataGrid x=”10″ y=”90″ height=”100%” width=”100%” dataProvider=”{servicio.lastResult.tutoriales.tutorial}”>
<mx:columns>
<mx:DataGridColumn headerText=”Titutlo” dataField=”titulo”/>
<mx:DataGridColumn headerText=”nivel” dataField=”nivel”/>
<mx:DataGridColumn headerText=”videotutorial” dataField=”videotutorial”/>
</mx:columns>
</mx:DataGrid>
<mx:Button x=”235″ y=”10″ label=”Cargar” click=”servicio.send();”/>
</mx:Panel></mx:Application>
Las partes importantes del código de Flex para leer este archivo xml son las siguientes:
primero el dataProvider (proveedor de datos):
<mx:DataGrid x=”10″ y=”90″ height=”100%” width=”100%” dataProvider=”{servicio.lastResult.tutoriales.tutorial}”>
al cual se le pasa la estructura del archivo recogido con el HTTPService con el id llamado “servicio” este toma el resultado (lastResult) a partir del nodo tutoriales.tutorial, si vemos el archivo xml podemos observar que la estructura en donde nos situamos será para leer el titulo, nivel y videotutorial. Esa parte viene en los DataGridColumn pasandole como propiedad dataField los diferentes nombres de las etiquetas, es decir, el titulo, nivel y videotutorial.
<mx:DataGridColumn headerText=”Titutlo” dataField=”titulo”/><mx:DataGridColumn headerText=”nivel” dataField=”nivel”/><mx:DataGridColumn headerText=”videotutorial” dataField=”videotutorial”/>
Luego simplemente un botón
<mx:Button x=”235″ y=”10″ label=”Cargar” click=”servicio.send();”/>
que llama al servicio en el evento click.
En este caso damos solución para leer un archivo xml y cargarlo directamente en un DataGrid de flex, sin embargo, se puede cargar en un ArrayCollection o un List, si tuvieramos que tratar esa información, pero vamos de a poco. Ya os iré poniendo en la web la forma de ir cargando los diferentes nodos, etc.
Pues nada más, espero que os sirva, ya sabeis que podeis comentar si teneis alguna duda.
Un saludo!
Comments
Hola, tengo un problema al manipular un XML y no he encontrado algo similar que me puda ayudar.
Utilizo URLLoader para cargar mi xml
var xmlLoader:URLLoader = new URLLoader(xmlString);
xmlLoader.addEventListener(“complete”, readXml);
despue slo paso a un avariable de tipo XmlList y lo rrecorro y lo llevo a mi datagrid, pero ….
var markersXML:XML = new XML(event.target.data);
var rss:XMLList = markersXML..marcas;
var markersCount:int = rss.length();
var i:Number;
for (i=0; i < markersCount; i++) {
var markerXml:XML = rss[i];
var name:String = markerXml.hosp;
var address:String = markerXml.tel;
var type:String = markerXml.tipo;
var latlng:LatLng = new LatLng(markerXml.long, markerXml.lat);
var marker:Marker = createMarker(latlng, name, address, type);
map.addOverlay(marker);
acMarkers.addItem({hosp: name, Clue: address, tipo:type,coor:latlng});
}
dg.dataProvider =acMarkers;
}
PERO YO QUIERO QUE DESDE UN RADIOBUTTON, el usuario desee mostrar solo una seleccion o bueno solo ciertos registros del xml, esta vez no todos.
Lo que no se es como pasar los datos de mi xml cargado, hacia otra funcion que sera llamada por medio del RadioButton, como retomo el xml leido en un XMLList y lo reccorro nuevamente para solo llevar al datagrid los que cumplen con la condición?
Si me explique?
me pueden ayudar por favor
gracias de antemano.
Buenas Norma,
Pues tal y como haces en el bucle para insertar los valores, solo debes preguntar antes si se cumple o no la condicion que tengas seleccionado en el radio o en el check button, si se cumple lo añade, sino, salta al siguiente registro del xml, y una vez rellenado el Array, se lo pasas al dataprovider del datagrid.
Por ejemplo:
var markersXML:XML = new XML(event.target.data);
var rss:XMLList = markersXML..marcas;
var markersCount:int = rss.length();
var i:Number;
for (i=0; i < markersCount; i++) {
if (OpcionRadio == 1) {
var markerXml:XML = rss[i];
var name:String = markerXml.hosp;
var address:String = markerXml.tel;
var type:String = markerXml.tipo;
var latlng:LatLng = new LatLng(markerXml.long, markerXml.lat);
var marker:Marker = createMarker(latlng, name, address, type);
map.addOverlay(marker);
acMarkers.addItem({hosp: name, Clue: address, tipo:type,coor:latlng});
}
}
dg.dataProvider =acMarkers;
}
Solo faltaría hacer una llamada a la función que contenga ese código desde el change del radiobutton para que se actualizara al momento.
No sé si te refieres exactamente a eso. Si no es así, estoy aquí para cualquier consulta.
De todas maneras estás declarando variables dentro de un bucle, algo que no te aconsejo, aún sin dar errores Flex, es mejor declarar fuera y asignar dentro del bucle. De la manera que hemos puesto el código en cada vuelta del bucle estariamos declarando i veces la variable…
Un saludo!
Como se podria integrar una paginación a este ejemplo,
gracias
Buenas Gerardo, se me ocurren dos maneras de hacer la paginación.
La primera es si el xml lo estás generando con php, pues ir haciendo pequeñas llamadas desde un punto de la tabla en mysql sería utilizando limit.
La segunda forma sería recorriendo el httpservice, en este caso servicio e ir dando saltos con un bucle, es decir, en vez de asignarselo a un dataprovider de un objeto, recorrer este objeto que se crea a la carga del xml. En nuestro caso utilizamos desde el nodo servicio.lastResult.tutoriales.tutorial.
Si tienes más dudas, comenta!
Un saludo!
Hola muchas gracias por leerme, tengo una duda que no logro encontrarle solucion… como puedo leer un http service que trae un xml para ir leyendo los nodos y ese valor de cada nodo asignarlo a un textbox. mil gracias!!!
En principio la lectura es exactamente igual, lo único es utilizar el datafield de un textbox y asignarselo
Holas, un favor grande. Podrias publicar tb. la explicacion de como llenar los datos del xml a un arrayCollection.?? ya que para generar una grafica LineChart debo enviarle un ArrayCollection… y los datos lo tengo en un archivo xml… te agradeceria tu respuesta..
Uy, llevo años sin programar en Flex, pero creo recordar que se lo podías pasar a pelo, es decir, si ahora para rellenar el datagrid hacemos esto:
dg.dataProvider =acMarkers;
Para rellenar el arrayColection, solo tendrás que declararlo con los parámetros necesarios y pasarle los datos del acMarkers;
Hola, soy aprendíz de Flex y me gustaria me ayudaran con RadioButton como le hago para pasar el valor a httpservice, busque en google sin exito, agradecere ayuda. pego mi codigo, deseo seleccionar alta, baja y modificaciones
{dusuario.text}
{dclave.text}
{usu.text}
{dnivel.text}
Buenas Alex, siento decirte que hace años que no toco Flex y no recuerdo exáctamente como trabajar con él.
Lo siento.