Dash Board的Widget开发指南-51CTO.COM

本文和大家重点学习一下DashBoard的Widget开发，因为Dashboard是系统的一部分，不需要安装任何额外的部件，Widget就是用户的最基本的工具。每个Widget都是有特定功能的轻量级程序。

DashBoard的Widget开发

出处

Tiget引入了一个叫作DashBoard的新特性，并提供了一个叫做Widget的新类，用于开发超小型的应用程序。Dashboard对于用户是一个功能强大的特性，对于开发者，它提供了一个全新的开发环境。Widgets可以快速开发，简单配置。并且可以使用Tiger的所有先进技术。在桌面环境和在Web网页上，Widgets都非常适合处理小量的数据和程序间互动。并且提供了一个非常好的方式来为现有的程序添加功能，这就为提供了开发新产品或者为现有产品增加市场价值提供了新的机遇。

基于Web技术，DashboardWidgets可以通过HTML,JavaScript和CSS的混合方式建立。这样就使很多人都有了Widget开发的能力。只要你知道怎么建立一个网页，你就知道怎么建立一个Widget。但是Widget并不限制与web-base技术的使用。Widget开发还能衔接使用MacOSX的强大功能。现在，你可以个用几个小时或者几天的时间就建立一个Widget。还可以下载Dashboard的SDK是开发速度加快。

本文为你展示了Dashboard的工作方式，并且为怎样开发和怎样分块的发布功能模块提供一个介绍。

了解Widget开发

Widget在Dashboard被激活时就能够使用，并且在Dashboard被移除时消失，允许快速的“at-a-glance”用法。因为Dashboard是系统的一部分，不需要安装任何额外的部件，Widget就是用户的最基本的工具。每个Widget都是有特定功能的轻量级程序。如果Widget需要更多的界面空间用于设定***项，Dashboard允许Widget翻转来使用Widget的背部。

Widget可以分为下面的三个种类：

装饰Widget是自包含的，不需要其他程序和访问网络支持的。时钟，秒表，计算器和便条工具都是这一类的。

应用程序Widget是和一个功能齐全的应用程序相关联的。这一类的Widget通过提供一个更简便的并且通常是read-only的用户界面加强了应用程序的功能。ITuneControler和AdrressBookWidget都是这一类的。

信息Widget都是为处理来自互联网的信息而设计的。这些Widget允许你监视外界的事件例如天气，飞机航班或者股票价格。

DashBoard的架构

DashBoard的运行时架构由下面的部件构成。

DashBoard服务器，一个轻量级的进程用于管理DashBoard的用户界面，包括Widget栏（Widgetbar）,关闭框（CloseBar）,和Widget启动效果。

Dashboard客户端进程，提供Dashboard服务器和单独的Widget之间所有必需的结合和WebKit视图给Widget显示自己的用户界面。Dashboard服务器在每运行一个Widget都启动一个客户端进程。

Widget实例，向用户显示数据，并和用户互动。每个Widget在一个独立的客户端进程里运行，客户端进程就像沙箱（sandbox）那样使Widget不会影响其他Widget或者应用程序。为了使程序可靠，Dashboard小心地管理Widget，如果一个Widget崩溃了，它会自动重新启动，它仅仅会在Dashboard上再出现。如果它失常了，一连崩溃超过3次，它会被自动在Dashboard上移除。#p#

Widget开发技术内幕

最简单的解释，Widget只是一个在Dashboard上显示的网页而不是在像Safari的浏览器上。Widget是被包含在bunble（捆）里，然后被安放在磁盘上。Bundle是一个组织了所有Widget所需的资源和Widget本身在一起的目录。Widgetbundle都有.wdt的后缀。和其他bundle一样，Widgetbundle通过Finder当作一个单一的实体管理。

一个基本的Widget包含下面的文件：

◆一个主要的HTML文件定义了Widget的用户界面。

◆一个默认的背景图片。图片使用PNG格式，在Dashboard加载Widget时显示的。使用PNG格式是因为它很好的支持了Alpha通道的透明。

◆一个属性列表文件叫做info.plist，它包含了Widget的标适符，名字，和版本信息，大小和主要的HTML页面，还有可能加上其它的可选的信息供Dashboard使用。、

随着Widget的增长，你还可以往Widget的bundle加入其他文件，例如图片，扩展CSS和JavaScript文件。

让我们从HTML开始，看看各种Widget组建：

HTML标志

一开始，如果你知道怎样写一个网页的内容，你就可以写一个Widget了。为了跟随现在的网络标准的***实现，推荐你使用XHTML1.0标准来写网页的内容。例如，下面的是“HelloWorld”Widget的HTML。

<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN"  
 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
 
<htmlxmlnshtmlxmlns="http://www.w3.org/1999/xhtml"> 
 
<head> 
 
<title>HelloWorld</title> 
 
</head> 
 
<bodybackgroundbodybackground="Default.png"> 
 
http://developer.apple.com/macosx/tiger/dashboard.html(3of10)2005-3-412:30  
 
DevelopingDashboardWidgets  
 
<h1>Hello,World!</h1> 
 
</body> 
 
</html>

因为Widget开发使用HTML来定义的，所以如果你使用文本编辑器来写HTML标记的话，你可以用Safari（苹果的网络浏览器，用IE也可以）。HTML提供了建立Widget需要的大部分功能，不过一些扩展让Widget有了一些你会使用到的独特功能。例如，Widget使用了三个HTML的扩展：

◆canvas标志允许你在Widget里完成全部的2D绘画。

◆在img标志上的composite属性让你指定一个图像的绘画。

◆一个新的search类型<inputtype=”search”>，允许你建立一个MacOSX风格的搜索框。

必须说明的是，这只是对HTML标准的一个很小的改动，并且设计为可以在任何HTML用于建立用户界面的上下文环境使用。Apple公司正在和其他的生产商进行交涉，确保这些改动被采用并变成标准。

CascadingStyleSheets(CSS)

如果你加载了上面的那个基本的“HelloWorld”Widget，你会发现“HelloWorld”这几个字看起来并不可以接受。最终用户不会喜欢这种放错地方的文字。解决方法就是CascadingStyleSheets(CSS)，一个调整HTML风格的网页标准。这里是在Widget中使用CSS的例子。

<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN"  
 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
 
<htmlxmlnshtmlxmlns="http://www.w3.org/1999/xhtml"> 
 
<head> 
 
<style> 
 
body{  
 
margin:0;  
 
}  
 
.helloText{  
 
font:24px"LucidaGrande";  
 
font-weight:bold;  
 
color:white;  
 
position:absolute;  
 
top:24px;  
 
left:30px;  
 
}  
 
</style> 
 
</head> 
 
<bodybackgroundbodybackground="Default.png"> 
 
<h1classh1class="helloText">Hello,World!</h1> 
 
</body> 
 
</html>

当然，你同样可以把CSS放在另一个stylesheet文件里，并用import语句来引用它。就像下面一样：

<style> 
 
@import"HelloWorld.css";  
 
</style>

正如你所看到的，HTML和CSS为你提供了一个丰富的工具集来建立有趣的用户界面。现在让我们看看怎样建立那些动态的用户界面。#p#

JavaScript

为了符合网络技术的要求，Widget开发使用JavaScript来提供一个动态特性。在Dashboard中的JavaScript使用起来和在浏览器中一样，除了一个添加了一个Widget对象。Widget对象给了你做下面这些事的能力：

◆访问用户***项

l实现转换，例如改变Widget的大小或者翻转它来访问***项。

◆处理Dashboard激活事件。

◆打开其他应用程序

◆处理拉放操作。

◆通过URL来访为互联网得到数据。

◆执行系统命令，例如shellscript或者命令行工具。

例如，要访问***项参数，你可以用下面的代码：

widget.setPreferenceForKey(preference,key);  
 
widget.preferenceForKey(key);

Widget处理Dashboard激活事件时非常重要的，这样Widget就可以在不显示的时候不消耗CPU时间或者网络资源。下面的代码实现了这样的功能。

if(window.widget){  
 
widget.onhide=onhide;  
 
widget.onshow=onshow;  
 
}  
 
functiononshow(){  
 
if(timerInterval==null){  
 
timerInterval=setInterval("updateTime(true);",1000);  
 
}  
}  
 
functiononhide(){  
 
if(timerInterval!=null){  
 
clearInterval(timerInterval);  
 
timerInterval=null;  
}  
}

就像其他的HTML页面一样，你可以把JavaScript动作连接到任何用户界面元素。例如，当用户按下等号的图片时，计算器Widget可以进行这样的一个动作：

<imgid="equal"src="equal.png"onmousedown="equalAction(event);">

关于Widget对象，有一点必须说明，它只在运行Dashboard时有用，在Safari中运行不起作用。

Info.plist文件

Info.plist文件包含了Widget的所有核心信息。这些信息被Dashboard用来识别Widget和知道在哪里得到资源。建立一个属性表的最简单方法是使用PropertyListEditor

KeyNamePurposeRequired  
 
Key:MainHTML  
 
Purpose:ThepathintheWidgetbundletothemainHTMLfilefortheWidget'sinterface.  
 
Required:YES  
 
Key:Width  
 
Purpose:Thewidth,inpixels,oftheWidget  
 
Required:YES  
 
Key:Height  
 
Purpose:Theheight,inpixels,oftheWidget  
 
Required:YES  
 
Key:CFBundleName  
 
Purpose:Thenameofthebundle.  
 
Required:YES  
 
Key:CFBundleIdentifier  
 
Purpose:ThereverseInternetdomainstyleidentifierforthebundle.  
 
Required:YES  
 
Key:DefaultImage  
 
Purpose:ThepathintheWidgetbundletotheWidget'sdefaultimage.  
 
Required:YES  
 
Key:Plugin  
 
Purpose:Thenameofacustomplug-inusedbytheWidget.  
 
Required:NO  
 
Key:AllowMultipleInstances  
 
Purpose:IndicateswhethermultipleinstancesoftheWidgetcanberun  
 
Required:NO

#p#
建立一个Widget

建立一个新的Widget是简单而直接的。使用下面的步骤来开始：

◆建立一个文件加来保存你的Widget

◆定义Widget开发的info.plist文件

◆使用你喜欢的文本编辑器建立一个新的主要HTML

◆使用Safari来打开HTML文件来检视运行中的Widget

◆重新把Widget加载到Safari来查看你做过的任何更新改动。

这是众多网络开发者熟悉的快速、简单、迭代性的方法。当然，有一个更快的方法，同样为网络开发者所熟悉：从Dashboard的SDK复制一个可用的例子来作为立足点开发。对于Widgetbundle，你可以直接进入它的测试环境：Safari。通过简单地双击它的主要HTML文件来在Safari中打开它并在你做了一些改动以后重新加载它。

你必须记着，Safari只是一个最基本的Widget测试环境，它不支持Widget的所有的可用功能。要在Dashboard中测试Widget，只要双击一个.wdgt包。要看任何的改动，使用Command-R来重新加载。你会看到Dashboard会让它用一个很Cool的旋转效果重新加载。

LeveragingMacOSXTechnologies

略……

配置一个Widget

当你建立了一个Widget后，下一步就是把它交到用户手上。为了让Dashboard找到那个Widget，它需要被放置到下面其中一个位置上：

l/Library/Widgets

l~/Library/Widgets

结论

你可以看到，Dashboard提供了一个非常新的开发环境。Widget可以又简单又快的被开发，而且功能强大。他们可以全权访问互联网，可以使用Quartz的高级绘画能力和MacOSX的其他能力。剩下需要的只是你的创造力！