NoCode Browser
Volume Number: 20 (2004)
Issue Number: 2
Column Tag: Programming
Rapid Development: NoCode Browser
by David Linker
Using the Apple's Web Kit SDK to make a web browser
Want some rapid development?
One of the advantages that is mentioned about the Cocoa development environment is the
well-developed frameworks that are provided, giving impressive functionality without much effort. A
recent addition is Web Kit, which is the framework which provides a full suite of components
required for web browsing, and are the basis of the Safari web browser from Apple. To illustrate the
power of Web Kit, Apple explains in the documentation how to make a browser with only one line of
code. Some folks have expanded on this explanation, and in the discussions that ensued, others
pointed out that it is possible to write a browser using Web Kit with NO lines of code. This article
will explain how, and discuss some of the capabilities of Web Kit as well.
Fast lane
In this age of 24/7, just-in-time and accelerated learning, some of you may want to get right to
the point, while others want more details. To satisfy the more experienced readers, or the less
patient, here is the executive summary of the main points necessary:
- Install Project Builder, December 2002, if not already installed
- Install Safari, if not
already installed
- Install Web Kit
- Make a new Cocoa Application project in Project Builder
- Add the Web Kit Framework to the project
- Open up the MainMenu.nib file in Interface Builder
- Drab the Webview header file to Interface Builder
- Add a Customview to the main window
- Change its type to Webview
- Add a text box to the main window
- Connect the target output
of the text box to takeStringURLFrom in the Webview
- Build the project
- Type a URL in the text
box and hit Enter
- Browse away!
The rest of this article fills in the details, and add a few niceties along the way.
Origins and background
Apple built the technology used in its new browser, Safari, on existing open source projects. KDE
is an open source "desktop" environment for unix. Part of KDE is a set of tools for rendering HTML,
called KHTML, and a set of tools called KJS, which assist with scripting. These two components were
used by Apple to develop the core classes that are used in Safari. The framework incorporating these
classes which they developed for Safari is called Web Kit, and Apple released the interface to Web
Kit during the WWDC in June of this year.
Web Kit provides an amazing amount of functionality with little effort. It supports HTML, DOM,
SSL, Javascript, stylesheets, embedding Java applets, and a "history" of recent sites. What this
means in practical terms is that it is possible to incorporate all of this functionality in your
applications with minimal effort.
Apple provided a very terse description of how to do this on the pages describing the use of Web
Kit at:
http://developer.apple.com/documentation/Cocoa/Conceptual/DisplayWebContent/index.html
If you choose "Simple Browsing", there is a short description of how you can create a browser
with one line of code, which is as follows:
[[webView mainFrame]
loadRequest:[NSURLRequest requestWithURL:[NSURL URLWithString:urlText]]];
Of course, there is a fair amount of "wrapper" that has to go around this to incorporate it in a
program, including making a header file, class file, and all of the connections in the interface.
Name that tune!
Many years ago, was a TV game show called "Name that tune". In it, the contestants would try to
name a tune in the fewest notes, challenging each other with "I can name that tune in N notes",
where N was a small number, and the person who named the smallest number got the first chance.
I had a flashback of that show when I was reading through a discussion about using Web Kit. The
original page, by Martin Simoneau, was an excellend article on Cocoa Dev Central filling in the
details on how to make a browser using the line of code provided by Apple, and the Web Kit
framework.
http://cocoadevcentral.com/articles/000077.php
In the follow-up discussions that were posted, there were comments that the one line of code was
unnecessary! This sounded to me like "I can name that tune in no notes!". There were some very brief
descriptions of how to do this, and then a link to another page which described how to do this in
slightly more detail.
http://www.livejournal.com/users/foxmagic/238347.html
The essential ingredient is the fact that there is already a connection called takeURLFrom, which
will extract the URL from a text field. This makes it possible to create a functional browser
without writing any code.
To do this, there are three essential step that are necessary. The first is that you need to have
Safari installed, since that also installs the Web Kit framework. You can find it at: http://www.apple.com/safari/download/ if you don't
have it already. Next, you need to have the developer tools, December 2002 version installed, if you
haven't already. To get this, you need to become an ADC developer, but fortunately you can join for
free. The site to get this from is http://connect.apple.com/. Follow the links Download Software
-> Developer Tools to find what you need.
Finally, you need to get the Web Kit SDK. This is also available at the same site, under Download
Software -> WWDC 2003. Once you have installed all of the software, you are ready to go.
tart up Project Builder, and choose New Project from the File menu. Pick Cocoa Application from
the list, and enter the name NoCodeBrowser in the Project Name field. Click on Finish.
Now, we have to add the Web Kit interface to the project. Choose Add Frameworks from the Project
menu (see Figure 1).On the list that comes up, choose Webkit.framework and then click Add on the
next dialog. If you want to be very neat, you can move the Webkit.framework to the folder Other
frameworks under Frameworks. Save the project.
Figure 1- Select Add
Framework from the Project menu (left), then choose WebKit.framework from the dialog that comes up,
and click Add (right).
We now move to Interface Builder. Click on the little triangle to the left of Resources in the
project window, and double click on Mainmenu.nib. This will open Interface Builder, with a Window
called "Window". In the window titled Cocoa-Containers, click on the second icon from the right on
the top, which shows a tabbed window. Drag a Customview over to "Window", and drop in in the window.
Resize it to fill almost the entire window, with space to put a text box at the top. Click on the
second icon from the left in the "Cocoa-Containers" window, and drag a text field to the top of the
window, and resize it to make it wider.
Now, arrange the windows so that you can see the window "Mainmenu.nib" in Interface Builder, and
the main project window from Project Builder. Open Webkit.framework, and the Headers folder inside
that (Figure 2). At the bottom, there is a file called WebView.h. Drag this over to the
Mainmenu.nib window, and drop it there.
Figure 2 - Choose the
WebView class from the file list in ProjectBuilder (left), and drag to the MainMenu.nib window in
InterfaceBuilder (right).
Figure 3 - In the
Show Info window, select Custom Class from the pop-up, and then select WebView as the class.
Now, select the CustomView in Interface Builder, and choose Show Info from the Tools menu. On the
pop-up menu that says Attributes, choose Custom Class, and then choose WebView from the list (Figure
3). Close the info window. Now, use ctrl-click and drag to make a connection from the text field to
the WebView (Figure 4). In the window that pops up, make the connection from target to takeURLFrom,
and click on connect. Save everything, and then build, using Build and Run from the Build menu.
Figure 4 - Connect
the text field to WebView and then specify that the connection is to takeStringURLFrom
You can now type a full URL in the text field, and when you hit enter, the page will load! Note
that the URL must begin with "http://". You can then click in links in the loaded page, and those
links will load as well. You can navigate to secure pages, load java applets, execute javascript,
and lots more. Play around with it!
Feature Fill
A number of things are missing but easily added to this first version. First, we can add
additional functionality without any more code.
WebView maintains a history of recently visited pages by default. Methods exist in the WebView
class to back up a level (goBack), go back down a level (goForward), reload a page (reload), or stop
loading a page (stopLoading). All we need to do to implement these is to add a button for each
function, and connect them to the WebView class and the appropriate method. We can then add
appropriate text or icon to each button.
Another problem is that the WebView does not change it's size when we resize the window. This is
easy to fix. Click on the WebView in Interface Builder, and then choose Show Info from the Tools
menu. From the pop-up, choose Size (Figure 5). The box indicates the WebView object, and the
straight lines indicate a fixed relationship. If the lines are straight within the object, the size
will not change with a resize. If the lines outside are straight, the relationship to the containing
window will not change. If all of the outside lines are straight, the object will be centered with a
resize. If you click on a line, it turns into a "spring", which will allow resizing. You can do the
same thing to all of the other object, such as the buttons and the text box, to control their
behavior during resizing as well.
Figure 5 - Click on
the interior lines in the box (left) to turn them into "springs" (right), to allow the WebView to
resize along with the window.
The final refinement is to change all of the menu items that refer to "NewApplication" to refer
to "NoCode Browser". A picture of the main window in my finished version is in Figure 6.
Figure 6 - The final
appearance of the main window, after adding back, forward, reload, and stop buttons.
Resources and additions
Although this demonstration is impressive, there are a lot of missing pieces if we were to try to
make a complete program.
If you click on a link which should result in opening another window, nothing happens. The same
thing goes for email links, download links, and anything other than navigation to another page.
The current version has no error checking, and no error messages. Probably the worst, obvious
omission is that if Web Kit framework is not loaded, that is, if Safari has not been installed, the
program will not work and will probably crash. Methods for dealing with this are explained in the
tutorial pages at:
http://developer.apple.com/documentation/Cocoa/Conceptual/DisplayWebContent/index.html
WebKit has a number of hooks to allow changing or enhancing its behavior. The use of these links
is also explained at the tutorial pages.
Finally, there is a Web Kit discussion list at:
http://lists.apple.com/mailman/listinfo/webkitsdk-dev
In additon to providing impressive functionality that you can use in your programs, WebKit
provides a dramatic demonstration of the power of the frameworks available under Mac OS X, allowing
you to create a web browser without writing a single line of code. What other platform lets you do
that?
David Linker is a lover of Mac OS X, because the rich development environment and
frameworks allow his inherent lazyness to blossom. You can reach him at
dtlinker@mac.com.
