Dreamweaver CS3集成了AJAX框架Spry,使得我最近對(duì)Spry感上了興趣。
再次說(shuō)明下 Spry是Adobe公司推出的AJAX框架 ,所謂AJAX框架,就先談目前流行的Web2.0。
1,這些Web2.0站點(diǎn)從頁(yè)面形式上來(lái)看,頁(yè)面與瀏覽者的交互很時(shí)尚、也很人性化。比如注冊(cè)信息時(shí)輸入郵箱不規(guī)則,頁(yè)面立即提示……當(dāng)然這在Web2.0之前已有應(yīng)用,但是從來(lái)沒有哪個(gè)時(shí)候像現(xiàn)在如此推崇此類即時(shí)檢測(cè)等很符合用戶體驗(yàn)的技術(shù),這些脫離不了Javascript腳本的編寫,其已屬于AJAX的定義范疇。
2,當(dāng)然AJAX不僅僅是這些,比如要做個(gè)“TabPane 選項(xiàng)卡”很炫酷的頁(yè)面展示功能,我們手寫Javascript腳本就比較的費(fèi)事,當(dāng)然還有很多的在Web2.0站點(diǎn)看到的比如“顯示和隱藏”、“淡入淡出”等特效,這些都離不開Javascript,而現(xiàn)在我們也稱為AJAX技術(shù)。
3,AJAX最核心的技術(shù)就是數(shù)據(jù)處理的能力,并能進(jìn)行遠(yuǎn)程異步處理的能力,主要集中在對(duì)XML數(shù)據(jù)的數(shù)據(jù)交互上。
所有這些,Javascript占最大比重,XHTML、CSS作為表現(xiàn)形式而存在、因XML涉及的XSLT、XPATH等技術(shù)融入其中,還有相關(guān)的DOM操作,這些所有有需要功能文件的組合體就構(gòu)成了AJAX框架(如果可以,你也可以自己寫一個(gè)AJAX框架給大家使用)。
Adobe Spry 介紹頁(yè)有這樣一句話:
With Spry, you can use HTML code, CSS code, and a minimal amount of JavaScript to incorporate XML data into your HTML documents, create widgets such as accordions and menu bars, and add different kinds of effects to various page elements.
使用Spry框架,用HTML、CSS、JavaScript就可以在HTML文章中展現(xiàn)XML數(shù)據(jù)、建立諸如炫酷菜單的一些界面,還有其他的一些頁(yè)面特效(大體上分了三類內(nèi)容,這也是Spry AJAX框架所具備的)。
由此,學(xué)習(xí)Spry就可以從如下三點(diǎn)開始:
Working with Spry widgets
Working with Spry Effects
Working with Spry XML Data Sets
前天關(guān)于 Dreamweaver CS3集成Spry效果試用 就是Spry widgets中的一例,今天介紹的表單檢測(cè)還屬其中內(nèi)容。
在頁(yè)面中插入“Spry”-“Spry validation text field”文本框之后,在選中該表單元素之后除了顯示其元素屬性以外,在選擇該表單元素之上的藍(lán)色文本“Spry TextField”,屬性面板中顯示了表單驗(yàn)證相關(guān)的選項(xiàng)內(nèi)容。
比如下圖就是選擇“Type”是“Email Address”的郵件輸入檢測(cè),觸發(fā)的動(dòng)作默認(rèn)是“Submit”,當(dāng)然自己也可以選擇“Blur”或“Change”,對(duì)于這些操作,則要求使用者具備簡(jiǎn)單的Javascript知識(shí)。還可以設(shè)置默認(rèn)文本提示,是否必須填寫等。
測(cè)試地址: http://www.dw8.cn/demo/spry/spry_form.html
這些操作,對(duì)于有Dreamweaver經(jīng)驗(yàn)的用戶來(lái)說(shuō),曾經(jīng)是在DW的腳本行為中的操作,不過(guò)那些顯示的是彈出警告框,而現(xiàn)在是緊隨表單元素之后的即時(shí)顯示的文字信息,相比較一下哪個(gè)更讓用戶覺得親切呢?——這就是Web2.0在表現(xiàn)形式上質(zhì)的飛躍。
利用Spry框架提供這些操作不僅生成基于標(biāo)準(zhǔn)的XHTML+CSS代碼,還能完成完善用戶體驗(yàn)的頁(yè)面功能,這是在Dreamweaver cs3初試Spry的體會(huì)。
下面再試用下Spry框架的Effects和XML Data,相信更精彩。 |