Creating our project and handling the UI
Open up Xcode and choose File, New, Project. We’ll use a Single View Application and name it DayFourteen:
Next, open up the MainStoryboard.storyboard file. In the UI element selector in the bottom right of Xcode, find Web View and drag it onto your UI so it takes up the whole view:
Now we just need to wire this up with our code behind. To do this, open the Assistant Editor in the top right of Xcode. Next control + click and drag from the UIWebView to your code behind and create an outlet. While you are in the ViewController.h class, go ahead and make it implement UIWebViewDelegate. When you’re done, the class should look like this:
Now we’re ready to start loading web pages.
Loading an internet webpage
Switch over to VIewController.m and change your viewDidLoad method to this:
Here we’re generating a NSURL and using that to generate a NSURLRequest. We can then pass the request into our web view’s loadRequest method. Now if you run your app, we should see my website load:
The first thing you might notice is that the site loads and it looks awful. Even more awful than it looks if you load it in Safari. The reason for this is that the UIWebView doesn’t handle many things that Safari does by default. In this case, you can’t even pinch and zoom out (or zoom in). Let’s tackle fixing that problem next.
Telling the UIWebView to scale pages is actually remarkably easy. We can do it by adding one line of code to our viewDidLoad method:
Here, setting the scalePagesToFit property of the web view to YES tells it that it should scale every page it loads. Now when we run the application, we can see that my site looks a little less awful:
You’ll also notice that you can now pinch to zoom in and out. If you’re running this on the simulator, you can perform a pinch by holding down the alt / option key and then click and drag in the simulator.
Loading a local webpage
Let’s move on from loading internet web pages and look at how to load a local html file. This is useful for many different things including reusing static HTML content, building a PhoneGap style “web” iOS app, and more. We first need to add an HTML file to our project. Right click on your project folder and choose New File. In the template windows, select Other beneath iOS and pick the Empty template:
In the next window, name your file LocalPage.html then create it. You should see a new html file added to your project in the Project Navigator. Next, open LocalPage.html and edit it to have the following content:
Our page is very simple but will serve our uses. Now let’s return to ViewController.m and make it load the page. Change the viewDidLoad to match the following:
First we get a NSString which contains the path to our local file. Notice that we use the NSBundle mainBundle to actually get the path for the file since we don’t know what it is. If we had put the html file in a subgroup in our project, we could pass the name of it in as the directory. Since we didn’t we’re passing in nil. We then use NSString’s stringWithContentsOfFile method to open that file and dump it’s contents into a NSString. We then use the web view’s loadHtmlString method to load the NSString. Now when we load our app, it will look like this:
We’ll next use this to do something a little more advanced and actually hook back into our iOS code!
The first thing we need to do is change up our html:
As you can see, we’ve added an html input of type button that has an onclick method. In that method we are setting the window.location variable on the DOM. Whenever the location is changed, a method is fired against the UIWebView. This is a method we can intercept by implementing the UIWebViewDelegate. Hop over to the ViewController.m. Before we can implement the delegate method, we need to tell the web view that ViewController will act as it’s delegate:
If you put a breakpoint at the start of this method, you’ll see that it’s called right when you load the web view from the viewDidLoad method. In this method, we’re getting the URL from the request and then we’re checking the schema of that URL. If it matches what we are setting the location property to (callmycode) then we know that we can do some special processing. Here, we’re pulling out the additional query string params and then using them to populate a NSString which is used to show a UIAlertView. I’m not actually pulling out the individual parameter values here and you could probably find a better way to parse them, but this works for what we want to show. Now when we run our app and tap the button in our web view, we should see this:
Today we covered a lot of ground with how to use UIWebView’s in your application. As you’ve seen, there is a lot more you can do with a web view then just load a page from the internet. Many applications use this capability to do some very cool things. You can access the completed source code from today here.