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

Apple Final Cut Pro X 10.3.2 - Professio...
Apple Final Cut Pro X is a professional video editing solution.Completely redesigned from the ground up, Final Cut Pro adds extraordinary speed, quality, and flexibility to every part of the post-... Read more
Logic Pro X 10.3.1 - Music creation and...
Logic Pro X is the most advanced version of Logic ever. Sophisticated new tools for professional songwriting, editing, and mixing are built around a modern interface that's designed to get creative... Read more
Paragraphs 1.1.4 - Writing tool just for...
Paragraphs is an app just for writers. It was built for one thing and one thing only: writing. It gives you everything you need to create brilliant prose and does away with the rest. Features... Read more
VueScan 9.5.70 - 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
TextSoap 8.3.2 - Automate tedious text d...
TextSoap can automatically remove unwanted characters, fix up messed up carriage returns, and do pretty much anything else that we can think of to text. Save time and effort. Be more productive. Stop... Read more
ForkLift 3.0 - Powerful file manager: FT...
ForkLift is a powerful file manager and ferociously fast FTP client clothed in a clean and versatile UI that offers the combination of absolute simplicity and raw power expected from a well-executed... Read more
Amazon Chime 4.0.5528 - Amazon-based com...
Amazon Chime is a communications service that transforms online meetings with a secure, easy-to-use application that you can trust. Amazon Chime works seamlessly across your devices so that you can... Read more
Sparkle 2.1.0 - $79.99
Sparkle will change your mind if you thought building websites wasn't for you. Sparkle is the intuitive site builder that lets you create sites for your online portfolio, team or band pages, or... Read more
Bookends 12.7.9 - Reference management a...
Bookends is a full-featured bibliography/reference and information-management system for students and professionals. Bookends uses the cloud to sync reference libraries on all the Macs you use.... Read more
Dash 4.0.0 - Instant search and offline...
Dash is an API documentation browser and code snippet manager. Dash helps you store snippets of code, as well as instantly search and browse documentation for almost any API you might use (for a full... Read more

Fantasy MMORPG MU Origin’s receives a hu...
Developer Webzen are looking to take their highly popular fantasy battler MU Origin to the next level this month, with its most ambitious overhaul yet. The latest update introduces the long sought after Server Arena, new treasure dungeons, and much... | Read more »
RPG Djinn Caster (Games)
RPG Djinn Caster 1.0.0 Device: iOS Universal Category: Games Price: $4.99, Version: 1.0.0 (iTunes) Description: SPECIAL PRICE 38% OFF(USD 7.99 -> USD 4.99)!!!A Fantasy Action RPG of far foreign lands! Summon the Djinns and rise to... | Read more »
Alto's Odyssey gets its first trail...
There's finally video evidence of Alto's Odyssey, the follow up to the 2015 App Store hit, Alto's Adventure. It looks just as soothing and atmospheric as Alto's last outing, but this time players will be journeying to the desert. Whereas Alto's... | Read more »
Last week on Pocket Gamer
What’s going on in the wider world of portable gaming? Each week we ask that question of our sister website Pocket Gamer. The PG team covers iOS gaming, just like 148Apps, but it also strays into the world of Android games and handheld consoles... | Read more »
Pokémon GO Generation 2 evolution guide
At long last, Niantic Labs finally unleashed the Generation 2 Pokémon into the wild. Pokémon GO trainers are scrambling to grab up this new set of 80 Pokémon. There are some special new tricks required to catch all of these new beasties, though.... | Read more »
The best new games we played this week
It feels as though the New Year got off to a creaking start as far as mobile games go, but that's changed over the past few weeks. The last few days alone have seen the debut of a number of wonderful games, so we thought we'd take the time to... | Read more »
Recruit more scallywags and discover new...
Get ready to show off your sea legs all over again in Oceans & Empires’ new grand update, which aims to make the act of rising to the role of seven seas ruler even more fresh and appealing, thanks to a richness of new content on both iOS and... | Read more »
Mage the Ascension: Refuge (Games)
Mage the Ascension: Refuge 1.0 Device: iOS Universal Category: Games Price: $4.99, Version: 1.0 (iTunes) Description: The groundbreaking roleplaying game Mage: The Ascension manifests in our turbulent present with Refuge, an... | Read more »
Vampire: Prelude (Games)
Vampire: Prelude 1.0 Device: iOS Universal Category: Games Price: $4.99, Version: 1.0 (iTunes) Description: The classic roleplaying game Vampire: The Masquerade returns to digital games with a Prelude of things to come. Experience a... | Read more »
Digby Forever Guide: How to dig to the d...
Digby Forever is a sparkling homage to arcade classics, and while you may be tiring of the number of arcade games being thrown at you, this endless digger finds many ways to stand out from the rest of the pack. The game manages to be challenging... | Read more »

Price Scanner via MacPrices.net

QuickerTek Announces 5TB Apple AC AirPort Tim...
QuickerTek Inc. has announced their new 5TB hard drive upgrade for Apple’s AC AirPort Time Capsule. By customer request, this upgrade also features six external antennas and offers the highest... Read more
Apple Certified Refurbished iMacs available f...
Apple has Certified Refurbished 2015 21″ & 27″ iMacs available for up to $350 off MSRP. Apple’s one-year warranty is standard, and shipping is free. The following models are available: - 21″ 3.... Read more
Apple offering Certified Refurbished Series 1...
Apple is now offering Certified Refurbished Series 1 and Series 2 Apple Watches for 14-16% off MSRP, starting at $229. An Apple one-year warranty is included with each watch. Shipping is free: Series... Read more
1.4GHz Mac mini on sale for $449, save $50
B&H Photo has the 1.4GHz Mac mini on sale for $50 off MSRP including free shipping plus NY sales tax only: - 1.4GHz Mac mini: $449 $50 off MSRP Read more
12-inch Retina MacBooks on sale for $200-$250...
Newegg has the 12″ 1.2GHz Space Gray Retina MacBook (sku MLH82LL/A) on sale for $1349.99 including free shipping. Their price is $250 off MSRP, and it’s the lowest price available for this model.... Read more
13-inch 2.0GHz Space Gray MacBook Pro on sale...
Adorama has the non-Touch Bar 13″ 2.0GHz Space Gray MacBook Pro in stock today for $100 off MSRP. Shipping is free, and Adorama charges NY & NJ sales tax only: - 13″ 2.0GHz MacBook Pro Space Gray... Read more
13-inch Touch Bar MacBook Pros on sale for $1...
B&H Photo has select 2016 Apple 13″ Touch Bar MacBook Pros in stock today and up to $100 off MSRP. Shipping is free, and B&H charges NY sales tax only: - 13″ 2.9GHz/512GB Touch Bar MacBook... Read more
KSI-1802R SX Disinfect-able Keyboard With Wav...
KSI has unveiled a new, innovative medical keyboard, the KSI-1802R SX, at HIMSS 2017, running February 19-22 in Orlando, Florida. KSI-1802R SX is the only keyboard that combines dual factor... Read more
15-inch Touch Bar MacBook Pros on sale for up...
Amazon has 15″ Touch Bar MacBook Pros in stock today and on sale for up to $150 off MSRP including free shipping: - 15″ 2.7GHz Touch Bar MacBook Pro Space Gray: $2720.38 $79 off MSRP - 15″ 2.7GHz... Read more
Apple’s Education discount saves up to $300 o...
Purchase a new Mac or iPad using Apple’s Education Store and take up to $300 off MSRP. All teachers, students, and staff of any educational institution qualify for the discount. Shipping is free: -... Read more

Jobs Board

*Apple* Retail - Multiple Positions - Apple,...
Job Description: Sales Specialist - Retail Customer Service and Sales Transform Apple Store visitors into loyal Apple customers. When customers enter the store, Read more
Manager *Apple* Systems Administration - Pu...
Req ID 3315BR Position Title Manager, Apple Systems Administration Job Description The Manager of Apple Systems Administration oversees the administration and Read more
*Apple* Retail - Multiple Positions - Apple,...
Job Description: Sales Specialist - Retail Customer Service and Sales Transform Apple Store visitors into loyal Apple customers. When customers enter the store, Read more
Manager *Apple* Systems Administration - Pu...
Req ID 3315BR Position Title Manager, Apple Systems Administration Job Description The Manager of Apple Systems Administration oversees the administration and Read more
*Apple* Technician - nfrastructure (United S...
Let’s Work Together Apple Technician This position is based in Portland, ME Life at nfrastructure At nfrastructure, we understand that our success results from our Read more
All contents are Copyright 1984-2011 by Xplain Corporation. All rights reserved. Theme designed by Icreon.