Mobile

UIWEBVIEW: The iPhone's Built-in Browser, Part 1

By Bryan Costanich, April 07, 2010

Using MonoTouch to integrate a full-featured browser into your application

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:

[Click image to view at full size]

Next, create a new iPhone MonoTouch project. To do this, select File/New/Solution:

[Click image to view at full size]

Choose iPhone Window-based Project from the C#/ iPhone templates and name the solution "Example_UIWebView":

[Click image to view at full size]

Click OK on the Project Features dialogue (they're not relevant to what we're doing right now):

[Click image to view at full size]

The project should now look something like this:

[Click image to view at full size]

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:

[Click image to view at full size]

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:

[Click image to view at full size]

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:

[Click image to view at full size]

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:

[Click image to view at full size]

The Navigation Controller doesn't come with a view that we can put stuff in, so drag a View control onto it:

[Click image to view at full size]

Your Document should now look like this:

[Click image to view at full size]

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:

[Click image to view at full size]

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:

Dr. Dobb's encourages readers to engage in spirited, healthy debate, including taking us to task.
However, Dr. Dobb's moderates all comments posted to our site, and reserves the right to modify or remove any content that it determines to be derogatory, offensive, inflammatory, vulgar, irrelevant/off-topic, racist or obvious marketing or spam. Dr. Dobb's further reserves the right to disable the profile of any commenter participating in said activities.

Video

This month's Dr. Dobb's Journal

This month,
Dr. Dobb's Journal is devoted to mobile programming. We introduce you to Apple's new Swift programming language, discuss the perils of being the third-most-popular mobile platform, revisit SQLite on Android
, and much more!