利用Adobe Widget Browser对widgets进行打包

移动开发
本教程将展示如何使用Adobe Widget浏览器对现有的HTML和JavaScript widget 进行打包,以便它能够与 Widget浏览器的其它用户进行共享。

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按钮。

  1. <body> 
  2.   <script type="text/javascript"> 
  3.   $(function() { 
  4.           $( "#myButton").button(); 
  5.         }); 
  6.   </script> 
  7. <p>Push Button</p> 
  8.   <div id="myButton">div</div> 
  9.  
  10. </body> 

根据下列步骤开始为该范例widget创建 OpenAjax Metafile:

  1. 创建一个名称为jQueryButton_oam.xml的OpenAjax Metafile。这是一个带有一个<widget>父标签的 XML文件。

  2. 添加下列代码:

    1. <?xml version="1.0" encoding="utf-8"?> 
    2. <widget xmlns="http://openajax.org/metadata" 
    3.         xmlns:dw="http://ns.adobe.com/dreamweaver" 
    4.         spec="1.0" 
    5.         id="http://jqueryui.com/demos/button" 
    6.         name="jQuery UI Push button" 
    7.         version="1.8.5" 
    8.         > 
    9. </widget> 
  3. 将widget的id属性设置为一个唯一的ID。

    在web中使用范例页面位置是一种良好的习惯。name属性能够定义widget的名称,而version属性能够定义widget的版本。

  4. 按照下列方式,在 <description>标签中添加widget的描述,你可以使用HTML标签对该描述进行格式化:

    1. <description type="text/html" > 
    2.     <![CDATA[ 
    3.     <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> 
    4.    ]]> 
    5. </description> 
  5. 添加 <javascript> 和 <content> 标签以便指定插入代码主体的JavaScript构造函数和HTML 标记;例如:

    1. <javascript location="beforeContent"
    2. <![CDATA[  
    3.         $(function() { 
    4.             $( "#myButton").button(); 
    5.         });     
    6. ]]> 
    7. </javascript> 
    8.  
    9. <content> 
    10. <![CDATA[     
    11.         Push Button: <div id="myButton">Push Me</div> 
    12. ]]> 
    13.  
    14. </content> 

    javascript标签的location="beforeContent" 属性表示JavaScript块应该在HTML 标记之前显示。

    现在,你可以将引用添加至JavaScript和CSS 文件中。 如果你查看一下范例widget HTML文件的头部,你将看到JavaScript文件具有jQuery的链接、jQuery UI的JavaScript 文件以及基础 jQuery UI 层叠样式表文件。

  6. 将一个 <requires> 标签和下列三个 <require> 标签添加至OAM文件以确保这些链接被添加至该文件的头部。
    1. <requires> 
    2.     <require type="javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" /> 
    3.     <require type="javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.5/jquery-ui.min.js" /> 
    4.     <require type="css" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.3/themes/base/jquery-ui.css" /> 
    5. </requires> 

关于使用到此为止的上述步骤创建的范例XML,参见 jQueryPushButton1_oam.xml范例文件。

注: 当你插入widget时,你也可以提供JS和CSS文件的本地副本并且将它们复制到你的网站,假如你不希望通过web的Google API链接引用它们的话。 关于本地引用这些文件的范例,参见jQueryPushButtonLocal_oam.xml范例文件。

创建WIDGET项目

在安装和打开Adobe Widget浏览器之后,你需要做的第一件事情是启动widget 项目。

  1. 点击Options,然后选择Enable Widget Projects。

    这一操作将会把 Widget Projects 按钮添加至 Adobe Exchange和 My Widgets 按钮的旁边。参见图 1 。

    在Adobe Widget 浏览器中启动widget项目

    图 1. 在Adobe Widget 浏览器中启动widget项目

    在你启动widget项目之后,你将能够创建一个widget项目。

  2. 点击Widget Projects。

  3. 在Widget Projects屏幕的右下方,点击 Create Widget按钮。

  4. 从范例文件中选择你刚才创建的 jQueryButton_oam.xml 文件或jQueryPushButton1_oam.xml版本。参见图2 。

    选择OpenAjax Metadata文件

    图 2. 选择OpenAjax Metadata文件

    如果一切顺利,你将在Status栏看到这样的消息: "Validation succeeded with warnings" 。 现在,别为这些告警消息担忧,本文的后面章节将会讨论它们。

    如果验证没有成功,确保你的XML文件结构完整。 一个非常有用的技巧是在 Dreamweaver中打开文件,然后选择 File > Validate As XML以确保 XML的正确性。

  5. 一旦 OAM文件验证成功,点击 Preview标签,以查看 widget的预览。

对WIDGET进行打包和测试

将一个widget打包至一个ZIP文件非常简单:

  1. 在屏幕的底部点击Package按钮。

  2. 通过在Results栏中查看 "Zip packaging succeeded" 消息以便确认操作成功。 在Results栏中也显示ZIP文件的路径。

导入widget

当你将widget打包之后,你可以将其导入,然后利用Dreamweaver将其插入一个网页。

  1. 在Adobe Widget Browser 主屏幕中,点击My Widgets。

  2. 在右下方点击 Import Widget 按钮。

  3. 选中你在前一步打包的 widget。 在默认情形下,它的名称为jQueryUIPushButton.zip。

  4. 点击OK。

  5. 在 widget导入之后,点击jQuery UI Push Button widget。

利用Dreamweaver插入widget

在Widget添加至My Widgets 之后,当你在Insert 面板或Insert菜单中点击Widget时,它将在Dreamweaver中显示出来。

  1. 启动Dreamweaver。

  2. 创建一个新的空 HTML页面。

  3. 选择Insert > Widget 或在Insert 面板中点击 Widget。

  4. 在 Widget 对话框中,选择 jQuery UI Simple Button作为 Widget。

  5. 点击OK。

    此时,widget代码将被添加至你的页面并且至css 和javascript 文件的链接将被添加至页面的头部。

  6. 保存该页面。

Dreamweaver 将会把所有的本地文件复制到你的网站,显示列出需要复制到你的网站的所有文件的对话框,并且合理安排相关链接以便URL能够正确映射。

添加属性

你已经成功地创建一个widget包并且验证你可以利用Dreamweaver将其插入到你的网页。 下一步是允许你的用户对widget的外观和行为进行定制,然后创建他们自己的边框形式。 首先,你需要确定你希望定制的属性。 这些属性可能包括 JavaScript参数,它们将被传递到 widget构造函数以便改变 widget的行为。 你也许还希望允许用户覆盖默认的 CSS 式样以便改变 widget的外观。

你可以在OAM文件中定义属性以便在 Adobe Widget浏览器中显示UI控件,而用户可以使用它们在页面中修改 CSS 或JavaScript 代码。

  1. 如需添加一个控件来定义 widget的边界以及另一个控件来设置按钮的背景颜色,你应该将下列 <property>标签添加到 OAM文件的 <properties> 部分。

    1. <properties> 
    2. <property name="borderWidth" datatype="String" format="length" defaultValue="1px" > 
    3.         <title>Width</title> 
    4.         <description>Border width. Default is 1px.</description> 
    5.     </property> 
    6.  
    7.     <property name="defaultBackgroundColor" datatype="String" format="color" defaultValue="#e6e6e6"> 
    8.         <title>Background</title> 
    9.         <description>Default Background color for the button</description> 
    10.     </property> 
    11. </properties> 

    当你在Preview栏的预置列表的左下方点击Configure时,这将创建在Adobe Widget 浏览器中可以看到的控件。参见图3。

    <title> 文本将被用作label控件。 datatype 和 format性可以定义控件的类型。defaultValue 属性可以定义默认预置的默认值。

    当你将鼠标移动到一个控件之上, <description>标签的文本将作为工具提示显示出来。

    配置 jQuery UI Push Button widget的边界宽度和背景颜色

    图 3. 配置 jQuery UI Push Button widget的边界宽度和背景颜色

    现在,你可以在 <dw:css>标签中添加CSS 代码,当控件值更新时,它将改变 widget的外观。 property 标签中的name 属性可以用于利用用户从控件中选择的值进行变量替换。

  2. 将下列代码添加至OAM 文件:

    1. <dw:css> 
    2.     <![CDATA[ 
    3.         .ui-button { 
    4.             border-width: @@borderWidth@@; 
    5.         } 
    6.      
    7.     .ui-state-default { 
    8.             background-color: @@defaultBackgroundColor@@; 
    9.             background-imagenone
    10.         }     
    11. ]]> 
    12. </dw:css> 
  3. 保存你的变更。

关于使用到此为止的上述步骤创建的范例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式样。

  1. 编辑 OAM 文件以反映下列变更:

    1. <javascript location="beforeContent"> 
    2.     <![CDATA[  
    3.             $(function() { 
    4.                 $( "#__WID__").button(); 
    5.             });     
    6.             ]]> 
    7.   </javascript> 
    8.    
    9.     <content> 
    10.     <![CDATA[     
    11.             Push Button: <div id="__WID__">Push Me</div> 
    12.  
    13.         ]]> 
    14.   </content> 
    15.      
    16.     <dw:css> 
    17.         <![CDATA[ 
    18.         #__WID__.ui-button { 
    19.             border-width: @@borderWidth@@; 
    20.         } 
    21.      
    22.           #__WID__.ui-state-default { 
    23.             background-color: @@defaultBackgroundColor@@; 
    24.             background-image: none; 
    25.         }         
    26. ]]> 
    27.     </dw:css> 
    28.      
    29.     <properties> 
    30.  
    31.             <property hidden="true" name="__WID__" datatype="String" format="id" defaultValue="jQueryUIButton"> 
    32.                 <title>Id</title> 
    33. </property> 
    34. ... 
    35.     </properties> 
  2. 保存你的变更。

    关于使用到此为止的上述步骤创建的范例XML,参见 jQueryPushButton3_oam.xml 范例文件。

  3. 使用更新的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边框形式变得非常简单。

    1. 在 Widget Browser 中,选择Widget Projects的widget。

    2. 在Preview栏中点击Configure。

    3. 改变属性以便为你的自定义边框形式获得你期望的外观。 例如,将背景颜色改变为水绿色并且将边界宽度设置为3个像素。

    4. 改变边框形式名称:例如 输入Aqua Button。

    5. 提供一段描述,例如,输入粗边水绿色背景(Aqua background with thick border)。 参见图4。

    6. 点击Save Preset。

    配置一个新的Developer边框形式

    图 4. 配置一个新的Developer边框形式

    新的边框形式将在边框形式列表中出现。参见图5。

    在My Presets中定位新的边框形式

    图 5. 在My Presets中定位新的边框形式

  4. 点击Package按钮创建一个新的widget包ZIP 文件。

当你导入该widget包之后,你将在Developer Presets下面看到你创建的边框形式。 现在每个使用该widget的开发人员均能够利用该边框形式。

添加作者和许可信息

你可能已经注意到widget 是以 "匿名"方式显示的。 你需要将作者和许可详细信息添加到widget之中。

  1. 在OAM 文件中添加下列标签:

    1. <author name="jQuery" /> 
    2.   <license type="text/html" ><![CDATA[ 
    3. <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> 
    4. <h3>Licenses</h3> 
    5. <hr> 
    6. <ul> 
    7.  
    8.   <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> 
    9.   <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> 
    10.  
    11. </ul>]]> 
    12.   </license> 
  2. 保存你的变更。

添加图标

你可以添加一个widget 的预览 图标,它可以在Widget浏览器中显示,并且当在Dreamweaver 中选中widget时,它是在Property检查工具中使用的图标。参见图 6。

  1. 为预览创建一个 300 x 200像素的图标并且为Property检查工具创建一个36 x 36像素的图标。

    在Dreamweaver显示的widget图标

    图 6.在Dreamweaver显示的widget图标

  2. 将它们添加至OAM 文件,如下所示:

    1. <icons> 
    2.     <icon src="preview.jpg" width="300" height="200" /> 
    3.     <icon src="jquery/jqueryUIlogo.png" width="36" height="36" /> 
    4.   </icons> 
  3. 保存你的变更

关于完整的范例,参见jQueryPushButton4_oam.xml范例文件。

在Adobe Exchange上发布widget

在你完成对widget的创建和打包操作之后,将其上传至 Adobe Exchange 以便与Widget Browser的其它用户进行共享

  1. 在主 Adobe Exchange页面,点击Upload To The Exchange。
  2. 如果你仍未注册,请进行注册。
  3. 根据屏幕指示上传已经打包的 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喜欢滑雪板滑雪。

责任编辑:佚名 来源: Adobe
相关推荐

2011-03-04 09:09:07

BlueJ

2009-04-21 11:02:54

Rational.NET建模

2013-04-23 09:38:39

2011-03-15 14:36:04

MyisamchkMySQL数据表

2011-09-07 17:28:15

2013-03-11 18:04:02

2017-07-19 13:40:42

卷积自编码器降噪

2013-08-19 13:55:42

2017-02-22 13:48:49

Tableau可视化

2013-08-19 16:02:31

2021-02-20 09:23:51

黑客攻击l安全

2010-09-09 14:47:01

2011-03-18 10:23:27

2011-09-09 14:09:17

Android Wid

2017-01-20 15:34:10

2012-09-21 10:12:37

2023-04-21 19:01:55

2011-05-03 15:13:23

BlackBerryWidget

2011-06-20 16:38:33

Qt QWidget Qt4.5

2021-04-29 09:36:23

攻击漏洞Kubernetes
点赞
收藏

51CTO技术栈公众号