iOS SDK and SQLite: Building Data-Driven Apps
Illustration by Don Barnett

Creating the web view class


From:

iOS SDK and SQLite: Building Data-Driven Apps

with Bill Weinman

Video: Creating the web view class

In order to display pages in the WebView, we need to create a class for the WebView delegate methods, and we need to create the view in the storyboard. So, we'll start by making a working copy of the BWRSS-webView-start. That's in chapter 6 in our exercise files. And I'm just going to drag it here with the Option key pressed and rename it to BWRSS-webView-01. And we'll go ahead and open this in Xcode by double- clicking on the Xcode project file. And I'm just going to do a couple things here to get situated.
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 your free trial now, and begin learning software, business and creative skills—anytime, anywhere—with video instruction from recognized industry experts.

Start Your Free Trial Now
please wait ...
Watch the Online Video Course iOS SDK and SQLite: Building Data-Driven Apps
3h 45m Intermediate Jan 16, 2013

Viewers: in countries Watching now:

The iOS software development kit (SDK) includes the popular SQLite library, a lightweight yet powerful relational database engine that is easily embedded into an application. In this course, Bill Weinman teaches you how to build an RSS reader for iOS devices, integrating XML data and a streamlined interface. He explains how to use the SQLite database, display information in a table view, code view controllers, and create a preferences pane for your app. The resulting application is optimized for all iPhone and iPad displays.

Topics include:
  • Prototyping the app
  • Coding and working with a testbed
  • Creating an Objective-C interface for SQLite
  • Designing a database schema
  • Creating the view controllers
  • Reading and writing to the database
  • Parsing the RSS feed with NSXMLParser
  • Updating the item view with feed items
  • Implementing the pull to refresh gesture for iOS 6
  • Creating a universal application with multiple views
Subject:
Developer
Software:
iOS
Author:
Bill Weinman

Creating the web view class

In order to display pages in the WebView, we need to create a class for the WebView delegate methods, and we need to create the view in the storyboard. So, we'll start by making a working copy of the BWRSS-webView-start. That's in chapter 6 in our exercise files. And I'm just going to drag it here with the Option key pressed and rename it to BWRSS-webView-01. And we'll go ahead and open this in Xcode by double- clicking on the Xcode project file. And I'm just going to do a couple things here to get situated.

I'm going to make sure there are iPhone Simulator selected. I'm going to open a couple of these disclosure triangles, and we're going to start by creating a new class. So, I can either select File > New > File here, or I can just right-click on the BWRSS group and say New File. This is going to be a Cocoa Touch Objective-C class. Press Next. And it's going to be called BWRSSWebViewController. And it's a subclass of ViewController, so if you have TableViewController or something else selected, you want to make it a subclass of ViewController. And leave both of these unchecked.

It's not targeted for iPad, and it's not using a NIB file, so we say Next. And it will be in the BWRSS group and with the BWRSS Target checked, and this is the correct folder for it. So, that's all good. We select Create, and there it is. You notice it drops it in down here at the end because it's kind of alphabetical. I'm just going to move it up in there. And I'm going to open up the .h file and come back out here to our finder, and you see here we have the 01-header.text file there.

I'm going to open that up in my text editor. I'm just going to select all of that and come back in here to Xcode, and if I select this and replace this line with all of that, it actually comes out right. You'll notice--I'm going to minimize this Utilities bar over here. You'll notice we're implementing the WebViewDelegate protocol, and we have an IBAction for something called an actionButton. We'll see what that is in a little bit here. And we have IBOutlets for the webView and a backButton and a forwardButton, and a property for feedItem that gets passed from the Items View Controller when this view is launched.

So, I'm going to press Command+S here to safe. I'm going to move over here to the .m file. And all we really need to do in here, and you see because this is just based on the View Controller, it's pretty lightweight here. It doesn't have a lot of stuff in the template. Also, you notice this little exclamation point. It says, "Incomplete implementation," That's because in our .h file, we have this IBAction method, and it's not defined in here, so we're going to go ahead and define that. We're just going to put that down here. And it looks like that, and we're just going to put a little NSLog in here for now.

And what's that's going to do is when this button is pressed, it's going to display in the log the name or signature of it's function, which will look kind of like that, and the URL that's been passed from the Items view, and that just will let us know that this button is working when we press this particular button. So, I'm going to press Command+S to save this, and we're going to come over here now to our iPhone storyboard--that's this one here-- and we're going to create our WebView.

Now, I'm going to bring this Utilities panel back out. I'm going to scroll back over. This is a little bit complicated to do with the limited real estate here. Zoom out, I'm going to grab us a new View Controller, and that's going to go over here in some place. Try and align that up a little bit. And it's going to insist that I scroll in to do this next part. I'm going to create a segue. Now, when I create a segue, I'm going to hold down the Control key and I'm going to drag from this prototype cell, and that will create the segue.

I'm going to select Push. Now you'll notice that one of the things that it does here is it adds that disclosure arrow back into the prototype cell, and it sets this accessory property here to Disclosure Indicator, so I have to set it back to None if I don't want that. So now, we have this new view. And in this new view, we want to have a WebView and we want to have a toolbar. So, we're going to start with the toolbar because it actually make sense, because then the WebView will snap into the right place. So, I'm going to grab this toolbar here and I'm just going to drop it into the bottom, and I'm going to grab a Web View now, and that's in Data Views.

And you'll notice that it just kind of fills that remaining space just nicely. And then I'm going to come down here and I'm going to set the class of the View Controller. So, I'm selecting the identity inspector, and I'm going to select our Web View Controller for that. Now, whenever I hover over that, it says Web View Controller. I'm going to make sure that our segue is named properly, so I'm going to select the segue here and come back over to the Attributes Inspector. And I'm going to type in SegueToWebView and press Enter.

Now, our segue is named properly. Now, I want to add some buttons to our button bar down here, but before I do that I want to show you the buttons. A couple of these buttons I've had to create them myself, and I used PhotoShop. You can use whatever application you want to. I'm going to press Command+S to save here and come back out to the Finder. And here, in this Assets folder, you'll see four PNG files. And if I bring these up in Preview, see there's one called back-arrow.png, and it looks like that, and there's back-arrow@2x.png, and it's the same thing, just a little larger, forward-arrow and forward-arrow@2x.

The thing that these images is these are going to go on a toolbar, and the way that these work is that the only thing that's actually used in the toolbar is the transparency mask of the PNG file. So, what color it is, what image is in there, any of that is completely discarded, and all that's used is the transparency mask. So, I just make them black on transparent, and that works out just fine. So, I'm going to take these images and I'm going to drag them into our Supporting Files folder here, and you'll notice that we get this nice little dialog box.

I'll make sure that copy items is checked. Create groups, there aren't any groups so that's fine, and Add to target this BWRSS. So, I select Finish, and there is our four graphics there. Now, when we come over here to our toolbar-- and I'm going to just select this item. You notice the toolbar starts with one item on it. And I'm going to say that it's plain. It doesn't have a border, and I'm going to select an image for it. You'll notice that our graphics are here. I don't want to select one of the @2X ones. That happens automatically.

If I select the back-arrow, for the retina displays, the @2x, the larger-size one, will automatically be used. So now, we have a back-arrow.png there, and you'll notice that it displays just as you would expect it to. It's just using the transparency mask to find the boundaries of the image. So, that's pretty nice, and that works great. I'm going to come back over here to Windows & Bars, and I'm going to grab the Flexible Space. What we're going to do is we're going to put five buttons out here and flexible space in between all of them. So, that's four flexible spaces.

I'm just going to drop all of those in place right now because it's convenient and easy to do it this way. And then I'm going to come back up here and I'm going to get Bar button Item, and I'm going to get four more of those. We've got one already. And I'm going to drop all of those in between the flexible spaces. So, that lays it out just perfectly, like that. And then for each of these, I'm going to make them Plain. And this first one, this will be the right-arrow image, the forward-arrow image, and this next one, Plain. This next one is going to be the Refresh image.

That's one of the stock ones. This one is going to be the stop image, so Stop. That's got that X to it. And you see how they just resize and that flexible space in between just works to hold them all exactly the same space apart. It works really nicely. And this last one is one that is called Action, and that's the one that's going to get that action method. That's for, when you press that it will load the web page up in Safari. It will move away from this app and open it up in Safari for those times when you want to load a web page in Safari.

Of course, these flexible spaces won't actually show up on the app, but it's all going to look really nice like that. And now we're going to hook things up. We can come over here to our Web View Controller, and we're going to select the Connection Inspector here, and you'll notice that we have this Web View Property. Remember in our WebViewController.h, we had this WebView IBOutlet, and that's what that is. And so we're going to grab that, and we're going to hook it up to our WebView. And these Back button and Forward button items, these are the IBOutlets that we declared for those. And that actually allows us, not so much to intercept these, but to refer to them so that we can gray them out and inactivate them when they're not valid.

And we'll see how to do that later in this chapter. This Action button, that's what we can intercept that action. And then we're going to select the WebView, and the WebView itself has some actions that we can hook up to these buttons so that all of these buttons automatically work with the WebView. We've got the Go Back button, which go to our left arrow; and our Go Forward button, which will go to our forward arrow; reload, which will go to the Refresh button; and Stop Loading, which will go to the Stop button.

So that's all based on the WebView itself. Okay, so I can save this. And in order for this to work, we need to go back here into the ItemsViewController and hook it up to the segue. So, in order to use this class from here, we need to import its header file. So, I'm going to come back out here to the Finder now, and I'm going to grab this ItemsTableViewController-01methods.txt file, and that has our segue delegate for calling up our WebView.

So, I'm going to come back into Xcode, and I'll just drop that in right here before the Table view data source part. And it looks for the Segue identifier, SegueToWebView, and I'm going to press Command+S to save. We'll go back into our iPhone storyboard, and we'll take a look at this segue, and we see that's SequeToWebView. So, that's right. It creates a WebViewController, a pointer to that object. From our destinationViewController, it grabs the IndexPath for the selected row, and it uses that to find their correct item record from the database, and it passes that item record into the feedItem property in the WebViewController.

So, this should all be familiar at this point. We've done this several times before in this course. Now, if we come back in here to our WebViewController, we can see we don't have any of the view methods set up yet, so we'll just get a blank WebView. But what will happen is when we press that Action button, we should get a little NSlog here that shows our feedItem URL, and that will tell us that everything is working properly. So, I'll make sure the iPhone Simulator is selected and press Run, and it builds with no issues. Now, it will launch the iPhone Simulator.

And there it is. And if I bring up one of these items from the blog for example, there is our WebView, and there is all our buttons. They look nice and they're perfectly spaced. And if I clicked on this one on the right, we should get a log item down here, and we do. And there is that function signature, and there's the URL. So, these are the steps you will follow to create most any view over the storyboard. Now that we have the WebView working and we're calling it successfully from the Items View, now it's time to code the rest of the class, and we'll start with that in the next movie.

Find answers to the most frequently asked questions about iOS SDK and SQLite: Building Data-Driven Apps .


Expand all | Collapse all
please wait ...
Q: Why is the RSSDB library in the exercise files different than the one in the videos?

A: The RSSDB library had to be updated to work around a bug in the iOS 7 SDK.

There is a bug in the iOS 7 SDK that prevents the BWDB fast enumeration implementation from working on a device. The symptom is code that runs fine on the emulator, but not on a device. iOS devices use an ARM processor, while the emulator runs on your Mac's Intel processor. This points to the LLVM ARM code generator as the source of the bug. Because the bug appears to be in the LLVM compiler, it may be some time before it is fixed.

As a workaround we have changed the getFeedIDs and getItemIDs methods in the RSSDB library so they don't use Objective C fast enumeration. 

Please note that this same bug also affects some of the BWDB testbed code in Chapter 2. The result is that it will run on the emulator but not on a device.

Q: After upgrading to Xcode 5.1 I get an error that says:

"Used type va_list (aka_builtin_va_list) where arithmetic or pointer type is required"

A: Please download the exercise files again to get the latest version of the BWDB library.
Q: I'm using Xcode 6. Why am I getting error messages with the exercise files?
A: A lot has changed in iOS since this course was released. The author is in the process of rewriting the code and updating the course for iOS 8. In the meantime he has prepared a version of the app that works in iOS 8 and Xcode 6. Download it here:
 
http://ios.bw.org/
 
 
Share a link to this course

What are exercise files?

Exercise files are the same files the author uses in the course. Save time by downloading the author's files instead of setting up your own files, and learn by following along with the instructor.

Can I take this course without the exercise files?

Yes! If you decide you would like the exercise files later, you can upgrade to a premium account any time.

Become a member Download sample files See plans and pricing

Please wait... please wait ...
Upgrade to get access to exercise files.

Exercise files video

How to use exercise files.

Learn by watching, listening, and doing, Exercise files are the same files the author uses in the course, so you can download them and follow along Premium memberships include access to all exercise files in the library.


Exercise files

Exercise files video

How to use exercise files.

For additional information on downloading and using exercise files, watch our instructional video or read the instructions in the FAQ .

This course includes free exercise files, so you can practice while you watch the course. To access all the exercise files in our library, become a Premium Member.

* Estimated file size

Are you sure you want to mark all the videos in this course as unwatched?

This will not affect your course history, your reports, or your certificates of completion for this course.


Mark all as unwatched Cancel

Congratulations

You have completed iOS SDK and SQLite: Building Data-Driven Apps.

Return to your organization's learning portal to continue training, or close this page.


OK
Become a member to add this course to a playlist

Join today and get unlimited access to the entire library of video courses—and create as many playlists as you like.

Get started

Already a member ?

Exercise files

Learn by watching, listening, and doing! Exercise files are the same files the author uses in the course, so you can download them and follow along. Exercise files are available with all Premium memberships. Learn more

Get started

Already a Premium member?

Exercise files video

How to use exercise files.

Ask a question

Thanks for contacting us.
You’ll hear from our Customer Service team within 24 hours.

Please enter the text shown below:

The classic layout automatically defaults to the latest Flash Player.

To choose a different player, hold the cursor over your name at the top right of any lynda.com page and choose Site preferences from the dropdown menu.

Continue to classic layout Stay on new layout
Exercise files

Access exercise files from a button right under the course name.

Mark videos as unwatched

Remove icons showing you already watched videos if you want to start over.

Control your viewing experience

Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.

Interactive transcripts

Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.

Learn more, save more. Upgrade today!

Get our Annual Premium Membership at our best savings yet.

Upgrade to our Annual Premium Membership today and get even more value from your lynda.com subscription:

“In a way, I feel like you are rooting for me. Like you are really invested in my experience, and want me to get as much out of these courses as possible this is the best place to start on your journey to learning new material.”— Nadine H.

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.