iPhone Coding – Learning About UIWebViews by Creating a Web Browser

Wow! It has been a long time since my last tutorial… As I wrote in my last post, I had to take a break due to my wife having our baby.  But, now I’m back and have a great tutorial for you guys.  

Today I will be showing you how to work with a  UIWebview to create a basic web browser.  Here is a screenshot of the app we are going to create.

Create a View-Based Application

Ok, so let’s get started.  Start by opening up Xcode and click File -> New Project.  Next select View-Based Application and click Choose… Name this project something like iCodeBrowser and click Save.  

Now we are ready to begin coding…

Create IBOutlets and IBActions

Before we create the interface for our web browser, we need to establish the IBOutles and Actions to interface with the UI elements in code.  Start by opening up iCodeBrowserViewController.h and add the following code:

Let’s take a look at this code line by line.  The first thing we added was the <UIWebViewDelegate> to the end of our interface declaration.  This is telling the app that this class will be the delegate for our UIWebview.  

What does it mean to be the delegate you ask? Great question… A delegate is like a handler.  It is responsible for implementing certain methods in order to handle events sent by the object they are the delegate for.  So in our example, we are simply saying that we will implement some of the functionality of the UIWebView.  This is needed so we can capture certain actions of the UIWebView such as a click on a link or so we can tell when a page has started/finished loading.  If it’s still unclear, ask me clarifying questions in the comments section.

Next, we see our 3 lines of declaring IBOutlets.  These are the UI elements that we will be interacting with.  In case you didn’t know, the UIActivityIndicator is the little spinner/loading animation that you see on various apps when content is loading.  We will be using this to show that a page is currently loading.

Following this code, there are 3 IBActions.  IBActions are functions that get called in response to a user interaction with the application (such as tapping a button).  For our basic browser, we are only offering 3 types of functionality.  gotoAddress which will take a user to the address they type in the address bar and goBack/Forward should be pretty self explanatory.  

Creating the User Interface 

Now, let’s create the interface using Interface Builder.  I am going to be showing you how to do this in the video below.

Implementing the IBActions

Now that we have our interface, let’s make the app function.  We need to implement our methods.  Open up iCodeBrowserViewController.m and add the following code.

We need to synthesize our properties to allow us to interact with them.  Synthesizing automatically creates “getter” and “setter” methods for our properties.  Next, let’s implement the viewDidLoad method.  This is where we will be loading our “homepage”.  Add the following code to the viewDidLoad method.

The viewDidLoad method gets called automatically by our application whenever this view first loads.  We can know for sure that it will get called, so we can put our initialization code here.

The first thing we see is the urlAddress string.  This will be our “homepage”.   You can change this to any address you wish to start with.  Next, we build a URL object with our string.  We need to do this so we can make a web request.  Following this, we build our web request and load it into the webView.  This will display the homepage inside of our webview.  Finally, we set the text of the address bar to the homepage address.  This part is more for aesthetics to let the user know what page they are on.

Next, we implement the method that we connected to the UITextField’s DidEndOnExit method gotoAddress.  Add the following code:

This is similar to the code we wrote in the viewDidLoad method, except for the fact that we are getting our URL string from the address bar.  This method gets called when the user presses the “Go” button on the keyboard.  The last thing to note here is we call the [addressBar resignFirstResponder] method.  This simply tells the app to hide the keyboard when this method gets called.

The implementation of our Back and Forward methods are pretty easy.  Go ahead and add the following code.

UIWebViews are pretty cool because of the functionality they offer us built right in to them.  We simply call [webView goBAck] to go back and [webView goForward] to go forward.  This greatly simplifies the interactions with the webview.  If we were to code that functionality from scratch, we would have to create a stack of URLs and continually push and pop them off the stack to keep track of where we need to go.  Thanks Apple for not making us implement this.

Finally, we need to implement the delegate methods for UIWebview.  These methods allow us to write our own code to respond to actions by the UIWebview.  The first methods we will implement are the webViewDidStartLoad and the webViewDidFinishLoad methods.  We will use these to show and hide the activity indicator. Add the following code:

So when the request is first made for a ULR (before the page starts loading) the webViewDidStartLoad method gets called automatically.  We use this opportunity to start our activity indicator to let the user know the page is loading.  If you don’t have something like this, it simply feels like the app is frozen when in fact, it’s just loading the page.  Finally, the webViewDidFinishLoad method gets called when the page is fully loaded.  After this, we can stop the indicator (and it automatically hides itself).

The very last thing we need to do is define what happens when a user clicks on a link. Add the following method:

This method gets called automatically whenever the user clicks a link.  This method can be very useful if you want to make a native iPhone application that integrates with a web app.  You can use this method to trap the user’s clicks and have your application respond to web links that get clicked.  In our case, we need it to do 2 things.  The first is to set the text of the address bar to the URL of the link that was clicked on and to load that address into the webview.

One thing to make note of: We do a check to see if the URL scheme is “http”. This is to ensure that the user typed http before their URL.  You can add an else statement here that auto prepends the http if the user did not add it.  This would allow you to type in a url such as “icodeblog.com” rather than having to type “http://www.icodeblog.com”.  I chose to omit it for this tutorial.

Remember, all of this added functionality of a UIWebView can only be gotten if you tell your class that it implements the UIWebViewDelegate protocol as we did in our .h file.

The app should be complete! Click on Build and Go to see this baby in action.  Remember, you must put “http://” in front of your URL’s.  

I hope you have enjoyed this tutorial.  If you have any questions or comments, feel free to leave them in the comments section of this post.  You can download the source here . Happy iCoding!