So I have noticed a trend for having pretty full functioning In-App WebBrowsers for most iPhone Apps. I think this is good on many levels, one I think this provides a good experience for the user & I think as a developer this should be your number one goal. Also, it keeps people in your app & that's really what we want, if you want people to use your app and recommend to friends and family members you need to think about all these "little" things because they can really make or break your app in some people's eyes. Well enough of my opinion on app development, let start talking about the fun stuff, the code!
Apple has done an awesome job of giving us alot of browser functionality right out of the box with the UIWebView, it's really powerful and has almost everything you need to make a working albeit basic In-App WebBrowser with just a few lines of code. Just a note this post was inspired by a post over at iCodeBlog
Here is a quick screenshot of what our end product is going to look like
Let's Get Started!
First let's open up MonoDevelop and let's create a new iPhone MonoTouch Project (
File -> New -> Solution)
We could have choosen an Empty MonoTouch Project; but choosing the iPhone MonoTouch Project does a little bit of the work for us :) Name the project and hit forward.
Now we need to add a View Interface Definition with Controller, right click (or is it called two finger click on a Mac?) on the project name, then goto Add File ..
I called mine MiniBrowserViewController; but of course you can call yours whatever you'd like.
Building the UI with Interface Builder
I know some .NET developers have had a hard time making the transition to using Interface Builder, I myself was one of those people. But since it can be a kinda tricky thing i'm just going to do a quick screen cast, showing you how I built the UI with Interface Builder.
Hooking It All Together
So the first thing we want to do is tell our app that we have our own view, we want to do this in the Main.cs, inside the FinishedLoading function we are going to put this code (note because of formatting issues that I just put code in a screen shot):
One more thing to note in this code that because our Custom View is not a nav controller or tab bar controller we need to account for the status bar ourselves, we do that by newing up our miniBrowserController.View and then drawing a Frame around it. Hat tip to Brent over at codesnack.com for that little tip.
MiniBrowserViewController
The first thing we want to do is override the ViewDidLoad method of the UIViewController we are going to do several things in this method we are going to setup the delegate for the UIWebView, hook up delegates for all our UI elements and do some initialization for our app.
Having our controller be the UIWebView delegate is really important this allows us to control all the events and methods for the UIWebView and respond and update our UI accordingly. Another thing to note in this code is the use of the NSUrl and NSUrlRequest, that's how we get the UIWebView to load our Urls. Unlike the UIButton (which uses the .TouchDown event) we use .Clicked event to respond to being pushed in the UIBarButtonItem. The Back and Forward buttons make use of the .GoBack() and .GoForward() methods of the UIWebView, letting it do all the heavy lifting. Another feature I added to this was an open in safari button (which I think is a great feature for an In-App Browser) this is also relatively easy. Create a NSUrl and new it up with whatever text is in the addressBar, then pass it on to the OS to open in Safari. The last thing of note in this section is the .EditingDidEndOnExit method of the UITextField addressBar, which fires when you hit the "Go" button on the keyboard.
Being In Control of the Browser UIWebViewDelegate
So this is where all the magic happens for updating our UI based on what's happening with the UIWebView, again UIWebView does most of the heavy lifting we just have to overload a few methods. We pass in an instance of our MiniBrowserViewController when we new up the delegate so that we have access to the UI elements.
First we overload the ShouldStartLoad method, this allows us to update our addressBar.text with the update URL text when a user clicks a link on the page they are view or if they use the back and forward buttons. There are also two methods that let us know when the LoadStarted and when the LoadingFinished. So we put some code in there to update the activityIndicator to let the user know what's going on. Also snuck some code in the LoadingFinished to enable or disable the Back and Forward buttons.
To Sum Things Up
Now this is in no way shape or form a full-featured browser; but this should be enough code to get your started and add a great feature to your MonoTouch app. Also note that you must put http:// in the addressBar to get it to respond of course you can easily add some code to handle cases where the user doesn't put in http:// but i'll leave that as an exercise for you. I also didn't add a refresh button which I didn't realize until I had written this post and didn't feel like adding one and retaking screenshots and adding the code (that was just out of sheer laziness =P) So without further ado you can grab the full project over
here