W3C Widget配置與打包是本文要介紹的內(nèi)容，主要是來了解并學(xué)習(xí)W3C Widget的應(yīng)用，看本文詳解W3C Widget的配置與打包操作，來看內(nèi)容詳解。

了解W3C Widgets候選規(guī)范

NathanA.Good居住在明尼蘇達(dá)州的雙子城。他的專長是軟件開發(fā)、軟件架構(gòu)和系統(tǒng)管理。平時(shí)不編寫軟件時(shí)，他喜歡組裝PC和服務(wù)器、閱讀和撰寫技術(shù)文章，并鼓勵(lì)他的所有朋友轉(zhuǎn)用開源軟件。他是許多書籍和文章的作者或合著者，包括

ProfessionalRedHatEnterpriseLinux3,RegularExpressionRecipes:AProblem-SolutionApproach和FoundationsofPEAR:RapidPHPDevelopment。 

(AnIBMdeveloperWorksContributingAuthor)

World Wide Web Consortium(W3C)的“Widget打包和配置”規(guī)范目前仍處于候選推薦狀態(tài)。Widget是一種在Hyper text Markup Language(HTML)中使用的新興技術(shù)，它可用于實(shí)現(xiàn)移動(dòng)設(shè)備和網(wǎng)站的富Web應(yīng)用元素。它們打包成壓縮文件（.zip），可以將一種MultipurposeInternetMailExtensions(MIME)類型的應(yīng)用或Widget部署在HTML文件中。本文將深入探討這個(gè)規(guī)范，闡述Web應(yīng)用開發(fā)人員可以怎樣使用它，它的好處有哪些。

W3C“Widget打包和配置”規(guī)范是一個(gè)新興的用于配置、打包和部署Widget的規(guī)范。W3C Widget由HTML、層疊樣式表（CSS）、JavaScript文件和其它資源組成，如圖片。我們可以在設(shè)備中使用Widget實(shí)現(xiàn)一些小型應(yīng)用，如日歷、天氣預(yù)報(bào)、聊天等等。

相對(duì)于普通的Web應(yīng)用，使用Widget的優(yōu)點(diǎn)在于它們可以一次下載，然后多次使用，這類似于安裝在設(shè)備上的非Web應(yīng)用。這可以讓用戶節(jié)省帶寬，因?yàn)樗鼈兯鶄鬏數(shù)臄?shù)據(jù)只是Widget使用的數(shù)據(jù)，而不包括Widget文件本身。

Widget通常都實(shí)現(xiàn)了富用戶體驗(yàn)，如交互式日歷，甚至是游戲。我們可以在移動(dòng)設(shè)備上使用Widget，而Widget的一次下載、重復(fù)使用的優(yōu)點(diǎn)可以節(jié)省數(shù)據(jù)傳輸?shù)幕ㄙM(fèi)。

從2010年1月起，W3C“Widget打包和配置”規(guī)范（見參考資料中的完整規(guī)范的鏈接）就處于候選推薦狀態(tài)。這表示W(wǎng)3C認(rèn)為這個(gè)規(guī)范已經(jīng)處于穩(wěn)定狀態(tài)，并鼓勵(lì)開發(fā)人員實(shí)現(xiàn)這個(gè)規(guī)范。

W3C Widget規(guī)范的目標(biāo)是提出一個(gè)創(chuàng)建和打包Widget的標(biāo)準(zhǔn)。目前有許多不同的供應(yīng)商支持Widget（見參考資料），并且他們幾乎都實(shí)現(xiàn)了它們自己的私有應(yīng)用程序接口（API）和打包格式。

本文將介紹W3C的打包和配置規(guī)范，介紹我們可以怎樣將HTML、CSS和JavaScript文件打包成一個(gè)可以部署到實(shí)現(xiàn)W3CWidget規(guī)范的設(shè)備的Widget。因?yàn)檫@是一個(gè)新興的規(guī)范，支持Widget渲染的設(shè)備實(shí)現(xiàn)還是很有限的。如果希望看到Widget的實(shí)際運(yùn)行，同時(shí)還沒有安裝這些應(yīng)用，我們就需要先下載這些具體的應(yīng)用。

要查看W3CWidget包的運(yùn)行，我們需要：

實(shí)現(xiàn)W3C Widget規(guī)范的軟件。本文使用的是ApacheWookie，它是一個(gè)ApacheIncubator項(xiàng)目，它的作用是作為了W3C Widget內(nèi)容服務(wù)器，用戶可以用它來部署W3C Widget。

一個(gè)創(chuàng)建Widget壓縮文件包的工具。

用于下載和安裝ApacheWookie的Subversion(SVN)客戶端。

目前市面上有許多不同版本的Widget和Gadget，所以有時(shí)很難分辨這些技術(shù)之間的區(qū)別。Widget技術(shù)的差別增加了創(chuàng)建可重用富用戶Web組件的難度。

Widget與Gadget

根據(jù)本文的撰寫目的，Widget和Gadget表示的是相同的意思—可以像應(yīng)用一樣安裝和運(yùn)行在本地的小型組件。本文采用的是與供應(yīng)商相對(duì)應(yīng)的方式來使用Widget或Gadget。例如，如果是W3C產(chǎn)品，我們稱為Widget，而對(duì)于Google的產(chǎn)品，我們則稱為Gadget。

除了Microsoft®Windows®VistaGadgets和Apple®Widgets，類似的技術(shù)還包括GoogleWaveGadgets、OpenSocial和OpenAjax。這些技術(shù)都有自己的API和規(guī)范（見參考資料）。

GoogleWaveGadgets

GoogleWaveGadgets概念上類似于W3C Widgets，但是前者只是用在GoogleWaveWeb應(yīng)用中。相反，W3C Widgets則是由W3C發(fā)布的一個(gè)規(guī)范，是公開的，可以被不同的供應(yīng)商使用。

GoogleWave是一個(gè)Web應(yīng)用，目前處于對(duì)開發(fā)人員和早期希望學(xué)習(xí)這個(gè)技術(shù)的用戶開放的有限預(yù)覽的階段。GoogleWave主要是一個(gè)社交工具，它以GoogleWaveGadgets的方式向用戶提供不同的功能。開發(fā)人員可以創(chuàng)建Gadgets向Wave用戶提供特定的功能。

OpenSocial

OpenSocial是一個(gè)API，它可以用來創(chuàng)建能運(yùn)行在社交網(wǎng)絡(luò)Web應(yīng)用中的Gadgets。OpenSocial1.0規(guī)范目前正處于預(yù)覽階段，而0.9版本和0.8.1版本已經(jīng)在各種containers（使用Gadgets的Web應(yīng)用）中使用了，如iGoogle、MySpace、Yahoo和LinkedIn。

OpenSocialGadgets是基于GoogleGadgets框架的。OpenSocial框架包括預(yù)先寫好的JavaScriptsAPI，我們可以使用這些API來操作人、活動(dòng)和持久化等數(shù)據(jù)。

OpenSocial是另一種備受關(guān)注的創(chuàng)建Gadgets的方法。

OpenAjax

OpenAjax是“一個(gè)專注于成功應(yīng)用開放和互操作的基于AjaxWeb技術(shù)的組織。它由主流供應(yīng)商、開放源碼項(xiàng)目和使用AsynchronousJavaScript+XML(Ajax)技術(shù)的公司所組成”（見參考資料）。

OpenAjaxHub提供的發(fā)布和訂閱（pub/sub）技術(shù)可以在OpenSocialGadgets中使用。

由于OpenAjax基于W3C打包和配置規(guī)范創(chuàng)建的Widgets能夠使用Ajax，因此它是創(chuàng)建能改進(jìn)互操作性的Widgets的一個(gè)非常好的技術(shù)。我們可以創(chuàng)建即使用OpenAjax又符合W3C Widget規(guī)范的Widgets。

ApacheWookie

ApacheWookie是一個(gè)ApacheSoftwareFoundation的孵化項(xiàng)目，它能夠同時(shí)作為GoogleWaveGadgets和W3C Widget包的服務(wù)器。ApacheWookie是一個(gè)服務(wù)器應(yīng)用，可以作為一個(gè)Web應(yīng)用下載安裝，或者作為單獨(dú)的服務(wù)器運(yùn)行。

獲取ApacheWookie源代碼也是查看W3C Widget源代碼的一種很好的方法。

目前官方網(wǎng)站（見參考資料）上還沒有預(yù)編譯好的ApacheWookie二進(jìn)制包，所以需要安裝SVN才能下載和運(yùn)行ApacheWookie。使用清單1中顯示的簡(jiǎn)單命令就可以下載ApacheWookie。

清單1.下載ApacheWookie

$svncohttp://svn.apache.org/repos/asf/incubator/wookie/trunk 

在下載ApacheWookie后，我們可以通過輸入清單2中顯示的命令來將它作為了一個(gè)獨(dú)立服務(wù)器運(yùn)行：

清單2.以獨(dú)立模式運(yùn)行ApacheWookie

$antrun 

ant命令會(huì)以獨(dú)立模式啟動(dòng)ApacheWookie服務(wù)器。在服務(wù)器啟動(dòng)后，我們可以通過這個(gè)地址訪問Widgets：http://localhost:8080/wookie/。

#p#

Widget配置

創(chuàng)建一個(gè)Widget，首先要?jiǎng)?chuàng)建一個(gè)以Widget名稱命名的目錄，如：myWidget。（在允許使用帶點(diǎn)文件名的操作系統(tǒng)上，可以使用myWidget.wgt。）我們將會(huì)把新的Widget文件放到這個(gè)目錄中。如果想要?jiǎng)?chuàng)建和測(cè)試新的HTML、CSS和JavaScript文件，我們可以把這個(gè)目錄創(chuàng)建在Web服務(wù)器的文檔根目錄下，這樣我們就可以在打包Widget前通過瀏覽器查看HTML文件。

每一個(gè)Widget包必須有一個(gè)名為config.xml（大小寫敏感）的配置文件，它就位于我們剛創(chuàng)建的空目錄下，這個(gè)目錄就是包的根目錄。這個(gè)配置文件包含了關(guān)于Widget的重要信息，如：名稱、作者、描述、許可證等等。

清單3中顯示的是一個(gè)配置文件例子。

清單3.一個(gè)示例config.xml文件

id="http://www.example.com/widgets/HelloWidget" 
version="0.1"width="300"height="200"> 
HelloWidget  
Averybasicwidgetthatsays,"Hello"  
NathanA.Good  
Thisismylicense 

這個(gè)XML文件必須采用UTF-8編碼，如例子所示。

Widget父元素有詳細(xì)說明Widget信息的屬性，如表1所示。

表1.Widget父元素的屬性

屬性名描述

id惟一URI，它是Widget的標(biāo)識(shí)

versionWidget的版本號(hào)

width,height分別以像素值表示W(wǎng)idget的寬和高

viewmodesWidget的查看模式（見參考資料）

配置中的XML元素如表2所示。

表2.Widget配置元素

元素名描述

nameWidget的縮寫名是在屬性short指定的，而全名在XML元素的文本中指定。

descriptionWidget的描述信息

authorWidget的作者信息

licenseWidget的許可證

icon圖標(biāo)文件的相對(duì)路徑

在創(chuàng)建一個(gè)簡(jiǎn)單的配置文件后，我們就可以創(chuàng)建開始文件了。

開始文件

除了config.xml配置文件之外，一個(gè)有效的W3CWidget包至少還需要另一個(gè)文件：開始文件。如果沒有指定開始文件，默認(rèn)的文件就是文件名以index開始的文件——通常帶有.html、.htm或.xhtml擴(kuò)展名。不同類型的Widgets可能允許使用其它的擴(kuò)展名，但本文僅關(guān)注標(biāo)準(zhǔn)的HTML例子。

清單4顯示了一個(gè)示例文件。

清單4.一個(gè)示例開始文件

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
"text/html;charset=us-ascii"/> 
HelloWorld... 

清單4中顯示的HTML文件和其他可以顯示在瀏覽器上的符合語法的HTML文件很相像。這使得Widget設(shè)計(jì)時(shí)很容易—我們像普通的HTML頁面一樣創(chuàng)建Widget。這個(gè)HTML開始文件就是用來渲染W(wǎng)idget的文件。

因?yàn)閃idget是由瀏覽器所渲染的一個(gè)簡(jiǎn)單的HTML文件，它們可能包含了JavaScript文件。使用JavaScript功能可以使Widget擁有富內(nèi)容和動(dòng)態(tài)內(nèi)容。我們可以使用Ajax在Widget中動(dòng)態(tài)地向用戶顯示數(shù)據(jù)。（見參考資料中關(guān)于Ajax的信息）

Widget的HTML開始文件中所引用的JavaScript文件必須包含在打包的Widget存檔包中。

這個(gè)Widget的示例HTML文件還使用了CSS樣式表。類似于JavaScript文件，這些CSS文件也必須包含在作為打包部署的Widget的壓縮文件存檔中。

W3C規(guī)范也規(guī)定了本地化（i10n）準(zhǔn)則。本地化支持是基于文件夾的，所以我們可以在Widget目錄下創(chuàng)建一個(gè)名為locales目錄。在locales文件夾內(nèi)，我們可以創(chuàng)建以本地化名稱命名的文件夾（例如，en、fr、de），它們包含了適合于各個(gè)本地化的不同資源。

#p#

打包Widget

Widget被打包成標(biāo)準(zhǔn)的壓縮存檔文件，擴(kuò)展名為.wgt。我們可以使用DEFLATE方法將一個(gè)Widget包壓縮成一個(gè)存檔文件。壓縮文件存檔包必須包含配置文件、開始文件和文件所使用的所有資源，如JavaScript文件、CSS和圖片。

我們可以使用清單5中所示的命令行工具來創(chuàng)建一個(gè)Widget的壓縮文件包。

清單5.創(chuàng)建壓縮文件存檔包

$cdmyWidget  
$zipmyWidget.wgt* 

我們也可以使用一個(gè)圖形化用戶界面（GUI）來創(chuàng)建Widget的壓縮文件存檔包。在創(chuàng)建存檔包后，我們只需要將擴(kuò)展名.zip修改為.wgt即可。

我們可以將Widget包按目錄整理好，這樣就更容易管理包。例如，圖1顯示了諸如images、style和scripts的文件夾，我們可以使用這些文件夾來管理Widget包。

圖1.W3CWidget包文件夾結(jié)構(gòu)

在開始文件中引用資源時(shí)，要像部署在Web服務(wù)器上一樣使用相對(duì)路徑。例如，使用style/common.css引用style文件夾下的common.css文件，雖然它們都是包含在Widget包的壓縮文件存檔中。

我們還可以用數(shù)字符號(hào)來指定Widget包文件的安全性設(shè)置。具體可以查看參考資料中關(guān)于數(shù)字方式標(biāo)記Widget包的W3C規(guī)范的信息。

部署Widget有限的實(shí)現(xiàn)

因?yàn)閃3C Widget規(guī)范是新出現(xiàn)的，而且現(xiàn)在有許多不同的私有Widget規(guī)范，所以現(xiàn)在還很難找一個(gè)能達(dá)到生產(chǎn)環(huán)境質(zhì)量要求的W3C Widget規(guī)范實(shí)現(xiàn)。ApacheWookie就是一個(gè)還在開發(fā)中的W3C Widget規(guī)范的實(shí)現(xiàn)例子。因?yàn)樗€在開發(fā)過程中，它可能還不穩(wěn)定。當(dāng)我運(yùn)行我的測(cè)試時(shí)，SVN中的代碼還有一些導(dǎo)致ApacheWookie暫時(shí)出錯(cuò)的更新，但它們已經(jīng)在后面的更新中解決了。

我們可以使用ApacheWookie的Administrative菜單部署Widget。我們先要保證Wookie正在運(yùn)行（在命令行中輸入antrun），然后在瀏覽器上輸入ApacheWookie的位置，我們就可以訪問ApacheWookie的菜單。默認(rèn)情況下，它的位置是http://localhost:8080/wookie。點(diǎn)擊Administrative菜單鏈接（見圖2）。

圖2.Administrative菜單鏈接

我們會(huì)被提示輸入用戶名和密碼。如果我們沒有修改默認(rèn)值，用戶名和密碼都應(yīng)該是java。

單擊圖3所示的Addnewwidget。

圖3.添加一個(gè)新的Widget

單擊ChooseFile，然后瀏覽Widget存檔文件。選擇文件，然后單擊Publish（見圖4）。

圖4.選擇Widget存檔文件

然后，ApacheWookie會(huì)處理Widget存檔。當(dāng)存檔處理完成后，我們可以在Widget清單和Widget庫中看到所發(fā)布的Widget。

另外，我們也可以在ApacheWookie中不使用管理工具部署Widget。只需直接將Widget包復(fù)制到build.properties文件中widget.deploy.dir所配置的部署目錄即可。

部署和配置W3C Widget的規(guī)范包括了具體實(shí)現(xiàn)應(yīng)該如何處理Widget存檔文件的推薦規(guī)范。當(dāng)一個(gè)實(shí)現(xiàn)（如瀏覽器）下載一個(gè)包時(shí)，它會(huì)將Widget包作為一個(gè)可能的Widget包看待。瀏覽器會(huì)驗(yàn)證包的完整性，保證它是正確創(chuàng)建的，而且配置文件是完整的。如果這個(gè)Widget包符合標(biāo)準(zhǔn)，它就會(huì)被作為一個(gè)有效的Widget包進(jìn)行處理。

#p#

查看示例

ApacheWookie允許我們?cè)谒袨g覽器上查看Widget，所以我們不需要搜索實(shí)現(xiàn)W3C規(guī)范的瀏覽器（類似于Opera瀏覽器的Widget實(shí)現(xiàn)）。理想地，瀏覽器將會(huì)實(shí)現(xiàn)W3C Widget規(guī)范，所以用戶可以利用Widget的一次下載、重復(fù)使用的優(yōu)點(diǎn)。

為了查看我們新創(chuàng)建的Widget，我們必須確保ApacheWookie已經(jīng)運(yùn)行，并能從瀏覽器訪問它。單擊ViewWidgetGallery，我們就可以看到所部署的Widget已經(jīng)列在庫中（見圖5）。

圖5.查看Widget庫

單擊Demo查看Widget的運(yùn)行結(jié)果。

我們也可以創(chuàng)建一個(gè)測(cè)試文件，它用一個(gè)iframe元素包含我們創(chuàng)建的新Widget。創(chuàng)建一個(gè)如清單6所示的HTML文件。

清單6.一個(gè)簡(jiǎn)單的運(yùn)行Widget的HTML文件

"http://localhost:8080/wookie/wservices/wookie.apache.org/widgets/butterfly/index.html  
?idkey=sM4aI8pnUUNI2Kfz15aK2h6vIek.eq.&proxy=http://localhost:8080/wookie/proxy  
&st=wookie%3AwEQZrCsxTF502%2B6JeeEFlkq1KPgqXKQTllufS6Toez81qb40hPouhYV3apG4on23uVB  
kQ5xlLjOXvIKulGqKBZvnKv2pgfEMg7OVzJpdDQt66MfODW6BBJry33ybOyMSc2hKonu7Sp1n1SY6FOFUuRx8VAjED  
TuJip8BQ9i6ZXRH9193FT%2F7Ijjz0o1vdR91ofzcFA%3D%3D"width="500"height="400"> 

我們將看到所創(chuàng)建的Widget顯示在網(wǎng)頁中。我使用的WidgetURL是來自于Wookie主菜單的Instantiateawidget的執(zhí)行結(jié)果。

我們還可以查看其他示例包，它們包含了更復(fù)雜的JavaScript文件、CSS和圖片，這些示例包是和ApacheWookie源代碼一起發(fā)布的。在下載了ApacheWookie源代碼后，子文件夾widgets中就包含了其他Widget的源代碼。

小結(jié)：W3C Widget配置與打包的內(nèi)容介紹完了，希望通過W3C Widget應(yīng)用中的配置與打包內(nèi)容的學(xué)習(xí)能對(duì)你有所幫助！