5

scris de:
Peter

Adobe Air simple RSS Reader

13.04.09

Simple RSS ReaderThis new tutorial is about loading and parsing a rss 2.0 feed (in this case the feed from our blog). For this tutorial you will need Adobe Flash and Adobe AIR. So, what is an RSS feed? With a little search on wikipedia you can find the answer to this question:

RSS (an abbreviation for Really Simple Syndication) is a family of Web feed formats used to publish frequently updated works—such as blog entries, news headlines, audio, and video—in a standardized format… more information here.

This is how the finished application will look like:

Adobe Air simple RSS reader

To get things  started I have created a new air file and drew the above graphics. The band at the top of the application holds the title of the post,  is a MovieClip with an instance name of “post” and inside it there is a dynamic textField with an instance name of “the_title”.  The black MovieClip that holds the text of the post has an instance name of “all” and inside it there is a dynamic textField with an instance name of “descrip”.You can get the starter files here.

Let’s add the first lines of code:
//we declare our variables
var loader:URLLoader = new URLLoader();
var xml:XML;
//this will hold all the information
//we need about the feed

var posts:Array=new Array();
//this will remember which post we are reading
var cur_comm:uint=0;
//this tells if the title is scrolling
var scrolling:Boolean=true;
//the maximum scroll x position
var relx:Number=0;

Now let’s add the event listeners that we need:
//listener for the rss feed
loader.addEventListener(Event.COMPLETE, onLoaded);
//when you Mouse Down on the title area
//you can drag the application

top.addEventListener(MouseEvent.MOUSE_DOWN,misca);
//listener for the close button
cls.addEventListener(MouseEvent.CLICK,closeapp);
//the listener that will scroll our title
top.addEventListener(Event.ENTER_FRAME,scroll_text);
cls.buttonMode=true;
top.the_title.autoSize="left";

Now to create the timer that will display the posts from our feed:
//the timer expects time in milliseconds, 1000 milliseconds =1 sec
var timerObject:Timer = new Timer(10000);
//at each 10 seconds it will change the post that we are viewing
timerObject.addEventListener(TimerEvent.TIMER, start_comments);

Now we create the function that parses the feed, just like an xml file:
//the function that will parse the rss
function onLoaded(e:Event):void{
xml = new XML(e.target.data);
//all the information that we need
//is located in the root.channel.item node
//of the feed

var il:XMLList=xml.channel.item;
for(var i:uint=0;i
//create a new object
var obj:Object=new Object();
//get the link for the full post
obj.link=il[i].link.text();
//get the title of the post
obj.title=il[i].title.text();
//get the description of the post
obj.descr=il[i].description.text();
//add the object in our array
posts.push(obj);
}
//we start our timer object
timerObject.start();
//we add our first post in the textFields
all.descrip.htmlText=unescape(posts[0].descr);
top.the_title.text=posts[0].title;
//create a new timer object, that refreshes
//the feed every 10 minutes

var timerObject2:Timer = new Timer(600000);
timerObject2.addEventListener(TimerEvent.TIMER, refresh_feed);
timerObject2.start();
//we add the event listener that handles
//the clicks on out description

all.addEventListener(MouseEvent.CLICK,go_page);
}

//we load the feed
loader.load(new URLRequest("http://jurnal.tripmedia.ro/feed"));

Now create the function that changes thepost that we are showing every 10 seconds:
function start_comments(e:TimerEvent):void{
//every time the timer reaches
//10 seconds we change the post
//that we are viewing

cur_comm++;
if(cur_comm>posts.length-1){
cur_comm=0;
}
all.descrip.htmlText=unescape(posts[cur_comm].descr);
top.the_title.text=posts[cur_comm].title;
}

Now the function that refreshes the feed every 10 minutes is actualy realoading the feed all over again:
function refresh_feed(e:TimerEvent):void{
loader.load(new URLRequest("http://jurnal.tripmedia.ro/feed"));
}

Next step is to create the function that will handle the closing of the application, the dragging of the application and the click that opens the web browser to read the full post :
function misca(evu:MouseEvent):void{
this.stage.nativeWindow.startMove();
}

function closeapp(e:MouseEvent):void {
NativeApplication.nativeApplication.exit();
}

function go_page(e:MouseEvent):void{
var req:URLRequest=new URLRequest(posts[cur_comm].link);
navigateToURL(req,"_self");
}

And now our final function, the function that handles the scrolling of the title if it is too long to fit in our application:

function scroll_text(e:Event):void{
//we calculate the maximum x scroll
//to the left

relx=-(top.the_title.width-172);
//we scroll the text only if there are more
//than 28 characters in it, if you are
//wondering why 28? well 28 is the maximum
//number of characters that the user can
//see because of the the dynamic textField

if(top.the_title.length>28){
//if it is scrolling to the left
if(scrolling){
top.the_title.x-=0.3;
//if the title is lower than relx
//we move tot the right

if(top.the_title.x<relx){
scrolling=false;
}
}else if(!scrolling){
top.the_title.x+=0.3;
if(top.the_title.x>0){
scrolling=true;
}
}
}
}

You can download the finished application here. Or you can download the AIR Installer file here. From this example you can build you own rss reader application, there might be a couple of extensions to this app: letting the user input his own feed location, reading and displaying more feeds at once, alarm the user that there is a new feed, managing the feed where you can save all your feeds and cycle through them and many other features. Feel free to use the code as you like and share with us what you have created.

1 comentariu        legatura permanenta, flux RSS comentarii
  1. JAY says:

    Hi, thanks for this tutorial. I will definitely going to try it.

Comentarii

Email-ul tau nu va fi publicat. Numele si email-ul sunt obligatorii.