利用Adobe Widget Browser對widgets進行打包
Widget 瀏覽器是一個 Adobe AIR應用程序，它允許你使用一種圖像界面預覽和配置 widgets。 術語widget具有許多定義，但在本文中，一個 widget是指HTML、CSS和JavaScript代碼小片的組合，它們能夠協同工作以構成一個復雜的web頁面組件。 可折疊控件（Accordion）、選項卡式面板（tabbed panel）和圖像Lightbox控件（image lightbox）均是widgets的范例。
目錄：
要求
需要下列產品：
Dreamweaver CS5
Widget瀏覽器
范例文件:
預備知識:
創建widgets要求具有JavaScript和XML等相關知識。
創建一個OPENAJAX METADATA文件
首先，你需要創建或找到一個能夠運行的、你希望進行打包的widget。 許多JavaScript widgets 具有靈活的許可策略，它們允許你以這類方式使用它們。 務必對widget具有的許可進行檢查。
一旦你擁有你的widget，你可以開始創建 OpenAjax Metadata OAM文件，這是一個包含關于該widget所有信息的XML文件。 這一文件的格式遵從描述 JavaScript widgets的一種標準，該標準是利用 OpenAjax Alliance*開發的。 該文件包含至下列內容的鏈接：
- 構建widget的JavaScript JS和 CSS 文件
- 需要在widget的HTML頁面插入的JavaScript、HTML和 CSS 代碼。
- 用戶可以自定義的任何屬性
針對本范例，我將首先創建 jQuery UI按鈕。 本文附帶的ZIP 文件包含一個 jQueryUIButton.html 文件，它具有一個可以運行的 jQuery UI按鈕 widget的范例。 如果希望對該 widget進行打包，你需要創建一個 OpenAjax Metafile，它指向jQuery UI按鈕需要的所有文件。 該文件還將包括支持用戶在Widget Browser 中為widget創建他們自己的預先設置內容以及在Dreamweaver網站插入widget所需的代碼和屬性。
在 jQueryUIButton.html的主體中，你可以看到一個 <div> 標簽，它是能夠變成按鈕的HTML標記，以及一個 JavaScript 構造函數，它為將要轉變為jQuery UI 按鈕的div指定 id。
注: 在jQuery中 $ 是jQuery.的簡化符號。 如果你需要避免與其它 JavaScript框架發生沖突，你可以使用jQuery替代$。
下面代碼將利用設置為myButton的id尋找<div> 標簽，并且調用 button函數，該函數將它轉換為一個jQuery UI按鈕。
- <body>
- <script type="text/javascript">
- $(function() {
- $( "#myButton").button();
- });
- </script>
- <p>Push Button</p>
- <div id="myButton">div</div>
- </body>
根據下列步驟開始為該范例widget創建 OpenAjax Metafile：
-
創建一個名稱為jQueryButton_oam.xml的OpenAjax Metafile。這是一個帶有一個<widget>父標簽的 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屬性設置為一個唯一的ID。
在web中使用范例頁面位置是一種良好的習慣。name屬性能夠定義widget的名稱，而version屬性能夠定義widget的版本。
-
按照下列方式，在 <description>標簽中添加widget的描述，你可以使用HTML標簽對該描述進行格式化：
- <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> 標簽以便指定插入代碼主體的JavaScript構造函數和HTML 標記；例如：
- <javascript location="beforeContent">
- <![CDATA[
- $(function() {
- $( "#myButton").button();
- });
- ]]>
- </javascript>
- <content>
- <![CDATA[
- Push Button: <div id="myButton">Push Me</div>
- ]]>
- </content>
javascript標簽的location="beforeContent" 屬性表示JavaScript塊應該在HTML 標記之前顯示。
現在，你可以將引用添加至JavaScript和CSS 文件中。 如果你查看一下范例widget HTML文件的頭部，你將看到JavaScript文件具有jQuery的鏈接、jQuery UI的JavaScript 文件以及基礎 jQuery UI 層疊樣式表文件。
- 將一個 <requires> 標簽和下列三個 <require> 標簽添加至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>
關于使用到此為止的上述步驟創建的范例XML，參見 jQueryPushButton1_oam.xml范例文件。
注: 當你插入widget時，你也可以提供JS和CSS文件的本地副本并且將它們復制到你的網站，假如你不希望通過web的Google API鏈接引用它們的話。 關于本地引用這些文件的范例，參見jQueryPushButtonLocal_oam.xml范例文件。
創建WIDGET項目
在安裝和打開Adobe Widget瀏覽器之后，你需要做的第一件事情是啟動widget 項目。
-
點擊Options，然后選擇Enable Widget Projects。
這一操作將會把 Widget Projects 按鈕添加至 Adobe Exchange和 My Widgets 按鈕的旁邊。參見圖 1 。
圖 1. 在Adobe Widget 瀏覽器中啟動widget項目
在你啟動widget項目之后，你將能夠創建一個widget項目。
-
點擊Widget Projects。
-
在Widget Projects屏幕的右下方，點擊 Create Widget按鈕。
-
從范例文件中選擇你剛才創建的 jQueryButton_oam.xml 文件或jQueryPushButton1_oam.xml版本。參見圖2 。
圖 2. 選擇OpenAjax Metadata文件
如果一切順利，你將在Status欄看到這樣的消息： "Validation succeeded with warnings" 。 現在，別為這些告警消息擔憂，本文的后面章節將會討論它們。
如果驗證沒有成功，確保你的XML文件結構完整。 一個非常有用的技巧是在 Dreamweaver中打開文件，然后選擇 File > Validate As XML以確保 XML的正確性。
-
一旦 OAM文件驗證成功，點擊 Preview標簽，以查看 widget的預覽。
對WIDGET進行打包和測試
將一個widget打包至一個ZIP文件非常簡單：
-
在屏幕的底部點擊Package按鈕。
-
通過在Results欄中查看 "Zip packaging succeeded" 消息以便確認操作成功。 在Results欄中也顯示ZIP文件的路徑。
導入widget
當你將widget打包之后，你可以將其導入，然后利用Dreamweaver將其插入一個網頁。
-
在Adobe Widget Browser 主屏幕中，點擊My Widgets。
-
在右下方點擊 Import Widget 按鈕。
-
選中你在前一步打包的 widget。 在默認情形下，它的名稱為jQueryUIPushButton.zip。
-
點擊OK。
-
在 widget導入之后，點擊jQuery UI Push Button widget。
利用Dreamweaver插入widget
在Widget添加至My Widgets 之后，當你在Insert 面板或Insert菜單中點擊Widget時，它將在Dreamweaver中顯示出來。
-
啟動Dreamweaver。
-
創建一個新的空 HTML頁面。
-
選擇Insert > Widget 或在Insert 面板中點擊 Widget。
-
在 Widget 對話框中，選擇 jQuery UI Simple Button作為 Widget。
-
點擊OK。
此時，widget代碼將被添加至你的頁面并且至css 和javascript 文件的鏈接將被添加至頁面的頭部。
-
保存該頁面。
Dreamweaver 將會把所有的本地文件復制到你的網站，顯示列出需要復制到你的網站的所有文件的對話框，并且合理安排相關鏈接以便URL能夠正確映射。
添加屬性
你已經成功地創建一個widget包并且驗證你可以利用Dreamweaver將其插入到你的網頁。 下一步是允許你的用戶對widget的外觀和行為進行定制，然后創建他們自己的邊框形式。 首先，你需要確定你希望定制的屬性。 這些屬性可能包括 JavaScript參數，它們將被傳遞到 widget構造函數以便改變 widget的行為。 你也許還希望允許用戶覆蓋默認的 CSS 式樣以便改變 widget的外觀。
你可以在OAM文件中定義屬性以便在 Adobe Widget瀏覽器中顯示UI控件，而用戶可以使用它們在頁面中修改 CSS 或JavaScript 代碼。
-
如需添加一個控件來定義 widget的邊界以及另一個控件來設置按鈕的背景顏色，你應該將下列 <property>標簽添加到 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>
當你在Preview欄的預置列表的左下方點擊Configure時，這將創建在Adobe Widget 瀏覽器中可以看到的控件。參見圖3。
<title> 文本將被用作label控件。 datatype 和 format性可以定義控件的類型。defaultValue 屬性可以定義默認預置的默認值。
當你將鼠標移動到一個控件之上， <description>標簽的文本將作為工具提示顯示出來。
圖 3. 配置 jQuery UI Push Button widget的邊界寬度和背景顏色
現在，你可以在 <dw:css>標簽中添加CSS 代碼，當控件值更新時，它將改變 widget的外觀。 property 標簽中的name 屬性可以用于利用用戶從控件中選擇的值進行變量替換。
-
將下列代碼添加至OAM 文件：
- <dw:css>
- <![CDATA[
- .ui-button {
- border-width: @@borderWidth@@;
- }
- .ui-state-default {
- background-color: @@defaultBackgroundColor@@;
- background-image: none;
- }
- ]]>
- </dw:css>
-
保存你的變更。
關于使用到此為止的上述步驟創建的范例XML，參見 jQueryPushButton2_oam.xml范例文件。
@@propertyName@@符號表示相應控件的值將在這里被替換。 在運行時利用jQuery按鈕代碼可以動態地添加ui-button類。 在本例中，你將覆蓋外部式樣表的默認式樣，因為文檔頭部的規則的優先級高于文本默認式樣表的規則。
注:你需要將 background-image: none; ; 以便覆蓋在外部CSS文件中定義的背景圖像并且改為顯示背景顏色。
注: 通常使用Live Code選項在Dreamweaver中驗證widge以便看到 JavaScript代碼應用的式樣是非常有用的方式。 如果你在應用CSS規則以獲得你的期望式樣方面存在問題，則CSS Styles 面板通過顯示應用的規則以及CSS層疊的工作方式為你提供幫助信息。
使用唯一ID
如需將多于一個widget插入到一個頁面中，你應該將一個唯一的ID與每個widget關聯。 你可以將一個 <property>元素添加至具有format="id" 的<properties> 部分，以便指定一個唯一ID，在本例中指定屬性名稱（在JavaScript改造函數或HTML標記中為__WID__），以及確保任何CSS式樣均能夠指定相應的id，這樣你可以在相同的頁面中為多個widgets應用不同的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>
-
保存你的變更。
關于使用到此為止的上述步驟創建的范例XML，參見 jQueryPushButton3_oam.xml 范例文件。
-
使用更新的OAM文件創建一個新的widget包，然后將其導入至 Widget 瀏覽器。
在上面的代碼中，defaultValue="jQueryUIButton" 屬性指定了當widget被首次插入一個頁面時， __WID__將被以 "jQueryUIButton"開頭的唯一ID替換。 如果該 ID已經用于當前頁面，則應該添加一個數碼以確保該ID在該文檔中是唯一的。 例如， jQueryUIButton1。hidden="true" 屬性能夠隱匿屬性，這樣，當用戶在Widget Browser中點擊Configure 按鈕時，該屬性是不可見的。 由于 Widget Browser和 Dreamweaver 能夠確保widget 是唯一的，因此在 Widget Browser屬性配置器中沒有必要對其進行顯示。
注: 如果你希望指定其它唯一 ID，你可以使用 format="id"" 和另一個唯一屬性名稱代替__WID__.來實現這一目的。 然后，只需在OAM文件的其它部分中使用@@propertyName@@符號在匹配的唯一ID中進行替換即可。
添加邊框形式
一旦你具有你希望的用于定義你的widget的所有屬性，創建Developer邊框形式變得非常簡單。
-
在 Widget Browser 中，選擇Widget Projects的widget。
-
在Preview欄中點擊Configure。
-
改變屬性以便為你的自定義邊框形式獲得你期望的外觀。 例如，將背景顏色改變為水綠色并且將邊界寬度設置為3個像素。
-
改變邊框形式名稱：例如 輸入Aqua Button。
-
提供一段描述，例如，輸入粗邊水綠色背景（Aqua background with thick border）。 參見圖4。
-
點擊Save Preset。
圖 4. 配置一個新的Developer邊框形式
新的邊框形式將在邊框形式列表中出現。參見圖5。
圖 5. 在My Presets中定位新的邊框形式
-
-
點擊Package按鈕創建一個新的widget包ZIP 文件。
當你導入該widget包之后，你將在Developer Presets下面看到你創建的邊框形式。 現在每個使用該widget的開發人員均能夠利用該邊框形式。
添加作者和許可信息
你可能已經注意到widget 是以 "匿名"方式顯示的。 你需要將作者和許可詳細信息添加到widget之中。
-
在OAM 文件中添加下列標簽：
- <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>
-
保存你的變更。
添加圖標
你可以添加一個widget 的預覽 圖標，它可以在Widget瀏覽器中顯示，并且當在Dreamweaver 中選中widget時，它是在Property檢查工具中使用的圖標。參見圖 6。
-
為預覽創建一個 300 x 200像素的圖標并且為Property檢查工具創建一個36 x 36像素的圖標。
圖 6.在Dreamweaver顯示的widget圖標
-
將它們添加至OAM 文件，如下所示：
- <icons>
- <icon src="preview.jpg" width="300" height="200" />
- <icon src="jquery/jqueryUIlogo.png" width="36" height="36" />
- </icons>
-
保存你的變更
關于完整的范例，參見jQueryPushButton4_oam.xml范例文件。
在Adobe Exchange上發布widget
在你完成對widget的創建和打包操作之后，將其上傳至 Adobe Exchange 以便與Widget Browser的其它用戶進行共享
- 在主 Adobe Exchange頁面，點擊Upload To The Exchange。
- 如果你仍未注冊，請進行注冊。
- 根據屏幕指示上傳已經打包的 ZIP文件，并且填寫相關信息。
Upload Type 應該設置為 Dreamweaver Content And Extensions。 如需進行 Categories設置，選擇Dreamweaver: Widget Browser/Open Ajax Widgets。 如需進行Framework設置，選擇相應的Framework。 例如，選擇jQuery。但對于其它項目來說，你可以選擇另外的框架，或假如它與列出的任何JavaScript框架均無關，則選擇Other。
感謝你提交自己的widget！
關于作者
Scott Richards做為一名工程師，從第一個發布版開始就致力于Dreamweaver的工作。他曾經是Macromedia的插件經理、貢獻者和總監。最近他沉浸于用Flex開發Widget瀏覽器。在不寫代碼的時候，Scott喜歡滑雪板滑雪。
