Cocoa Interface Design-collaboration between WebKit and CSS for skin replacement

Cocoa InterfaceDesignWebKitAnd CSSIntegrationImplementationSkin changeExamples are the content to be introduced in this article. This is an incredible thing. It is really interesting and Super thoughtful. The traditional method of directly inheriting the View subclass to support controls of different skins has changed the way of thinking.WebKitBy modifyingCSSTo change the control. The advantage of doing so is thatCSSIt is very easy to modify, and the effect looks great! The following is the text.

Another bunchCocoaSource code: This shows you how to useCSSMake your program a form of skin replacement. You can download the code. Address: http://mattgemmell.com/files/source/skinnableapp.zip

The skin replacement program is simple.CocoaApplication, which shows how to use embeddedWebKitWebView simply adds a "skin change" effect to your application. The demo includes converting your application interface to a variety of other effects through the changeable CSS file. It also shows howCocoaInteracts with HTML documents. In this way, adding different "themes" or "skins" to your application becomes very convenient. You can customize your own Cocoa application interface at will.

This example shows you:

-How to dynamically Switch CSS themes

-How to add content to WebView from Objective-C

-How to obtain data from HTML documents

-How to replace existing HTML documents

-How to allow HTML controls such as form elements or links to call methods contained in Cocoa objects

Code is written in Mac OS X 10.5 Leopard). The project requires Xcode 3, but the Code itself can run on Tiger. You can download it directly here or extract it from Matt's public subversion source code library. The address is svn.cocoasourcecode.com.

Here are a few programs, CSS is not very beautiful, please pay attention to the Code :):
‍‍
Update: currently, selecting text in WebView is disabled, and the mouse pointer in Text Selection form is removed, which looks more like a Cocoa interface.

Key points: not mentioned in the original article

 
 

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

You need to set up two hosts to use the event.

 
 

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

Configure webView so that javascript can talk to you.

1. You can talk to webView in Javascript by calling "window. AppController"

2. You must specifically declare the methods that are allowed to be called from JavaScript, which will be explained below.

3. In this class, the method called from Javascript is-showMessage:. We use window. AppController. showMessage _ () in JavaScript. Note that the last colon is an underscore.

This document provides an explanation of the method name. See:

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

In

 
 

  
  
(BOOL)isSelectorExcludedFromWebScript:(SEL)aSelector  
 
 

To ensure security, you must allow methods that can be executed from JavaScript. Make the following call:

 
 

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

Only showMessage is allowed: This method can be called in JavaScript. Other methods are not allowed to be called.

Summary:Cocoa InterfaceDesignWebKitAndCSSCooperation implementationSkin changeI hope this article will help you with the introduction of the instance!