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

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

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

這個(gè)例子展示給你：

- 如何動(dòng)態(tài)切換CSS主題

- 如何從Objective-C里向WebView添加內(nèi)容

- 如何從HTML文檔中獲取數(shù)據(jù)

- 如何替換現(xiàn)存的HTML文檔

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

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

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

幾個(gè)關(guān)鍵點(diǎn)：原文并未提及

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

這里需要設(shè)置兩個(gè)托管，才可以使用事件。

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

配置webView，以便javascript可以與其對(duì)話。

1 你可以在Javascript中與webView進(jìn)行對(duì)話，調(diào)用方法為："window.AppController"

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

3 我們?cè)谶@個(gè)類中從Javascript調(diào)用的方法為-showMessage:，我們?cè)贘avaScript中使用window.AppController.showMessage_() 注意***的冒號(hào)變成了下劃線。

這個(gè)文檔中給出了方法名字的解釋，請(qǐng)參閱：

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

在

(BOOL)isSelectorExcludedFromWebScript:(SEL)aSelector  

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

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

那么只有showMessage:這個(gè)方法可以在JavaScript中被調(diào)用，其他的方法都不允許調(diào)用。

小結(jié)：Cocoa界面設(shè)計(jì)之WebKit和CSS合作實(shí)現(xiàn)換膚實(shí)例的內(nèi)容介紹完了，希望本文對(duì)你有所幫助！