Cocoa界面設計之WebKit和CSS合作實現換膚實例是本文要介紹的內容，這是一個很不可思議的東西，真的很有趣，超有想法。一改傳統的直接繼承View子類去支持不同皮膚的控件的形式，而是變了一種思維，直接通過添加一個WebKit，通過修改CSS去改變控件的樣子。這樣做的好處是CSS非常容易修改，而效果看起來還非常棒！下面是正文。

又來了一堆Cocoa源代碼：這次向你們展示的是如何通過CSS把你的程序做成可更換皮膚的形式。你可以下載代碼。地址：http://mattgemmell.com/files/source/skinnableapp.zip

可換膚程序是一個簡單的Cocoa應用程序，這個程序展示了如何使用嵌入式的WebKit WebView簡單地在你的應用程序上增加“換膚”特效。演示包括把你的應用程序界面通過可更改的CSS文件變為各種其他效果，還演示了如何在Cocoa和HTML文檔中間交互數據。通過這種方式，為你的應用程序增加不同的“主題”或者“皮膚”變成了很方便的一件事，你可以隨意定制自己Cocoa應用程序的界面。

這個例子展示給你：

- 如何動態切換CSS主題

- 如何從Objective-C里向WebView添加內容

- 如何從HTML文檔中獲取數據

- 如何替換現存的HTML文檔

- 如何允許HTML控件（如表單元素或者鏈接）調用Cocoa物件中包含的方法

代碼在Mac OS X 10.5（Leopard）中編寫，項目需要Xcode 3，但是代碼本身可以在Tiger上運行。你可以直接在這里下載，也可以從Matt的公開subversion源碼庫中提取，地址是svn.cocoasourcecode.com

這里有幾個程序的截圖，CSS做的不怎么漂亮，請還是關注代碼吧：）下圖：
‍‍
更新：現在禁止了在WebView中選擇文字，而且去掉了文本選擇形式的鼠標指針，這樣看起來更像是Cocoa的界面了。

幾個關鍵點：原文并未提及

[webView setDrawsBackground:NO];  
[webView setUIDelegate:self];  
[webView setFrameLoadDelegate:self]; 

這里需要設置兩個托管，才可以使用事件。

[[webView windowScriptObject] setValue:self forKey:@"AppController"];  

配置webView，以便javascript可以與其對話。

1 你可以在Javascript中與webView進行對話，調用方法為："window.AppController"

2 你必須特別聲明允許從JavaScript中調用的方法，下文將給出解釋。

3 我們在這個類中從Javascript調用的方法為-showMessage:，我們在JavaScript中使用window.AppController.showMessage_() 注意***的冒號變成了下劃線。

這個文檔中給出了方法名字的解釋，請參閱：

 http://developer.apple.com/documentation/AppleApplications/Conceptual/SafariJSProgTopics/Tasks/ObjCFromJavaScript.html

在

(BOOL)isSelectorExcludedFromWebScript:(SEL)aSelector  

方法中，為了安全起見，你必須特別允許允許從JavaScript中執行的方法。做如下調用：

 if (aSelector == @selector(showMessage:))   
 {  
      return NO;   
 }  
return YES; 

那么只有showMessage:這個方法可以在JavaScript中被調用，其他的方法都不允許調用。

小結：Cocoa界面設計之WebKit和CSS合作實現換膚實例的內容介紹完了，希望本文對你有所幫助！