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!

Te puede interesar:

10 comentarios

  • Norma commented on 13 mayo, 2010 Reply

    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.

    • VideoTutoriales commented on 13 mayo, 2010 Reply

      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!

  • gerardo commented on 16 noviembre, 2010 Reply

    Como se podria integrar una paginación a este ejemplo,

    gracias

    • VideoTutoriales commented on 18 noviembre, 2010 Reply

      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!

  • Karen commented on 4 julio, 2011 Reply

    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!!!

    • VideoTutoriales commented on 5 julio, 2011 Reply

      En principio la lectura es exactamente igual, lo único es utilizar el datafield de un textbox y asignarselo

  • Nataly commented on 12 septiembre, 2012 Reply

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

  • VideoTutoriales commented on 12 septiembre, 2012 Reply

    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;

  • Alex commented on 24 marzo, 2014 Reply

    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}

    • videotutoriales commented on 24 marzo, 2014 Reply

      Buenas Alex, siento decirte que hace años que no toco Flex y no recuerdo exáctamente como trabajar con él.

      Lo siento.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *