AddThis Social Bookmark Button

Listen Print Discuss

BYOB: Build Your Own Browser

by Andrew Anderson
01/23/2004

There are a lot of things to like about Apple's Safari web browser -- the stylish user interface (especially the tabs!), SnapBack feature , popup blocker, Google toolbar, and of course, Safari's speed. For developers though, one of the coolest features is hidden under the hood: WebKit -- the Cocoa/Carbon framework that's the basis for Safari.

Why is WebKit worth paying attention to? Well, it's a fully documented, fully functional set of web browsing components that developers can integrate into their Cocoa/Carbon applications. WebKit gives developers the ability to make their applications much more powerful with very little added effort.

This is the first in a series of two articles describing how to develop applications using WebKit. This article will cover building a basic web browser without writing a line of code. The browser we will have at the end of this article will include just the basics, a browser frame, a location bar, and seven buttons (backwards, forwards, stop, reload, print, smaller text, and larger text). The next article will show a little bit of code that will allow us to add some advanced features to the browser. By the time we are done with both articles, we'll have constructed a browser with several advanced features, but without writing hardly any code.

Getting WebKit

Before you start building the browser, verify that the WebKit SDK is installed on your machine. The main file you are looking for is /System/Library/Frameworks. (If you have installed the Xcode Tools for Panther you should already have this installed.) If you have this file, then you're ready to go. If not, then you need to download the WebKit SDK from Apple's Developer web site. When you log in, choose the Download link, followed by the WWDC 2003 link. You want to download the WebKit SDK(v1.0).

Setting up the Project Files

First create a Cocoa Application project in Xcode via the New Project menu choice from the File menu. Once that's done, add the WebKit framework to the project so Xcode can link against the framework during the build process.

To add the framework, choose the Frameworks/Other Frameworks folder in the project navigator. This folder should contain Foundation.framework and AppKit.framework. You need to add WebKit.framework. To do this choose Add Frameworks from the Project menu and select /System/Library/Frameworks/WebKit.framework.

Once the framework has been selected, Xcode will ask about some parameters for adding this framework to the project. Before clicking Add make sure that Add To Targets contains your executable and that it's checked, that the Text Encoding is correct for your country, and that the reference type is Default.

The last step in setting up the project files is to turn off the Zero link feature. Zero link is a useful tool that allows the development of applications without having to link and recompile with each step. While it is an extremely useful feature, Zero link is more effort than it is worth for this project. To turn Zeroconf off, choose the project, open the Get Info window via the Project menu, choose the Styles tab, and deselect the Zero link checkbox.

Building the Interface

Our browser is going to have a simple interface: seven buttons, a URL line, and the view that contains the web page.

Building this interface is very straightforward. To start you need to get into Interface Builder by double-clicking the MainMenu.nib file in the resources folder of the main project. Once Interface Builder is open, you're going to start by adding the buttons.

From the Palettes menu, choose the Cocoa-Controls tab, and from this tab click-and-drag a rounded button control into the top left corner of the main window. If you have Aqua Guidelines enabled, you can use them to determine where to put the button, otherwise put it someplace in the top left corner. After the button is placed, double-click it and change its name to Back.

The last step is to anchor this button so it stays put when the window is resized. To anchor it, bring up the Information window for the button by choosing the Show Info choice from the Tools menu. Next, choose Size from the pull-down and in the Autosizing window anchor the button to the bottom and left. You do this by clicking the portion of the vertical line that is below the middle box and the portion of the horizontal line that is left of the middle box until squiggly lines appear.

Repeat the same process for the Forward, Reload, Stop, Print, Smaller, and Larger buttons, placing each on the left of the previous button. If you run out of space in your window, resize it so that it can accommodate all of the buttons.

When done, your interface should look something like this :

Now it's time to add the URL line, which you will use to specify what web resources we would like to use. To do this, choose the Cocoa-Text tab from the palette and click-and-drag an NSTextField to just below the line of buttons on our window. Once the URL line is placed, all you need to do is anchor it, the same exact way you anchored the buttons.

The last step to building the interface is to put the WebView control onto the window. To do this, choose the Cocoa Graphics Views tab from the palette. The WebView control is the one that has the Safari icon on it. Click-and-drag this view onto the window. Place it so the top left corner of the control is in the top left, just under the URL line. Next resize the WebView so that it takes up most of the interface window.

Now anchor the WebView so that it can be resized when the window is resized. To do this, once again go to the Information window and choose the Size pull-down. In the Autosizing window we attach the WebView to the sides of the window, by clicking on the portion of the horizontal and vertical lines that are inside the middle box until the squiggly lines appear inside the box.

Connecting the Interface

Now that the interface is built, it's time to connect it together. There are eight connections to make: one from the URL line to the WebView and one from each of the buttons to the WebView.

The first connection to make is from the URL line to the WebView. First click the URL line and Control-Drag a line to the WebView, making the Info window pop up. In the Info window, choose Connections from the pull-down and choose the Target/Action button. Click the takeStringURLFrom: action and click connect.

Next you're going to connect the buttons. These connections are made the same way as the URL line connection, except the buttons are connected to the following actions:

ButtonAction
BackgoBack:
ForwardgoForward:
Reloadreload:
StopstopLoading:
Printprint:
SmallermakeTextSmaller:
LargermakeTextLarger:

Once all of the connections are made, you're done. Be sure to save your interface and then quit Interface Builder.

Related Reading

Learning Cocoa with Objective-C
By James Duncan Davidson, Apple Computer, Inc.

Table of Contents
Index
Sample Chapter

Read Online--Safari Search this book on Safari:
 

Code Fragments only

Running the Browser

The last step is to build and test out the project. When you quit Interface Builder and are returned to Xcode, click the hammer icon on the main Project window to build your project. After that completes, check the Build Results window to make sure the build succeeded, and then run your project. This should pop up a new window that has the interface we just built in it. To test it enter a URL (make sure it includes a protocol such as http) and hit return.

The buttons in the interface behave the same way they do in a standard web browser: Back goes to the previous page, Forward goes to the next page, Reload reloads the page, Stop stops the page from loading, Print brings up the printer dialog, Smaller makes the page text smaller, and Larger makes the page text larger. The one difference between this browser and some others is that you must enter the URL followed by the enter key to load a URL, as there is no Load button.

That's All There Is to It

As you can see, building your own simple browser with WebKit is extremely easy. A simple browser only involves two steps, build an interface and then connect the interface.

Now that the basic interface is built, you have the skeleton that you can add more advanced features to. The possibility for additional features is endless and allows developers to make their own Safari-like browsers by combining Safari's features in novel ways, or by implementing their own features.

In the next article I'll cover how to take advantage of more advanced features of WebKit, including: updating the WebKit options, displaying the page titles, updating the URL line to display the current URL, displaying the load status, and spoofing other browsers.

Andrew Anderson is a software developer and consultant in Chicago who's been using and programming on the Mac as long as he can remember.

Return to the Mac DevCenter.