At this point, we have a working FeedsTableViewController for viewing feeds and a working ItemsTableViewController for viewing items. In this movie, we will create the AddViewController for adding feeds to the database. This will be accomplished by creating a modal dialog view for getting the feed URL from the user. We'll start by making a working copy of BWRSS-addView-start, and we'll call it BWRSS-addView-02. I'm just going to expand this a little bit. And there is our addView, and that's our start, and I make a copy, and I rename it with 02. And I'm just going to open the Xcode by double-clicking on this Xcode project file.
And now, before we can create the screen in storyboard, we need to create a new class to support the AddViewModal dialogs. So, I'm going to select our BWRSS folder up here. You could just right click on this and say New File, or you can go up to the File menu and say New > File; either one does exactly the same thing. And we're going to select a Cocoa Touch Objective-C class, press Next, and this is BWRSSAddViewController, like that.
And it is a subclass of UIViewController, so you want to select UIViewController and not UITableViewController, if that's the last one that you used. It was apparently the last one that I used. And leave both of these unchecked. It is not going to be targeted for the iPad. We're not using NIBs. And I'll select Next, and it will get stored right there in the BWRSS folder with all the other m and h files. And you want to make it in the BWRSS group and make sure that the BWRSS application is targeted so that check box needs to be checked there.
I'll press Create, and there we have our new class files. I'm just going to drag them up above that Supporting Files folder. And I'm going to open the .h file, and we'll get started in there. And switching back to my Finder, you see here that I have an AddView02-header.txt file. So, I'm going to open that up, and I'm just going to select all of these and drop it in this Xcode file. I'm just going to select these there and make sure our ends are matched up; they are.
And so there are a couple of interesting things going on here. You will notice that we have a protocol declared. This is the RSSAddViewControllerDelegate protocol. This has three methods defined in it. And we're going to be implementing that towards the end of the chapter, but that allows the AddViewModalViewController to communicate with the FeedsTableViewController. The FeedsTableViewController is going to be the parent of this ModalViewController, but because this is a ModalViewController, we don't want to do things like dealing with the database directly; we want to communicate back to the parent ViewController, which is not modal, and allow it to do those time- and resource-intensive things.
Otherwise, we end up affecting the performance of the rest of our device. And in fact, iOS even prevents us from doing certain things from a ModalDialogueViewController. So, we had this protocol. And we'll see that it adds a layer of complexity, but it's not that bad. You will see it is relatively easy to implement. Our AddViewController itself will be using the NSURLConnectionDelegate and NSXMLParserDelegate protocols. We have this delegate property, which actually gets populated from the FeedsTableViewController, and we'll see how to do that later in the chapter.
And then we have a TextField, a Label, and a couple of Actions. We'll be hooking those up to our ModalViewController. So, I'm going ahead and press Command+S to Save, and I'm going to switch to the .m file. I just did that by pressing Ctrl+Command+Up Arrow here on my keyboard. You'd also just select it in the Project Navigator. Of course, you may want to be using the Assistant Editor. I'm not using the Assistant Editor because I have such limited screen real estate here. So, over here in the .m file, or methods file, I'm going to go back to the Finder and I'm going to bring up the stuff that we don't want to have to type a lot of.
You can see there is quite a bit of that. Now, first, we have this import BWUtilities because we used some of those utilities. So, I'll go ahead and I'll paste that in right there. And we have a whole lot of constants, and we'll be using these throughout this chapter and throughout this class. So, I'm just going to go ahead and select all the way to the end here, and I'm going paste this in, in Xcode. I'm going to select these and replace that. Notice we have this warning here. That is probably for an incomplete implementation because there are things that we had declared in the header file that we haven't implemented in here yet.
So, we have a number of constants that we are using for various different purposes. It's always a good idea to use a constant rather than typing in a literal string or a literal number, especially if you're going to be using that literal more than once. We are also declaring a number of instance variables here. We have an enum that we use for a mode switch later on. The xmlData is used for accumulating data as we read it from the network connection, currentElement is used during parsing, feedRecord is used to accumulate data for the feedRecord before we pass it back to the parent controller, and a number of flags here, and some local properties as well.
We also have a number of methods that we're going to go ahead and just drop these in right now. And so I'm going to copy that and come down in here and paste them just before this @end. We have a duplicate here of the viewDidLoad, so I'll go ahead and I'll delete that one. So, viewDidLoad, it sends a becomeFirstResponder message to the URL text feed. We'll see what that does in a little while. It makes that TextField the focus as soon as the view is loaded.
And we have actions for our Cancel button and our Add button, and we also have this textFieldShouldReturn, which intercepts the Return button, or the Return key from the keyboard, and allows us to take an action based on it. We'll see how that works as well. So, I'm going to go ahead and press Command+S to save this, and now we're going to create the interface in our storyboard. So, I'm going zoom out here a little bit because this is just too big to work with in this small amount of real estate I have here on the screen.
And I'm going to bring out our Utilities pane. And the first thing I'm going to do is I'm going to come over here to the FeedsTableViewController and I'm going to add a button. And so I'll come down here into Windows and Bars. There it is, Bar button. I'm going to drop that on to--yeah, it looks like I need to zoom in in order to do that. I'm going to drop that on there and under Style, Bordered is fine, Identifier, Add, and that will give it a little plus sign.
And I'm going to zoom out again, and I'm going to create a new Controller. Under Controllers & Objects, I just want a Plain View Controller. Now, I want us to get under this TableViewController here, and I'm going to select both of them and scroll them up a little bit. And I'm going to create a new segue from this plus button that I've just created.
So I'm holding down the Control key on my keyboard while I drag a line from here to our new ViewController, and I'm going to select modal for the segue. Now, we have our new segue here, and I'm going to select that. Its identifier will be SegueToAddView. Its style is Modal, and its Transition will be Cover Vertical. I'm going to press the Enter key there and press Command+S to save.
Now, we're going to zoom in to our new ViewController here, and I want to select the orange circle there which identifies our controller and come over here to show the Identity Inspector, and we're going to select our new BWRSSAddViewController for that. And so now we can see it's the AddViewController. And I want to set some properties on this controller--make sure I've got the Controller selected. I'm going to get a Scroll View and drop that on here so that we can add some items to that.
So, there's our Scroll View, get that nicely centered in there. And I'm going to select the Background and make it the Scroll View Textured Background Color. Now, the thing about the Scroll View Textured Background Color is that it doesn't actually show up here on this screen, but it is a dark color. So, I'm going to be putting items on it. I'm going to setting their color to white so that we can actually see them. And this will make sense when we go to test it, and you'll see what it looks like. But in the meantime, it's going to make things a little bit difficult to work with, and that's just a quirk of how Interface Builder works and how storyboards work.
So, I'm pressing Command+S to save. I do that a lot. And I'm going to grab a text Label here, under Controls, and Label. I will bring it up to the top here and center, or you can bring it up to the top and left, and you can just drag its right side out all the way to the other line. So, I'm using these guides to help to line things up. And it makes it so that everything looks like nice on the screen when we're done laying it out. I'm going to select a Center Alignment and the System Bold Font.
The Size of 17 is good, and it is going to say Add RSS Feed, and you can see that it says Add RSS Feed. If I take my cursor away and click over here, you can see how nicely centered that is and everything. But now I'm going to set its color to white, and we won't be able to see it very well anymore. Here's the Text Color and make it White Color. And so now it becomes much more difficult to see, but it is there.
I'm going make sure this is properly centered. That is just necessary because this is actually a darker background than what it looks like. So, we going to grab one more Text Label here, and we're going line this up so that it's centered under this other Text Label that we have got there. And I'm going to grab the ends of it and drag them out to the sides. This one is going to say, "Enter a URL," and that will serve as a prompt. It is also going to serve as a status line, and this is going to be System Font and its Size is going to be 12.
And again, we're going to set the color to white so it shows up really nicely. So, I can either select it down here or I can select it from the Recently Used Colors. So, that will be White also, and we'll have trouble seeing it until we run it. Now, we're going to grab a Text Field, and we're going to drop that in right under the Text Label. You see these little guides. They really help with this a lot, for lining things up. Our Text Field is going to start with http://. And I'm not using that as a placeholder text because we don't want it to disappear when we start to type in there.
We want to be able to actually use that as a prefix or select it and get rid of it if we want to. So that works really well. We're going to set some options down here: Capitalization, None, Correction, No, the Keyboard will be the URL keyboard, its Appearance is the Default, and the Return key will say Done. And we're not going to change the Text Color on this one because it's going to show up like this with the white background, and it will actually look really nice with that textured background. Now, we're going to add a couple of buttons, round rectangle buttons. And I'm going to start with them over here to the left.
And I'm just going to kind of put them close to each other like that, and then I'm going select both of them and drag them to the center so that they're centered but they're spaced just nicely. And the one on the left is going to say Cancel, and the one on the right is going to say Add. Now, I'm just going to scroll a little bit so we can see our Controller Delegate--it's really difficult with the amount of space I have here on the screen--because we want to be able to hook up a few of these things here. Firstly, I'm going to control drag from the text field all the way down here to our controller, and I'm going to select Delegate.
All right, and that allows this Text Field to delegate its protocol to our AddViewController, and I'm going to press Command+S here. That allows us to do this thing down here. Text Field should return, that allows us to get this message when the Done key is pressed on the keyboard. And the Cancel and Add buttons, again, I'm going to control drag all the way down here. So, that's the Cancel action.
It looks like it worked. Let's just do it this way. Check and make sure that worked. Yes, there is our Cancel action, that's great. And our Add action, I can just drag right from there to our Add button, and it's Touch Up Inside. You'll notice that the Default Action is Touch Up Inside, so you can drag it this way. It's just a little bit more complicated to do it that way. If I didn't do that, I can drag it from here, and I have to drag it all the way down here to the Add action there.
And then when I select this, we can see that we get that Touch Up Inside action. So, if we select the Controller and our Connections Inspector, we can see all of these connections. Our statusLabel will go here to our white label there. Our URL Text Field will come here. And now, it looks like we've hooked up everything that we need to hook up. So, I'm going to press Command+S again to make sure this is saved.
And now let's go ahead and run it on the iPhone Simulator. I'm going to select our Run button here. Now, we're just going to press this Plus button, and there's our modal dialog. And you'll notice that it gave the focus to our Text Field, and so here's our little keyboard. Our label RSS Feed or Enter URL in white, those are very nicely visible. If I press the Cancel button, it dismisses it. If I press the Add button, of course dismissing it is all that anything it does. And if I type in a URL and press the Done button, you see that that dismisses it as well.
We now have a working storyboard interface that we can use for the modal dialog box. The next step will be to implement the methods in the AddViewController so we can start adding feeds to our database.
Get unlimited access to all courses for just $25/month.Become a member