Ready to watch this entire course?
Become a member and get unlimited access to the entire skills library of over 4,971 courses, including more Developer and personalized recommendations.Start Your Free Trial Now
- View Offline
- 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
Skill Level Intermediate
Now that we have a working groupView, itemView, and webView, it's time to implement our addView. The tactic is pretty simple. We're going to create the controller in the storyboard, connect it to the BWRSSAddViewController class, and set up the form elements. Let's start by making a working copy of BWRSS- splitview-03, and I'm just using this done version, you can use the version that you created in the last lesson if you're following along. I'm just going to rename it to BWRSS-splitview-04, and I'm going to open it in Xcode by double-clicking on this Xcode project file.
So now we're going to come up to the iPad storyboard, which is right up there, and I'm going to open up our Utilities View and scroll over here. You see we have the Items Table View Controller right there, and right under it I'm going to go ahead and put our Add View Controller. So, the first thing I'm going to do is I'm going to add that button up here on our Feeds Table View Controller. So, come over here to Objects and Windows & Bars and grab a Bar button Item and just drop it right there and call it an Add button so it gets that little Plus and Command+S to save.
Now, under our Items View Controller, I'm just going to scroll on over here, and I'm going to create a new controller. This is just a plain View Controller, so I'm going to drop it in right here and its size is going to be Form Sheet so that makes it manageable right there and drag it down over here. The Transition Style will say Cover Vertical. The Presentation will say Form Sheet.
And then we're going to set our controller to the BWRSSAddViewController, and I'm pressing Command+S to save. Now, I'll scroll down here so we can see a little bit more of it, and under Data Views I'm going to grab a Scroll View, and I'm going to drop that right here on this controller like that. Get it all nice and lined up, and over here, in the Attributes Inspector, let's scroll down and give it a background of Scroll View Textured Background Color.
Now, the rest of this is going to be very much like what we did when we first created the addView controller for the iPhone. We can go ahead and populate this view. I'm going to start with a text label up here at the top, and I'll stretch that out to sides using these handy dandy guides that the Interface Builder gives us. I'm going to make it centered and make it the System Bold Font 17 size.
It's going to say Add RSS Feed, like that, and then I'm going to make it white. This background is actually dark. It doesn't look like it's dark, there it is. But you'll see when we run it in the Emulator that it actually is dark. Now we can grab another text label and put it right under this one, and we're going to leave this one left flush, and this is our Status Label, and it's going to say Enter a URL.
This one is going to be Size 12, and it's also going to be white. Now, we're going to grab a text field and put that right under that other text label and bring that over to the sides and the text in there will say http://, and we're going to scroll down here and set some properties here, Capitalization: None, Correction: No, Keyboard: URL, Appearance: Default, and Return Key: Done. So, now I'm going to grab a couple of buttons here, Round Rectangle Buttons, and I'm going to drag them over here and align them up.
This little technique for doing this, and I'm going to grab them both and center them, and then the button on the left will be called Cancel, and the button on the right will be called Add. Now, we're going to connect our segue, and that will be a little bit challenging with this being zoomed in like this. Let's see if we can do this with it zoomed out. I'm not sure that it will let me. I'm going to Ctrl-click on this button and drag it over here.
For Action Segue, I'm going to select Modal, and then I'm going to select our Segue like this and the Identifier is SegueToAddView, like that. Presentation is just Default, Transition is also Default. Style is Modal, that's great. Now, we're going to come down here where we're going to connect our Controller. I need to zoom back in apparently.
So, I'm going to Ctrl-drag from here down to the Add View Controller, and we'll select addAction and the cancelAction, and do the same thing again and select cancelAction. That works. Now, when I select this controller, we should see those hooked up properly, they are, excellent. The URL text field should come over here and the Status Label will come over to this one here.
You can almost see that it's the second one. It's not the top one, it's the second one. And then finally, we want to drag this text field, we want to drag it down into our ViewController and where it says the Outlet Delegate, we need to connect that up. So, here we have our delegate outlet on the text field is set to the Add View Controller, and if we come down to the Add View Controller, we see that our delegate is that text field.
So now, this should all be hooked up properly, I'm going to press Command+S to Save, and we're going to go ahead and run it in the iPad Simulator. I'm going to go ahead and put us in Landscape mode. We see there's our Plus button, I'll press that button, and there is our Add RSS Feed Controller. We can just type something in here, I'll put in wired.com and press the Add button, and there is our Wired Feed, and you see that's all working.
I can come back here again, I can add another one say arstechnica.com, and I can press the Done button. All of this works exactly like it does now in the iPhone version, and you notice we did no coding at all for this. All we did was hook up this new View Controller to the exact same code. So, this is a lot less work because we're able to leverage most of the work we've already done for the iPhone Form Factor. The Universal application model allows us to take advantage of two different platforms, two different sizes of screens, two different UIs, all with the same code base.
We now have a working storyboard interface that we can use for the Modal dialog box. With storyboard, this whole process becomes a whole lot easier. All we really need to do is set up the View Controller in the storyboard and connect it to our existing classes and then it just works. So, congratulations. You now have a fully-functional RSS Reader that runs in both the phone and tablet form factors.