7 days of WordPress plugins, themes & templates - for free!* Unlimited asset downloads! Start 7-Day Free Trial

Next lesson playing in 5 seconds

  • Overview
  • Transcript

4.3 Reading an Article

In the last two lessons, we have worked with UITableViews to present our data. We are now finally to the point where we can read the associated article. We will do this through the UIWebView we added to this ViewController in our Storyboard.

4.3 Reading an Article

So, to this point in our application, we've gotten to the point where we can add a feed to our table view on our feeds view controller. We can select it, come over to it, our articles view controller and see our articles associated with it, and now the next step is we wanna be able to. Segue over to our web view controller, and actually show the article that was selected as well as get rid of this nasty little title up here and actually put something up there that has some meaning. So in order to do this, it's fairly straight forward, fairly simple, but there's a couple little housekeeping things we're gonna have to do first. Now the first thing I wanna do is I wanna update some things on our web view controller so we can get programmatic access to them which we really haven't quite done explicitly to this point. So I'm going to introduce a new topic here. So what I want to do is I'm going to give ourself a little bit more real estate, and I'm going to close out that left pane, so we're left with nothing but the storyboard. Then, I'm going to come over here and I'm going to select this two circles here in our assistant editor. And what this is going to do is it's gonna bring up a right-hand code pane right next to our left-hand storyboard. So, what this allows us to do is to select a particular view controller within our storyboard and it's gonna show the code that's associated with it. So, now, since the sub-class of this table view controller over here is the articles table view controller. I get that in my code view to the right. So if I come and select my web view controller I see the same thing over here so that is very, very nice. So now what I want to do is I want to be able to get access to this UIWebView from my code so that I can point this to a particular URL. And have it actually show up, and I want to be able to change this title up here as well. So we're gonna do a couple very simple things here, I think, to actually get this to work. So, ultimately, what I want to happen, very similarly to what we've done before, is, I want to select an article from this table view. And I want to pass that particular article over here to our UIWebView, and then update things appropriately. So, in order to do that, we're going to create a very simple article here. Which is going to be of type ArticleModel. And we'll just initialize it to a new ArticleModel. Fairly straight forward. But now, once I have that particular article, I want to be able to like I said, do two things. I want to update this UIWebView, and I want to set the title up here appropriately. So, in order to do that, I need to get programmatic access to this UIWebView, but how do I do that? Well this is where we're going to introduce a new topic. And if you've never done iOS development, or iPhone development before. This'll be a slightly new topic but it's fairly straight forward and this is the concept of an outlet. So what I wanna do is I wanna create an outlet for this particular UIWebView so that I can get programmatic access, and the way that I do that, is by selecting my control, in this case my UIWebView. And I'm going to Ctrl+Click and drag over to the right side, where my code is, then I'm going to let go. And this is going to pop up a little connection dialogue box where I can select my type of connection, and in this case I want to create an outlet. I want to give this a name so I can reference it, we're just going to call this webview. And it's going to be of type UIWebView, and that's our only option. We'll leave storage to week. And then we'll hold, go ahead and connect it. So now, if you've done it correctly, you should see a little dark circle on the left hand gutter over here. And if you, if you mouse over it, you know, it's going to highlight the actual control that it's associated with within your storyboard, storyboard so you can actually see what's going on. So that's very nice. So, what this will allow us to do is within this web-view controller Swift code file, I can now write some code that will make changes to this particular control. So let's go ahead and do that now. So, once we get in here, I'm going to come into my viewDidLoad. And what I want to do is I wanna be able to set the URL that that, that that, web view is going to go to. And we do that by selecting web view and what we wanna do is we want to, use the method loadRequest. Now load request takes it in an NSURL request so we have to do a little work to get that far. So let's go ahead and do that now. So we're gonna start by creating a, an NSURL. So we'll say let URL, which is going to be an NSURL, and we're gonna set that equal to NSURL, which is going to be the initializer that we're choosing, and we're just going to specify the version that takes in a string, and that string is going to be associated with article.link. So that's the link associated with that article that we're passing over. And this is going to once again create an optional, so we'll just go ahead and use an exclamation point to make sure that it's actually an NSURL. And then from that point, we can create a URL request. So we'll say request, is going to be an NSURL request and we'll set that equal to NSURL request as the initializer. And we're going to set the URL equal to URL. So now, we have our request and now we're going to come in here and we're going to pass in our request, just like that. So now we're, we're loading our request, and that should just about to it as far as loading the request. But remember, we also want to set this title up here. And the way that we're going to do that is just before we do all of this work, we're going to specify the self.title is gonna be equal to the article.title. So we'll go ahead and save that. So let's go ahead and build just to make sure everything is looking good, which it is. Now the only problem is we actually have to pass some data from Articles view controller via the segue over to our web view controller, which if you watched one of the previous lessons, you should be able to do quite easily. So we'll go ahead and we'll get rid of this view, and we'll go back to what we were doing before, and I'm going to pull up our articles table view controller, and we're going to uncomment out our prepare for segue, so we can start to add some code to it. So we'll go ahead and get rid of these comments. We're gonna get a hold of our web view controller so we're gonna create a reference to a web view controller. Which is going to be equal to and we're gonna grab our segue, our destination view controller and then we're gonna cast that as a web view controller. The we need to get the selected row within the table view so we'll say that our index path, is going to be equal to self.tableView.indexPathForSelectedRow just like we've done before. And we're gonna make sure that we get rid of that little optional and we force it to be an index path. Then we're gonna get the appropriate article from our collection from our array of articles, so we'll say articles IndexPath.Row. So now we have the correct article. Now all we have to do is go into our web view controller and set the article equal to article. So we'll go ahead and save. Once again we'll build just to make sure everything succeeds. And now we'll go ahead and try to run our application. And if everything has been correctly, we should see a nice little transition once again. So, now we see news and updates for Apple Developer, select our feed, and now, we can scroll through our list here and we'll say The Hour of Code 2014. And you'll see our title up here has been updated and the request has gone out. And once it finishes, it will come back and we can see the actual article that was retrieved from that particular URL. And we can do this all over the place for all the different new Swift development courses are available and we can go ahead and read through this. So now we have a very, very nice UI that's gonna allow us to do a number of things. Namely, add in a feed, look at the articles, and then ultimately read the article whenever we want. So that's pretty nice. So it's a pretty nice little feature we have there. Now I'm sure to this point, you're wondering well, this is all fine and dandy. But, what I really wanna be able to do, is add some functionality and actually add multiple feeds. And not be locked into this one that we have to keep hard coding, and I wanna be able to add more with this little plus button. And that's exactly the direction that we're going to go in the next lesson.

Back to the top