New Feature: Playlist Center! Pick a topic and let our playlists guide the way.

Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member

Coding the table views

From: iOS SDK and SQLite: Building Data-Driven Apps

Video: Coding the table views

At this point we have a complete iOS Application that's targeted for the iPhone form factor. In order to take advantage of the iPad, we will implement a separate storyboard and a few additional classes for the iPad platform. This application was started as a universal app with the intention of supporting the iPad platform. We can use most of our existing code on the iPad. We will need some new code to support the split view and a few other features, but mostly we will just be sub-classing our existing classes and overriding a few methods.

Coding the table views

At this point we have a complete iOS Application that's targeted for the iPhone form factor. In order to take advantage of the iPad, we will implement a separate storyboard and a few additional classes for the iPad platform. This application was started as a universal app with the intention of supporting the iPad platform. We can use most of our existing code on the iPad. We will need some new code to support the split view and a few other features, but mostly we will just be sub-classing our existing classes and overriding a few methods.

Let's start by making a working copy of BWRSS split view start. I'm going to rename this to splitview-02, and I'm going to open it in Xcode by double-clicking on the Xcode project file. Now let's take a quick look at the iPad storyboard, and you notice that I really need to zoom this out on this small screen to be able to really see it. Here we have the SplitViewController--and I'll zoom in a little bit more here so you could see that.

So there we have the SplitViewController with the MasterViewController on the left and the DetailViewController on the right, and it connects to two navigation controllers, one for the master and then another one down here for the DetailViewController. Then we have the view controller themselves as the DetailViewController, and for the MasterViewController it's been renamed, and it was renamed in one of our movies to be a FeedsTableViewController, but it's still not set up in the story.

Down here in the DetailViewController, this is where we are going to put our webView, and for the left side, we'll mostly leave the left side alone. Most of what we need to do is to update the WebViewController to work as a detailed view. So let's go ahead and create a class. I am going to come up here to File > New File. Under iOS > Cocoa Touch > Objective-C class, and I'm going to press Next, and this is going to be BWRSSDetailViewController, and it's going to be subclass of BWRSSWebViewController.

It's right there, and we're going to ahead and leave these alone for now, because we're going to filling that in from some results. It gets stored in here and its group is right and its target is right, and that's all correct. So I'm just going to press Create, and there are our files. Now I'm going to come out here to our Finder, and I'm going to open BWRSS-detailview-02-header. I'm just going to grab these two lines here and copy them, and I'll just close that and come back out here to Xcode and come into the header file, and I'm just going to replace this one line with those two.

So basically what we have here is that DetailViewController subclass of the WebViewController, and it implements these protocols of UIPopupControllerDelegate and UISplitViewControllerDelegate. And there's one property detail item. Actually, it's going to get filled in from the item's table view controller, but that'll happen later on in this chapter. We're going to come back out here to Finder, and I'm going to open this detailview methods.txt, and there's just a little bit of code here that we want to put in the .m files.

So I'm going to Command+C, copy that, and close my text editor, come back out here to Xcode, and go into the methods file, and I'm just going to replace these two lines with all of that. So here we have a couple instance variables, and we have this property for the Toolbar and a property for webTitle. In fact, these are IBOutlets. This webTitle one, it's not actually used in this implementation, but it's there because it's referenced in some of the code.

That's all we need to do for right now in these files. We'll get back to them later on this chapter. I want to come back out here now to the iPad storyboard and get this set up for the iPad side of our universal application. We're going to start with our navigation controller. I'm just going to select that. I'm going to bring up the properties over here and in the Attributes Inspector under Simulated Matrix where it says Top Bar we are going to say None, and that will get rid of this top navigation bar, because we're going to create our own, and that way we can put buttons on it, and we can make it also our navigation bar for the web view.

We're going to come out here to our Objects, and we're going to grab a toolbar, and we're going to drag it up here to the top of--it looks like I need to zoom in in order for that to work. I'm going to drop that up here at the top. This is our DetailViewController, and that's this one at the end of the chain there on the bottom, and I'm also going to grab a web view.

I'm going to drop that in right here, and I'm going to have it fill up the rest of this space, and there we go. So now we have web view, and we have the tool bar. Now we can go ahead and add some buttons to our tool bar. There's already one button up there. There's going to be five buttons, and this time there's going to be spaces on either side of the buttons as well. So we're actually going to have six of these flexible spaces. I'm going to start by putting this flexible space there and another one there and then three, four, five, and six.

Then I'm going to put in some more buttons two, three, four, five, and you'll see in a little while why it is that we do it this way. But the bottom line is that another button will be dropped in here programatically so that when it's in portrait we can still bring in that table view on the left side as a pop-over, and that button will automatically be added and removed, and this actually makes all of that look right.

Now we'll go ahead and we'll style buttons so each of them is going to be playing and these are the buttons for web view so already know what goes in them, because we did that before earlier in the course. This first one here is going to be the Back Arrow, and this next one is going to be the Forward Arrow. Then this one here is going to be the Refresh button and then this one will be the Stop button, and this one here will be the Action button.

So I have to click this a few times in order for it to select that Action button. Now we see that our toolbar looks exactly how we want it to look. So we come down here to the controller itself and over to the Identity Inspector, and that's correct BWRSSDetailViewControllers. So that's exactly what we want there. Then we're going to come over here to the Connections Inspector, and you see one here that says detail description, and it's got an exclamation point next to that, because there isn't one in this DetailViewController, so that's okay.

We're just going to delete that, and you see we have this web view outlet, and it connect that to our web view, and we have a Toolbar outlet, so we're going to connect that to our toolbar. While we are at here we've got Back button. We can select our Back button item and our Forward button, select our Forward button item. If we scroll all the way down here, we'll see our Action button item. We can connect to that one up. Then we select the web view which I'm just going to tap on it here, and that will give us a whole new selection of buttons, and this connects them to the web view so that if they're connected up to the web view, we don't have to do them programatically.

So that's the Go Back button and the Go Forward button and the Reload button, and the Stop Loading button. Those are all now hooked up as well. We can scroll up, and we can work on our FeedsTableViewController a little. So if I select that and come up here to the top of it, and you see it says Master. I'm just going to double-click there, and I'm going to change that to--I'm going say BWRSS. That will make it consistent, BWRSS.

And I'm going to select the Prototype Cell and come over here to the Attributes inspector and the Identifier is going to be FeedsCell and press Enter there. The style is Subtitle, and you'll notice Accessories says None, but that's going to change when I create a segue from it. So we'll have to update it again. Now we have this FeedsTableViewController set up properly, and it's time for us to create our ItemsTableViewController.

So we're going to grab another TableViewController here, and I'm going drop it in right there, and it's going to create this whole giant thing, and it's just unfortunate the way that it does this especially on a small screen. So I'm just going to set it over to the side here and what's going to happen is when I create this segue, that will resize the correct size. So watch this. I'm going to Control click on this Prototype Cell over there in the FeedsTableViewController, and I'm going to drag it over here and let go and select Push segue and notice that it now resizes properly, because it's inheriting that from the view that that's being connected to it, from its parent view.

You will also notice that this Prototype Cell over here got changed to have little disclosure indicator. So I'm going to select that back to none and press Command+S to save. Now our new TableViewController, we are here in the Identity Inspector, that's going to become our ItemsTableViewController and our segue is going to get an identifier to SegueToItemTableView.

And I'm going to come over here to our Prototype Cell and make that a Subtitle and our Reuse Identifier is going to be ItemCell. ItemCell like that. Now that we've got all this set up, I'm going to press Command+S to save, and we'll go ahead and we'll run it in the iPad Emulator. So you can see we have that error. I press Command+Left Arrow to rotate it, and now we can see our Table Views are working.

So this is pretty much how we expect it to work at this point. We've done very, very little coding. All we've really done is set up the storyboards. So we have the Split View hooked up in the storyboard. This is the foundation for the rest of our work for the iPad side of our app. The next step is to plug in the code so it shows pages in the web view.

Show transcript

This video is part of

Image for iOS SDK and SQLite: Building Data-Driven Apps
iOS SDK and SQLite: Building Data-Driven Apps

41 video lessons · 6324 viewers

Bill Weinman
Author

 
Expand all | Collapse all
  1. 8m 29s
    1. Welcome
      57s
    2. Exercise files
      2m 17s
    3. Course overview
      3m 4s
    4. Application overview
      2m 11s
  2. 14m 49s
    1. Prototyping in a testbed
      1m 27s
    2. Building the view controller
      3m 45s
    3. Coding the testbed
      7m 56s
    4. Using the testbed
      1m 41s
  3. 37m 49s
    1. Understanding SQLite in iOS
      1m 41s
    2. Creating an Objective-C interface for SQLite
      9m 57s
    3. Testing the BWDB interface in the sandbox
      7m 1s
    4. Designing a database schema
      8m 7s
    5. Supporting the application with a specific interface
      7m 7s
    6. Using C pointers with automatic reference counting (ARC)
      3m 56s
  4. 21m 18s
    1. Understanding the table view
      1m 33s
    2. Creating the view controller
      6m 39s
    3. Reading from the database
      13m 6s
  5. 33m 50s
    1. Understanding the parsing process
      1m 57s
    2. Creating the item view controller
      12m 25s
    3. Reading data from the internet
      5m 30s
    4. Parsing the feed with NSXMLParser
      8m 2s
    5. Updating the item view with the feed items
      5m 56s
  6. 40m 14s
    1. Understanding the modal view
      1m 47s
    2. Constructing the view controller
      15m 5s
    3. Finding a feed link in a web page
      8m 55s
    4. Parsing the feed with NSXMLParser
      5m 4s
    5. Delegating back to the parent view
      6m 11s
    6. Deleting feeds
      3m 12s
  7. 21m 5s
    1. Creating the web view class
      12m 33s
    2. Coding the web view
      5m 25s
    3. Viewing pages in Safari
      3m 7s
  8. 14m 3s
    1. Understanding the iOS preferences system
      1m 23s
    2. Creating the preferences plist in Xcode
      7m 20s
    3. Reading preferences in your application
      5m 20s
  9. 6m 15s
    1. Adding pull-to-refresh functionality
      2m 34s
    2. Implementing the pull-to-refresh gesture for iOS 6
      3m 41s
  10. 27m 1s
    1. Understanding split view
      1m 4s
    2. Coding the table views
      11m 24s
    3. Implementing the iPad detail view
      6m 35s
    4. Implementing the iPad modal view
      7m 58s
  11. 35s
    1. Goodbye
      35s

Start learning today

Get unlimited access to all courses for just $25/month.

Become a member
Sometimes @lynda teaches me how to use a program and sometimes Lynda.com changes my life forever. @JosefShutter
@lynda lynda.com is an absolute life saver when it comes to learning todays software. Definitely recommend it! #higherlearning @Michael_Caraway
@lynda The best thing online! Your database of courses is great! To the mark and very helpful. Thanks! @ru22more
Got to create something yesterday I never thought I could do. #thanks @lynda @Ngventurella
I really do love @lynda as a learning platform. Never stop learning and developing, it’s probably our greatest gift as a species! @soundslikedavid
@lynda just subscribed to lynda.com all I can say its brilliant join now trust me @ButchSamurai
@lynda is an awesome resource. The membership is priceless if you take advantage of it. @diabetic_techie
One of the best decision I made this year. Buy a 1yr subscription to @lynda @cybercaptive
guys lynda.com (@lynda) is the best. So far I’ve learned Java, principles of OO programming, and now learning about MS project @lucasmitchell
Signed back up to @lynda dot com. I’ve missed it!! Proper geeking out right now! #timetolearn #geek @JayGodbold

Are you sure you want to delete this note?

No

Thanks for signing up.

We’ll send you a confirmation email shortly.


Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

Keep up with news, tips, and latest courses with emails from lynda.com.

Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

   
submit Lightbox submit clicked
Terms and conditions of use

We've updated our terms and conditions (now called terms of service).Go
Review and accept our updated terms of service.