dBlog.com.au

Well while I have been working on the Blog Tutorial I have been learning alot about the iPhone SDK, and once you get into it you will find that it is really quite easy to use. Even the strict data typing!

This tutorial will take you through the process of building your own web browser (well a quick one anyway, with a hard coded URL or hard coded HTML content). When I get a spare minute I will come back and show you how to use the toolbar at the top to add searching, links, etc.

1. Setup Your Project

I am not going to go into the detail of setting up XCode or anything like that in this tutorial as I did it in the RSS Reader Part 1 tutorial, if you don’t know how to set it up then I suggest heading over here and checking it out.

In the top menu click File > New Project and then under the iPhone OS area you will need to choose Window-Based Application.

Name your project WebBrowserTutorial and click “Save”

2. Adding the UIWebView to the window

In the left hand pane under the Resources folder double click the “MainWindow.xib” . You should see the interface builder fire up and it should look something like below, if you don’t see the inspector window (the third window in the screenshot below) then in the top menu click Tools > Inspector.

Now simply draw the “Web View” component from the library on the right to the window (the second box) and it should automatically resize itself to fit the screen.

Now that the view is on the screen you ned to make some connections, first you will need to hold the control key and click+drag from the Web View to the “File’s Owner” Object in the first screen. You should see the following popup:

Just click on the “delegate” Outlet and you are set!

Save and Close the Interface Builder.

3. The Code Behind the Beast (given it is a really small and simple beast)

First off we are going to setup our header file for the UIWebView Outlet.

Open up the “WebBrowserTutorialAppDelegate.h” file from under the Classes folder in the left hand pane, it should look like this

//
//  WebBrowserTutorialAppDelegate.h
//  WebBrowserTutorial
//
//  Created by Dean on 16/09/08.
//  Copyright __MyCompanyName__ 2008. All rights reserved.
//

#import <UIKit/UIKit.h>

@interface WebBrowserTutorialAppDelegate : NSObject  {
UIWindow *window;
}

@property (nonatomic, retain) IBOutlet UIWindow *window;

@end

We are going to add a UIWebView Outlet just below the “UIWindow *window” line.

The code you need to add is

IBOutlet UIWebView *webView;

What this does is it sets an UIWebView Outlet up and names it “webView” for us to use in the main controller.

Save this file and open up the “WebBrowserTutorialAppDelegate.m” file from the same classes folder.

The initial content should look something like this

//
//  WebBrowserTutorialAppDelegate.m
//  WebBrowserTutorial
//
//  Created by Dean on 16/09/08.
//  Copyright __MyCompanyName__ 2008. All rights reserved.
//

#import "WebBrowserTutorialAppDelegate.h"

@implementation WebBrowserTutorialAppDelegate

@synthesize window;

- (void)applicationDidFinishLaunching:(UIApplication *)application {
// Override point for customization after application launch
[window makeKeyAndVisible];
}

- (void)dealloc {
[window release];
[super dealloc];
}

@end

We are going to add some code into the applicationDidFinishLaunching method that will be executed, you guessed it, after the application finishes lunching. Don’t you just love Apple’s function names?

Add the following code just below the “applicationDidFinishLaunching” line

// Example 1, loading the content from a URLNSURL
NSURL *url = [NSURL URLWithString:@"http://dblog.com.au"];

NSURLRequest *request = [NSURLRequest requestWithURL:url];
[webView loadRequest:request];

// Example 2, loading the content from a string
//NSString *HTMLData = @"<h1>Hello this is a test</h1>";
//[webView loadHTMLString:HTMLData baseURL:nil];

Most of the code above is pretty easy to understand, I have included two options for you to play with. The first one will load the content from a url (in this case it is http://dblog.com.au) and in the second example it is loading the content from a string, this string can come from anywhere, you could dynamically generate it, it could come from an XML string (like a RSS Feed ) or pretty much anywhere!

To get the second example to work you will need to comment out the first three lines and uncomment the second two.

You should be ready to save your code and fire your application up.

4. I didn’t see anything! You Suck!

Never fear, I did that on purpose. As you may notice I am trying to press the issue of linking the Outlet to the actual component as if you dont start doing that from the start you will soon get lost and your application development will drive you batty!

You will need to open up the “MainWindow.xib” file in the resources folder again and Control click+drag from the “Web Browser Tutorial App Delegate” Object (see the first image below) to the Webview component in your window. You should see the second window below appear, when it does select the “webView” Outlet.

Save and Close the Interface Builder again and try to run your program again, if you used the first example you would see the screen below

[ad]

5. Conclusion

Well that’s it for this tutorial, have a go at playing around with the layout and the different UIWebView loader options and let me know how you go. I will be writing some more articles on the UIWebView in the near future, and hopefully they will help some people get their head around the iPhone Development SDK.

6. Extra Features (added 27/09/2008)

After some requests I have added some extra tips below.
First one is to load a file from the application bundle.
Open up the “WebBrowserTutorialAppDelegate.m” file and edit the applicationDidFinishLaunching function to look like below:

- (void)applicationDidFinishLaunching:(UIApplication *)application {
	NSString *htmlFile = [[NSBundle mainBundle] pathForResource:@"sample" ofType:@"html"];
	NSData *htmlData = [NSData dataWithContentsOfFile:htmlFile];
	[webView loadData:htmlData MIMEType:@"text/html" textEncodingName:@"UTF-8" baseURL:[NSURL URLWithString:@""]]; 

    [window makeKeyAndVisible];
}

What this does is it load the UIWebView content from a local file (in our case “sample.html”).

Now make a new blank file i the resources file called “sample.html” and put the following contents in it:

<html>
<head>
<title>Sample</title>
</head>
<body>
<!-- Load Image from base64 string -->
Image Loaded from base64 string:<br/>
<img src="data:image/jpeg;base64,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" alt="2954488.jpg" /><br/>
<!-- Load Image from URL -->
Image Loaded from URL:<br/>
<img src="http://www.google.com.au/intl/en_au/images/logo.gif"/><br/>
This is the <strong>body</stron> of the text.<br/>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</body>
</html>

This is just a simple html file, but you can also embed images into the html by using their base64 value, check out http://www.abluestar.com/utilities/encode_base64/index.php for info on how to convert images into base64. By using base64 encoded strings you can build a totally self contained file with all images embedded into it.

7. Download the Project Files

I have finally added the source files for this tutorial, download it now!

Popularity: 32% [?]