1. Add New View Controller

We want to first add a new View Controller that will hold the Web View. This can be done by dragging View Controller from object browser over to the storyboard. Once added, we want to push this new view controller when each Collection View Cell is clicked. First, drill down to the Collection View Cell, view connection inspector, and drag the selection under triggered segues over to the new view controller. Repeat this last step for the other Collection View Controller’s Collection View Cell.

Now, whenever a cell is clicked, it will push this new view controller to the Navigation Controller stack.

2. Add Web View to the View Controller

Go back to the object browser and drag it under the main view of our newly added View Controller.

We now need to create a custom view controller class that will enable us to control what to display in this web view. Following prior tutorial, add a new class named “JSTRBrowserViewController” that’s a subclass of “UIViewController”. Then, expose 2 properties, one for the web view component and the other to hold the target URL.

#import <UIKit/UIKit.h>

@interface JSTRBrowserViewController : UIViewController

@property (retain, nonatomic) IBOutlet UIWebView *webView;
@property (retain, nonatomic) NSString *targetURL;

@end

Since the target url is not a visual component, it does not need the keyword “IBOutlet”. It will be only used to set the target url from the collection view controller when user clicks on the cell. This will require us to synthesize targetURL on the implementation class. Let’s also implement the loading of our target url for the web view component

#import "JSTRBrowserViewController.h"

@implementation JSTRBrowserViewController

@synthesize targetURL;

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

- (void)viewDidLoad
{
  [super viewDidLoad];
  // Do any additional setup after loading the view.
  NSURL *url = [[NSURL alloc] initWithString:targetURL];
  NSURLRequest *request = [[NSURLRequest alloc] initWithURL:url];

  [self.webView setScalesPageToFit:YES];
  [self.webView loadRequest:request];
}

- (void)didReceiveMemoryWarning
{
  [super didReceiveMemoryWarning];
  // Dispose of any resources that can be recreated.
}

@end

In our viewDidLoad method, we use the targetURL to construct an instance of NSURL. Then, we construct the NSURLRequest from and message webView to load this request on load.

Now that we have our custom class, click the recently added view controller from above, go to identity inspector, and update the class from UIViewController to JSTRBrowserViewController. Then, go to connection inspector, and drag the webView outlet over to Web View component within the latest view controller.

3. Setting Target URL

To set the target URL, we need to implement the prepareForSegue:sender method. This is similar to .NET winform event handler. This method will be called prior to performing the connection segue.

- (void)prepareForSegue:(UIStoryboardSegue *)segue sender:(id)sender
{
  JSTRCollectionViewCell *selectedCell = (JSTRCollectionViewCell *)sender;
  JSTRBrowserViewController *targetVC = (JSTRBrowserViewController *) [segue destinationViewController];
  targetVC.targetURL = selectedCell.targetURL;
}

Since we know the destination of our segue will be JSTRBrowserViewController, we cast the destinationViewController and set the targetURL. Additionally, since we now have a new reference, import this new header: JSTRBrowserViewController.h.

But wait, I don’t have a property called targetURL on my JSTRCollectionViewCell! We need to add this property to the bottom of our JSTRCollectionViewCell header file and synthesize it on the implementation class.

#import <UIKit/UIKit.h >

@interface JSTRCollectionViewCell : UICollectionViewCell

@property (retain, nonatomic) IBOutlet UILabel *title;
@property (retain, nonatomic) IBOutlet UILabel *category;
@property (retain, nonatomic) IBOutlet UILabel *summary;
@property (retain, nonatomic) IBOutlet UIImageView *avatar;
@property (retain, nonatomic) IBOutlet UIImageView *thumbnail;
@property (retain, nonatomic) NSString *targetURL;

@end

Then, we need to set this for each and every cell that we display in our app by updating collectionView:cellForItemAtIndexPath method.

- (UICollectionViewCell *) collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath
{
  JSTRCollectionViewCell *cell = [collectionView dequeueReusableCellWithReuseIdentifier:@"articleCell"
forIndexPath:indexPath];
  NSDictionary *item = [_articleList objectAtIndex:indexPath.item];

  NSURL *userImgURL = [NSURL URLWithString:[item objectForKey:@"userimage"]];
  NSData *userImgData = [NSData dataWithContentsOfURL:userImgURL];
  UIImage *userImage = [UIImage imageWithData:userImgData];
  [cell.avatar setImage:userImage];

  cell.title.text = [NSString stringWithFormat:@"%@\n\n\n\n", [item objectForKey:@"title"]];

  NSArray *catList = [item objectForKey:@"category"];
  NSString *catString = [catList componentsJoinedByString:@", "];
  cell.category.text = [NSString stringWithFormat:@"%@", catString];
  cell.summary.text = [NSString stringWithFormat:@"%@\n\n\n\n\n\n\n\n\n", [item objectForKey:@"description"]];

  NSURL *thumbImgURL = [NSURL URLWithString:[item objectForKey:@"thumbnail"]];
  NSData *thumbImgData = [NSData dataWithContentsOfURL:thumbImgURL];
  UIImage *thumbImage = [UIImage imageWithData:thumbImgData];
  [cell.thumbnail setImage:thumbImage];

  cell.targetURL = [item objectForKey:@"link"];

 return cell;
}

As you can see, prior to our return call in this method, we retrieve the link from our dictionary representing the article from the RSS. Now that the cell has been set, our segue can extract it from the source cell that’s been click and pass it to the target view controller that holds the web view.

4. Run it

Now, when you run your app, clicking on the cell on the simulator will push a new view controller. Since we’re using navigation controller, adding a new view controller will automatically add the back button for us on the navigation bar.

By default, if the prior navigation bar has no title, then the button will be rendered with “Back”. However, had we named the title bar of our prior navigation bar as “Featured Links”, then our back button would have had the label of “Featured Links”.

This concludes this tutorial series. I have intentionally did not implement Recent Link Collection View. Using the Featured Link Collection View, this should be fairly easy to figure out. You will need to refactor JSTRRSSReader class to handle both Featured and Recent Links. Currently, it’s hard coded to only retrieve Featured. The app that’s actually published has it fully implemented with ability for users to vote. As of May 25, it is currently under review by Apple. I’ll update this post when it does go live. Xcode project with source code for these tutorial can be downloaded from here.

Storyboard is a feature built into Xcode that represents the screens in an app and the transitions between them. It is similar to Interface Builder with the added advantage of defining transitions. If you have done any WinForm development, both storyboard and interface builder concepts will be easy to understand. If you’re coming from Java AWT and/or swing, concepts may be very foreign to you. Luckily, Google did manage to improve UI development on the android platform. Too bad, it wouldn’t replace swing anytime soon. Once you get used to it, you’re really going to hate developing UIs in Java AWT and/or swing. I certainly did.

Now that I got my dig on Java swing and AWT, let’s leverage the mockups we’ve created from our earlier tutorial: Putting Pen to Paper.

1. Create Storyboard
Right-click “DZone RSS” group under project DZone RSS and select “New File…”. In the “choose a template for your new file”, select “User Interface” on left panel, “Storyboard” on right panel, and click next. Leave Device Family option as “iPhone” and click Next. Name the storyboard as “MainStoryboard” under “Save As” field and click “create”. MainStoryboard should now appear under “DZone RSS” group.

2. Add Navigation Controller

The starting controller for our application will be the UINavigationController. With UINavigationController, we can stack many types of ViewControllers on top of it. In our case, as described in earlier post, UITabbarController will be stacked on top next.

To add UINavigationController, simply drag Navigation Controller from the object browser on your right bottom corner to the storyboard. By default, the root view controller will be UITableViewController. Since we will be using UITabbarController, you can select “Table View Controller – Root” and delete it.

On the Attribute Inspector, you’ll notice “Is Initial View Controller” checked. Only one ViewController within the storyboard can have this checked. This will inform our application which view controller should be loaded first on startup.

2. Add Tab Bar Controller

From the object browser, drag Tab Bar Controller to Storyboard. By default Tab Bar Controller comes with two UIViewControllers. However, we don’t want UIViewControllers. We want UICollectionViewController instead so select and delete each of the view controller attached to Tab Bar Controller.

Now drag two Collection View Controllers to the storyboard. Select Tab Bar Controller from storyboard and go to Connections inspector. Select the outlet next to view controllers under Triggered Segues and drag it over to the top Collection View Controller.

Repeat this for the second collection view. Now, click on Navigation Controller, select “root view controller” outlet and drag it over to Tab Bar Controller. It should now look like below.

Since our Tab Bar is black, we need to change the navigation bar to black as well. While Navigation Controller is selected, go to Attribute inspector and change the Top Bar from “Inferred” to “Back Navigation Bar”.

Now that we have our segues defined for the tabs, let’s change the icon on the tab bar. If you have your document outline closed, open them by clicking on the left corner. Expand the first Collection View Controller Scene and select Tab Bar Item. Then, go to Attribute inspector. If the selected Tab Bar Item from document outline is pointing to the bottom collection view on the storyboard, change the identifier from “Custom” to “Most Recent”. Otherwise, change it to Featured.

Repeat this for the other Collection View Controller.

Let’s take a moment and run what we have. But first, we need to delete some code from JSTRAppDelegate.m and update our project setting. First, click on DZone RSS project. Under targets, select DZone RSS and go to Summary tab. Under iPhone / iPod Deployment Info, select “MainStoryboard” next to the “Main Storyboard” field.

Next, open JSTRAppDelegate and delete everything in the method application:didFinishLaunchingWithOptions except for the following lines.

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
  JSTRRSSReader *reader = [[JSTRRSSReader alloc] init];
  [reader startRequest];

  return YES;
}

Since our storyboard will handle launching of the Main View Controller, we don’t need to instantiate the UIWindow in our code and make it visible. On run, we now have our app with navigation bar and tab bar with two items.

You may be asking why I choose to use Collection View over Table View. The main reason is that I want to reuse many of my UI components for the iPad version of this app. With Collection view, I can define and reuse my Collection Cell so that they appear in multiple columns and rows as oppose to single column cells in a table view. In iPad view, a single column view is a waste of space. It’s a design decision that you too have to make when you start implementing your own app.

3. Define Collection Cell Layout

From Collection View Controller we will use as “Feature” tab, select the child component named “Collection View”. On the right panel, go to Size inspector and update the Collection View Size details. We want our cell to be 314 by 314.

Select the child component under Collection View named “Collection View Cell” and add the following components:

• drag a View from Object browser to be used as background tile (size: 275 x 290; bound to x=30 & y=10). Set the background color to RBG value of 172, 204, and 252.
• drag 2 ImageViews from Object browser to be used as avatar (size: 24x 24; bound to x=0 & y=0) and thumbnail (size: 120 x 90; bound to x=194 & y=0)
• drag 3 Labels from Object browser to be used as title (size: 115 x 60; bound to x=34 & y=10), category (size: 155 x 20; bound to x=34 & y=70), and summary (size: 267 x 177; bound to x=34 & y=90)

Once you’ve updated the size attributes, we need to make small changes to our UILabel components: title, category, and summary. Under attribute inspector, we want title to have font sized to 12, lines set to 3, and line breaks to “Word Wrap”. For category, font sized to 10. For summary, font sized to 14, lines to 9, and Line Breaks set to “Word Wrap”. This will enable our app to properly layout our text on screen.

The final layout should the below screenshot.

4. Create a Custom Collection Cell Class

In order to assign values to these components, we need to create a custom class. Following earlier tutorial, create a group called “UI” and associate it to a specific file system folder UI. Then, add a new file called JSTRCollectionViewCell, a subclass of UICollectionViewCell, to this group. This will be a simple class with 5 outlets. We will only modify the header file and leave the implementation class as is.

#import <UIKit/UIKit.h>

@interface JSTRCollectionViewCell : UICollectionViewCell

@property (retain, nonatomic) IBOutlet UILabel *title;
@property (retain, nonatomic) IBOutlet UILabel *category;
@property (retain, nonatomic) IBOutlet UILabel *summary;
@property (retain, nonatomic) IBOutlet UIImageView *avatar;
@property (retain, nonatomic) IBOutlet UIImageView *thumbnail;

@end

From the storyboard, select the Collection View Cell, show identity inspector, and update Class name from UICollectionViewCell to JSTRCollectionViewCell.

When you click on connection inspector, you’ll see the 5 outlets defined in your custom class. For each outlet, select and drag it over to their relevant component. Below, I am dragging the avatar outlet to top left corner where I want my image to reside.

Finally, I need to specify the reusable view identifier. This identifier will be used by the Collection View Controller to retrieve and instance of this cell so that we can assign data to them. To do this, go to the attribute inspector and set the identifier to “articleCell”.

5. Create a Custom Collection View Class

Like custom collection cell, we now need a custom collection view controller class. This class will be used to retrieve the parsed RSS file from the file system and populate each cell that’s rendered within collection view controller.

Once again, add a new file called “JSTRCollectionViewController”, a subclass of UICollectionViewController, to the “UI” group. There’s one delegate we must define in our header for our custom class: UICollectionViewDataSource. Additionally, we want to create an instance variable to hold the content of our parsed RSS file.

#import <UIKit/UIKit.h>

@interface JSTRCollectionViewController : UICollectionViewController <UICollectionViewDataSource>
{
  NSMutableArray *_articleList;
}

@end

First, let’s retrieve the content of the parsed RSS file when our UI component becomes visible by updating viewDidLoad method. Additionally, since we are referencing JSTRRSSUtil class, don’t forget to import this class.

- (void)viewDidLoad
{
  [super viewDidLoad];

  // Do any additional setup after loading the view.
  NSString *fileName = [NSString stringWithFormat:@"%@/popular.rss", [JSTRRSSUtil getDocumentRoot]];
  _articleList = [NSArray arrayWithContentsOfFile:fileName];
}

Next, we need to implement the required UICollectionViewDataSource protocols.

#pragma mark - UICollectionViewDataSourceDelegate
- (NSInteger) numberOfSectionsInCollectionView:(UICollectionView *)collectionView
{
  return 1;
}

The above method numberOfSectionsInCollectionView tells our collection view controller, how many sections we will have. In our case, it will be one. Note, had we decided not to use Tab Bar Controller and displayed both Featured and Latest Links on a single collection view controller, we could have done so by having 2 sections.

In our next method, we inform our collection view controller how many items will be in the selected section. Since we only have one section, I don’t need to know the value of the parameter section. I just return the size of our array of articles.

- (NSInteger) collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section
{
  return [_articleList count];
}

Finally, we retrieve each cell within our section and populated it. In the first line, you’ll notice the same value “articleCell” I provided as our reusable identifier in prior step. Using dequeueReusableCellWithReuseIdentifier, an instance of the cell defined by our indexPath is returned. I then assign the necessary values of the cell’s components via the already defined outlets. Additionally, since we have a reference to JSTRCollectionViewCell, don’t forget to import this header.

- (UICollectionViewCell *) collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath
{
  JSTRCollectionViewCell *cell = [collectionView dequeueReusableCellWithReuseIdentifier:@"articleCell"
forIndexPath:indexPath];
  NSDictionary *item = [_articleList objectAtIndex:indexPath.item];

  // retrieve the URL of user's avatar and assign it to the UIImageView
  NSURL *userImgURL = [NSURL URLWithString:[item objectForKey:@"userimage"]];
  NSData *userImgData = [NSData dataWithContentsOfURL:userImgURL];
  UIImage *userImage = [UIImage imageWithData:userImgData];
  [cell.avatar setImage:userImage];

  // set the text of title UILabel
  cell.title.text = [NSString stringWithFormat:@"%@\n\n\n\n", [item objectForKey:@"title"]];

  // since category is an array, join it into a string separated by comma
  NSArray *catList = [item objectForKey:@"category"];
  NSString *catString = [catList componentsJoinedByString:@","];
  cell.category.text = [NSString stringWithFormat:@"%@", catString];

  // set the text of summary UILabel
  cell.summary.text = [NSString stringWithFormat:@"%@\n\n\n\n\n\n\n\n\n", [item objectForKey:@"description"]];

  // retrieve the URL of thumbnail and assign it to the UIImageView
  NSURL *thumbImgURL = [NSURL URLWithString:[item objectForKey:@"thumbnail"]];
  NSData *thumbImgData = [NSData dataWithContentsOfURL:thumbImgURL];
  UIImage *thumbImage = [UIImage imageWithData:thumbImgData];
  [cell.thumbnail setImage:thumbImage];

  return cell;
}
@end

Last but not least, we need to assign this custom class to the Collection View Controller. Similar to Collection View Cell, select the Collection View Controller and update the custom class in the identify inspector to JSTRCollectionViewController from UICollectionViewController

6. Let’s Run

When you run now, the RSS content will appear in our app. Granted, we haven’t implemented the latest links tab but you should have the following appear.

Currently, this app uses system font. You can change the front by selecting each UILabel control from storyboard and change the size and type from attribute inspector. Go ahead, I’ll take no offense to your customizations.

Persisting RSS Content

Following prior tutorial, let’s create a group call “Util” and associate it to a specific file system folder “Util”. Then, add a new file called JSTRRSSUtil, a subclass of NSObject, to this group. Let’s expose a convenience method in our header that will retrieve the root document folder where we can save our parsed RSS content.

#import <Foundation/Foundation.h>

@interface JSTRRSSUtil : NSObject

+ (NSString *) getDocumentRoot;

@end

In Objective-C, character “+” at the start of method declaration indicates this method is a class method. Now let’s implement our class method

#import "JSTRRSSUtil.h"

@implementation JSTRRSSUtil

+ (NSString *) getDocumentRoot
{
  // search for available path and return first
  NSArray *paths = NSSearchPathForDirectoriesInDomains(NSDocumentDirectory, NSUserDomainMask, YES);
  return [paths objectAtIndex:0];
}

@end

Now that we can retrieve our document path, let’s go back to JSTRRSSReader.m and save our content to file. Append the last 2 lines from the connectionDidFinishLoading method.

- (void)connectionDidFinishLoading:(NSURLConnection *)connection
{
  NSXMLParser *parser = [[NSXMLParser alloc] initWithData:_receivedData];
  JSTRRSSParser *rssParser = [[JSTRRSSParser alloc] init];
  parser.delegate = rssParser;
  [parser parse];

  NSMutableArray *articleList = [rssParser getParsedList];

  NSLog(@"%@", articleList);
  NSString *fileName = [NSString stringWithFormat:@"%@/popular.rss", [JSTRRSSUtil getDocumentRoot]];
  [articleList writeToFile:fileName atomically:YES];
}

In the last two lines of our method, we first construct the fully qualifying file name with the help of JSTRRSSUtil convenience method (Note, you need to import “JSTRRSSUtil.h” for this call to work) and call the writeToFile:atomically method. This will write the content of our array containing a dictionary, each representing a single article.

Run and Verify
Once you run your latest changes, if all works out, your simulator should have written the content of RSS to disk. As the simulator uses your local disk, you can easily verify this by navigating to ~/Library/Application Support/iPhone Simulator/<<simulator version>>/Applications/<<auto generated GUID>>/Documents. In documents Folder, you’ll see our popular.rss file. The content of this file too will be in JSON format and will be safe to open.

<item>
<title>In case of emergency, System.exit</title>
<link>http://feeds.dzone.com/~r/dzone/frontpage/~3/iD_9xik5E6E/in_case_of_emergency_systemexit.html</link>
<description>Article covering the System.exit method and why it is advisable to avoid using it unless absolutely necessary.</description>
<category>java</category>
<category>methodology</category>
<category>opinion</category>
<category>usability</category>
<pubDate>Fri, 17 May 2013 10:37:20 GMT</pubDate>
<guid isPermaLink="false">http://www.dzone.com/links/970253.html</guid>
<dc:creator>KieranF</dc:creator>
<dc:date>2013-05-17T10:37:20Z</dc:date>
<content:encoded><![CDATA[<a href='http://www.dzone.com/links/r/in_case_of_emergency_systemexit.html'><img src='http://cdn.dzone.com/images/thumbs/120x90/970253.jpg' style='width:120;height:90;float:left;vertical-align:top;border:1px solid #ccc;' /></a><p style='margin-left: 130px;'>Article covering the System.exit method and why it is advisable to avoid using it unless absolutely necessary.<br/><br/><a href='http://www.dzone.com/links/rss/in_case_of_emergency_systemexit.html'><img src='http://www.dzone.com/links/voteCountImage?linkId=970253' border='0'/></a></p><img src="http://feeds.feedburner.com/~r/dzone/frontpage/~4/iD_9xik5E6E" height="1" width="1"/>]]></content:encoded>
<dz:linkId>970253</dz:linkId>
<dz:submitDate>2013-05-17T10:09:02Z</dz:submitDate>
<dz:promoteDate>2013-05-17T10:37:20Z</dz:promoteDate>
<dz:voteUpCount>7</dz:voteUpCount>
<dz:voteDownCount>0</dz:voteDownCount>
<dz:clickCount>386</dz:clickCount>
<dz:commentCount>1</dz:commentCount>
<dz:thumbnail>http://www.dzone.com/links/images/thumbs/120x90/970253.jpg</dz:thumbnail>
<dz:submitter>
<dz:username>KieranF</dz:username>
<dz:userimage>http://www.dzone.com/links/images/avatars/1087079.gif</dz:userimage>
</dz:submitter>
<feedburner:origLink>http://www.dzone.com/links/r/in_case_of_emergency_systemexit.html</feedburner:origLink></item><item>
<title>In case of emergency, System.exit</title>
<link>http://feeds.dzone.com/~r/dzone/frontpage/~3/iD_9xik5E6E/in_case_of_emergency_systemexit.html</link>
<description>Article covering the System.exit method and why it is advisable to avoid using it unless absolutely necessary.</description>
<category>java</category>
<category>methodology</category>
<category>opinion</category>
<category>usability</category>
<pubDate>Fri, 17 May 2013 10:37:20 GMT</pubDate>
<guid isPermaLink="false">http://www.dzone.com/links/970253.html</guid>
<dc:creator>KieranF</dc:creator>
<dc:date>2013-05-17T10:37:20Z</dc:date>
<content:encoded><![CDATA[<a href='http://www.dzone.com/links/r/in_case_of_emergency_systemexit.html'><img src='http://cdn.dzone.com/images/thumbs/120x90/970253.jpg' style='width:120;height:90;float:left;vertical-align:top;border:1px solid #ccc;' /></a><p style='margin-left: 130px;'>Article covering the System.exit method and why it is advisable to avoid using it unless absolutely necessary.<br/><br/><a href='http://www.dzone.com/links/rss/in_case_of_emergency_systemexit.html'><img src='http://www.dzone.com/links/voteCountImage?linkId=970253' border='0'/></a></p><img src="http://feeds.feedburner.com/~r/dzone/frontpage/~4/iD_9xik5E6E" height="1" width="1"/>]]></content:encoded>
<dz:linkId>970253</dz:linkId>
<dz:submitDate>2013-05-17T10:09:02Z</dz:submitDate>
<dz:promoteDate>2013-05-17T10:37:20Z</dz:promoteDate>
<dz:voteUpCount>7</dz:voteUpCount>
<dz:voteDownCount>0</dz:voteDownCount>
<dz:clickCount>386</dz:clickCount>
<dz:commentCount>1</dz:commentCount>
<dz:thumbnail>http://www.dzone.com/links/images/thumbs/120x90/970253.jpg</dz:thumbnail>
<dz:submitter>
<dz:username>KieranF</dz:username>
<dz:userimage>http://www.dzone.com/links/images/avatars/1087079.gif</dz:userimage>
</dz:submitter>
<feedburner:origLink>http://www.dzone.com/links/r/in_case_of_emergency_systemexit.html</feedburner:origLink>
</item>

With objective-c foundation library, we can easily parse the above XML by simply implementing the optional methods of NSXMLParserDelegate. We will pick out only the relevant data from each item and store them in dictionary. Each item will then be added to an array to be used in our storyboarding tutorial.

NSXMLParserDelegate

Like in prior example, let’s create a group call “XML” and associate it to a specific file system folder “XML”. Then, add a new file called “JSTRRSSParser”, a subclass of NSObject, to this group. We need to update our header file to include the NSXMLParserDelegate protocol with necessary instance variables to store  xml content.

#import <Foundation/Foundation.h>

@interface JSTRRSSParser : NSObject
{
  NSMutableArray *_list;
  NSMutableDictionary *_item;

  NSMutableString *_tempStore;
  BOOL _foundItem;
}

- (NSMutableArray *) getParsedList;

@end

The array is used to store a dictionary (a.k.a hashmap) of article details. The dictionary will represent a single article. A mutable string is used to capture xml data within element. Finally, Boolean will be used to track when new article (i.e. <item> tag has appeared).

JSTRRSSParser Implementation

1. Define init method with allocating and initializing our array. As discussed in prior tutorial, we use NSMutableArray since it will be modified. We should also implement our getter method for the parsed list.

#import "JSTRRSSParser.h"

@implementation JSTRRSSParser

- (id) init
{
  self = [super init];
  if (self) {
    // custom initializer
    _list = [[NSMutableArray alloc] init];
  }
  return self;
}

- (NSMutableArray *)getParsedList
{
  return _list;
}

@end

Tip: Add pragma to logically group methods together. It’s a good practice to organize your methods. I personally

prefer to use “#pragma mark -” to add a horizontal bar and comment for Xcode breadcrumb navigation.

2. Implement parser:didStartElement:namespaceURI:qualifiedName:attributes delegate method. Add this method below the pragma mark line.

#pragma mark - implement NSXMLParserDelegate

- (void) parser:(NSXMLParser *)parser didStartElement:(NSString *)elementName 
   namespaceURI:(NSString *)namespaceURI 
  qualifiedName:(NSString *)qualifiedName 
     attributes:(NSDictionary *)attributeDict
{
  if ([elementName isEqualToString:@"item"]) {
    _item = [[NSMutableDictionary alloc]init];
    [_item setValue:[[NSMutableArray alloc] init] forKey:@"category"];
    [_list addObject:_item];
    _foundItem = YES;
  }

  if([elementName isEqualToString:@"dz:username"] ||
    [elementName isEqualToString:@"dz:userimage"] ||
    [elementName isEqualToString:@"title"] ||
    [elementName isEqualToString:@"link"] ||
    [elementName isEqualToString:@"description"] ||
    [elementName isEqualToString:@"category"] ||
    [elementName isEqualToString:@"guid"] ||
    [elementName isEqualToString:@"linkId"]||
    [elementName isEqualToString:@"pubDate"]||
    [elementName isEqualToString:@"dz:thumbnail"]||
    [elementName isEqualToString:@"dz:voteUpCount"]||
    [elementName isEqualToString:@"dz:voteDownCount"]) {
    _tempStore = [[NSMutableString alloc] init];
  }
}

This method is called by the XMLDataParser when a new tag has been discovered. When the open/start xml element <item> is discovered, we want to initialize a new dictionary to store the content of the article in a new dictionary. We also preset the dictionary value for key “category” as we can have multiple occurrence of xml element <category> (i.e. see example xml at top). Additionally, when the start xml element is any of the elements we want to store in our dictionary, we allocate a new mutable string.

Tip: Use auto complete when available, particularly with delegate methods. You’ll run lower risk of fat-fingering the wrong character and wonder why your method is not being called. Given how simple it is, why not use it and save yourself the headache of banging your head on the wall. Simply, type “-” and first couple of letters of the method you wanted to implement. In our case, it was “- p”. Once you select it and try it again, you’ll notice that implemented method will not re-appear.

Store all content between start xml element and end xml element for item’s child elements we care about by implementing parse:foundCharacters delegate method. In majority of the use cases, this method is called once. However, if content between the start and end element is too large, it will be chunked and this method will be called multiple time. For this reason, we want to append to it until end element is reached.

- (void) parser:(NSXMLParser *)parser foundCharacters:(NSString *)string {
  if (_foundItem) {
    [_tempStore appendString:string];
  }
}

Detect end xml element and store the final relevant data within xml element to dictionary. If end element is , reset our Boolean flag to detect the next article.

- (void) parser:(NSXMLParser *)parser didEndElement:(NSString *)elementName 
   namespaceURI:(NSString *)namespaceURI 
   qualifiedName:(NSString *) qName {
  if (_foundItem) {
    if([elementName isEqualToString:@"item"]) {
      _foundItem = NO;
       return; // don't preceed
    }

    // trim whitespace from left and right and replace commonly encoded html string
    NSString *content = [_tempStore stringByTrimmingCharactersInSet: [NSCharacterSet whitespaceCharacterSet]];
    content = [content stringByReplacingOccurrencesOfString:@" " withString:@""];
    content = [content stringByReplacingOccurrencesOfString:@"&" withString:@"&"];
    content = [content stringByReplacingOccurrencesOfString:@""" withString:@"\""];
    content = [content stringByReplacingOccurrencesOfString:@"­" withString:@"-"];
    content = [content stringByReplacingOccurrencesOfString:@"»" withString:@">>"];
    content = [content stringByReplacingOccurrencesOfString:@"·" withString:@"-"];
    content = [content stringByReplacingOccurrencesOfString:@"<" withString:@"<"]; 
    content = [content stringByReplacingOccurrencesOfString:@">" withString:@">"];

    if( [elementName isEqualToString:@"dz:username"] ) {
      [_item setObject:content forKey:@"username"];
    } else if( [elementName isEqualToString:@"dz:userimage"] ) {
      [_item setObject:content forKey:@"userimage"];
    } else if( [elementName isEqualToString:@"title"] ) {
      [_item setObject:content forKey:@"title"];
    } else if ( [elementName isEqualToString:@"link"]) {
      [_item setObject:content forKey:@"link"];
    } else if ( [elementName isEqualToString:@"description"]) {
      [_item setObject:content forKey:@"description"];
    } else if ( [elementName isEqualToString:@"category"]) {
      NSMutableArray *temp = (NSMutableArray *)[_item objectForKey:@"category"];
      [temp addObject:content];
    } else if ( [elementName isEqualToString:@"guid"]) {
      [_item setObject:content forKey:@"guid"];
    } else if ( [elementName isEqualToString:@"linkId"]) {
      [_item setObject:content forKey:@"linkId"];
    } else if ( [elementName isEqualToString:@"pubDate"]) {
      [_item setObject:content forKey:@"pubDate"];
    } else if ( [elementName isEqualToString:@"dz:voteUpCount"]) {
      [_item setObject:content forKey:@"voteUpCountr"];
    } else if ( [elementName isEqualToString:@"dz:voteDownCount"]) {
      [_item setObject:content forKey:@"voteDownCount"];
    } else if ( [elementName isEqualToString:@"dz:thumbnail"]) {
      [_item setObject:content forKey:@"thumbnail"];
    }
  }
}

JSTRRSSReader

Go back to our code from prior tutorial and import our new class “JSTRRSSParser.h” to “JSTRRSSReader.m”. Then, update the connectionDidFinishLoading method.

- (void)connectionDidFinishLoading:(NSURLConnection *)connection
{
  NSXMLParser *parser = [[NSXMLParser alloc] initWithData:_receivedData];
  JSTRRSSParser *rssParser = [[JSTRRSSParser alloc] init];
  parser.delegate = rssParser;
  [parser parse];

  NSMutableArray *articleList = [rssParser getParsedList];
  NSLog(@"%@", articleList);
}

The revision will instantiate a new instance of NSXMLParser with the completed data from the RSS URL response. The delegate for this parser is the class we just wrote (JSTRRSSParser). When our XMLParser parses this response body, it will call our custom class. Once completed, we now have an array list of all the article with their relevant pieces from the article item.

Run Latest Change

If all works out, when you run your program again, you’ll now see only the relevant parsed data in your console.

If the format looks familiar, that’s because it’s JSON format. Congrats! You have successfully parsed an xml content.

If you have never developed in Objective-C but did some other coding in C++ or C for example it should be pretty simple to catch up. I personally haven’t touched C or C++ since college, some 15 years ago. Even with knowledge of Java and C#, I was able to pick up Objective-C. I highly recommend reading iOS Programming: The Big Nerd Ranch Guide as well.

Create a blank project

Open Xcode from your dock. If it’s not on your dock, you can open it from Applications. Select “Create a new Xcode project” from the Welcome to Xcode screen. Choose “Empty Application” from “Choose a template for your new project” dialog. Fill out the options for your project.

• Product Name: DZone RSS
• Organization Name: <<enter your organization>>
• Company Identifier: <<enter your company identifier>>
• Class Prefix: <<enter the default prefix for your classes>>
• Devices: iPhone
• Only tick “Use Automatic Reference Counting”

When specifying a Class Prefix, I recommend coming up with your own 3-4 character prefix, especially if you plan to publish any frameworks to opensource. This is necessary as Objective-C does not have a concept C# namespace or Java package. Without a prefix, you run the risk of class name collision when 3rd party libraries. On a related note, “NS” and “UI” prefix is reserved for Apple. “NS” stands for NeXTSTEP where Objective-C was developed. It’s a holdover from when NeXTSTEP took over Apple. Yes, I said that correctly. All resemblance of Apple as we see today is the product of Steve Jobs’ vision of NeXTSTEP that was acquired by Apple.

For this initial project, we will only target iPhone. I plan to refactor this project on a separate tutorial to run on iPad. For this reason, I plan to use UICollectionViewControlller to layout the RSS article instead of the UITableViewController. This will be further discussed in Part VI: Storyboarding.

iOS Project Basics

Each project has a main.m file. Below is the application entry point.

int main(int argc, char *argv[])
{
  @autoreleasepool {
    return UIApplicationMain(argc, argv, nil, NSStringFromClass([JSTRAppDelegate class]));
  }
}

The default pricipalClassName (3rd parameter) is UIApplication. When nil is passed, the default pricipalClassName will be used. UIApplication can be subclassed if custom UIApplication is used. The 4th parameter is the app delegate class. In our case, it’s JSTRAppDelegate. If you look at the JSTRAppDelegate.h, you’ll notice that it implements the UIApplicationDelegate protocol. All methods in UIApplicationDelegate are optional. UIApplication sends messages to delegate concerning App Launch/Termination, memory warnings, changes in orientation, and becoming the active application. As I don’t like having empty methods, I tend to remove all but the application:didFinishLaunchingWithOptions method until I’m ready to implement them.

#import "JSTRAppDelegate.h"
@implementation JSTRAppDelegate

- (BOOL) application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
self.window = [[UIWindow alloc] initWithFrame:[[UIScreen mainScreen] bounds]];
self.window.backgroundColor = [UIColor yellowColor];
[self.window makeKeyAndVisible];
return YES;
}

Click run on top left and the iPhone Simulator will launch will bring you to a yellow screen. Congrats! If you’ve never

created an iPhone app before, you’ve successfully written and launched your first app, a yellow flashlight. If you have any plans to launch this application, don’t bother. The very first flashlight application and mirror was exactly this with white and black background respectively. Since then, Apple has banned these types of applications.

Setting up Groups

Although Objective-C has no concept of C# namespace or Java package, Xcode does have a concept of groups. This is particularly helpful in organizing your code base. However, creating a group does not create an associated folder for that group. If you do not bind you group to a particular folder, all your code will reside at the root of your project in the file system. If you want to keep you file system consistent with your Xcode groups, You may want to bind your group to a specific folder. This way, when a file is added, it will add the new file to the linked folder.

To create a new group under DZone RSS, hold the control key and click on “DZone RSS” group. On the context menu, select “New Group” and specify the name “Net”. Select this new group “Net”. On the right side of Xcode, under Identity section, click the white square next to grayed out word “None” (see screenshot). This will open up a dialog where you can create a corresponding folder for your group. Create a new folder called “Net” to match your group name then click “Choose”. Now, any new file added to this group will reside in the “Net” folder in the file system. We’re now ready to create a new class to interact with DZone RSS URL.

JSTRRSSReader class

Once again, hold the control key and click “Net” folder. On the context menu, select “New File…”. On “Choose a template for your new file”, select Cocoa Touch from left panel and Objective-C class on right panel. After clicking “Next”, specify the class name “JSTRRSSReader”. This class should be a subclass of “NSObject”. Click “Next” will open the file dialog to “Net”. Since we want this class to reside in “Net” folder, just click “Create”.

Our class needs to implement NSURLConnectionDataDelegate. This protocol describes methods that should be implemented to handle download data to memory. To hold this data into memory, we declare an instance variable _receivedData of type NSMutableData. It is also a good practice to prefix your instance variable with an underscore. We also need to expose the method in our interface so the caller can start the RSS request.

@interface JSTRRSSReader : NSObject <NSURLConnectionDataDelegate>
{
NSMutableData *_receivedData;
}

- (void) startRequest;

@end

By default, all foundation classes (i.e. NSData, NSString, NSArray, etc) are immutable. However, a handful of them do have mutable subclasses (i.e. NSMutableData, NSMutableString, NSMutableArray). Mutable subclasses inherit all capabilities of immutable base class with added mutable methods. Since we can be getting data in chunks/blocks, we will need to use the mutable counterpart to NSData, NSMutableData.

We now implement our class: our custom method startRequest and required NSURLConnectionDataDelegate methods.

#import "JSTRRSSReader.h"
@implementation JSTRRSSReader

- (void) startRequest
{
  NSURL *url = [[NSURL alloc] initWithString:@"http://feeds.dzone.com/dzone/frontpage?format=xml"];
  NSURLRequest *request = [[NSURLRequest alloc] initWithURL:url cachePolicy:NSURLCacheStorageNotAllowed timeoutInterval:60.0f];
  NSURLConnection *conn = [[NSURLConnection alloc]initWithRequest:request delegate:self startImmediately:YES];
  if(conn)
  {
    _receivedData = [[NSMutableData alloc]init];
  }
}

#pragma mark - NSURLConnectionDataDelegate
- (void) connection:(NSURLConnection *)connection didFailWithError:(NSError *)error
{
  NSLog(@"%@",error.description);
}

- (void) connection:(NSURLConnection *)connection didReceiveData:(NSData *)data
{
  NSLog(@"received %d bytes",data.length);
  [_receivedData appendData:data];
}

- (void)connectionDidFinishLoading:(NSURLConnection *)connection
{
  NSLog(@"%@", [NSString stringWithCString:[_receivedData bytes] encoding:NSUTF8StringEncoding]);
}

@end

In startRequest, we allocate an instance of NSURL to DZone RSS. The connection will initialize immediately. If an error occurs, connection:didFailWithError will log to console the error message. Otherwise, when data is received, connection:didReceiveData will be called where we append the data chunk/block to our instance variable _receivedData. When the request has completed, connectionDidFinishloading will be called. We will then log to console the complete response body.

Call JSTRRSSReader

Let’s now update our app delegate (JSTRAppDelegate) to make a call to DZone RSS.

#import "JSTRAppDelegate.h"
#import "JSTRRSSReader.h"

@implementation JSTRAppDelegate

- (BOOL) application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
  self.window = [[UIWindow alloc] initWithFrame:[[UIScreen mainScreen] bounds]];
  self.window.backgroundColor = [UIColor yellowColor];
  [self.window makeKeyAndVisible];

  // make RSS call
  JSTRRSSReader *reader = [[JSTRRSSReader alloc] init];
  [reader startRequest];

  return YES;
}

On run, the body of the response will now appear on your Xcode console. Congrats! you have successfully made request to a website.

Given the above, I know that I will need a tab bar to switch screens from Feature Links and Latest Links. I also want to use the navigation bar to push down another view controller to display site within my app. This will mean my root view controller should be the navigation bar with the tab bar pushed into it. Then, view controller will be pushed to display the list of articles (see below image).

Once user clicks on the article, it would then push down yet another view controller for in-app browsing. Since we’re using the navigation controller, it will automatically provide us with a back button on the in-app browsing to pop back to the article listing. For more information regarding UINavigationController, please check out iOS Developer library. In my next tutorial, I’ll walk you through creating your first app that will interact with the DZone RSS service.

For this tutorial, I’ve decided to make a DZone RSS app. This tutorial is a 7-part series:

1. The Idea
2. Putting Pen to Paper
3. Interacting with web sites
4. Parsing RSS XML
5. Persisting RSS content
6. Storyboarding
7. In-App web browsing

If you never visited DZone, I highly recommend it. It’s full of great content for software developers and architects. I visit it on a daily basis.