Dash Board的Widget開發(fā)指南
本文和大家重點學習一下DashBoard的Widget開發(fā),因為Dashboard是系統(tǒng)的一部分,不需要安裝任何額外的部件,Widget就是用戶的最基本的工具。每個Widget都是有特定功能的輕量級程序。
DashBoard的Widget開發(fā)
出處
Tiget引入了一個叫作DashBoard的新特性,并提供了一個叫做Widget的新類,用于開發(fā)超小型的應用程序。Dashboard對于用戶是一個功能強大的特性,對于開發(fā)者,它提供了一個全新的開發(fā)環(huán)境。Widgets可以快速開發(fā),簡單配置。并且可以使用Tiger的所有先進技術(shù)。在桌面環(huán)境和在Web網(wǎng)頁上,Widgets都非常適合處理小量的數(shù)據(jù)和程序間互動。并且提供了一個非常好的方式來為現(xiàn)有的程序添加功能,這就為提供了開發(fā)新產(chǎn)品或者為現(xiàn)有產(chǎn)品增加市場價值提供了新的機遇。
基于Web技術(shù),DashboardWidgets可以通過HTML,JavaScript和CSS的混合方式建立。這樣就使很多人都有了Widget開發(fā)的能力。只要你知道怎么建立一個網(wǎng)頁,你就知道怎么建立一個Widget。但是Widget并不限制與web-base技術(shù)的使用。Widget開發(fā)還能銜接使用MacOSX的強大功能?,F(xiàn)在,你可以個用幾個小時或者幾天的時間就建立一個Widget。還可以下載Dashboard的SDK是開發(fā)速度加快。
本文為你展示了Dashboard的工作方式,并且為怎樣開發(fā)和怎樣分塊的發(fā)布功能模塊提供一個介紹。
了解Widget開發(fā)
Widget在Dashboard被激活時就能夠使用,并且在Dashboard被移除時消失,允許快速的“at-a-glance”用法。因為Dashboard是系統(tǒng)的一部分,不需要安裝任何額外的部件,Widget就是用戶的最基本的工具。每個Widget都是有特定功能的輕量級程序。如果Widget需要更多的界面空間用于設定***項,Dashboard允許Widget翻轉(zhuǎn)來使用Widget的背部。
Widget可以分為下面的三個種類:
裝飾Widget是自包含的,不需要其他程序和訪問網(wǎng)絡支持的。時鐘,秒表,計算器和便條工具都是這一類的。
應用程序Widget是和一個功能齊全的應用程序相關聯(lián)的。這一類的Widget通過提供一個更簡便的并且通常是read-only的用戶界面加強了應用程序的功能。ITuneControler和AdrressBookWidget都是這一類的。
信息Widget都是為處理來自互聯(lián)網(wǎng)的信息而設計的。這些Widget允許你監(jiān)視外界的事件例如天氣,飛機航班或者股票價格。
DashBoard的架構(gòu)
DashBoard的運行時架構(gòu)由下面的部件構(gòu)成。
DashBoard服務器,一個輕量級的進程用于管理DashBoard的用戶界面,包括Widget欄(Widgetbar),關閉框(CloseBar),和Widget啟動效果。
Dashboard客戶端進程,提供Dashboard服務器和單獨的Widget之間所有必需的結(jié)合和WebKit視圖給Widget顯示自己的用戶界面。Dashboard服務器在每運行一個Widget都啟動一個客戶端進程。
Widget實例,向用戶顯示數(shù)據(jù),并和用戶互動。每個Widget在一個獨立的客戶端進程里運行,客戶端進程就像沙箱(sandbox)那樣使Widget不會影響其他Widget或者應用程序。為了使程序可靠,Dashboard小心地管理Widget,如果一個Widget崩潰了,它會自動重新啟動,它僅僅會在Dashboard上再出現(xiàn)。如果它失常了,一連崩潰超過3次,它會被自動在Dashboard上移除。#p#
Widget開發(fā)技術(shù)內(nèi)幕
最簡單的解釋,Widget只是一個在Dashboard上顯示的網(wǎng)頁而不是在像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標志
一開始,如果你知道怎樣寫一個網(wǎng)頁的內(nèi)容,你就可以寫一個Widget了。為了跟隨現(xiàn)在的網(wǎng)絡標準的***實現(xiàn),推薦你使用XHTML1.0標準來寫網(wǎng)頁的內(nèi)容。例如,下面的是“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開發(fā)使用HTML來定義的,所以如果你使用文本編輯器來寫HTML標記的話,你可以用Safari(蘋果的網(wǎng)絡瀏覽器,用IE也可以)。HTML提供了建立Widget需要的大部分功能,不過一些擴展讓Widget有了一些你會使用到的獨特功能。例如,Widget使用了三個HTML的擴展:
◆canvas標志允許你在Widget里完成全部的2D繪畫。
◆在img標志上的composite屬性讓你指定一個圖像的繪畫。
◆一個新的search類型<inputtype=”search”>,允許你建立一個MacOSX風格的搜索框。
必須說明的是,這只是對HTML標準的一個很小的改動,并且設計為可以在任何HTML用于建立用戶界面的上下文環(huán)境使用。Apple公司正在和其他的生產(chǎn)商進行交涉,確保這些改動被采用并變成標準。
CascadingStyleSheets(CSS)
如果你加載了上面的那個基本的“HelloWorld”Widget,你會發(fā)現(xiàn)“HelloWorld”這幾個字看起來并不可以接受。最終用戶不會喜歡這種放錯地方的文字。解決方法就是CascadingStyleSheets(CSS),一個調(diào)整HTML風格的網(wǎng)頁標準。這里是在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為你提供了一個豐富的工具集來建立有趣的用戶界面?,F(xiàn)在讓我們看看怎樣建立那些動態(tài)的用戶界面。#p#
JavaScript
為了符合網(wǎng)絡技術(shù)的要求,Widget開發(fā)使用JavaScript來提供一個動態(tài)特性。在Dashboard中的JavaScript使用起來和在瀏覽器中一樣,除了一個添加了一個Widget對象。Widget對象給了你做下面這些事的能力:
◆訪問用戶***項
l實現(xiàn)轉(zhuǎn)換,例如改變Widget的大小或者翻轉(zhuǎn)它來訪問***項。
◆處理Dashboard激活事件。
◆打開其他應用程序
◆處理拉放操作。
◆通過URL來訪為互聯(lián)網(wǎng)得到數(shù)據(jù)。
◆執(zhí)行系統(tǒng)命令,例如shellscript或者命令行工具。
例如,要訪問***項參數(shù),你可以用下面的代碼:
- widget.setPreferenceForKey(preference,key);
- widget.preferenceForKey(key);
Widget處理Dashboard激活事件時非常重要的,這樣Widget就可以在不顯示的時候不消耗CPU時間或者網(wǎng)絡資源。下面的代碼實現(xiàn)了這樣的功能。
- 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開發(fā)的info.plist文件
◆使用你喜歡的文本編輯器建立一個新的主要HTML
◆使用Safari來打開HTML文件來檢視運行中的Widget
◆重新把Widget加載到Safari來查看你做過的任何更新改動。
這是眾多網(wǎng)絡開發(fā)者熟悉的快速、簡單、迭代性的方法。當然,有一個更快的方法,同樣為網(wǎng)絡開發(fā)者所熟悉:從Dashboard的SDK復制一個可用的例子來作為立足點開發(fā)。對于Widgetbundle,你可以直接進入它的測試環(huán)境:Safari。通過簡單地雙擊它的主要HTML文件來在Safari中打開它并在你做了一些改動以后重新加載它。
你必須記著,Safari只是一個最基本的Widget測試環(huán)境,它不支持Widget的所有的可用功能。要在Dashboard中測試Widget,只要雙擊一個.wdgt包。要看任何的改動,使用Command-R來重新加載。你會看到Dashboard會讓它用一個很Cool的旋轉(zhuǎn)效果重新加載。
LeveragingMacOSXTechnologies
略……
配置一個Widget
當你建立了一個Widget后,下一步就是把它交到用戶手上。為了讓Dashboard找到那個Widget,它需要被放置到下面其中一個位置上:
l/Library/Widgets
l~/Library/Widgets
結(jié)論
你可以看到,Dashboard提供了一個非常新的開發(fā)環(huán)境。Widget可以又簡單又快的被開發(fā),而且功能強大。他們可以全權(quán)訪問互聯(lián)網(wǎng),可以使用Quartz的高級繪畫能力和MacOSX的其他能力。剩下需要的只是你的創(chuàng)造力!