Although most users (and many developers) don't realize it, the iPhone has one of the best mobile browsers available. This built-in browser, which ships with Mobile Safari, bases it's rendering engine on WebKit -- the same rendering engine used in Safari, Google Chrome, Konqueror, and other browsers. Apple makes the core browser functionality available via the UIWebView control. With this control, you can easily integrate a full-featured browser directly into your application. In addition to using it to display web pages, the control also provides a rich document display engine. You can display HTML documents complete with images, Javascript, and other content, directly from your application. Taking it one step further, you can package your content as XML and use the XSL transform feature in .NET to style your content and display it to your users.
In this two-part article, I use MonoTouch to build an application that has a browser you can use to browse the Internet, using UIWebView to display content that we've packaged in the application. In Part 1, I create the web browser and in Part 2 examine how to display the local content. (The complete source code accompanying this article is available here.) MonoTouch is a framework that lets you build iPhone and iPad applications using C#. This frees you from dealing with memory management, pointers, etc., and instead lets you focus on the application functionality. MonoTouch is a commercial product that is part of the larger, open source Mono project, Novell's open-source implementation of the .NET standard created by Microsoft and published as a set of international standards. For more on MonoTouch's capabilities, see my article MonoTouch and the iPhone: The GPS and Compass Functions.
The recently released MonoTouch 2.0 is focused specifically on application development for the iPad, iPhone, and iPod Touch using the .NET Framework, including C# and other .NET programming languages. MonoTouch simplifies iPad and iPhone development by letting you use code and libraries written for .NET. While the iPad developer license restricts the distribution of scripting engines or Just-in-Time (JIT) compilers required by managed runtimes such as .NET for code execution, developers can use MonoTouch while fully complying with Apple license terms because MonoTouch delivers only native code.
So let's build an application....
Building the App
To start, open up MonoDevelop; it should look something like this:
Next, create a new iPhone MonoTouch project. To do this, select File/New/Solution:
Choose iPhone Window-based Project from the C#/ iPhone templates and name the solution "Example_UIWebView":
Click OK on the Project Features dialogue (they're not relevant to what we're doing right now):
The project should now look something like this:
The application is going to consist of three screens:
- A home screen with two buttons
- A web browser screen
- A local content browser.
I'll use a Navigation Controller to manage the screen navigation and the buttons on the home screen to push screens (views) onto the Navigation controller.
Let's add the main screen, which will hold the Navigation Controller and the buttons. Right-click on the project name and choose Add, and then New File:
On the next screen, choose iPhone from the left pane, and View Interface Definition with Controller on the right pane. Name it, "MainNavigationView," and click New:
Now let's open our MainNavigationView in Interface Builder by double-clicking on the MainNavigationView.xib file in MonoDevelop. Interface Builder will load and the Document Window of your view should look like this:
We want our Navigation Controller to be the top level View Controller, so delete the View item in the Document Window. Once you've done that, drag a "Navigation Controller" control from the Library Window onto the Document Window:
The Navigation Controller doesn't come with a view that we can put stuff in, so drag a View control onto it:
Your Document should now look like this:
Now that we have a View, we have a surface on which to put stuff, so let's drag a couple of Rounded Rect Buttons from the Library Window onto our newly created view. Resize them so that they look approximately like the following, and edit their text labels by double-clicking on them:
Set the text one of them to be "Web Browser," and the other to be "Local Content Browser." While we're here, change the text for the root navigation item from "Root View Controller," to "Browser Example." Do this as you did the buttons, simply double-click on the label and enter the new text:
