« MyOneLineOfCodeBrowser using Cocoa and WebKit 1.0

Posted by Submission on July 12, 2003 [Feedback (42) & TrackBack (6)]


By Martin Simoneau

One of the best features of Safari 1.0 is the Web Kit SDK (v1.0). This new Cocoa framework allows you to write a powerful browser with light and simple code. This easy tutorial will guide you in the making of a browser with only one line of Objective-C code. Objective-C is the only supported language available in WebKit 1.0. To complete this little tutorial, you will need to have "Mac OS X 10.2", "Safari 1.0" and the "Web Kit SDK (v1.0)" installed.


// Now it's time to work

1. After starting Project Builder, create a new Project, select "Cocoa Application" as project type and name the project "MyOneLineOfCodeBrowser".

Step 1

2. From the project outline (under the "Files" tab) highlight the "Other Frameworks Folder" and select the "Add Frameworks..." menu item from the Project Menu. Select the "WebKit.framework" directory and press the "Add" button.

Step 2

3. Double-click the MainMenu.nib item in the project hierarchy at the left of the project window. This will start Interface Builder (IB) and open your project's resource file. In Project Builder, drag the "WebView.h" item from the WebKit.framework project outline to the MainMenu.nib window in IB. This step is necessary to let IB knows about the WebView Class.

Step 3

4. Create a subclass of NSObject and name the new Class "MyOneLineController". Then create an instance of the new class (select the "Instantiate..." under the Classes Menu to create the instance).

Step 4

5. Drag a "CustomView" element from the "Cocoa-Containers" section of the tool palette and select the "WebView" class under the "Custom Class" in the info window. Drag a "CustomView" element from the "Cocoa-Containers" section of the tool palette. Then select the "WebView" class under the "Custom Class" in the info window.

Step 5

6. Create a text field (NSTextField) and a Button (NSButton) by dragging these elements from the tool palette to your window. Rename the button "Fetch".

Step 6

7. Now it's time to create the outlets and action to link the interface elements to your application code. First create 2 outlets: 1 for the webView and another for the text field. Double-click the "MyOneLineController" class. Then select the "Outlets tab" of the "Info Window" and click the add button. Add the 2 outlets as in the following picture. Then create an action and name it "fetch:".

Step 7

8. Connect the outlets to the interface elements. Control-drag from the "MyOneLineController" instance to the "webView" and in the 'Info Window" click connect. Do the same for the text field. For the fetch button, control-drag from the button to the "MyOneLineController" class and select "fetch:" as the target.

Step 8

9. Now save your work. Select the Classes tab from the MainMenu.nib window and select the "MyOneLineController". Then select "Create Files..." from the Classes menu and add the files to your Project Builder when asked. Now quit Interface Builder to return to the Project Builder.

Step 9

10. Now in Project builder, select the "MyOneLineOfCodeBrowser_Prefix.h" item and insert the line "#import <WebKit/WebKit.h>" as show in the following figure. Then add the ONE line of code in the "MyOneLineController.m" file.

Step 10

11. Build and run your new browser. Tada!!

Step 11


Comments

when i tried this it didn't work I get the following error in the run window when I click the fetch window

2003-07-12 10:35:54.022 samsWebrowser[5157] *** +[NSURLRequest requestWithUrl:]: selector not recognized

and in the build window I get the following

MyOneLineController.m:8: warning: cannot find class (factory) method.
MyOneLineController.m:8: warning: return type for `requestWithUrl:' defaults to id


any ideas

Posted by: sam on July 12, 2003 01:38 PM

The one line of code is unnecessary. Lose the Fetch button and connect the target outlet of the NSTextField at the WebView's takeStringURLFrom: action, and then you have, a web browser in no lines of code.

(of course, then you can also add the stop/reload/back/forward buttons without writing code as well)

Posted by: Graham Parks on July 12, 2003 01:45 PM

Another howto with zero lines of code...

http://www.livejournal.com/users/foxmagic/238347.html

Posted by: Alistair on July 12, 2003 04:57 PM

Sam, you need to capitalise URL in requestWithURL, though you've probably figured that out for yourself by now.

(It catches me out quite often too)

Posted by: Graham on July 12, 2003 06:10 PM

The red arrows are foxy.

Thanks for the slick tutorial!

I don't know if Cocoa Dev Central does post-posting edits on article submissions, but it would be cool to update it using Graham's _takeStringURLFrom:_ suggestion.

Posted by: jeff schuler on July 13, 2003 10:01 PM

Might also be nice to include info on where to download the Web Kit SDK -- (from the WWDC 2003 tab on the ADC Downloads page.)

Posted by: jeff schuler on July 14, 2003 12:25 AM

Or you can install Safari 1.0...

Posted by: Erik J. Barzeski on July 14, 2003 08:19 AM

Nice...from here you can expand the 'browser' to include other elements, such as bookmarks, or tabs.
Of course, this would just further the tutorial for the ones learning to use Cocoa, and the Interface Builder.

Posted by: Skeebo on July 14, 2003 05:14 PM

I have Safari installed and was able to add the framework, but it does not look like there are any headers in it, let alone WebView.h. When I browse the the frameworks on my harddrive, under WebKit.framework, the header is simply a file alias, not a folder alias like in other frameworks. Any ideas?
OS 10.2.6, Safari 1.0 (v85), PB 2.0.1 (July 2002 Dev Tools)
Thanks!

Posted by: B.J. Ray on July 15, 2003 07:55 PM

You have to install the Web Kit SDK from the WWDC 2003 tab on the ADC Downloads page.

Posted by: Martin on July 16, 2003 08:28 AM

This is very cool. A great display of what separates a rendering engine from the browser, and shows the work that goes into making a good one.

Posted by: wjc on July 16, 2003 05:20 PM

same : it's URL and not Url.
ObjC is case-sensitive.

Posted by: nico on July 17, 2003 07:22 AM

sam : it's URL and not Url.
ObjC is case-sensitive.

Posted by: nico on July 17, 2003 07:22 AM

Let a thousand browsers bloom!

Seriously, the Safari SDK will make it very easy to write a custom browser for almost any purpose. Want something like safari, but with the tabs on the side? Want a browser that always reads all the text to you using apple's speech output? Want an app that watches for differences on given sites, and pings you when they change? Want a rendezvous-enabled 'buddy browser', so that wherever you go, your buddies go?

All these things will be pretty simple to do with WebKit.

Posted by: John Randolph on July 17, 2003 06:43 PM

Now that's a good challenge for .NET or Java to try to do the same :-)

ObjC ROCKS!!!!

Fabien

Posted by: Fabien Roy on July 17, 2003 06:53 PM

Excellent! Thank you Martin.

Posted by: Will Scherrer on July 17, 2003 08:04 PM

> Now that's a good challenge for .NET or Java to try to do
> the same :-)

What are you talking about ?? Windows people could embed IE into their programs for +5 years with almost no custom code. A lot of apps on Windows take advantage of this (think Kazaa, etc...)

> ObjC ROCKS!!!!

What are you on ?? How does this have anything to do with Ojective-C ??

Maybe if you got your head out of the sand you'd realize all of this. On Windows people have also been embedding Word, Excel etc in their application since 98.

Posted by: Leibowitz N on July 18, 2003 08:53 AM

Got safari 1.0 load up web kit framework but the headers aint there. cant seem to find any link to download Web kit from the ADC, (cant find this so called WWDC tab on downloads page) any one got the url?

Posted by: Liam on July 18, 2003 06:55 PM

Thanks Martin for the info of where to find the Web kit.

To Liam:
You need to go to http://developer.apple.com/macosc/ and then log into ADC. That's where you can find the download.

Posted by: William on July 18, 2003 10:45 PM

When you click on the framework there are no header files, why isn't PB loading them? And what is the solution?

Posted by: Lance on July 19, 2003 11:33 AM

Lance,
You have to install the Web Kit SDK. Go to the following URL: http://connect.apple.com/ . If you don't have an account you'll have to sign for a free ADC membership. Log in then go to the Download Software area, under the WWDC 2003 section download and install the Web Kit SDK (v1.0).

Posted by: Martin on July 20, 2003 09:02 AM

I have download the SDK now 4 times and installed it 4 times and still no headers. In "Apple System Profiler" under the Frameworks tab the last line reads "WebKit.framework 1.0 28 jun 2003 09:16 1.0, Copyright 2003 Apple Computers Inc." In the "Installer" program if you go to the Log window it says "WebKit SDK Installation Log" And still when I add the WebKit.framework in PB I still get the same three items as listed in my orginal message. Any Ideas?

Posted by: Lance on July 20, 2003 11:11 AM

Loved the tutorial. I haven't coded anything since college (5 years ago) and this was a good little project to start with. I got stuck on step 5 for awhile. I went to the other tutorial and it help me figure out how to do it. So between both tutorial, I now have a little browser.

I would like to see how to add more features from the webkit though. I would like to know how to create a progress bar...or maybe even how to change the color of the windows.

Overall great tutorial! I'm going to pick up some books on cocoa to pick it up.

Posted by: Roie Gat on July 23, 2003 09:01 AM

Help. I do great until it talks about "MyOneLineOfCodeBrowser_Prefix.h" I don't have that!! What am i missing? I have the latest Web Kit SDK (v1.0) from the developer site, safari 1.0 and 10.2.6. I've even tried may times!!

Posted by: twister on July 24, 2003 12:50 AM

twister,

That MyOneLineOfCodeBrowser_Prefix.h is optional.

If you haven't updated your dev tools recently then the default project templates don't contain it.

The xxx_Prefix.h file is used by gcc's precompiled header support. The precompiled headers work by compiling anything xxx_Prefix.h includes, and then saves the results for the next build so that it don't have to compile those headers each time you try to build your project. This can greatly speed things up (just as long as you don't change a header that the xxx_Prefix.h includes, since it will then have to rebuild its precompiled haders).

Note: The name of the header isn't important, if you look in the build settings somewhere there is an option to set the name of the precompiled header (assuming you have newish dev tools).

Posted by: Michael on July 24, 2003 02:04 PM

I can't find the webview.h anywhere, someone please help

Posted by: Alex on August 3, 2003 03:41 AM

i followed all the steps, and it says build completed, but it doesnt work. i type in http://www.apple.com, click the button, and nothing happens

Posted by: swwarmuth on August 19, 2003 01:38 AM

oh, sorry. it just magically worked. i clicked the button, and about 10 seconds later, the apple site showed up. i guess i just didnt wait long enough. im not used to waiting iwht a cable connection

Posted by: swwarmuth on August 19, 2003 01:39 AM

Got a question for you all; I know it may sound silly, but bear with me:

What if I wanted to do something wierd, like putting two (2) WebView areas within the same GUI... say, they are side-by-side, so a person could check two web-based lists of information against one another? Basically, take your 600 x 400 gui, and split it down the middle, with two URL input areas (one for each broswer WebView) and two browser (WebView) panes on each side, with maybe a line down the middle.... so that the left side browser could go to apple.com, and the right side browser could go to cocoadevcentral.com...

Can it be done, or am I barking up the worng tree?

thanks in advance,

trev

Posted by: Trev on August 19, 2003 03:16 PM

Help! I followed all the directions and type in www.apple.com and click fetch and nothing happens. What's wrong?

Posted by: Brian on August 27, 2003 01:17 PM

Brian,

Insert the protocol "http://" before the "www.apple.com".

Martin

Posted by: Martin on September 2, 2003 10:48 AM

Great sample! Really simple, fast and well done.
Only, while browsing, I would like to set the current URL address to the field urlText... as any browser does.
e.g. http://www.apple.com/iPod
How to do?

The same, I dragged an html file onto the webView and I saw the file properly. But now I would like to set the current URL address of the file to the field urlText.
e.g. file:///Volumes/Lorenzo/WebPages/index.html

Any idea?

Thanks
--
Lorenzo
archidea@mac.com

Posted by: Lorenzo Puleo on September 4, 2003 06:56 AM

hello everyboby,
i'm a project builder beginner. but finaly could succed with building the browser.
for an online-art-project i would like to build a browser for a single url.
can somebody tell me, what string i have to enter at "My OneLineController.m"?
thanks, roman keller, zurich.

Posted by: roman keller on September 8, 2003 05:55 AM

This is pretty cool Martin. Thanks for doing such a good job with the illustrations.

In case anyone is interested, webkit has some action methods that make it very simple to add back and forward buttons (without any more code) among other things. Just drag two buttons somewhere onto the window. Now control drag from one of the buttons to the WebView window. In the the 'connections' tab of the info window you should see the various actions. Click on goForward for your forward action and hit connect. Do the same for the back button (only hit the goback action). save and rebuild and it should work. There are some other methods there that are just as easy to include. Have fun.

Posted by: Mark Meyer on September 9, 2003 01:27 AM

Anyone else have trouble with the webView's print method failing?

Posted by: Brad on September 11, 2003 05:49 PM

You can go here:

http://developer.apple.com/documentation/Cocoa/Reference/WebKit/ObjC_classic/index.html

To get the documention on it, that way if you can't get the headers, you still can find out what to do.

Posted by: Jagil on September 21, 2003 08:14 PM

I also was unable to get WebView.h to appear. I downloaded the Web Kit SDK and installed it. I can see the header file when I go into that directory in a Terminal.

When I go to the other tutorial mentioned in the comments that builds the browser without a single line of code I am able to get it to work. In that one you actually drag the header files from the Finder. So I tried the same thing using this tutorial. I first add the Framework as described here and then instead of trying to drag the header from PB (where I don't see it) I drag it from the Finder on to IB. Then it all works.

So it appears the problem has something to do with the way in which I'm adding the framework. The public headers just don't show up. Any ideas?

chuck

Posted by: chuck clark on October 4, 2003 07:59 PM

When you set it as your default browser it screws things up.
Any help?

Posted by: pixikon on October 6, 2003 08:07 PM

I tried to make a more advanced browser and everything worked just fine... except for two things:
- I just can't get my progress indicator working
- I want to display the url's title, but can't figure out how

Any suggestions?

Thanks!

Posted by: TriangleJuice on October 15, 2003 07:15 AM

You can get the URL of the current page (to make the address bar update, for instance) by getting the most recent item from the history (which, as far as I know, should always be the current page)

Posted by: desertfusion on October 31, 2003 11:09 PM

Why isn't the WebKit.framework accessible from java? Is it practical to expose the WebKit.framework via JNI to java?

Posted by: amar on December 8, 2003 06:16 PM

Objective C isn't the only supported language. You can also use the AppleScript Studio's "call method" command to load content into a WebView.

Posted by: John on December 12, 2003 11:34 AM
Post a comment