| Blog信息 |
|
blog名称:
日志总数:1304
评论数量:2242
留言数量:5
访问次数:7593611
建立时间:2006年5月29日 |
| |
|
 [Prototype(Ajax)]Adobe的AJAX框架--Spry
软件技术
lhwork 发表于 2007/1/18 10:31:44 |
| 最近看完了Adobe的AJAX框架Spry的所有文档和Demo，觉得这东西挺有意思的，在这里介绍给大家。 Spry框架的开发人员是来自于DreamWeaver开发组，他们把Spry框架做为DreamWeaver的一个完美补充为设计者和开发者提供对AJAX技术的支持。Spry框架是一个轻量级的AJAX框架，它的代码和标签十分的简洁和优雅，以保证让用户能便捷的使用，并不会为过繁杂的标签所惑。 Spry框架的官方网址： http://labs.adobe.com/technologies/spry 在这里你能找到最新的文档和下载最新的Spry版本，目前版本是预览版1.3_08-11。 大家可以先在下面的看到Spry的示例和Demo： http://labs.adobe.com/technologies/spry/samples/ http://labs.adobe.com/technologies/spry/demos/
Spry框架其实就是一个客户端的JavaScript类库，包含了一组JavaScript文件，CSS，图片文件，通过官方的框架结构图，我们能看出Spry框架的核心是四部分：XML数据器(XML Data Sets)，动态区域(Dynamic Regions)，装饰器库(Widgets)和变化效果库(Transition Effects)。 500)this.width=500'> 我们可以看出，Spry框架接收的数据格式只是XML数据格式。
一，XML数据器(XML Data Sets) XML数据器是一个提供了从XML文档中载入和管理数据的JavaScript对象。它是Spry框架中处理XML格式数据的一个JavaScript功能实现。通过它，我们可以从XML中直接得到转换成表格数据格式的行和列的值，其实就是数组。它封装了获取XMLhttpRequest的方法，和发送并接收数据等一系列获取数据的方法。 要创建一个XML数据器，你必须在你的HTML文件中加入两行引入JavaScript文件的代码：
<script type="text/javascript" src="../../includes/xpath.js"></script> <script type="text/javascript" src="../../includes/SpryData.js"></script>
上面引入的是Spry框架的核心js文件之一。"xpath.js"是Google基于[url=http://www.w3.org/TR/xpath]XPath 1.0[/url]标准的JavaScript功能实现。你如果想获得更多的关于它的信息，可以访问Google的开源项目 [url=http://goog-ajaxslt.sourceforge.net/]google-ajaxslt project page[/url] . "SpryData.js"则包含了定义XML数据器和动态区域的代码。 构造XML数据器就好像新建一个类一样，用"new"关键字即可： <script type="text/javascript"> var dsPhotos = new Spry.Data.XMLDataSet("/photos.php?galleryid=2000", "/gallery/photos/photo"); </script> Spry框架为XML数据器提供了一些有特色的功能：如数据排序，数据过滤，按指定时间间隔自动更新，并引入了观察者通知模式以支持事件的触发。 关于XML数据器更多资料，大家可以参考http://labs.adobe.com/technologies/spry/articles/data_set_overview/，这一部分笔者已经翻译完成了，但英文原文其实写的通俗易懂，如果对一些名词翻译的不准确反倒会误导了大家，所以还是不贴出来了，大家可以参考官方英文文档。
二，动态区域(Dynamic Regions) 一旦你建立了XML数据器，你就可以在动态区域中去显示这个数据器的数据了。 创建动态区域块很简单，只要在html标签的相应位置加上"spry:region"属性就可以了，Spry框架就会知道这一块是被标识成动态区域了。 在动态区域，你可以有条件的选择要输出的数据，也可用循环输出。 动态区域另一个特点就是，它分为master和detail两个区域类型。 如下面的Demo截图： 500)this.width=500'> master区域的数据改变会使detail区域的数据相应发生改变 500)this.width=500'> 两者都注册成XML数据器的观察者 500)this.width=500'> 当master区域的数据变化时，触发detail区域的响应事件，从面达到更新相应数据。 大家可参考http://labs.adobe.com/technologies/spry/samples/DataSetMasterDetailSample.html所示的功能。 这只是动态区域简单的示例，复杂的情况可能会有多个XML数据器与多个动态区域相互关联触发。
三，装饰器库(Widgets) 一个装饰器是由一组HTML,CSS,JavaScript封装成的高级UI。最常见的装饰器有可折叠的菜单，树型菜单和选项table面板等。这些对象都比较难于创建，需要一些更高级的编程经验。Spry的开发组在创建装饰器这一概念就是希望开发者们能相互协作，共享各自的设计，把这些高级界面元素用在自己的页面上。 Spry框架下的装饰器是易于编辑的。这种模型非常适合于设计者和编辑人员：要改变外观，只要改变CSS就可以了，要增加一个可折叠菜单只要copy和paste一个代码块就够了。 如，你能看懂的这段代码是创建了一个可折叠菜单吗？ <div id="Acc1" class="Accordion"> <div class="Panel"> <div class="Header">Panel Header 1</div> <div class="Content">Panel 1 Content </div> </div> <div class="Panel"> <div class="Header">Panel Header 2</div> <div class="Content">Panel 2 Content</div> </div> <div class="Panel"> <div class="Header">Panel Header 3</div> <div class="Content">Panel 3 Content</div> </div> </div> <script> var acc1 = new Hanzo.Widget.Accordion("Acc1"); </script> 这段代码是非常简洁清晰的，没有什么繁杂的标签，这样设计是为了易于阅读。 关于这个例子，可以参考http://labs.adobe.com/technologies/spry/samples/accordion/AccordionSample.html
四，变化效果库(Transition Effects) Spry框架的变化效果库都存于SpryEffects.js文件中，是基于JavaScript的一些动态变化效果，如，淡出，改变形状等。 Spry框架在设计时，曾考虑直接用第三方的效果库，如Script.aculo.us，但后来开发小组觉得要保证框架代码和标签的一致性，还是选择了自已开发，但是也基本上是以Script.aculo.us为原型进行设计，因为Script.aculo.us 本身就是一个非常优秀的变化效果库框架。 由于Spry框架现在只是预览版，所以目前只支持七种变换： Appear/Fade Makes an element appear or fade away Highlight Flashes a color as the background of an element BlindUp/BlindDown Simulates a window blind, up or down, where the contents of the affected elements stay in place SlideUp/SlideDown Simulates a window blind, where the contents of the affected element scroll accordingly Grow/Shrink Increases/reduces the size of the element Shake Moves the element slightly to the left, then to the right, repeatedly Squish Reduces the element to its top-left corner and disappears 可能到这大家对Spry框架已经有了大致的了解，其实这个东西已经足够我们的大多数应用的开发了，笔者也十分期待着正式版能早日放出，并打算在自己现在的项目中试一试了。 |
|
|