Spry基础

Adobe的Ajax框架spry的正式版还没放出,所以文档是少之又少,在这里接合自己使用的情况总结20个spry的知识点给大家,相信会对大家有一定帮助,至少大家也会对spry有个初步的认识了,这个轻量型的框架就一个字:“易用”。
1,使用spry框架,必须引用的两个核心js文件

代码
  1. <script type="text/javascript" src="../../includes/xpath.js"></script>      
  2. <script type="text/javascript" src="../../includes/SpryData.js"></script>     
<script type="text/javascript">render_code();</script>

 

2,创建一个数据器dataset

 

代码
  1. var dsPhotos = new Spry.Data.XMLDataSet("/photos.php""/gallery/photos/photo", { method: "POST", postData: "galleryid=2000&offset=20&limit=10", headers: { "Content-Type""application/x-www-form-urlencoded; charset=UTF-8" } });      
  2. var dsPhotos2 = new Spry.Data.XMLDataSet("/photos.php?galleryid=2000""/gallery/photos/photo");     
<script type="text/javascript">render_code();</script>

 

method:为请求发送方式,POST / GET ;默认为GET
postData:为请求参数,可省略,可直接把"/photos.php"换成/photos.php?galleryid=2000&offset=20&limit=10
Content-Type:为头信息

3,不使用缓存

代码
  1. Var dsPhotos = new  Spry.Data.XMLDataSet("/photos.php?galleryid=2000""/gallery/photos/photo", { useCache:  false })     
<script type="text/javascript">render_code();</script>

 

这里要重点说明一下,我在应用时,曾经发现设置不用缓存时,页面仍然不是最新数据,我是用一个servlet生成xml,然后对生成的数据进行删除和添加,但页面显示的数据不会自动更新。
后来在adobe的官方论坛上找到了答案,在IE中,使用userCache:false是不够的,还要在生成xml的jsp,php等中设置头不使用cache,如在生成xml的jsp/servlet中是要加上:
response.addHeader("Cache-Control","no-cache");
以上问题只存在IE中,在firefox和opera中不存在。注,spry对opera9版本支持很好,使用版本8的朋友要注意了。
另外,也可以在构造完数据器后,再设置缓存:

代码
  1. dsData.useCache = false;      
  2. dsData.loadData();     
<script type="text/javascript">render_code();</script>

 

4,获取数据形式
假如我们上面的请求,返回的xml如下:

 

代码
  1. <gallery id="12345">     
  2.     <photographer id="4532">John Doe</photographer>     
  3.     <email>john@doe.com</email>     
  4.      
  5.     <photos id="2000">     
  6.         <photo path="sun.jpg" width="16" height="16" />     
  7.         <photo path="tree.jpg" width="16" height="16" />     
  8.         <photo path="surf.jpg" width="16" height="16" />     
  9.      
  10.     </photos>     
  11. </gallery>     
<script type="text/javascript">render_code();</script>
那么“gallery/photos/photo”返回的数据是下面的数组:
[
{ "@path": "sun.jpg", "@width": 16, "@height": 16 },
{ "@path": "tree.jpg", "@width": 16, "@height": 16 },
{ "@path": "surf.jpg", "@width": 16, "@height": 16 }
]

 

 

代码
  1. var rows = dsPhotos.getData(); // 获取所有行.      
  2. var path = rows[0]["@path"];   // 获取第一行中"@path"的值      
  3.      
  4. dsPhotos.setCurrentRowNumber(2); // 将第3行做为当前处理行,下标以0开始      
  5.      
  6. var id = dsPhotos.getData()[2]["ds_RowID"]; // 获取第3行的ID.      
  7.      
  8. dsPhotos.setCurrentRow(id); // 通过第3行的id,将第3行设为当前处理行.     
<script type="text/javascript">render_code();</script>

 

5,排序

 

代码
  1. dsPhotos.sort("@path"); //以"@path"列的值为关健字对行排序      
  2.        
  3. dsPhotos.sort("@path""toggle");  //"ascending", "descending"和"toggle",默认是 "ascending"。      
  4. var dsPhotos = new Spry.Data.XMLDataSet("/photos.php?galleryid=2000""/gallery/photos/photo", { sortOnLoad: "@path", sortOrderOnLoad: "descending" });//也可在数据构造器中设置初始排序      
  5.      
  6. dsPhotos.setColumnType("@width""number");//设置类型      
  7. dsPhotos.setColumnType("@height""number");      
  8.      
  9. ...      
  10.      
  11. dsPhotos.sort("@width"); // 对 "@width" 列数据进行排序.     
<script type="text/javascript">render_code();</script>

 

6,去除重复

代码
  1. dsPhotos.distinct(); // Remove all duplicate rows.      
  2. //distinct()方法是具有破坏性的,多余的行是被删掉的,如果你想再得到所有的包括重复的原始项就得重新载入XML数据。      
  3. var dsPhotos = new Spry.Data.XMLDataSet("/photos.php?galleryid=2000""/gallery/photos/photo", { distinctOnLoad: true });//可在构造时预设     
<script type="text/javascript">render_code();</script>

 

7,设置过滤器

代码
  1. var myFilterFunc = function(dataSet, row, rowNumber)      
  2. {      
  3.     if (row["@path"].search(/^s/) != -1)    //只返回以s开头的行      
  4.         return row;                     // Return the row to keep it in the data set.      
  5.     return null;                        // Return null to remove the row from the data set.      
  6. }      
  7.      
  8.      
  9. dsPhotos.filterData(myFilterFunc); // Filter the rows in the data set.      
  10. dsPhotos.filter(myFilterFunc); // 不破坏数据,是建一个新的数组      
  11.      
  12.      
  13. dsPhotos.filterData(null); // 取消过滤.     
<script type="text/javascript">render_code();</script>

 

8,自动刷新,以毫秒为单位

 

代码
  1. var dsPhotos = new  Spry.Data.XMLDataSet("/photos.php?galleryid=2000""/gallery/photos/photo", { useCache:  false, loadInterval: 10000 });//在构造器设置      
  2.      
  3.      
  4. dsPhotos.startLoadInterval(10000); // 设置自动刷新      
  5. ...      
  6.      
  7. dsPhotos.stopLoadInterval(); // 停止自动刷新     
<script type="text/javascript">render_code();</script>

 

9,把类注册成观察器

 

代码
  1. var myObserver = new Object;      
  2. myObserver.onDataChanged = function(dataSet, data)      //可支持:onPreLoad / onPostLoad / onLoadError / onDataChanged / onPreSort / onPostSort /  onCurrentRowChanged       
  3. //第一个是发送通知的对象,做为数据器观察器,这个值永远都是dataSet对象。第二个参数可以不定义,也可以是一个对象(内置对象)      
  4. {      
  5.     alert("onDataChanged called!";      
  6. };      
  7.      
  8. dsPhotos.addObserver(myObserver);      
  9.      
  10.      
  11. dsPhotos.removeObserver(myObserver);      
<script type="text/javascript">render_code();</script>

 

10,把函数方法注册为观察器

 

代码
  1. function myObserverFunc(notificationType, dataSet, data)  //notfication,是通知器类型,dataSet是数据器对象,data是要观察的数据      
  2. {      
  3.     if (notificationType == "onDataChanged")      
  4.         alert("onDataChanged called!";      
  5.     else if (notificationType == "onPostSort")      
  6.         alert("onPostSort called!";      
  7. };      
  8.      
  9. dsPhotos.addObserver(myObserverFunc);     
<script type="text/javascript">render_code();</script>

 

11,动态区域块
所有使用Spry动态区域块的HTML页面都要在它们的<html>标签中加入xmlns:spry=http://ns.adobe.com/spry

 

代码
  1. <html xmlns="http://www.w3.org/1999/xhtml" xmlns:spry="http://ns.adobe.com/spry">     
  2.  .... ....      
  3.    .... ....       
  4.     <ul spry:region="dsPhotos">     
  5.         <li>{dsPhotos::path}</li>     
  6.     </ul>     
<script type="text/javascript">render_code();</script>
COL, COLGROUP, FRAMESET, HTML, IFRAME, STYLE, TABLE, TBODY, TFOOT, THEAD, TITLE, TR 不能设为动态区域

 

12,数据引用

{<数据器名>::<数据器列名>}

如果一个动态区域块只和一个数据器相关联,则你甚至可以省略掉数据器的名字
<li>{@path}</li>
ds_RowID - 这是数据器的行id。这个id可以帮我们指定数据器中的一个数据。它和数据是对应的,即使数据执行了排序操作,这个id和数据的对应关系也不会变化。
ds_RowNumber - 这是数据器当前数据的行号。
ds_RowNumberPlus1 - 这个与上面的ds_RowNumber相同,只不过它规定了数据的行号从1开始,而不是从0开始。
ds_RowCount - 它是数据器中数据的行的数量。如果使用了一个非破坏性的过滤器,则它的值是这个过滤器执行后得到的行的数量。
ds_UnfilteredRowCount - 在执行非破坏性过滤器前,数据器中行的数量。
ds_CurrentRowID - 当前行的id。这个值不会改变,除非使用了一个循环的构造。
ds_CurrentRowNumber - 当前行的行号。这个值不会改变,除非使用了一个循环的构造。
ds_SortColumn - 上一次排序所依赖的列名。如果这个数据器的数据还未进行过排序,则返回一个空字符串。
ds_SortOrder - 数据器中数据排序的参数,将返回三种字符串"ascending", "descending", 或空字符串.。
ds_EvenOddRow - 它返回的是"even"或"odd",告诉我们ds_RowNumber的值是奇数还是偶数。

13,循环

代码
  1. //方式一:         
  2. <li spry:repeat="dsPhotos">{@path}</li>         
  3.         
  4. //方式二:         
  5. <ul spry:repeatchildren="dsPhotos">         
  6.   <li>{@path}</li>         
  7. </ul>        
  8.      
  9. //只输出以s开头的 spry:test属性的值可以是任何等于0或非0值的JavaScript表达示。如果这个表达示返回非0值,这个内容将会被输出,相当于if <>0就输出后面元素。       
  10. <li spry:repeat="dsPhotos" spry:test="'{@path}'.search(/^s/) != -1;">{@path}</li>     
<script type="text/javascript">render_code();</script>

 

14,if 条件

 

代码
  1. <li spry:if="'{@path}'.search(/^s/) != -1;">{@path}</li>      
  2.      
  3. //if/else的形式,要使用"spry:choose"属性      
  4.             <div spry:choose="spry:choose">      
  5.                  <div spry:when="'{@path}' == 'surf.gif'">{@path}</div>      
  6.                  <div spry:when="'{@path}' == 'undefined'">Path was not defined.</div>      
  7.                  <div spry:default="spry:default">Unexpected value for path!</div>      
  8.           </div>     
<script type="text/javascript">render_code();</script>

 

15,状态

 

代码
  1. <div spry:region="dsEmployees">      
  2.     <div spry:state="loading">正在载入数据 ...</div>      
  3.     <div spry:state="error">数据载入失败!</div>      
  4.     <ul spry:state="ready">      
  5.       <li spry:repeat="dsEmployees">{firstname} {lastname}</li>      
  6.     </ul>      
  7. </div>     
<script type="text/javascript">render_code();</script>

 

16,通过对象将区域注册成观察者

 

代码
  1. myObserver = new Object;      
  2. myObserver.onPostUpdate = function(notifier, data)      
  3. {      
  4.      alert("onPostUpdate called for " + data.regionID);      
  5. };      
  6. ...      
  7. // 调用addObserver() 将类注册为观察者.      
  8. Spry.Data.Region.addObserver("employeeListRegion", myObserver);      
  9. ...      
  10. //注销      
  11. Spry.Data.Region.removeObserver("employeeListRegion", myObserver);      
  12. ...      
  13.      
  14. <ul id="employeeListRegion" spry:region="dsEmployees">      
  15. ...      
  16. </ul>     
<script type="text/javascript">render_code();</script>

 

17,以函数将区域注册成观察者

 

代码
  1. function myRegionCallback(notificationState, notifier, data)      
  2. {      
  3.       if (notificationType == "onPreUpdate") //onLoadingData / onPreUpdate / onPostUpdate / onError       
  4.          alert(regionID + " is starting an update!");      
  5.       else if (notificationType == "onPostUpdate")      
  6.          alert(regionID + " is done updating!");      
  7. }      
  8.      
  9. ...      
  10.      
  11. // 注册      
  12. Spry.Data.Region.addObserver("employeeListRegion", MyRegionCallback);      
  13. ...      
  14.      
  15. // 注销      
  16. Spry.Data.Region.removeObserver("employeeListRegion", MyRegionCallback);      
  17. ...      
  18.      
  19.      
  20. <ul id="employeeListRegion" spry:region="dsEmployees">      
  21. ...      
  22. </ul>     
<script type="text/javascript">render_code();</script>

 

18,主细节模式,同一数据器

 

代码
  1. <span spry:region="dsEmployees">      
  2. <select spry:repeatchildren="dsEmployees" onchange="dsEmployees.setCurrentRow(this.value)">      
  3.     <option spry:if="{ds_RowNumber} == 0" value="{ds_RowID}" selected="selected">{username}</option>      
  4.      
  5.     <option spry:if="{ds_RowNumber} != 0" value="{ds_RowID}">{username}</option>      
  6. </select>      
  7. </span>      
  8. <span spry:detailregion="dsEmployees">{@id} - {firstname} {lastname} - {phone} </span>      
  9. //spry:detailregion"会在接收到"CurrentRowChanged"通知后改变自己的展示形式。     
<script type="text/javascript">render_code();</script>

 

19,主细节模式,多个数据器

 

代码
  1. var dsStates = new Spry.Data.XMLDataSet("../../data/states/states.xml", "states/state");      
  2. var dsCities = new Spry.Data.XMLDataSet("../../data/states/{dsStates::url}", "state/cities/city");      
  3. //两个数据器有依赖关系,也可以用:"/webapp/cities.php?stateid={dsStates::@id}".      
  4.      
  5. <form name="selectForm">      
  6. //State:      
  7.     <span spry:region="dsStates" id="stateSelector">      
  8.         <select spry:repeatchildren="dsStates" name="stateSelect" onchange="document.forms[0].citySelect.disabled = true; dsStates.setCurrentRow(this.value);">      
  9.      
  10.             <option spry:if="{ds_RowNumber} == 0" value="{ds_RowID}" selected="selected">{name}</option>      
  11.             <option spry:if="{ds_RowNumber} != 0" value="{ds_RowID}">{name}</option>      
  12.      
  13.         </select>      
  14.     </span>      
  15.      
  16. //City:      
  17.     <span spry:region="dsCities" id="citySelector">      
  18.         <select spry:repeatchildren="dsCities" name="citySelect">      
  19.      
  20.             <option spry:if="{ds_RowNumber} == 0" value="{name}" selected="selected">{name}</option>      
  21.             <option spry:if="{ds_RowNumber} != 0" value="{name}">{name}</option>      
  22.      
  23.         </select>      
  24.     </span>      
  25. </form>     
<script type="text/javascript">render_code();</script>

 

20,改变数据源

代码
  1. <select onchange="dsEmployees.setURL(this.value); dsEmployees.loadData();">      
  2.      
  3.     <option value="../../data/employees-01.xml" selected>Set 1</option>      
  4.     <option value="../../data/employees-02.xml">Set 2</option>      
  5. </select>      
  6.      
  7. <th scope="col" onclick="dsEmployees.sort('@id');">Employee ID </th>   
  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值