Cocoa介面設計之WebKit和CSS合作實現換膚執行個體

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.5Leopard）中編寫，項目需要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合作實現換膚執行個體的內容介紹完了，希望本文對你有所協助！