iOS RSS Reader Tutorial - University of Notre Damecpoellab/teaching/cse40814/RSS-iOS.pdf · iOS RSS...

15
iOS RSS Reader Tutorial Mobile Computing CSE40814 Fall 2012 Salvador Aguiñaga

Transcript of iOS RSS Reader Tutorial - University of Notre Damecpoellab/teaching/cse40814/RSS-iOS.pdf · iOS RSS...

Page 1: iOS RSS Reader Tutorial - University of Notre Damecpoellab/teaching/cse40814/RSS-iOS.pdf · iOS RSS Reader Tutorial Mobile Computing CSE40814 Fall 2012 Salvador Aguiñaga

iOS RSS Reader TutorialMobile Computing

CSE40814Fall 2012

Salvador Aguiñaga

Page 2: iOS RSS Reader Tutorial - University of Notre Damecpoellab/teaching/cse40814/RSS-iOS.pdf · iOS RSS Reader Tutorial Mobile Computing CSE40814 Fall 2012 Salvador Aguiñaga

Tutorial Taken from:

Kieran McGradyhttp://www.kieranmcgrady.com

Tutorial: How to create a simple RSS reader for iOS

Page 3: iOS RSS Reader Tutorial - University of Notre Damecpoellab/teaching/cse40814/RSS-iOS.pdf · iOS RSS Reader Tutorial Mobile Computing CSE40814 Fall 2012 Salvador Aguiñaga

/*����������� ������������������  I����������� ������������������  will����������� ������������������  be����������� ������������������  using����������� ������������������  Xcode����������� ������������������  4.3.2����������� ������������������  and����������� ������������������  building����������� ������������������  for����������� ������������������  iOS����������� ������������������  5.0����������� ������������������  */

• Create����������� ������������������  New����������� ������������������  Project����������� ������������������  -����������� ������������������  Choose����������� ������������������  Empty����������� ������������������  Application

• Use����������� ������������������  Automatic����������� ������������������  Reference����������� ������������������  Counting����������� ������������������  ����������� ������������������  &����������� ������������������  uncheck����������� ������������������  Use����������� ������������������  Core����������� ������������������  Data

• Requirement:����������� ������������������  ����������� ������������������  Parse����������� ������������������  the����������� ������������������  RSS����������� ������������������  XML����������� ������������������  

✴ Download����������� ������������������  KMXMLParser����������� ������������������  helper����������� ������������������  files����������� ������������������  from����������� ������������������  Kieran

• Create����������� ������������������  your����������� ������������������  first����������� ������������������  View����������� ������������������  Controller

Page 4: iOS RSS Reader Tutorial - University of Notre Damecpoellab/teaching/cse40814/RSS-iOS.pdf · iOS RSS Reader Tutorial Mobile Computing CSE40814 Fall 2012 Salvador Aguiñaga

Add����������� ������������������  KMXMLParser����������� ������������������  helper����������� ������������������  files����������� ������������������  to����������� ������������������  your����������� ������������������  project

New����������� ������������������  File:����������� ������������������  MainViewController

Page 5: iOS RSS Reader Tutorial - University of Notre Damecpoellab/teaching/cse40814/RSS-iOS.pdf · iOS RSS Reader Tutorial Mobile Computing CSE40814 Fall 2012 Salvador Aguiñaga

// AppDelegate.m// MobComRssReader//// Created by Salvador Aguinaga on 9/12/12.// Copyright (c) 2012 Salvador Aguinaga. All rights reserved.//

#import "AppDelegate.h"#import "MainViewController.h"

@implementation AppDelegate

Then����������� ������������������  modify����������� ������������������  the����������� ������������������  application:����������� ������������������  didFinishLaunchingWithOptions:����������� ������������������  method����������� ������������������  as����������� ������������������  follows:

self.window = [[UIWindow alloc] initWithFrame:[[UIScreen ! mainScreen] bounds]];

// Override point for customization after application launch.self.window.backgroundColor = [UIColor whiteColor];//++//Create an instance of our MainViewController and initialize itMainViewController *vc = [[MainViewController alloc] ! initWithStyle:UITableViewStylePlain]; /*Create a navigation controller so we can manage display of multiple controllers and initialize it with our 'vc' as its' rootviewcontroller */UINavigationController *navController = ! [[UINavigationController alloc] ! initWithRootViewController:vc]; //--[self.window makeKeyAndVisible];//Set the windows rootviewcontroller as our navigation controller[self.window setRootViewController:navController]; return YES;

AppDelegate.m����������� ������������������  Modifications

Page 6: iOS RSS Reader Tutorial - University of Notre Damecpoellab/teaching/cse40814/RSS-iOS.pdf · iOS RSS Reader Tutorial Mobile Computing CSE40814 Fall 2012 Salvador Aguiñaga

After����������� ������������������  the����������� ������������������  above����������� ������������������  modifications,����������� ������������������  run����������� ������������������  the����������� ������������������  project����������� ������������������  in����������� ������������������  the����������� ������������������  simulator����������� ������������������  and����������� ������������������  you����������� ������������������  get����������� ������������������  a����������� ������������������  blank����������� ������������������  table����������� ������������������  view

We����������� ������������������  will����������� ������������������  add����������� ������������������  the����������� ������������������  links����������� ������������������  and����������� ������������������  some����������� ������������������  additional����������� ������������������  code����������� ������������������  to����������� ������������������  display����������� ������������������  the����������� ������������������  titles����������� ������������������  of����������� ������������������  the����������� ������������������  RSS����������� ������������������  feed

Page 7: iOS RSS Reader Tutorial - University of Notre Damecpoellab/teaching/cse40814/RSS-iOS.pdf · iOS RSS Reader Tutorial Mobile Computing CSE40814 Fall 2012 Salvador Aguiñaga

•Now����������� ������������������  we����������� ������������������  need����������� ������������������  to����������� ������������������  write����������� ������������������  the����������� ������������������  code����������� ������������������  to����������� ������������������  parse����������� ������������������  the����������� ������������������  XML����������� ������������������  and����������� ������������������  display����������� ������������������  the����������� ������������������  data����������� ������������������  in����������� ������������������  our����������� ������������������  table.

•Open����������� ������������������  MainViewController.h����������� ������������������  and����������� ������������������  put����������� ������������������  the����������� ������������������  following����������� ������������������  code����������� ������������������  before����������� ������������������  @end.

@property (strong, nonatomic) NSMutableArray *parseResults;

•This����������� ������������������  creates����������� ������������������  an����������� ������������������  NSMutableArray����������� ������������������  variable����������� ������������������  called����������� ������������������  parseResults.����������� ������������������  This����������� ������������������  is����������� ������������������  where����������� ������������������  we����������� ������������������  will����������� ������������������  store����������� ������������������  the����������� ������������������  data����������� ������������������  we����������� ������������������  get����������� ������������������  from����������� ������������������  the����������� ������������������  parser.����������� ������������������  Now����������� ������������������  open����������� ������������������  MainViewController.m����������� ������������������  and����������� ������������������  just����������� ������������������  below����������� ������������������  @implementation����������� ������������������  put����������� ������������������  the����������� ������������������  following����������� ������������������  code:

@synthesize parseResults = _parseResults;

•Any����������� ������������������  properties����������� ������������������  we����������� ������������������  create����������� ������������������  need����������� ������������������  to����������� ������������������  be����������� ������������������  synthesized����������� ������������������  before����������� ������������������  we����������� ������������������  can����������� ������������������  use����������� ������������������  them.����������� ������������������  We����������� ������������������  also����������� ������������������  need����������� ������������������  to����������� ������������������  import����������� ������������������  KMXMLParser.h����������� ������������������  at����������� ������������������  the����������� ������������������  top����������� ������������������  of����������� ������������������  our����������� ������������������  MainViewController.m.

•Next����������� ������������������  we����������� ������������������  need����������� ������������������  to����������� ������������������  parse����������� ������������������  the����������� ������������������  RSS����������� ������������������  feed!����������� ������������������  We����������� ������������������  do����������� ������������������  this����������� ������������������  by����������� ������������������  creating����������� ������������������  an����������� ������������������  instance����������� ������������������  of����������� ������������������  KMXMLParser����������� ������������������  and����������� ������������������  passing����������� ������������������  it����������� ������������������  a����������� ������������������  URL.����������� ������������������  We����������� ������������������  will����������� ������������������  do����������� ������������������  this����������� ������������������  in����������� ������������������  our����������� ������������������  viewDidLoad����������� ������������������  method����������� ������������������  so����������� ������������������  that����������� ������������������  the����������� ������������������  data����������� ������������������  is����������� ������������������  already����������� ������������������  displayed����������� ������������������  when����������� ������������������  the����������� ������������������  user����������� ������������������  first����������� ������������������  sees����������� ������������������  our����������� ������������������  table.����������� ������������������  Modify����������� ������������������  the����������� ������������������  method����������� ������������������  as����������� ������������������  follows:����������� ������������������  

- (void)viewDidLoad

{

    [super viewDidLoad];

    //Sets the navigation bar title

    self.title = @"News";

    KMXMLParser *parser = [[KMXMLParser alloc]

" " initWithURL:@"http://rss.cnn.com/rss/cnn_topstories.rss" delegate:nil];

    _parseResults = [parser posts];

}

Page 8: iOS RSS Reader Tutorial - University of Notre Damecpoellab/teaching/cse40814/RSS-iOS.pdf · iOS RSS Reader Tutorial Mobile Computing CSE40814 Fall 2012 Salvador Aguiñaga

- (NSInteger)numberOfSectionsInTableView:(UITableView *)tableView{#warning Potentially incomplete method implementation. // Return the number of sections. return 1;}

- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section{#warning Incomplete method implementation. // Return the number of rows in the section. return self.parseResults.count;}

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath{ static NSString *CellIdentifier = @"Cell"; UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:CellIdentifier]; // Configure the cell... // Check if cells is nil, if it is create a new instace of it if (cell == nil) { cell = [[UITableViewCell alloc] initWithStyle:UITableViewCellStyleSubtitle reuseIdentifier:CellIdentifier]; } // configure the cell cell.textLabel.text = [[self.parseResults objectAtIndex:indexPath.row] objectForKey:@"title"]; return cell;}

Page 9: iOS RSS Reader Tutorial - University of Notre Damecpoellab/teaching/cse40814/RSS-iOS.pdf · iOS RSS Reader Tutorial Mobile Computing CSE40814 Fall 2012 Salvador Aguiñaga

#pragma mark - Table view delegate

- (void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath{ // Navigation logic may go here. Create and push another view controller. WebViewController *vc = [[WebViewController alloc] init]; NSScanner *scanner = [NSScanner scannerWithString:[[self.parseResults ! ! objectAtIndex:indexPath.row] objectForKey:@"link"]]; [scanner scanUpToString:@"?" intoString:nil]; // Scan all characters before # NSInteger right; right = [scanner scanLocation]; vc.url = [NSURL URLWithString:[[[self.parseResults objectAtIndex:indexPath.row]! ! objectForKey:@"link"] substringWithRange:NSMakeRange(0, right)]]; NSLog(@"link:%@",[[[self.parseResults objectAtIndex:indexPath.row]! ! objectForKey:@"link"] substringWithRange:NSMakeRange(0, right)]);

[self.navigationController pushViewController:vc animated:YES];}

parseResults����������� ������������������  gives����������� ������������������  a����������� ������������������  string����������� ������������������  that����������� ������������������  we����������� ������������������  need����������� ������������������  to����������� ������������������  trim,����������� ������������������  so����������� ������������������  we����������� ������������������  use����������� ������������������  NSScanner

we����������� ������������������  chomp����������� ������������������  the����������� ������������������  string����������� ������������������  and����������� ������������������  pass����������� ������������������  the����������� ������������������  substring����������� ������������������  as����������� ������������������  the����������� ������������������  url

When����������� ������������������  a����������� ������������������  row����������� ������������������  in����������� ������������������  our����������� ������������������  tableView����������� ������������������  is����������� ������������������  touched,����������� ������������������  we����������� ������������������  send����������� ������������������  pull����������� ������������������  up����������� ������������������  the����������� ������������������  web-page����������� ������������������  for����������� ������������������  that����������� ������������������  link

Page 10: iOS RSS Reader Tutorial - University of Notre Damecpoellab/teaching/cse40814/RSS-iOS.pdf · iOS RSS Reader Tutorial Mobile Computing CSE40814 Fall 2012 Salvador Aguiñaga

Create����������� ������������������  a����������� ������������������  WebViewController����������� ������������������  to����������� ������������������  display����������� ������������������  the����������� ������������������  link����������� ������������������  offered����������� ������������������  by����������� ������������������  the����������� ������������������  RSS����������� ������������������  feed

Page 11: iOS RSS Reader Tutorial - University of Notre Damecpoellab/teaching/cse40814/RSS-iOS.pdf · iOS RSS Reader Tutorial Mobile Computing CSE40814 Fall 2012 Salvador Aguiñaga

• In WebViewController.h we need to create two properties:

@property (strong, nonatomic) NSURL *url;

@property (strong, nonatomic) UIWebView *webView;

• We then need to synthesize them in WebViewConrtroller.m:

@synthesize url = _url, webView = _webView;

• In our viewDidLoad method we need to create our UIWebView and display it. We do this by adding it as a subview of our parent view.

- (void)viewDidLoad

{

    [super viewDidLoad];

// Do any additional setup after loading the view.

    _webView = [[UIWebView alloc] initWithFrame:CGRectMake(0, 0, self.view.frame.size.width, self.view.frame.size.height)];

    [self.view addSubview:self.webView];

• In our viewDidAppear: method we then need to tell our webview the URL to display:

- (void)viewDidAppear:(BOOL)animated {

    [self.webView loadRequest:[NSURLRequest requestWithURL:self.url]];

}

Page 12: iOS RSS Reader Tutorial - University of Notre Damecpoellab/teaching/cse40814/RSS-iOS.pdf · iOS RSS Reader Tutorial Mobile Computing CSE40814 Fall 2012 Salvador Aguiñaga

Here����������� ������������������  is����������� ������������������  the����������� ������������������  tricky����������� ������������������  part

Page 13: iOS RSS Reader Tutorial - University of Notre Damecpoellab/teaching/cse40814/RSS-iOS.pdf · iOS RSS Reader Tutorial Mobile Computing CSE40814 Fall 2012 Salvador Aguiñaga

http://feeds.nytimes.com/nyt/rss/Technology

http://www.wsbt.com/news/regional/rss2.0.xml

http://www.southbendtribune.com/ws/content/collection/?collection=sbt_sports_photogalleries&key=d3IwcUN6Ym9NVEV0MWkzcEJsVEU2UFp3bWxmbVRzWFBxbVNyc0pjd1BOWjk4alBLSEpOdHRJVlhXK1dscWhvZg&version=1.0&limit=20

RSS Feeds

<content-item><slug>sbt-photos-st-joseph-v.../slug><print_pub_slug/><title>PHOTOS: St. Joseph vs. Mishawaka Volleyball</title><url>http://www.southend ...</url>

<item><title>Syria</title><guid isPermaLink="false">http://www.cnn.com/<link>http://rss.cnn.com/~r/rss/cnn_topstorie<description>Well over 20,000 people -- mostl&lt;a href="http://rss.cnn.com/~ff/rss/cnn_to&lt;/div&gt;&lt;img src="http://feeds.feedbur<pubDate>Wed, 12 Sep 2012 06:41:19 EDT</pubDa<feedburner:origLink>http://www.cnn.com/2012/

Look����������� ������������������  at����������� ������������������  the����������� ������������������  red

RSS����������� ������������������  feeds����������� ������������������  might����������� ������������������  have����������� ������������������  different����������� ������������������  XML����������� ������������������  formats

So����������� ������������������  look����������� ������������������  out����������� ������������������  for����������� ������������������  this!!

Page 14: iOS RSS Reader Tutorial - University of Notre Damecpoellab/teaching/cse40814/RSS-iOS.pdf · iOS RSS Reader Tutorial Mobile Computing CSE40814 Fall 2012 Salvador Aguiñaga

KMXMLParser *parser = [[KMXMLParser alloc] initWithURL:@"file:///Users/sal/Documents/! Tutorials/RSS/rss2.0.xml" delegate:nil];

KMXMLParser *parser = [[KMXMLParser alloc] initWithURL:@"http://feeds.nytimes.com/nyt/! rss/Technology" delegate:nil];

KMXMLParser *parser = [[KMXMLParser alloc] initWithURL:@"http://www.southbendtribune.com/ws/content/collection/?collection=sbt_sports_photogalleries&key=d3IwcUN6Ym9NVEV0MWkzcEJsVEU2UFp3bWxmbVRzWFBxbVNyc0pjd1BOWjk4alBLSEpOdHRJVlhXK1dscWhvZg&version=1.0&limit=20" delegate:nil];

How����������� ������������������  to����������� ������������������  handle����������� ������������������  this

• Parse����������� ������������������  the����������� ������������������  right����������� ������������������  keywords• In����������� ������������������  this����������� ������������������  demo,����������� ������������������  modify����������� ������������������  KMXMLParser.m����������� ������������������  file����������� ������������������  so����������� ������������������  that����������� ������������������  the����������� ������������������  right����������� ������������������  data����������� ������������������  is����������� ������������������  selected

• In����������� ������������������  method:����������� ������������������  didSelectRowAtIndexPath try sending the right URL string to the WebViewController

NSString *urlLink = [[self.parseResults ! objectAtIndex:indexPath.row] objectForKey:@"link"]; NSString* webStringURL = [urlLink ! stringByAddingPercentEscapesUsingEncoding:NSUTF8StringEncoding]; NSScanner *scanner = [NSScanner scannerWithString:webStringURL]; [scanner scanUpToString:@"%" intoString:nil]; // Scan all characters before # NSInteger right; right = [scanner scanLocation]; vc.url = [NSURL URLWithString:[webStringURL ! substringWithRange:NSMakeRange(0, right)]];

Tweak����������� ������������������  String����������� ������������������  Encoding

Trim����������� ������������������  the����������� ������������������  URL����������� ������������������  string����������� ������������������  just����������� ������������������  right

Page 15: iOS RSS Reader Tutorial - University of Notre Damecpoellab/teaching/cse40814/RSS-iOS.pdf · iOS RSS Reader Tutorial Mobile Computing CSE40814 Fall 2012 Salvador Aguiñaga

And we’re done! You now have a basic RSS Reader for iOS.

Powered by Kieran McGradywww.kieranmcgrady.com