TinyUI组件开发示例
2019獨角獸企業重金招聘Python工程師標準>>>
TinyUI實際上并不是一個具體的UI展現組件，它只是一個UI構建體系。它可以適應于各種Html+CSS+JS的體系架構中。
TinyUI主要解決下面的問題：
關于體系性的說明，請移步查閱UI開發的終極方案。
下面我們就以集成Jquery和Jqueryui來示例，如何進行TinyUI組件包的開發。
JQuery TinyUI組件包的的開發
OK，JQuery的UI組件包就算開發完畢了。
簡單說明：其實上面的文件組織形式，只是個示例而已，實際上你也可以根據你自己的需要制訂自己的規范，來進行目錄的組織，唯一需要注意的是js-resource中的jquery-1.11.0.js所在的路徑，以/resources為根開始要正確引用。
JQueryUI TinyUI組件包的的開發
OK，JQueryUI的UI組件包就算基本開發完畢了。
解釋一下與做JQuery工程時的差異，為什么要在pom中依賴上面創建的jquery工程呢？？原因是JQueryUI的運行需要用于JQuery運行庫。
為什么已經在pom中依賴jquery包，還要在ui-component一行中要增加dependencies="jquery"屬性呢？？
因為Pom依賴解決的問題是如果要用JQueryUI，則必須要有JQuery的運行庫。
但是有了運行庫之后呢，JS的引入是有先后順序的。這個時候，TinyUI框架就無法知道把哪個js引入在前面，但是有了dependencies="jquery"屬性，TinyUI框架就知道，哦，jqueryui只能在jquery之后引用。
為什么上面有個說法叫基本完成呢？就是說，現在確實可以算做已經完成，但是程序員在寫代碼的時候還是要對JQueryUI進行深入學習，然后編寫時的寫法與原來沒有什么本質的區別，這當然不是TinyUI框架解決問題的終點。
有沒有辦法，讓不懂JQueryUI的人也可以簡單的使用JQueryUI？當然可以，請看下節，創建界面組件定義文件。
TinyUI組件的定義
在jqueryui工程的/resources目錄中創建component目錄，然后中其中創建jquery_ui.component文件
##================================================================================== ## jqueryUI Dialog ##================================================================================== #* 參數 id:ID title:標題 construct:構建參數，詳細參見jqueryui手冊 *# #macro(jui_dialog $id $title $construct) <div id="$id" title="$!title">$!bodyContent </div> <script>$(function() {$( "#$!id").dialog($!construct);}); </script> #end ##=================================================================================如上，定義了一個宏，名字叫jui_dialog，它有兩個參數，一個是標題，一個是構建參數。
采用的語法是Velocity語法--因為內部就是集成了Velocity模板語言的。
以后的人開發的時候，使用就非常簡單了，只要輸入下面的內容：
#@jui_dialog("窗口標題") 這里放內容 #end就可以直接使用JQueryUI的Dialog來顯示一個對話框了。
當然，你也可以定義更多的宏，比如：
##================================================================================== ## jquery accordion，參數：ID,構建參數 ##================================================================================== #macro(jui_accordion $id $construct) <div id="$id">$!bodyContent </div> <script> $(function() {$( "#$id" ).accordion($construct); }); </script> #end ##==================================================================================##================================================================================== ##by 羅果 jquery accordion section,參數：標題 ##================================================================================== #macro(jui_accordionSection $title)<h3>$!title</h3><div>$!bodyContent</div> #end ##==================================================================================然后就可以在編寫界面的時候用下面的方式來構建一個抽屜效果了：
#@jui_accordion("abc")#@jui_accordionSection("第一個抽屜")第一個抽屜的內容#end#@jui_accordionSection("第二個抽屜")第二個抽屜的內容#end#@jui_accordionSection("第二個抽屜")第二個抽屜的內容#end #end 通過上面的處理，就可以在很大程度上屏蔽開發人員對具體的UI開發框架的依賴，而是在別人研究之后的基礎上，像調用函數一下，就可以方便的來構建界面應用了。TinyUI界面的開發
TinyUI的界面開發，有兩種文件格式，一種以.page結尾，一種以.layout結尾
.page文件表示是用來展現的一個頁面文件，.layout文件表示是一個布局文件，它自己不能被單獨用來展示，但是可以進行布局定義，并影響.page文件的展現效果。干巴巴的說，比較晦澀，還是用例子來進行演示：
也就是說在main/resources上創建demo目錄，然后在demo目錄中分別創建a和b兩個子目錄
在demo目錄中創建default.layout文件，內容如下：
<h3>這里是Header</h3> $pageContent <h3>這里是Footer</h3>然后在a目錄中創建一個a.page，內容如下：
我是a在b目錄中創建一個 b.page，內容如下：
我是b在執行的時候，瀏覽器中輸入http://localhost:8080/sample1/demo/a.page
它的運行結果是：
<h3>這里是Header</h3> 我是a <h3>這里是Footer</h3>在執行的時候，瀏覽器中輸入http://localhost:8080/sample1/demo/b.page
它的運行結果是：
<h3>這里是Header</h3> 我是b <h3>這里是Footer</h3>看起來，布局文件確實已經起效果了。
一些特殊用法
用法1：個性化，從上面的例子中，可以看到布局文件會對當前文件夾中的所有文件起作用。但是在特殊場景下，確實有想不一樣的情況出現，這時有兩個辦法：一個是把不一樣的從當前目錄中分離出去，另外一個是創建一個同名的布局文件。比如，在上面的例子中，在demo目錄中創建一個a.layout文件，其內容是如下：
<h3>This is Header</h3> $pageContent <h3>This is Footer</h3>
在執行的時候，瀏覽器中輸入http://localhost:8080/sample1/demo/a.page
它的運行結果就會變成：
<h3>This is Header</h3> 我是a <h3>This is Footer</h3>用法2：Ajax支持：
比如，用Ajax進行局部加載的時候，不期望進行布局加載，只想這個page文件有啥就出啥，否則就會導致重復渲染的情況。TinyUI框架對此也有良好支持，只要請求的時候，在page后面加個let即可：
http://localhost:8080/sample1/demo/a.pagelet
這個時候它出來的內容都只有：
我是a 用法3：國際化支持如果我想中國人訪問，顯示“我是a”，美國人訪問，顯示"I am a"，怎么辦呢？
創建a.zh_CN.page內容是“我是a”
創建a.en_US.page內容是 “I am a”
同理，布局文件也支持同樣的國際化規則支持。
當然這個適合于兩個頁面結構及內容大相徑庭的情況。
如果只是利用國際化資源進行簡單的國際化內容支持
比如，有個國際國資源key值是title，那只要簡單的寫成#i("title")即可。
總結：
TinyUI是一個UI構建體系，但它不是一個具體的UI框架，因此它里面沒有JS，沒有CSS，也沒有HTML，它只是提供了集成各種UI展現框架的能力，并提供了UI組件包的組織形式。并解決JS,CSS引入順序、合并、壓縮、國際化等問題。
上面只演示了部分的特性，更多的請參閱相關文檔或下載后直接試用。
轉載于:https://my.oschina.net/tinyframework/blog/202825
創作挑戰賽新人創作獎勵來咯，堅持創作打卡瓜分現金大獎總結
以上是生活随笔為你收集整理的TinyUI组件开发示例的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： MTD/MT/MDD/MD以及LIB/D
- 下一篇： Web开发中的矢量绘图(vml,svg)