iPhone Rss Reader App IOS Tutorial 4: Show Rss Feed in UIWebView

On August 20, 2013, in iPhone iPad Object-C, by James Liu

This is the forth iphone programming tutorial in the iPhone Rss Reader app example. In this iphone source code example, I will improve the xml parser to get more data from rss feed xml, and store them in a new value object class. When user clicks the rss title in the table view, I will use push segue to switch to a UIWebView, which will show the rss content inside.

This tutorial will update the storyboard to add a new UIViewController, and all data in this UIWebView example is generated by the previous iphone example source code. Hence, I recommend you to review the whole example tutorials as well.


In tutorial 3, I already show you the rss feed content example. It is an xml file which groups the rss content by <item> <title> <link> and <content>. You can check this link to see the rss feed data:

http://jmsliu.com/feed

To store the rss feed content, I’ve created a new value object class named RssData. It is a pure value class which only contains variables inside. Here is the example source code:

#import "RssData.h"

@implementation RssData
@synthesize title;
@synthesize link;
@synthesize content;
@synthesize publishDate;
@end

In the xml, content tag is a little bit different from any other tags. All content data is around by <![CDATA[ and ]]>. Hence, I will choose another function, foundCDATA(), to get the content data in RssXMLParser.m. Additionally, I also make a change to store the data from rss feed. In previous example, I was using NSMutableDictionary to store the title and link of the rss item. This time, I will use my new value object class. Therefore, I am using NSMutableArray instead. Let’s see the code example:

- (void) parseRssXML:(NSData *)xmldata
{
    articles = [[NSMutableArray alloc] init];
    NSXMLParser *xmlParser = [[NSXMLParser alloc] initWithData:xmldata];
    [xmlParser setDelegate:self];
    [xmlParser setShouldResolveExternalEntities:NO];
    [xmlParser parse];
}


-(void) parser:(NSXMLParser *)parser foundCDATA:(NSData *)CDATABlock
{
    if (aNode == content)
    {
        RssData *rss = [articles lastObject];
        rss.content = [[NSString alloc] initWithData:CDATABlock encoding:NSUTF8StringEncoding];
    }
}

Please pay attention on the change of articles variable, it is defined as NSMutableArray. The usage is quite different from IOS Tutorial 3.

We are getting the data ready. Next step, I will drag a new UIViewController into storyboard and put a UIWebView in the new UIViewController. This will be the view controller to show the rss feed html content. Then, I create a new class RssViewController, which will linked to the new UIViewController. Here is the example code for RssViewController.m:

@implementation RssViewController
@synthesize rssWebView;
@synthesize rssData;

- (id)initWithNibName:(NSString *)nibNameOrNil bundle:(NSBundle *)nibBundleOrNil
{
    self = [super initWithNibName:nibNameOrNil bundle:nibBundleOrNil];
    if (self) {
        // Custom initialization
    }
    return self;
}

- (void)didReceiveMemoryWarning
{
    // Releases the view if it doesn't have a superview.
    [super didReceiveMemoryWarning];
    
    // Release any cached data, images, etc that aren't in use.
}

// Implement viewDidLoad to do additional setup after loading the view, typically from a nib.
- (void)viewDidLoad
{
    [super viewDidLoad];
    NSString *htmlContent = rssData.content;
    htmlContent = [NSString stringWithFormat:@"%@<h1>%@</h1><div>%@</div>%@%@", HTML_HEADER, rssData.title, rssData.publishDate, htmlContent, HTML_FOOTER];
    [rssWebView loadHTMLString:htmlContent baseURL:nil];
}
 

- (void)viewDidUnload
{
    [self setRssWebView:nil];
    [super viewDidUnload];
    // Release any retained subviews of the main view.
    // e.g. self.myOutlet = nil;
}

- (BOOL)shouldAutorotateToInterfaceOrientation:(UIInterfaceOrientation)interfaceOrientation
{
    // Return YES for supported orientations
        return YES;
}

Now, we have to link the RssTableViewController and RssViewController with a push segue. To make the push segue working, we have to embed the RssTableViewController with UINavigation Controller. The following video will show you how to embed UIViewController with UINavigationController in the storyboard and how to create a push segue between UITableViewController and normal UIViewController.

The last step, we have to add another piece of code in RssTableViewController, so that rss reader can show the rss content in the UIWebView after we click the item in table view. Here is the code example:

-(void)prepareForSegue:(UIStoryboardSegue *)segue sender:(id)sender
{
    if([[segue identifier] isEqualToString:@"showRssSegue"])
    {
        int index = [self.tableView indexPathForSelectedRow].row;
        RssData *data = [articlesList objectAtIndex:index];
        RssViewController *rc = [segue destinationViewController];
        [rc setRssData:data];
        [rc.navigationItem setTitle:data.title];
    }
}

That’s all. Now we have finished a real iPhone app which can load and read the rss feed from a website. If you want to make some money with this app, I suggest you to add AdMob advertisement bar in the header or footer of the app. You can find this tutorial at Add Google Admob in IOS Apps

Get Full Source Code under $5.99


You will get whole iPhond Rss Reader App source code at $5.99. It is fully functional, and embedded the Google AdMob module by default. With this source code, you can do everything you want:

  • Load your website rss feed;
  • Monetize the app with your own AdMob publish id;
  • Use the source code in your own project;
  • Publish this app with your apple developer account;

10 Responses to “iPhone Rss Reader App IOS Tutorial 4: Show Rss Feed in UIWebView”

  1. WSL says:

    hi, I download the code but the build is failed because missing files: RssViewController.* and RSSData.*

    • James says:

      That’s strange. I think all these files are in the project folder. Can you find them? Then, add these file into your project. Here are the steps to adding classes in Xcode:

      • move these class files out of project folders
      • right click on the folder containing your actual project visible in the left pane of XCode 4 and add existing files
      • select your files
      • Regardless of how you do it, make sure to check the box that says “Copy item’s into destination groups folder. (If Needed)”
  2. Leon says:

    Hi, I came across your tutorial but can it be extended to have a Tableview on the home page for several different feeds? I’d like to build a rss feed app for several news sources instead of just one, as your example shows.
    In other words, the UI flow will be:-
    Homepage shows a list of RSS feeds
    Tap on one of them and it’ll show a list of news from the selected feed (as your app starts page)
    Tap once more on a particular news and it opens a UIWebView to show the news content in full.

    Thanks

  3. Tony says:

    Hello. Will the source code for this app work with the latest Xcode and ios 8?

  4. Paul says:

    Hi

    I am using a wordpress with rss image, will this be able to show my image if I buy the source code.

    I can PM you the link to my rss if you like?

Leave a Reply

WordPress Blog

Premium WordPress Themes