Leer o cargar un archivo XML en un dataGrid de Adobe FLEX - Tutoriales y Videotutoriales en www.vertutoriales.com
 
 
Diseño de páginas web en Córdoba. Visitanos! Taller de Chapa y Pintura en Córdoba. Hnos Troncha Cartuchos reciclados en Córdoba Joyería y Platería en Córdoba - La Joya de Plata ForoHTML5 canvas Comprar este espacio por 5/mes Recetas de cocina rica y sana Comprar este espacio por 5/mes

Leer o cargar un archivo XML en un dataGrid de Adobe FLEX

abril 16, 2010 · By VideoTutoriales

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!

Más video tutoriales para que aprendas...

6 Respuestas

  1. Norma

    mayo 13th, 2010 a 6:54 am

    1

    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.

  2. VideoTutoriales

    mayo 13th, 2010 a 6:35 pm

    2

    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!

  3. gerardo

    noviembre 16th, 2010 a 2:52 am

    3

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

    gracias

  4. VideoTutoriales

    noviembre 18th, 2010 a 10:10 am

    4

    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!

  5. Karen

    julio 4th, 2011 a 11:05 pm

    5

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

  6. VideoTutoriales

    julio 5th, 2011 a 7:30 am

    6

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


Insertar al RSS los comentarios de esta entrada

Escribe tu comentario





«
»