Channels ▼


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

Now that you have the screen setup, you need to make your controls available to your code-behind page. To do this, you need to add outlets. When we add outlets, MonoDevelop will create properties for them, which makes them available in the code, just like when you create controls in ASP.NET or a WPF application, etc. The difference here is that with CocoaTouch, those properties aren't created until you expose the controls through outlets.

To add the outlets, go to the Library Window, select the Classes tab at the top, and then from the drop down, select MainNavigationView. Then select the Outlets tab down below. Click the + button, which will add an outlet, then double click on it to rename it. Make the following outlets:

  • btnLocalBrowser
  • btnWebBrowser
  • navMain

Your Library Window should now look like this:

[Click image to view at full size]

Next, we have to wire those outlets up to our controls. In the Document Window make sure that File's Owner is selected. File's Owner represents the file or class that "owns" this xib file. In this case it is our MainNavigationView class, which is what we created our outlets in.

To wire up our outlets, drag them from the Connections Inspector Window onto the item you want to wire them up to as shown here:

[Click image to view at full size]

You can drag them onto either the control in the Document Window, or the designer window.

At this point, the first screen finished in Interface Builder. Save your work and go back to MonoDevelop.

Add another View Interface Definition with Controller, like before, but name it "WebBrowserView." This is the screen that will be the web browser.

After you've created it, double-click on it to open it up in Interface Builder, and let's create put our controls onto it.

First, since this is going to be under a Navigation Controller, let's have Interface Builder simulate the top bar space being taken up by the navigation. To do this, view the Attributes Inspector and under Simulated Interface Elements, change the Top Bar to "Navigation Bar:"

[Click image to view at full size]

Next, drag some Rounded Rect Button controls and a Text Field to our view, to create the browser navigation bar, change the buttons' label text and resize the controls so it looks approximately like this:

[Click image to view at full size]

Once you've got that together, add a Web View:

[Click image to view at full size]

Resize it so that it takes up the rest of the view:

[Click image to view at full size]

Next, add an Activity Indicator control (later, we'll set this to animate when pages are loading):

[Click image to view at full size]

In the Attributes Inspector, set the Busy Indicator to Hide When Stopped, so that it'll only show up when we tell it to animate:

[Click image to view at full size]

Also, since we're making a web browser, let's modify the keyboard to make it easier for our users to enter in URLs. Select the text field and in the Attributes Inspector class, change the Keyboard to "URL," and change the Return Key to Go:

[Click image to view at full size]

Once you have all the controls on there, we're going to create outlets for them, just as we did for the other screen. Make sure that your WebBrowserView class is selected in the Library Window and create the following outlets:

  • btnBack
  • btnForward
  • btnGo
  • btnStop
  • imgBusy
  • txtAddress
  • webMain

Your class should now look like this:

[Click image to view at full size]

Then wire them up to the appropriate controls:

  • btnBack to "<" Button
  • btnForward to ">" Button
  • btnGo to "Go" Button
  • btnStop to "x" Button
  • imgBusy to the Busy Indicator
  • txtAddress to the Text Field
  • webMain to the Web View Control

Your connections should look like this:

[Click image to view at full size]

All right, we're all finished up with Interface Builder for our Web Browser screen. Let's go write some code. Save your work and switch back to MonoDevelop.

Related Reading

More Insights

Currently we allow the following HTML tags in comments:

Single tags

These tags can be used alone and don't need an ending tag.

<br> Defines a single line break

<hr> Defines a horizontal line

Matching tags

These require an ending tag - e.g. <i>italic text</i>

<a> Defines an anchor

<b> Defines bold text

<big> Defines big text

<blockquote> Defines a long quotation

<caption> Defines a table caption

<cite> Defines a citation

<code> Defines computer code text

<em> Defines emphasized text

<fieldset> Defines a border around elements in a form

<h1> This is heading 1

<h2> This is heading 2

<h3> This is heading 3

<h4> This is heading 4

<h5> This is heading 5

<h6> This is heading 6

<i> Defines italic text

<p> Defines a paragraph

<pre> Defines preformatted text

<q> Defines a short quotation

<samp> Defines sample computer code text

<small> Defines small text

<span> Defines a section in a document

<s> Defines strikethrough text

<strike> Defines strikethrough text

<strong> Defines strong text

<sub> Defines subscripted text

<sup> Defines superscripted text

<u> Defines underlined 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.

Disqus Tips To upload an avatar photo, first complete your Disqus profile. | View the list of supported HTML tags you can use to style comments. | Please read our commenting policy.