Lector de RSS en Flash

La presente es una guía para implementar un lector de RSS en Flash, utilizando para ello ActionScript 2.0, veremos en el ejemplo que se puede realizar muy fácilmente un mini lector de RSS, si desean agregarle mas opciones queda a la imaginación de ustedes.

Lo primero es crear un archivo llamado rss.fla con la interfaz visual para nuestro lector de RSS, para ello creamos tres campos de texto, el primero (txttitle) para el titulo del RSS, el segundo (txtdescription) para la descripcion del RSS y el tercero (txtcontent) para todo el contenido, adicionalmente hemos agregado un scroll para cuando existe gran cantidad de texto para el contenido.

rssflash.gif

En nuestro ejemplo utilizaremos como XML el RSS de este blog. Veamos la estructura de nuestro XML por que nos va a servir para el desarrollo.

[xml]


unijimpehttp://blog.unijimpe.net
ActionScript, PHP, ASP, ASP.NET, MySQL, SQL Server…
Tue, 08 Aug 2006 01:14:24 +0000 http://wordpress.org/?v=2.0.2
en




[/xml]

El siguiente paso es crear código ActionScript que se encargue de parsear el XML del RSS para posteriormente escribirlo en los campos que hemos creado. Lo primero es definir una variable que contiene el url del RSS a utilizar y luego una variable del tipo XML la cual utilizaremos para el parseo de los datos.

  1. var rssurl:String = "http://blog.unijimpe.net/feed/";
  2. var rssxml:XML = new XML();
  3. rssxml.ignoreWhite = true;
  4. rssxml.load(rssurl);
  5. rssxml.onLoad = function() {
  6.     var nodo:XMLNode = rssxml.firstChild.firstChild;
  7.     var vtit:String = "";
  8.     var vurl:String = "";
  9.     var vdes:String = "";
  10.     var vcon:String = "";
  11.     // -----------------
  12.     // codigo para parsear data
  13.     // -----------------
  14.     txttitle.htmlText = "<a href=\""+vurl+"\">"+vtit+"</a>";
  15.     txtdescription.text = vdes;
  16.     txtcontent.htmlText = vcon;
  17. }

Además de las variables antes mencionadas hemos creado cuatro variables adicionales en las cuales almacenaremos el titulo, URL, descripción y contenido del RSS, para finalmente escribirlas.

El siguiente paso una vez que ya se tiene la variable con el XML del RSS es obtener los valores necesarios, por defecto ActionScript nos permite obtener datos de un determinado nodo por el índice que indica en que posición se encuentra el nodo, pero en este caso no necesariamente los nodos estarán en en orden, para ello cada nodo posee un nombre el cual indica el contenido que posee. Entonces tenemos que recorrer todos los nodos verificando que tipo de contenido es y según ello lo asignamos a la variable adecuada.

  1. var nodo:XMLNode = rssxml.firstChild.firstChild;
  2. for (i=0; i<nodo.childNodes.length; i++) {
  3.     var snodo:XMLNode = nodo.childNodes&#91;i&#93;;
  4.     switch (snodo.nodeName) {
  5.         case "title":
  6.         vtit = snodo.firstChild.nodeValue;
  7.         break;
  8.         case "link":
  9.         vurl = snodo.firstChild.nodeValue;
  10.         break;
  11.         case "description":
  12.         vdes = snodo.firstChild.nodeValue;
  13.         break;
  14.         case "item":
  15.         vcon = vcon + getContent(snodo) + "<br><br>";
  16.         break;
  17.     }
  18. }

En el caso de que el nodo sea del tipo item llamamos a la función getContent que se encarga de parsear los datos para cada item del RSS. La función trabaja de forma semejante pues nuevamente hay que recorrer los subnodos para conocer que tipo de dato es y luego armar un texto con esta información.

  1. function getContent(vxml) {
  2.     var stit:String = "";
  3.     var surl:String = "";
  4.     var sdes:String = "";
  5.     for (j=0; j<vxml.childNodes.length; j++) {
  6.         var sxml:XMLNode = vxml.childNodes&#91;j&#93;;
  7.         switch (sxml.nodeName) {
  8.             case "title":
  9.                 stit = sxml.firstChild.nodeValue;
  10.             break;
  11.             case "link":
  12.                 surl = sxml.firstChild.nodeValue;
  13.             break;
  14.             case "description":
  15.                 sdes = sxml.firstChild.nodeValue;
  16.             break;
  17.         }
  18.     }
  19.     return "<a href='"+surl+"'><b>"+stit+"</b></a><br>"+sdes;
  20. }

Luego uniendo todas las piezas de código obtendríamos:

  1. var rssurl:String = "http://blog.unijimpe.net/feed/";
  2. var rssxml:XML = new XML();
  3. rssxml.ignoreWhite = true;
  4. rssxml.load(rssurl);
  5. rssxml.onLoad = function() {
  6.     var nodo:XMLNode = rssxml.firstChild.firstChild;
  7.     var vtit:String = "";
  8.     var vurl:String = "";
  9.     var vdes:String = "";
  10.     var vcon:String = "";
  11.    
  12.     for (i=0; i<nodo.childNodes.length; i++) {
  13.         var snodo:XMLNode = nodo.childNodes&#91;i&#93;;
  14.         switch (snodo.nodeName) {
  15.             case "title":
  16.                 vtit = snodo.firstChild.nodeValue;
  17.             break;
  18.             case "link":
  19.                 vurl = snodo.firstChild.nodeValue;
  20.             break;
  21.             case "description":
  22.                 vdes = snodo.firstChild.nodeValue;
  23.             break;
  24.             case "item":
  25.                 vcon = vcon+getContent(snodo)+"<br><br>";;
  26.             break;
  27.         }
  28.     }
  29.     txttitle.htmlText = "<a href=\""+vurl+"\">"+vtit+"</a>";
  30.     txtdescription.text = vdes;
  31.     txtcontent.htmlText = vcon;
  32. }
  33.  
  34. function getContent(vxml) {
  35.     var stit:String = "";
  36.     var surl:String = "";
  37.     var sdes:String = "";
  38.     for (j=0; j<vxml.childNodes.length; j++) {
  39.         var sxml:XMLNode = vxml.childNodes&#91;j&#93;;
  40.         switch (sxml.nodeName) {
  41.             case "title":
  42.                 stit = sxml.firstChild.nodeValue;
  43.             break;
  44.             case "link":
  45.                 surl = sxml.firstChild.nodeValue;
  46.             break;
  47.             case "description":
  48.                 sdes = sxml.firstChild.nodeValue;
  49.             break;
  50.         }
  51.     }
  52.     return "<a href=\""+surl+"\"><b>"+stit+"</b></a><br>"+sdes;
  53. }

Con lo cual obtenemos el siguiente resultado:

Cargando Flash

Como verán no es muy complicado el crear un lector de RSS, solo consiste en parsear un XML y no hemos necesitado de una clase especial para hacerlo. Finalmente les dejo los codigos fuente para que lo verifiquen.

Comentarios Total 102 comentarios


Hernan
Publicado: 09/03/2012 10:49 pm

Hola, la verdad que me sirvio muchisimo este tutorial el cual agradezco infinitamente y el ejemplo me sirvio y funcionó desde el principio, pero tendo la siguiente consulta, me gustaria publicar en el mismo cuadro noticias de dos fuentes diferentes, una es de un diario “http://feeds.feedburner.com/diarioellitoral” y las otras si serian de un rss que publicaria yo, si tuviera noticias para agregar, hay veces tengo información y noticias utiles que quisiera compartir, por lo cual ya diagrame en el fla de prueba que indique la fuente de las noticias (en este caso el diario), y en el caso que agregue información actualizaré la funte de origen segun corresponda, pero al ser dos rss diferentes, queria saber si se puede poner en el mismo recuadro de texto, intente duplicar las variables, y no me salio, otra prueba que hice fue dentro del bucle, que al terminar cambie el valor de la variable “var rssurl:String =” e intente al inicio poner los dos origenes de los rss en la misma variable, pero a mi no me salio. Si alguién me puede ayudar, se lo agradeceré mushisimo. Desde ya saludos a todos!!

David
Publicado: 03/03/2013 9:45 pm

Hola!, es genial tu tutorial!!. Lo apliqué a un archivo y funciona, carga el archivo XML pero al previsualizar veo las noticias y se ven con códigos extraños o palabras como esto:

addaadadodaodao
ronadadadadada

A alguien más le ha pasado esto?? porque crees que pueda ser¿

 

Comentar

En este blog los comentarios están moderados, serán mostrados cuando el administrador los apruebe. Por favor, evita comentarios ofensivos u obscenos por que no serán aprobados.
Si deseas publicar código fuente debes hacerlo entre las etiquedas <code> y </code>, además debes reemplazar los carácteres < por &lt; y > por &gt;.

(Requerido)

(Requerido, no será publicado)

(Requerido)

(Tags aceptados: <a> <em> <strong> <code> <ul> <li>)