基于組件的機制的客戶端-SimpleFramework
如何使用組件:
描述文件的位置
XML描述文件的位置由請求參數(shù)__xmlpath決定,比如:
- http://simpleframework.net/t.do?__xmlpath=/demo/t.xml&p1=data1&p2=data2
如果訪問的是JSP文件,則__xmlpath可以不定義,此時, XML描述文件的位置被默認為和JSP文件同路徑并且同文件名的XML文件。
在Eclipse等IDE下,可以通過引入本地XMLSchema來加快開發(fā)及合法性驗證:
- <?xml version="1.0" encoding="UTF-8"?>
- <page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
- xsi:noNamespaceSchemaLocation="/xsd/default/simple.xsd">
- ...
- </page>
組件的定義
SimpleFramework的所有組件都是在XML描述文件中的components標簽下定義的, 這有別于標簽庫 (TagLibs),能更好的把展示(HTML/JSP)和定義(XML)進行有效的分離。比如,定義一個樹組件:
- <?xml version="1.0" encoding="UTF-8"?>
- <page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
- xsi:noNamespaceSchemaLocation="/xsd/default/simple.xsd">
- <components>
- <tree name="doc2Tree" containerId="doc2Tree">
- </tree>
- ...
- </components>
- </page>
組件和頁面文檔元素的綁定
組件和頁面文檔元素的綁定是通過CSS Selector實現(xiàn)的,有了這種綁定關(guān)系, 一般來講,組件會對頁面DOM元素進行如下可能性的增強:
為綁定的元素添加屬性和事件
為綁定的元素添加子元素
移動綁定的元素到適合的位置
添加腳本支持
這種增強性的操作都是由SimpleFramework自動完成的,客戶端只需要根據(jù)組件的差異來定義不同的綁定關(guān)系,如上述的樹組件,containerId屬性定義了基于ID的選擇器,這樣,組件生成的代碼為綁定的元素添加需要子元素(樹)。
通過Javascript調(diào)用組件
組件的調(diào)用是通過一個內(nèi)置的Javascript對象$Actions來完成的,更多關(guān)于$Actions的介紹請參考$Actions是什么。
$Actions是什么
$Actions是一個Javascript對象
$Actions是一個Javascript對象,是window的一個子對象,可以通過window.$Actions或則直接$Actions訪問。
$Actions的目標及組件對象
$Actions的目標是客戶端(瀏覽器)能通過Javascript來調(diào)用組件對象。絕大多數(shù)組件都會在$Actions里生成一個操作自己行為的組件對象,該組件對象可以通過$Actions["name"]訪問, name是組件的名稱,在組件描述文件中必須定義該名稱。
組件對象定義了自己的屬性及方法,可以通過Javascript來調(diào)用這些屬性及方法。比如刷新樹組件:
- $Actions["treeName"].refresh();
$Actions["name"]()是組件的缺省函數(shù),在大部分情況下,缺省函數(shù)體現(xiàn)了這個組件的主要特性,比如,$Actions["ajaxRequest"]()即發(fā)出一個AJAX請求; $Actions["treeName"]()即構(gòu)造了整棵樹。
$Actions.callSafely函數(shù)
$Actions定義了callSafely函數(shù)來安全的訪問組件對象。因為在頁面裝載的時候,組件對象可能還沒生成,就有腳本開始調(diào)用該組件對象,通過callSafely函數(shù)可以確保組件對象已經(jīng)存在再開始調(diào)用。