« MyOneLineOfCodeBrowser using Cocoa and WebKit 1.0
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".
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.
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.
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).
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.
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".
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:".
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.
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.
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.
11. Build and run your new browser. Tada!!
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 *** +[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
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)
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)
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.
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.)
Or you can install Safari 1.0...
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.
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)
You have to install the Web Kit SDK from the WWDC 2003 tab on the ADC Downloads page.
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.
same : it's URL and not Url.
ObjC is case-sensitive.
sam : it's URL and not Url.
ObjC is case-sensitive.
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.
Now that's a good challenge for .NET or Java to try to do the same :-)
Excellent! Thank you Martin.
> 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.
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?
Thanks Martin for the info of where to find the Web kit.
You need to go to http://developer.apple.com/macosc/ and then log into ADC. That's where you can find the download.
When you click on the framework there are no header files, why isn't PB loading them? And what is the solution?
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).
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?
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.
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!!
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).
I can't find the webview.h anywhere, someone please help
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
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
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,
Help! I followed all the directions and type in www.apple.com and click fetch and nothing happens. What's wrong?
Insert the protocol "http://" before the "www.apple.com".
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.
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.
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.
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.
Anyone else have trouble with the webView's print method failing?
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?
When you set it as your default browser it screws things up.
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
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)
Why isn't the WebKit.framework accessible from java? Is it practical to expose the WebKit.framework via JNI to java?
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.