Cocoa界面设计之WebKit和CSS合作实现换肤实例

移动开发 iOS
本文介绍的是Cocoa界面设计之WebKit和CSS合作实现换肤实例,介绍了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.5(Leopard)中编写,项目需要Xcode 3,但是代码本身可以在Tiger上运行。你可以直接在这里下载,也可以从Matt的公开subversion源码库中提取,地址是svn.cocoasourcecode.com

这里有几个程序的截图,CSS做的不怎么漂亮,请还是关注代码吧:)下图:
‍‍
更新:现在禁止了在WebView中选择文字,而且去掉了文本选择形式的鼠标指针,这样看起来更像是Cocoa的界面了。

几个关键点:原文并未提及

  1. [webView setDrawsBackground:NO];  
  2. [webView setUIDelegate:self];  
  3. [webView setFrameLoadDelegate:self]; 

这里需要设置两个托管,才可以使用事件。

  1. [[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

  1. (BOOL)isSelectorExcludedFromWebScript:(SEL)aSelector  

方法中,为了安全起见,你必须特别允许允许从JavaScript中执行的方法。做如下调用:

  1.  if (aSelector == @selector(showMessage:))   
  2.  {  
  3.       return NO;   
  4.  }  
  5. return YES; 

那么只有showMessage:这个方法可以在JavaScript中被调用,其他的方法都不允许调用。

小结:Cocoa界面设计之WebKitCSS合作实现换肤实例的内容介绍完了,希望本文对你有所帮助!

责任编辑:zhaolei 来源: 互联网
相关推荐

2011-02-14 14:19:01

FLUDiPad应用

2011-01-26 16:34:10

GowallaiPhone应用

2011-01-26 15:47:45

SquarespaceiPhone应用

2011-02-16 14:15:58

FringAndroid应用iOS应用

2011-02-14 14:08:25

Awesome NotiPhone应用

2011-02-13 15:24:05

ShopkickiPhone应用

2011-02-16 14:50:09

iPhone应用Panelfly Co

2011-02-13 15:41:38

Trip JournaiPhone应用

2011-05-24 16:07:21

UI设计移动应用

2011-01-27 18:03:53

iPhone应用friends aro

2011-12-20 10:42:22

Android应用界面设计

2011-06-01 10:58:57

2011-09-09 16:00:02

Android Web实例

2011-06-01 16:50:05

Android ListView

2015-07-09 10:25:45

界面设计UI设计

2011-06-01 10:30:41

用户界面

2014-09-04 14:51:00

小屏幕界面设计app

2011-04-22 11:01:36

框架布局界面设计Android

2019-07-08 14:33:25

资讯类APPAPP界面设计

2011-05-19 08:49:01

使用片段界面设计Android
点赞
收藏

51CTO技术栈公众号