iOS Developer Zone

If you completed part two of the tutorial and it seems to be working well you can continue with your current project, or if you prefer you can download the starting point here: GitHub IDZWebBrowser Step4

Outstanding Issues

In this tutorial, you will fix the issues noted at the end of part two, I have reordered them slightly so that dependent issues are dealt with in order:

• the keyboard displayed is not the URL keyboard so it is awkward to type a URL,
• the keyboard auto-capitalization mode is inappropriately set,
• there is no clear button in the address field,
• if the user omits the http:// the page will not load,
• the address field can get out of sync with the displayed page,
• if an error occurs, the user is never informed.

Fixing the Keyboard Configuration

Currently the keyboard type that appears is not really suitable for entering URLs. Much of the punctuation needed requires switching to another keyboard.

The keyboard type that appears when any subclass of UIResponder becomes first responder is controlled by the keyboardType of the object. Possible values are:

• UIKeyboardTypeDefault
• UIKeyboardTypeASCIICapable
• UIKeyboardTypeNumbersAndPunctuation
• UIKeyboardTypeURL
• UIKeyboardTypeNumberPad
• UIKeyboardTypePhonePad
• UIKeyboardTypeNamePhonePad
• UIKeyboardTypeEmailAddress

In your case you can make the appropriate keyboard appear by inserting the following line in viewDidLoad in WebBrowserViewController.m.

If you compile and run your code now you should find that the keyboard that appears has ‘/’ and ‘.com’ keys.

There are still problems with the keyboard. When you use backspace to erase the currently displayed URL the keyboard automatically switches to uppercase.

The keyboard auto-capitalization behavior is controlled by the autocapitalizationType property of the first responder. Possible values are:

• UITextAutocapitalizationTypeNone
• UITextAutocapitalizationTypeWords
• UITextAutocapitalizationTypeSentences
• UITextAutocapitalizationTypeAllCharacters

Add this line of code after the one you just added:

Compile and run your project and confirm that the auto-capitalization behavior is now correct.

Adding a Clear Button to the Address Field

As it stands, if the address field is already displaying an address you have to backspace until you have erased the entire address. This is quite tedious. In Safari when you edit an address an ‘X’ in a grey circle appears on the right hand side of the address field. Touching this icon erases the complete field. Clearly this behavior is more desirable.

The clearButtonMode property of UITextField controls when this “clear button” is displayed. Possible values are:

• UITextFieldViewModeNever
• UITextFieldViewModeWhileEditing
• UITextFieldViewModeUnlessEditing
• UITextFieldViewModeAlways

In your case, the closest match to the behavior exhibited by Safari is UITextFieldViewModeWhileEditing.

Just after the last line of code you added add:

Save everything, compile and run your project now. You should see the clear button appear when you start editing a URL.

Correcting User Input

Most modern web browsers allow the user to drop the “http://” prefix on URLs. At this point, if a user omits this prefix in your browser the page will not load. (In fact, an error will be generated but will have pushed off dealing with errors until the end of the tutorial.)

It is fairly simple to fix this. Edit your loadRequestFromString: method as follows.

This solution uses the scheme property of the NSURL class to determine whether the user set a scheme (the part of the URL before the colon). If not it prepends “http://” this will correct entries like www.yahoo.com to http://www.yahoo.com.

Compile and run your your code. Enter “www.yahoo.com” and verify that the correct web page is loaded.

Keeping the Address Field in Sync

If you use the back or forward buttons, or follow a link, the address bar is not in sync with the displayed page. It turns out there is more to solving this problem than meets the eye. So first define a method to update the address bar.

Add the following definition to your class extension:

The implementation of this method looks like this. Add this to your IDZWebBrowserViewController.m.

The key point about this code is that instead of requesting the URL from NSRequest you are requesting the mainDocumentURL which is more appropriate to show in the address field.

So this code solves how to display an updated URL in the address field, but not how and when you will be informed.

On the face of it, it should be simple. According to Apple documentation the delegate method webView:shouldStartLoadWithRequest:navigationType: is called before the web view starts loading content.

So the following code modification should ensure that your address field is always in sync with the currently displayed page.

It turns out that this works most of the time, except when you use the “back” and “forward” buttons. It seems that sometimes calling goBack or goForward does not call shouldStartLoadWithRequest.

A reasonable workaround for this problem is to add the following code to your webViewDidFinishLoad:

Reporting Errors to the User

When UIWebView encounters an error it invokes the didFailLoadWithError method of its delegate.

You could handle the error right in the delegate method, but as your programs get bigger having a central error handling routine will be useful (a more general solution to this will be the topic of a future tutorial). So just add the highlighted code to your didFailLoadWithError.

Since this method is not yet declared you should add a declaration in your class extension.

The UIAlertView class provides a convenient way of alerting users of errors.
Add the following code to WebBrowserViewController.m.

The NSError class offers a variety of messages, but for your simple error handler the localizedDescription is the most appropriate. As regards the UIAlertView since there is no other sensible action that the user can do other than acknowledge the error a simple “OK” button will suffice, that is, “retry” or other options probably don’t make sense here.

Once you’ve made this change you can compile and run your project. You should now have a fully functional, albeit at a basic level, web browser.

Conclusion

Over the the three tutorials of this project you have learned a lot. You have used Interface Builder to layout a basic UI that contained a UIToolbar, a UIWebView and a number of UIBarButtonItems. You augmented this UI programmatically with a UINavigationBar, UILabel and a UITextField. To keep your UI in sync with the UIWebVIew your UIViewController subclass implemented the UIWebViewDelegate protocol and, when thing went wrong, you used UIAlertView to inform the user. Not bad for a few hours work!

Download the Source Code

You can download the completed code for this tutorial here:
GitHub IDZWebBrowser Step5

This web site is ad supported. If you would like to see other great tutorials like this one please visit one of our sponsors.

In part one of this tutorial you created the user interface for a simple web browser, but it could only go to a single hardcoded page.

In this part of the tutorial, you will customize the Navigation Bar to add an Address Field and a Page Title Label. In contrast to the earlier pieces of the UI, these pieces will all be constructed in code since Interface Builder does not support customization of the Navigation Bar.

If you completed the previous tutorial you can simply continue on with your existing code, or if you prefer you can download the starting point code here: GitHub IDZWebBrowser Step3

Add Properties to Refer to the New UI Element

First you will need some properties to refer to the new UI elements. Modify your class extension to include the highlighted code.

And copy and paste the following constants above the class extension.

These are dimensions that, by trial and error, gave an acceptable layout for the title label and address field.

Creating the Page Title Label

Add the following code to your viewDidLoad: method to create the page title label.

In this code line 2 gives you a short hand for referring to self.navigationController.navigationBar, lines 5-8 create a label with a clear background, 12 point font and centered text, line 10 adds this label to the navigation bar and line 11 assigns it to your pageTitle property so that you can set its text later.

Creating the Address Field

To create the address bar, add this code just after the previous piece:

This code follows a similar pattern to the previous piece, creating the text field, adding it to the navigation bar and assigning it to a property. Line 9 is, however, worth comment. This line tells the text field to call loadRequestFromAddressField:, a method you are about to implement, when the user finishes editing.

Loading a URL from the Address Bar

Add the declaration of loadRequestFromAddressField: to your class extension.

Then add the following code to your implementation section.

This code retrieves the text from the address field and uses the loadRequestFromString: method that you wrote previous to load the URL.

Updating the Page Title Label

To update the page title label you need to be able (obviously enough) to get the title of the web page. If you look at the documentation for UIWebView you will notice that there is no method to retrieve this information. The solution to this is to use some JavaScript to get the page title as shown here.

Add this code to your implementation section. Don’t forget to also add a declaration to the class extension as well!

This function should be called whenever a page finishes loading, so modify your webViewDidFinishLoad: to do so.

Remaining Issues

There are still a number of small issues that need to be taken care of. Tomorrow’s tutorial will address them. They are:

• the address field can get out of sync with the displayed page,
• the keyboard displayed is not the URL keyboard so it is awkward to type a URL,
• the keyboard auto-capitalization mode is inappropriately set,
• there is no clear button in the address field,
• if the user omits the http:// the page will not load,
• if an error occurs, the user is never informed.

Download the Source Code

You can download the completed source code for this part of the tutorial here:
GitHub IDZWebBrowser Step4