Matt Legend Gemmell Modesty is Lying

Mac OS X Cocoa and iPhone Development Services available at Instinctive Code.
Mac OS X Cocoa and iPhone Developer for hire

Other Pages

Categories

Posted
24 February 2008 @ 9pm

Categories
Development, Source

Tags
, , , , , , , , ,

Skinnable Cocoa UI with WebKit and CSS

Another chunk of Cocoa source code for you: this time it’s a demonstration of how to make your app skinnable using CSS. You can grab it from the Cocoa Source Code page.

Skinnable App is a simple Cocoa application showing how to use an embedded WebKit WebView to easily “skin” your applications, i.e. style your app’s UI using loadable standard CSS files, and how to exchange data between Cocoa and the HTML document. This makes it really easy to add support for “themes” or “skins”, for visual customization of your app’s UI.

The project shows you:

  • how to switch CSS themes dynamically
  • how to add content into the WebView from Objective-C
  • how to retrieve data from inside the HTML document
  • how to replace existing content in the HTML document
  • how to allow HTML controls (like form elements, or links) to call methods in Cocoa objects

This code was written on Mac OS X 10.5 (Leopard), and the project requires Xcode 3, but the code itself should run just fine on Tiger too. You can download the project here, or grab it from my public subversion repository at svn.cocoasourcecode.com.

Here are a couple of screenshots from the app; excuse the crappy CSS - I was focusing on the actual code!

Update: Now prevents selection in the WebView and suppresses the selection cursor, to better mimic native Cocoa UI.


1 Comment

twobyte
26 February 2008 @ 5pm

Hey, it is soooo awesome!


Leave a Comment

MGTwitterEngine - Twitter from Cocoa Computing Society Promo Video