利用Adobe Widget Browser對widgets進(jìn)行打包

作者：Scott Richards 2011-11-17 16:45:33

本教程將展示如何使用Adobe Widget瀏覽器對現(xiàn)有的HTML和JavaScript widget 進(jìn)行打包，以便它能夠與 Widget瀏覽器的其它用戶進(jìn)行共享。

Widget 瀏覽器是一個(gè) Adobe AIR應(yīng)用程序，它允許你使用一種圖像界面預(yù)覽和配置 widgets。術(shù)語widget具有許多定義，但在本文中，一個(gè) widget是指HTML、CSS和JavaScript代碼小片的組合，它們能夠協(xié)同工作以構(gòu)成一個(gè)復(fù)雜的web頁面組件。可折疊控件（Accordion）、選項(xiàng)卡式面板（tabbed panel）和圖像Lightbox控件（image lightbox）均是widgets的范例。

要求

需要下列產(chǎn)品：

預(yù)備知識(shí):

創(chuàng)建widgets要求具有JavaScript和XML等相關(guān)知識(shí)。

創(chuàng)建一個(gè)OPENAJAX METADATA文件

首先，你需要?jiǎng)?chuàng)建或找到一個(gè)能夠運(yùn)行的、你希望進(jìn)行打包的widget。許多JavaScript widgets 具有靈活的許可策略，它們允許你以這類方式使用它們。務(wù)必對widget具有的許可進(jìn)行檢查。

一旦你擁有你的widget，你可以開始創(chuàng)建 OpenAjax Metadata OAM文件，這是一個(gè)包含關(guān)于該widget所有信息的XML文件。這一文件的格式遵從描述 JavaScript widgets的一種標(biāo)準(zhǔn)，該標(biāo)準(zhǔn)是利用 OpenAjax Alliance*開發(fā)的。該文件包含至下列內(nèi)容的鏈接：

構(gòu)建widget的JavaScript JS和 CSS 文件
需要在widget的HTML頁面插入的JavaScript、HTML和 CSS 代碼。
用戶可以自定義的任何屬性

針對本范例，我將首先創(chuàng)建 jQuery UI按鈕。本文附帶的ZIP 文件包含一個(gè) jQueryUIButton.html 文件，它具有一個(gè)可以運(yùn)行的 jQuery UI按鈕 widget的范例。如果希望對該 widget進(jìn)行打包，你需要?jiǎng)?chuàng)建一個(gè) OpenAjax Metafile，它指向jQuery UI按鈕需要的所有文件。該文件還將包括支持用戶在Widget Browser 中為widget創(chuàng)建他們自己的預(yù)先設(shè)置內(nèi)容以及在Dreamweaver網(wǎng)站插入widget所需的代碼和屬性。

在 jQueryUIButton.html的主體中，你可以看到一個(gè) <div> 標(biāo)簽，它是能夠變成按鈕的HTML標(biāo)記，以及一個(gè) JavaScript 構(gòu)造函數(shù)，它為將要轉(zhuǎn)變?yōu)閖Query UI 按鈕的div指定 id。

注: 在jQuery中 $ 是jQuery.的簡化符號(hào)。如果你需要避免與其它 JavaScript框架發(fā)生沖突，你可以使用jQuery替代$。

下面代碼將利用設(shè)置為myButton的id尋找<div> 標(biāo)簽，并且調(diào)用 button函數(shù)，該函數(shù)將它轉(zhuǎn)換為一個(gè)jQuery UI按鈕。

<body> 
  <script type="text/javascript"> 
  $(function() { 
          $( "#myButton").button(); 
        }); 
  </script> 
<p>Push Button</p> 
  <div id="myButton">div</div> 
 
</body>

根據(jù)下列步驟開始為該范例widget創(chuàng)建 OpenAjax Metafile：

創(chuàng)建一個(gè)名稱為jQueryButton_oam.xml的OpenAjax Metafile。這是一個(gè)帶有一個(gè)<widget>父標(biāo)簽的 XML文件。

添加下列代碼：

<?xml version="1.0" encoding="utf-8"?> 
<widget xmlns="http://openajax.org/metadata" 
        xmlns:dw="http://ns.adobe.com/dreamweaver" 
        spec="1.0" 
        id="http://jqueryui.com/demos/button" 
        name="jQuery UI Push button" 
        version="1.8.5" 
        > 
</widget>

將widget的id屬性設(shè)置為一個(gè)唯一的ID。

在web中使用范例頁面位置是一種良好的習(xí)慣。name屬性能夠定義widget的名稱，而version屬性能夠定義widget的版本。

按照下列方式，在 <description>標(biāo)簽中添加widget的描述，你可以使用HTML標(biāo)簽對該描述進(jìn)行格式化：

<description type="text/html" > 
    <![CDATA[ 
    <p>jQuery UI Push Button enhances standard form elements like button, input of type submit or reset or anchors to themable buttons with appropiate mouseover and active styles.</p> 
   ]]> 
</description>

添加 <javascript> 和 <content> 標(biāo)簽以便指定插入代碼主體的JavaScript構(gòu)造函數(shù)和HTML 標(biāo)記；例如：
```
<javascript location="beforeContent"> 
<![CDATA[  
        $(function() { 
            $( "#myButton").button(); 
        });     
]]> 
</javascript> 
 
<content> 
<![CDATA[     
        Push Button: <div id="myButton">Push Me</div> 
]]> 
 
</content> 
```
javascript標(biāo)簽的location="beforeContent" 屬性表示JavaScript塊應(yīng)該在HTML 標(biāo)記之前顯示。

現(xiàn)在，你可以將引用添加至JavaScript和CSS 文件中。如果你查看一下范例widget HTML文件的頭部，你將看到JavaScript文件具有jQuery的鏈接、jQuery UI的JavaScript 文件以及基礎(chǔ) jQuery UI 層疊樣式表文件。
將一個(gè) <requires> 標(biāo)簽和下列三個(gè) <require> 標(biāo)簽添加至OAM文件以確保這些鏈接被添加至該文件的頭部。

<requires> 
    <require type="javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" /> 
    <require type="javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.5/jquery-ui.min.js" /> 
    <require type="css" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.3/themes/base/jquery-ui.css" /> 
</requires>

關(guān)于使用到此為止的上述步驟創(chuàng)建的范例XML，參見 jQueryPushButton1_oam.xml范例文件。

注: 當(dāng)你插入widget時(shí)，你也可以提供JS和CSS文件的本地副本并且將它們復(fù)制到你的網(wǎng)站，假如你不希望通過web的Google API鏈接引用它們的話。關(guān)于本地引用這些文件的范例，參見jQueryPushButtonLocal_oam.xml范例文件。

創(chuàng)建WIDGET項(xiàng)目

在安裝和打開Adobe Widget瀏覽器之后，你需要做的第一件事情是啟動(dòng)widget 項(xiàng)目。

點(diǎn)擊Options，然后選擇Enable Widget Projects。

這一操作將會(huì)把 Widget Projects 按鈕添加至 Adobe Exchange和 My Widgets 按鈕的旁邊。參見圖 1 。

圖 1. 在Adobe Widget 瀏覽器中啟動(dòng)widget項(xiàng)目

在你啟動(dòng)widget項(xiàng)目之后，你將能夠創(chuàng)建一個(gè)widget項(xiàng)目。
點(diǎn)擊Widget Projects。
在Widget Projects屏幕的右下方，點(diǎn)擊 Create Widget按鈕。
從范例文件中選擇你剛才創(chuàng)建的 jQueryButton_oam.xml 文件或jQueryPushButton1_oam.xml版本。參見圖2 。

圖 2. 選擇OpenAjax Metadata文件

如果一切順利，你將在Status欄看到這樣的消息： "Validation succeeded with warnings" 。現(xiàn)在，別為這些告警消息擔(dān)憂，本文的后面章節(jié)將會(huì)討論它們。

如果驗(yàn)證沒有成功，確保你的XML文件結(jié)構(gòu)完整。一個(gè)非常有用的技巧是在 Dreamweaver中打開文件，然后選擇 File > Validate As XML以確保 XML的正確性。
一旦 OAM文件驗(yàn)證成功，點(diǎn)擊 Preview標(biāo)簽，以查看 widget的預(yù)覽。

對WIDGET進(jìn)行打包和測試

將一個(gè)widget打包至一個(gè)ZIP文件非常簡單：

在屏幕的底部點(diǎn)擊Package按鈕。
通過在Results欄中查看 "Zip packaging succeeded" 消息以便確認(rèn)操作成功。在Results欄中也顯示ZIP文件的路徑。

導(dǎo)入widget

當(dāng)你將widget打包之后，你可以將其導(dǎo)入，然后利用Dreamweaver將其插入一個(gè)網(wǎng)頁。

在Adobe Widget Browser 主屏幕中，點(diǎn)擊My Widgets。
在右下方點(diǎn)擊 Import Widget 按鈕。
選中你在前一步打包的 widget。在默認(rèn)情形下，它的名稱為jQueryUIPushButton.zip。
點(diǎn)擊OK。
在 widget導(dǎo)入之后，點(diǎn)擊jQuery UI Push Button widget。

利用Dreamweaver插入widget

在Widget添加至My Widgets 之后，當(dāng)你在Insert 面板或Insert菜單中點(diǎn)擊Widget時(shí)，它將在Dreamweaver中顯示出來。

啟動(dòng)Dreamweaver。
創(chuàng)建一個(gè)新的空 HTML頁面。
選擇Insert > Widget 或在Insert 面板中點(diǎn)擊 Widget。
在 Widget 對話框中，選擇 jQuery UI Simple Button作為 Widget。
點(diǎn)擊OK。

此時(shí)，widget代碼將被添加至你的頁面并且至css 和javascript 文件的鏈接將被添加至頁面的頭部。
保存該頁面。

Dreamweaver 將會(huì)把所有的本地文件復(fù)制到你的網(wǎng)站，顯示列出需要復(fù)制到你的網(wǎng)站的所有文件的對話框，并且合理安排相關(guān)鏈接以便URL能夠正確映射。

添加屬性

你已經(jīng)成功地創(chuàng)建一個(gè)widget包并且驗(yàn)證你可以利用Dreamweaver將其插入到你的網(wǎng)頁。下一步是允許你的用戶對widget的外觀和行為進(jìn)行定制，然后創(chuàng)建他們自己的邊框形式。首先，你需要確定你希望定制的屬性。這些屬性可能包括 JavaScript參數(shù)，它們將被傳遞到 widget構(gòu)造函數(shù)以便改變 widget的行為。你也許還希望允許用戶覆蓋默認(rèn)的 CSS 式樣以便改變 widget的外觀。

你可以在OAM文件中定義屬性以便在 Adobe Widget瀏覽器中顯示UI控件，而用戶可以使用它們在頁面中修改 CSS 或JavaScript 代碼。

如需添加一個(gè)控件來定義 widget的邊界以及另一個(gè)控件來設(shè)置按鈕的背景顏色，你應(yīng)該將下列 <property>標(biāo)簽添加到 OAM文件的 <properties> 部分。
```
<properties> 
<property name="borderWidth" datatype="String" format="length" defaultValue="1px" > 
        <title>Width</title> 
        <description>Border width. Default is 1px.</description> 
    </property> 
 
    <property name="defaultBackgroundColor" datatype="String" format="color" defaultValue="#e6e6e6"> 
        <title>Background</title> 
        <description>Default Background color for the button</description> 
    </property> 
</properties> 
```
當(dāng)你在Preview欄的預(yù)置列表的左下方點(diǎn)擊Configure時(shí)，這將創(chuàng)建在Adobe Widget 瀏覽器中可以看到的控件。參見圖3。

<title> 文本將被用作label控件。 datatype 和 format性可以定義控件的類型。defaultValue 屬性可以定義默認(rèn)預(yù)置的默認(rèn)值。

當(dāng)你將鼠標(biāo)移動(dòng)到一個(gè)控件之上， <description>標(biāo)簽的文本將作為工具提示顯示出來。

圖 3. 配置 jQuery UI Push Button widget的邊界寬度和背景顏色

現(xiàn)在，你可以在 <dw:css>標(biāo)簽中添加CSS 代碼，當(dāng)控件值更新時(shí)，它將改變 widget的外觀。 property 標(biāo)簽中的name 屬性可以用于利用用戶從控件中選擇的值進(jìn)行變量替換。

將下列代碼添加至OAM 文件：

<dw:css> 
    <![CDATA[ 
        .ui-button { 
            border-width: @@borderWidth@@; 
        } 
     
    .ui-state-default { 
            background-color: @@defaultBackgroundColor@@; 
            background-image: none; 
        }     
]]> 
</dw:css>

保存你的變更。

關(guān)于使用到此為止的上述步驟創(chuàng)建的范例XML，參見 jQueryPushButton2_oam.xml范例文件。

@@propertyName@@符號(hào)表示相應(yīng)控件的值將在這里被替換。在運(yùn)行時(shí)利用jQuery按鈕代碼可以動(dòng)態(tài)地添加ui-button類。在本例中，你將覆蓋外部式樣表的默認(rèn)式樣，因?yàn)槲臋n頭部的規(guī)則的優(yōu)先級高于文本默認(rèn)式樣表的規(guī)則。

注:你需要將 background-image: none; ; 以便覆蓋在外部CSS文件中定義的背景圖像并且改為顯示背景顏色。

注: 通常使用Live Code選項(xiàng)在Dreamweaver中驗(yàn)證widge以便看到 JavaScript代碼應(yīng)用的式樣是非常有用的方式。如果你在應(yīng)用CSS規(guī)則以獲得你的期望式樣方面存在問題，則CSS Styles 面板通過顯示應(yīng)用的規(guī)則以及CSS層疊的工作方式為你提供幫助信息。

使用唯一ID

如需將多于一個(gè)widget插入到一個(gè)頁面中，你應(yīng)該將一個(gè)唯一的ID與每個(gè)widget關(guān)聯(lián)。你可以將一個(gè) <property>元素添加至具有format="id" 的<properties> 部分，以便指定一個(gè)唯一ID，在本例中指定屬性名稱（在JavaScript改造函數(shù)或HTML標(biāo)記中為__WID__），以及確保任何CSS式樣均能夠指定相應(yīng)的id，這樣你可以在相同的頁面中為多個(gè)widgets應(yīng)用不同的CSS式樣。

編輯 OAM 文件以反映下列變更：

<javascript location="beforeContent"> 
    <![CDATA[  
            $(function() { 
                $( "#__WID__").button(); 
            });     
            ]]> 
  </javascript> 
   
    <content> 
    <![CDATA[     
            Push Button: <div id="__WID__">Push Me</div> 
 
        ]]> 
  </content> 
     
    <dw:css> 
        <![CDATA[ 
        #__WID__.ui-button { 
            border-width: @@borderWidth@@; 
        } 
     
          #__WID__.ui-state-default { 
            background-color: @@defaultBackgroundColor@@; 
            background-image: none; 
        }         
]]> 
    </dw:css> 
     
    <properties> 
 
            <property hidden="true" name="__WID__" datatype="String" format="id" defaultValue="jQueryUIButton"> 
                <title>Id</title> 
</property> 
... 
    </properties>

保存你的變更。

關(guān)于使用到此為止的上述步驟創(chuàng)建的范例XML，參見 jQueryPushButton3_oam.xml 范例文件。
使用更新的OAM文件創(chuàng)建一個(gè)新的widget包，然后將其導(dǎo)入至 Widget 瀏覽器。

在上面的代碼中，defaultValue="jQueryUIButton" 屬性指定了當(dāng)widget被首次插入一個(gè)頁面時(shí)， __WID__將被以 "jQueryUIButton"開頭的唯一ID替換。如果該 ID已經(jīng)用于當(dāng)前頁面，則應(yīng)該添加一個(gè)數(shù)碼以確保該ID在該文檔中是唯一的。例如， jQueryUIButton1。hidden="true" 屬性能夠隱匿屬性，這樣，當(dāng)用戶在Widget Browser中點(diǎn)擊Configure 按鈕時(shí)，該屬性是不可見的。由于 Widget Browser和 Dreamweaver 能夠確保widget 是唯一的，因此在 Widget Browser屬性配置器中沒有必要對其進(jìn)行顯示。

注: 如果你希望指定其它唯一 ID，你可以使用 format="id"" 和另一個(gè)唯一屬性名稱代替__WID__.來實(shí)現(xiàn)這一目的。然后，只需在OAM文件的其它部分中使用@@propertyName@@符號(hào)在匹配的唯一ID中進(jìn)行替換即可。

添加邊框形式

一旦你具有你希望的用于定義你的widget的所有屬性，創(chuàng)建Developer邊框形式變得非常簡單。
1. 在 Widget Browser 中，選擇Widget Projects的widget。
2. 在Preview欄中點(diǎn)擊Configure。
3. 改變屬性以便為你的自定義邊框形式獲得你期望的外觀。例如，將背景顏色改變?yōu)樗G色并且將邊界寬度設(shè)置為3個(gè)像素。
4. 改變邊框形式名稱：例如輸入Aqua Button。
5. 提供一段描述，例如，輸入粗邊水綠色背景（Aqua background with thick border）。參見圖4。
6. 點(diǎn)擊Save Preset。
圖 4. 配置一個(gè)新的Developer邊框形式

新的邊框形式將在邊框形式列表中出現(xiàn)。參見圖5。

圖 5. 在My Presets中定位新的邊框形式
點(diǎn)擊Package按鈕創(chuàng)建一個(gè)新的widget包ZIP 文件。

當(dāng)你導(dǎo)入該widget包之后，你將在Developer Presets下面看到你創(chuàng)建的邊框形式。現(xiàn)在每個(gè)使用該widget的開發(fā)人員均能夠利用該邊框形式。

添加作者和許可信息

你可能已經(jīng)注意到widget 是以 "匿名"方式顯示的。你需要將作者和許可詳細(xì)信息添加到widget之中。

在OAM 文件中添加下列標(biāo)簽：

<author name="jQuery" /> 
  <license type="text/html" ><![CDATA[ 
<p>jQuery is currently available for use in all personal or commercial projects under both MIT and GPL licenses. This means that you can  choose the license that best suits your project, and use it accordingly. </p> 
<h3>Licenses</h3> 
<hr> 
<ul> 
 
  <li><a href="http://jquery.com/dev/svn/trunk/jquery/MIT-LICENSE.txt" title="http://jquery.com/dev/svn/trunk/jquery/MIT-LICENSE.txt"><u>MIT License</u></a></li> 
  <li><a href="http://jquery.com/dev/svn/trunk/jquery/GPL-LICENSE.txt" title="http://jquery.com/dev/svn/trunk/jquery/GPL-LICENSE.txt"><u>GPL License</u></a></li> 
 
</ul>]]> 
  </license>

保存你的變更。

添加圖標(biāo)

你可以添加一個(gè)widget 的預(yù)覽圖標(biāo)，它可以在Widget瀏覽器中顯示，并且當(dāng)在Dreamweaver 中選中widget時(shí)，它是在Property檢查工具中使用的圖標(biāo)。參見圖 6。

為預(yù)覽創(chuàng)建一個(gè) 300 x 200像素的圖標(biāo)并且為Property檢查工具創(chuàng)建一個(gè)36 x 36像素的圖標(biāo)。

圖 6.在Dreamweaver顯示的widget圖標(biāo)

將它們添加至OAM 文件，如下所示：

<icons> 
    <icon src="preview.jpg" width="300" height="200" /> 
    <icon src="jquery/jqueryUIlogo.png" width="36" height="36" /> 
  </icons>

保存你的變更

關(guān)于完整的范例，參見jQueryPushButton4_oam.xml范例文件。

在Adobe Exchange上發(fā)布widget

在你完成對widget的創(chuàng)建和打包操作之后，將其上傳至 Adobe Exchange 以便與Widget Browser的其它用戶進(jìn)行共享

在主 Adobe Exchange頁面，點(diǎn)擊Upload To The Exchange。
如果你仍未注冊，請進(jìn)行注冊。
根據(jù)屏幕指示上傳已經(jīng)打包的 ZIP文件，并且填寫相關(guān)信息。

Upload Type 應(yīng)該設(shè)置為 Dreamweaver Content And Extensions。如需進(jìn)行 Categories設(shè)置，選擇Dreamweaver: Widget Browser/Open Ajax Widgets。如需進(jìn)行Framework設(shè)置，選擇相應(yīng)的Framework。例如，選擇jQuery。但對于其它項(xiàng)目來說，你可以選擇另外的框架，或假如它與列出的任何JavaScript框架均無關(guān)，則選擇Other。

感謝你提交自己的widget！

關(guān)于作者

Scott Richards做為一名工程師，從第一個(gè)發(fā)布版開始就致力于Dreamweaver的工作。他曾經(jīng)是Macromedia的插件經(jīng)理、貢獻(xiàn)者和總監(jiān)。最近他沉浸于用Flex開發(fā)Widget瀏覽器。在不寫代碼的時(shí)候，Scott喜歡滑雪板滑雪。

責(zé)任編輯：佚名來源： Adobe