Appcelerator View RSS Feed

Hello all, long time, no chat, I thought I would turn around from my furlow and give a quick tutorial on creating an RSS feed reader using Appcelerator, enjoy!

I am going to, of course, use the twoappguys.com rss feed.

Remember I am not a writer!

Create a new mobile application in Titanium Developer.

I use Textmate and create a new project it works freakin sweet!

File > New Project

Drag RssReader into the project… Oh man this is looking good open up to app.js (RssReader > Resources > iphone > app.js)

Titanium makes a two tab project, and it works great right out of the box, open up titanium developer and make sure you are on RssReader Click on test & package

Press on Launch, after some wheel grinding you will get your app open

Clicking the launch causes a compile.

Here is the outcome.

Very awesome, that was easy I have my first app! but can it read rss, well, no not yet, but it will!

Let’s just make it a single tab for now, make it easier to read, lets also take out label1, we don’t need it. Let’s give the variables some meaningful names too while were at it.

After a quick cleanup, this is what we have:

Titanium.UI.setBackgroundColor('#000');
 
var tabGroup = Titanium.UI.createTabGroup();
 
var rssWindow = Titanium.UI.createWindow({
    title:'',
    backgroundColor:'#fff'
});
var rssTab = Titanium.UI.createTab({
    icon:'KS_nav_views.png',
    title:'Rss Feed',
    window:rssWindow
});
 
tabGroup.addTab(rssTab);  
 
tabGroup.open();

simple right, and don’t worry I will have a download of this at the end, so that way you can get your hands dirty.

Now lets build up some required stuff like the httpclient, the url etc.

var url="http://twoappguys.com/feed/";
var xhr = Titanium.Network.createHTTPClient();
xhr.open('GET',url);
 
Titanium.UI.setBackgroundColor('#000');
 
var tabGroup = Titanium.UI.createTabGroup();
 
var rssWindow = Titanium.UI.createWindow({
    title:'',
    backgroundColor:'#fff'
});
var rssTab = Titanium.UI.createTab({
    icon:'KS_nav_views.png',
    title:'Rss Feed',
    window:rssWindow
});
 
tabGroup.addTab(rssTab);  
 
tabGroup.open();
 
xhr.onload = function() {
	Ti.API.info(this.responseText);
};
 
xhr.send();

Okay, now we are doing something, if your at all familiar with Javascript, this should make sense to you, because an onload, means the page you loaded is loading or “has loaded”, .send() function actually sends the request, open() gets it ready, and you guessed it you can post to, but for an RSS feed, we only need a get.

Ti.API.info() makes stuff echo out to the Titanium developer screen.

ok now lets set the window title

to save on space, just know I am working inside the

xhr.onload = function() {
 
};

so to do this, we need to parse the XML, and wouldn’t you know it, Titanium has a way to do that! WOO HOO!!
Update: before I recommended using this.responseXML, today I was having an issue with Android and refreshing the table view, looks like there must be some bug in responseXML, use Ti.XML.parseString(this.responseText);

xhr.onload = function() {
	//Ti.API.info(this.responseText);
	//var xml = this.responseXML;
        var xml = Ti.XML.parseString(this.responseText);
	var channel = xml.documentElement.getElementsByTagName("channel");
	var title = channel.item(0).getElementsByTagName("title").item(0).text;
	rssWindow.title = title;
};

You now get on Launch.

Now lets parse the XML stream for fun so we are ready when needed.

add

var data = [];

to the very top of your Textmate project. This makes a global array, we will need this later

back to the xhr.onload = function() {

	var items = xml.documentElement.getElementsByTagName("item");
	for (var i=0;i
 
if you know anything about RSS feeds, you know what is going on up there, basically we are looping the entire RSS looking for any  and
&lt;link&gt; elements, great you run the app now and you see all the titles and links, this is getting fun!&lt;/p&gt;
&lt;p&gt;Lets create a row now to hold the data.&lt;/p&gt;
&lt;pre lang="javascript" line="1"&gt;
var WindowWidth = Ti.Platform.displayCaps.platformWidth; //I added this to the very top of app.js
var WindowHeight = Ti.Platform.displayCaps.platformHeight; //I added this to the very top of app.js
var row = Ti.UI.createTableViewRow({height:'auto',width:WindowWidth,top:0,hasChild: true});
&lt;/pre&gt;
&lt;p&gt;Create a label for all your post_title&lt;/p&gt;
&lt;pre lang="javascript" line="1"&gt;
var post_title = Ti.UI.createLabel({
text: this_post_title,
textAlign:'left',
left:0,
height:40,
width:'auto',
top:3,
color: 'black'
});
&lt;/pre&gt;
&lt;p&gt;Push all your data to the data array&lt;/p&gt;
&lt;pre lang="javascript" line="1"&gt;
row.add(this_post_title);
row.link = post_link;
data.push(row);
&lt;/pre&gt;
&lt;p&gt;Lets create a table view, because an RSS feed will look good with a table view.&lt;/p&gt;
&lt;pre lang="javascript" line="1"&gt;
var tv = Titanium.UI.createTableView({
	data:data,
	top:0,
	width:WindowWidth,
	height:WindowHeight
});
rssWindow.add(tv);
&lt;/pre&gt;
&lt;p&gt;Okay, Lets see what the app looks like now!&lt;br /&gt;
&lt;a href="http://twoappguys.com/?attachment_id=210" _mce_href="http://twoappguys.com/?attachment_id=210" rel="attachment wp-att-210"&gt;&lt;img src="http://twoappguys.com/wp-content/uploads/2010/08/Screen-shot-2010-08-11-at-10.35.50-AM.png" _mce_src="http://twoappguys.com/wp-content/uploads/2010/08/Screen-shot-2010-08-11-at-10.35.50-AM.png" alt="" title="Screen shot 2010-08-11 at 10.35.50 AM" width="392" height="739" class="alignnone size-full wp-image-210" /&gt;&lt;/a&gt;&lt;/p&gt;
&lt;p&gt;Looks great But when you click on the &gt; it does nothing, for this tutorial, We will just open a Webview and see what it looks like.&lt;/p&gt;
&lt;pre lang="javascript" line="1"&gt;
tListener('click',function(e) {
	Ti.API.info(e.rowData.link);
});
&lt;/pre&gt;
&lt;p&gt;We added an event listener to the table view, rowData, is something Titanium has that lets us pull out that magic "link" we made back a bit ago.&lt;/p&gt;
&lt;p&gt;Lets create a new window, with a Webview&lt;br /&gt;
I created: showweb.js this all it has in it&lt;/p&gt;
&lt;pre lang="javascript" line="1"&gt;
var win = Ti.UI.currentWindow;
var webview = Titanium.UI.createWebView({url:win.myurl});
win.add(webview);
&lt;/pre&gt;
&lt;p&gt;Then I made my event listener in app.js look like this&lt;/p&gt;
&lt;pre lang="javascript" line="1"&gt;
	tv.addEventListener('click',function(e) {
		var webwin = Titanium.UI.createWindow({
			url: 'showweb.js',
			backgroundColor: '#fff',
			myurl: e.rowData.link
		});
		rssTab.open(webwin);
	});
&lt;/pre&gt;
&lt;p&gt;That is it a functional RSS Reader in appcelerator, let's look at it in Android and iPhone&lt;/p&gt;
&lt;p&gt;iPhone:&lt;br /&gt;
&lt;a href="http://twoappguys.com/?attachment_id=211" _mce_href="http://twoappguys.com/?attachment_id=211" rel="attachment wp-att-211"&gt;&lt;img src="http://twoappguys.com/wp-content/uploads/2010/08/Screen-shot-2010-08-11-at-10.50.03-AM.png" _mce_src="http://twoappguys.com/wp-content/uploads/2010/08/Screen-shot-2010-08-11-at-10.50.03-AM.png" alt="" title="Screen shot 2010-08-11 at 10.50.03 AM" width="390" height="749" class="alignnone size-full wp-image-211" /&gt;&lt;/a&gt;&lt;/p&gt;
&lt;p&gt;&lt;a href="http://twoappguys.com/?attachment_id=212" _mce_href="http://twoappguys.com/?attachment_id=212" rel="attachment wp-att-212"&gt;&lt;img src="http://twoappguys.com/wp-content/uploads/2010/08/Screen-shot-2010-08-11-at-10.50.12-AM.png" _mce_src="http://twoappguys.com/wp-content/uploads/2010/08/Screen-shot-2010-08-11-at-10.50.12-AM.png" alt="" title="Screen shot 2010-08-11 at 10.50.12 AM" width="482" height="818" class="alignnone size-full wp-image-212" /&gt;&lt;/a&gt;&lt;/p&gt;
&lt;p&gt;Android:&lt;br /&gt;
&lt;a href="http://twoappguys.com/contact/attachment/199-autosave/" _mce_href="http://twoappguys.com/contact/attachment/199-autosave/" rel="attachment wp-att-213"&gt;&lt;img src="http://twoappguys.com/wp-content/uploads/2010/08/Screen-shot-2010-08-11-at-10.52.36-AM.png" _mce_src="http://twoappguys.com/wp-content/uploads/2010/08/Screen-shot-2010-08-11-at-10.52.36-AM.png" alt="" title="Screen shot 2010-08-11 at 10.52.36 AM" width="410" height="610" class="alignnone size-full wp-image-213" /&gt;&lt;/a&gt;&lt;/p&gt;
&lt;p&gt;&lt;a href="http://twoappguys.com/contact/attachment/199-revision/" _mce_href="http://twoappguys.com/contact/attachment/199-revision/" rel="attachment wp-att-214"&gt;&lt;img src="http://twoappguys.com/wp-content/uploads/2010/08/Screen-shot-2010-08-11-at-10.53.06-AM.png" _mce_src="http://twoappguys.com/wp-content/uploads/2010/08/Screen-shot-2010-08-11-at-10.53.06-AM.png" alt="" title="Screen shot 2010-08-11 at 10.53.06 AM" width="406" height="588" class="alignnone size-full wp-image-214" /&gt;&lt;/a&gt;&lt;/p&gt;
&lt;p&gt;That is it!&lt;/p&gt;
&lt;p&gt;Hope you enjoyed!&lt;/p&gt;
&lt;p&gt;FYI: This project took roughly a hour including writing the tutorial.&lt;/p&gt;
&lt;p&gt;&lt;a href="http://twoappguys.com/wp-content/uploads/2010/08/RssReader.zip" _mce_href="http://twoappguys.com/wp-content/uploads/2010/08/RssReader.zip"&gt;RssReader.zip&lt;/a&gt;&lt;br /&gt;
&lt;a href="http://twoappguys.com/wp-content/uploads/2011/01/RssReader11.zip" _mce_href="http://twoappguys.com/wp-content/uploads/2011/01/RssReader11.zip"&gt;RssReader.zip For Justin&lt;/a&gt;&lt;/p&gt;

Justin says: [December 30, 2010 at 11:29 am ]

Hi, thank you for the tutorial!
I’m a high school programmer and just started using Titanium.
I’m so glad that there’s just a wonderful site like this.

I just wanted to ask you something b/c this code doesn’t seem to work with
our school url = “http://troyhigh.com/apps/events/”
please, help me thank you

John says: [January 19, 2011 at 7:52 pm ]

Hey Justin sorry it took me so long to get back to you, I have uploaded RssReader11.zip it looks like your school detects mobile phones and does not let them view the rss feed all I had to do was make a fake useragent and it loaded just fine… Enjoy!

xhr.setRequestHeader(“User-Agent”, “SuperRss/1.0 By Two App Guys (support@twoappguys.com)”);

I also changed the code to parsestring

var xml = Ti.XML.parseString(this.responseText);

–John

Chris says: [April 13, 2011 at 12:52 pm ]

Great tutorial. I do have an question to see if this tutorial is right for my situation.

I have an rss feed that dynamically gets populated by a preference.

xhr.open(“GET”,”http://www.freshpointmarketing.com/iphone/objects/XML/AND.php?ID=” + storedprefid);

I get this to work but If i change the preference to another int, it does not refire.

I put a listener in there. Is there a good way to accomplish this? I have been working on this for a couple of weeks now and feel that I need someone else to help on this.

Any thought?

I can post the js if needed

Din says: [April 21, 2011 at 5:01 pm ]

Hi thanks for this.
I’ve used this to help me create a list of item.

Do you know how to ‘POST’ data to a web service created in ruby on rails. Theres loads of information regarding JSON but my web service output is in XML

Would like to hear your thoughts on this

Din

Vishnoo Rath says: [April 26, 2011 at 6:10 pm ]

Ugh! After facing multiple Exceptions on some Ti.UI.TiView Cast exceptions, I guess the lines

row.add(this_post_title);
row.link = post_link;
data.push(row);

The first line should read :-
row.add(post_title); //The Label Object and not a Text Object
row.link = post_link;
data.push(row);

Quentin says: [July 4, 2011 at 11:30 pm ]

Thanks a lot for the tutorial. It is really useful.

I have a question, I am trying to add a refresh button on the app but I can not figure out how to do it. I tried to replicate the code from Kitchen sink, but I did not succeed. Any idea how to do this simply?

Meena says: [July 17, 2011 at 2:25 pm ]

Using explorer or firefox, I seem to be having issues viewing the part of the tutorial after this line:

Would love to finish

Thanks!

Thierry says: [August 11, 2011 at 6:03 am ]

Great tutorial
It’s possible to add image of RSS ?
i’ve trying, but it doesn’t work.

________________________________________
xhr.onload = function() {
var xml = Ti.XML.parseString(this.responseText);
var channel = xml.documentElement.getElementsByTagName(“channel”);
var title = channel.item(0).getElementsByTagName(“title”).item(0).text;
var image = xml.documentElement.getElementsByTagName(‘image’);

// recherche de l’image
// var image = channel.item(0).getElementsByTagName(“image”).item(0).image;

rssWindow.title = title;
var items = xml.documentElement.getElementsByTagName(“item”);
for (var i=0;i<items.length;i++) {
var this_post_title = items.item(i).getElementsByTagName("title").item(0).text;
var post_link = items.item(i).getElementsByTagName("link").item(0).text;
var post_media = items.item(i).getElementsByTagName("image").item(0).image;

var row = Ti.UI.createTableViewRow({leftImage:'images/arrow_left.png',height:'auto',width:WindowWidth,top:0,hasChild: true});

var item_image = Ti.UI.createImageView({
image:post_media,
left:10,
top:3,
width:57,
height:57,
borderColor:'#000',
borderRadius:3
});

xhr.send();

Appcelerator View RSS Feed

Posted by John on Aug 11, 2010, Categories: Blog

Wello says: [August 11, 2010 at 7:14 pm ]

trust says: [October 21, 2010 at 5:28 am ]

Becker says: [December 28, 2010 at 10:05 pm ]

Justin says: [December 30, 2010 at 11:29 am ]

Justin says: [December 30, 2010 at 1:34 pm ]

John says: [January 19, 2011 at 7:52 pm ]

Chris says: [April 13, 2011 at 12:52 pm ]

Din says: [April 21, 2011 at 5:01 pm ]

Vishnoo Rath says: [April 26, 2011 at 6:10 pm ]

Dinesh says: [May 28, 2011 at 9:38 pm ]

Quentin says: [July 4, 2011 at 11:30 pm ]

Meena says: [July 17, 2011 at 2:25 pm ]

Tony says: [July 17, 2011 at 4:49 pm ]

Thierry says: [August 11, 2011 at 6:03 am ]

Thierry says: [August 11, 2011 at 6:05 am ]

Leave a Reply Cancel reply

Attached Files

Post Tag's

My subscribers:

Popular Tags

Twitter Updates