How to create a simple iphone browser app using monotouch and c#

Cocoatouch includes a very powerful control called the UIWebView. This post will show you how to create a minimal browser app using this control via Monotouch. In future posts I will demonstrate the vast capabilities of this control.

The simple app we’ll be building will look like this:

First, open MonoDevelop and create a new iPhone Application

Next, open Interface Builder by double-clicking on the MainWindow.xib file in MonoDevelop. Add a UIWebView, a UITextField and 3 UIButtons so that your ui looks something like this:

After creating the ui, you need to create outlets so that you can interact with the various controls from code. Depending upon whether you are using Leopard or Snow Leopard, this will be a bit different. On Leopard, you can add outlets to the AppDelegate in the inspector window. (Snow Leopard changes interface builder somewhat. The monotouch documentation shows this here. We also set some properties on the UITextView so that is will show a keyboard appropriate for url entry and browser navigation.

Save everything in Interface Builder and go back to MonoDevelop. As this is a simple demo, I’m adding all the code in the Main.cs file just to keep it, well, simple.

In monotouch we have the choice to use C# style event handling or cocoatouch style messaging (you can read more about it here). Let’s choose c# events for this example (I’ll do something with the cocoatouch style in another post).

In FinishedLaunching everything is wired up. We respond to TouchUpInside for the various buttons and call the appropriate navigation methods on UIWebView.

The keyboard on the UITextView that is used for specifying the url is closed by calling ResignFirstResponser. When the Go buton on the keyboard is pressed, the keyboard will close and the UIWebView will request the specified url via the LoadRequest method.

Here’s the complete code:


using System;
using System.Collections.Generic;
using System.Linq;
using MonoTouch.Foundation;
using MonoTouch.UIKit;

namespace SimpleBrowser
{
public class Application
{
static void Main (string[] args)
{
UIApplication.Main (args);
}
}

// The name AppDelegate is referenced in the MainWindow.xib file.
public partial class AppDelegate : UIApplicationDelegate
{

// This method is invoked when the application has loaded its UI and its ready to run
public override bool FinishedLaunching (UIApplication app, NSDictionary options)
{

InitButtons();

InitWebView ();

InitUrlTextField();

MakeFirstRequest ();

window.MakeKeyAndVisible ();

return true;
}

void MakeFirstRequest ()
{
string url = "https://mikebluestein.wordpress.com";
urlText.Text = url;
NSUrlRequest req = new NSUrlRequest (new NSUrl (url));
webView.LoadRequest (req);
}

void InitUrlTextField ()
{
urlText.ShouldReturn = (textField) =>
{
textField.ResignFirstResponder ();
string url = textField.Text;
if (!url.StartsWith ("http"))
url = String.Format ("http://{0}", url);
NSUrl nsurl = new NSUrl (url);
NSUrlRequest req = new NSUrlRequest (nsurl);
webView.LoadRequest (req);
return true;
};
}

void InitWebView ()
{
webView.LoadFinished += delegate { urlText.Text = webView.Request.Url.AbsoluteString; };
}

void InitButtons ()
{
backButton.TouchUpInside += delegate { webView.GoBack (); };
fwdButton.TouchUpInside += delegate { webView.GoForward (); };
refreshButton.TouchUpInside += delegate { webView.Reload (); };
}

// This method is required in iPhoneOS 3.0
public override void OnActivated (UIApplication application)
{
}
}
}

5 thoughts on “How to create a simple iphone browser app using monotouch and c#

  1. Pingback: MonoTouch.Info

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s