TweetFollow Us on Twitter

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.

 

Community Search:
MacTech Search:

Software Updates via MacUpdate

Viber 6.8.6 - Send messages and make cal...
Viber lets you send free messages and make free calls to other Viber users, on any device and network, in any country! Viber syncs your contacts, messages and call history with your mobile device, so... Read more
Carbon Copy Cloner 4.1.17 - Easy-to-use...
Carbon Copy Cloner backups are better than ordinary backups. Suppose the unthinkable happens while you're under deadline to finish a project: your Mac is unresponsive and all you hear is an ominous,... Read more
EtreCheck 3.4.2 - For troubleshooting yo...
EtreCheck is an app that displays the important details of your system configuration and allow you to copy that information to the Clipboard. It is meant to be used with Apple Support Communities to... Read more
Hopper Disassembler 4.2.10- - Binary dis...
Hopper Disassembler is a binary disassembler, decompiler, and debugger for 32- and 64-bit executables. It will let you disassemble any binary you want, and provide you all the information about its... Read more
VueScan 9.5.81 - Scanner software with a...
VueScan is a scanning program that works with most high-quality flatbed and film scanners to produce scans that have excellent color fidelity and color balance. VueScan is easy to use, and has... Read more
iFFmpeg 6.4.2 - Convert multimedia files...
iFFmpeg is a comprehensive media tool to convert movie, audio and media files between formats. The FFmpeg command line instructions can be very hard to master/understand, so iFFmpeg does all the hard... Read more
Fantastical 2.4.1 - Create calendar even...
Fantastical 2 is the Mac calendar you'll actually enjoy using. Creating an event with Fantastical is quick, easy, and fun: Open Fantastical with a single click or keystroke Type in your event... Read more
Fantastical 2.4.1 - Create calendar even...
Fantastical 2 is the Mac calendar you'll actually enjoy using. Creating an event with Fantastical is quick, easy, and fun: Open Fantastical with a single click or keystroke Type in your event... Read more
Live Home 3D Pro 3.2.2 - $69.99
Live Home 3D Pro, a successor of Live Interior 3D, is the powerful yet intuitive home design software that lets you build the house of your dreams right on your Mac. It has every feature of Live Home... Read more
Live Home 3D Pro 3.2.2 - $69.99
Live Home 3D Pro, a successor of Live Interior 3D, is the powerful yet intuitive home design software that lets you build the house of your dreams right on your Mac. It has every feature of Live Home... Read more

Latest Forum Discussions

See All

The best deals on the App Store this wee...
There are quite a few truly superb games on sale on the App Store this week. If you haven't played some of these, many of which are true classics, now's the time to jump on the bandwagon. Here are the deals you need to know about. [Read more] | Read more »
Realpolitiks Mobile (Games)
Realpolitiks Mobile 1.0 Device: iOS Universal Category: Games Price: $5.99, Version: 1.0 (iTunes) Description: PLEASE NOTE: The game might not work properly on discontinued 1GB of RAM devices (iPhone 5s, iPhone 6, iPhone 6 Plus, iPad... | Read more »
Layton’s Mystery Journey (Games)
Layton’s Mystery Journey 1.0.0 Device: iOS Universal Category: Games Price: $15.99, Version: 1.0.0 (iTunes) Description: THE MUCH-LOVED LAYTON SERIES IS BACK WITH A 10TH ANNIVERSARY INSTALLMENT! Developed by LEVEL-5, LAYTON’S... | Read more »
Full Throttle Remastered (Games)
Full Throttle Remastered 1.0 Device: iOS Universal Category: Games Price: $4.99, Version: 1.0 (iTunes) Description: Originally released by LucasArts in 1995, Full Throttle is a classic graphic adventure game from industry legend Tim... | Read more »
Stunning shooter Morphite gets a new tra...
Morphite is officially landing on iOS in September. The game looks like the space shooter we've been needing on mobile, and we're going to see if it fits the bill quite shortly. The game's a collaborative effort between Blowfish Studios, We're Five... | Read more »
Layton's Mystery Journey arrives to...
As you might recall, Layton's Mystery Journey is headed to iOS and Android -- tomorrow! To celebrate the impending launch, Level-5's released a new trailer, complete with an adorable hamster. [Read more] | Read more »
Sidewords (Games)
Sidewords 1.0 Device: iOS Universal Category: Games Price: $2.99, Version: 1.0 (iTunes) Description: Grab a cup of coffee and relax with Sidewords. Sidewords is part logic puzzle, part word game, all original. No timers. No... | Read more »
Noodlecake Games' 'Leap On!...
Noodlecake Games is always good for some light-hearted arcade fun, and its latest project, Leap On! could carry on that tradition. It's a bit like high stakes tetherball in a way. Your job is to guide a cute little blob around a series of floating... | Read more »
RuneScape goes mobile later this year
Yes, RuneScape still exists. In fact, it's coming to iOS and Android in just a few short months. Jagex, creators of the hit fantasy MMORPG of yesteryear, is releasing RuneScape Mobile and Old School RuneScape for mobile devices, complete with... | Read more »
Crash of Cars wants you to capture the c...
Crash of Cars is going full on medieval in its latest update, introducing castles and all manner of new cars and skins fresh from the Dark Ages. The update introduces a new castle-themed map (complete with catapults) and a gladiator-style battle... | Read more »

Price Scanner via MacPrices.net

Apple Move Away from White Label Event Apps C...
DoubleDutch, Inc., a global provider of Live Engagement Marketing (LEM) solutions, has made a statement in the light of a game-changing announcement from Apple at this year’s WWDC conference.... Read more
70 Year Old Artist Creates Art Tools for the...
New Hampshire-based developer Pirate’s Moon has announced MyArtTools 1.1.3, the update to their precision drawing app, designed by artist Richard Hoeper exclusively for use with the 12.9-inch iPad... Read more
Sale! New 2017 13-inch 2.3GHz MacBook Pros fo...
Amazon has new 2017 13″ 2.3GHz/128GB MacBook Pros on sale today for $150 off MSRP including free shipping. Their prices are the lowest available for these models from any reseller: – 13″ 2.3GHz/128GB... Read more
13″ 2.3GHz/128GB Space Gray MacBook Pro on sa...
MacMall has the 13″ 2.3GHz/128GB Space Gray MacBook Pro (MPXQ2LL/A) on sale for $1219 including free shipping. Their price is $80 off MSRP. Read more
Clearance 2016 12-inch Retina MacBooks, Apple...
Apple recently dropped prices on Certified Refurbished 2016 12″ Retina MacBooks, with models now available starting at $1019. Apple will include a standard one-year warranty with each MacBook, and... Read more
Save or Share
FotoJet Designer, is a simple but powerful new graphic design apps available on both Mac and Windows. With FotoJet Designer’s 900+ templates, thousands of resources, and powerful editing tools you... Read more
Logo Maker Shop iOS App Lets Businesses Get C...
A newly released app is designed to help business owners to get creative with their branding by designing their own logos. With more than 1,000 editable templates, Logo Maker Shop 1.0 provides the... Read more
Sale! New 15-inch MacBook Pros for up to $150...
Amazon has the new 2017 15″ MacBook Pros on sale for up to $150 off MSRP including free shipping: – 15″ 2.8GHz MacBook Pro Space Gray: $2249 $150 off MSRP – 15″ 2.89Hz MacBook Pro Space Gray: $2779 $... Read more
DEVONthink To Go 2.1.7 For iOS Brings Usabili...
DEVONtechnologies has updated DEVONthink To Go, the iOS companion to DEVONthink for Mac, with enhancements and bug fixes. Version 2.1.7 adds an option to clear the Global Inbox and makes the grid... Read more
15-inch 2.2GHz Retina MacBook Pro, Apple refu...
Apple has Certified Refurbished 2015 15″ 2.2GHz Retina MacBook Pros available for $1699. That’s $300 off MSRP, and it’s the lowest price available for a 15″ MacBook Pro. An Apple one-year warranty is... Read more

Jobs Board

Frameworks Engineering Manager, *Apple* Wat...
Frameworks Engineering Manager, Apple Watch Job Number: 41632321 Santa Clara Valley, California, United States Posted: Jun. 15, 2017 Weekly Hours: 40.00 Job Summary Read more
Product Manager - *Apple* Pay on the *Appl...
Job Summary Apple is looking for a talented product manager to drive the expansion of Apple Pay on the Apple Online Store. This position includes a unique Read more
*Apple* Retail - Multiple Positions - Apple...
SalesSpecialist - Retail Customer Service and SalesTransform Apple Store visitors into loyal Apple customers. When customers enter the store, you're also the Read more
*Apple* Retail - Multiple Positions - Apple...
SalesSpecialist - Retail Customer Service and SalesTransform Apple Store visitors into loyal Apple customers. When customers enter the store, you're also the Read more
Senior Payments Architect - *Apple* Pay - A...
Changing the world is all in a day's work at Apple . If you love innovation, here's your chance to make a career of it. You'll work hard. But the job comes with more Read more
All contents are Copyright 1984-2011 by Xplain Corporation. All rights reserved. Theme designed by Icreon.