開源前端展現框架：Tiny

以前發表過一篇文章：TinyAdmin前端展現框架，其在線演示路徑為：http://www.tinygroup.org/tinyadmin/，應該說有許多人還是感覺興趣的，但是由于這個是基于SmartAdmin框架改寫的，雖然我們自己買了SmartAdmin的授權，但是廣大用戶如果要用的時候，就會有授權相關的問題，這會大大影響一些人的使用決策--尤其是會再發行的朋友。

再一個原因是SmartAdmin初看不是不錯的，但是實際用起來，里面的問題比較多，對IE8基本上可以說是不兼容，雖然我們努力進行了一定的修正，但是還是兼容性不夠好。有些用戶體驗方面也有改進的空間，這就越來越讓我思考，是不是要有更好的解決方案？

直到AJian和密緣之友加入我的團隊之后，我覺得是時候比較徹底的解決這個問題了。果然，在風淡蕓輕、AJian、密緣之友的通力合作下，只用了一個月左右的時間，就拿出一TinyUI的初始版本，目前已經基本完善，當然我們還在進行系統性的測試，相信還存在一些小問題（有些我們自己已經發現，正在修正中），歡迎感興趣的同學們一起來參與改進。

在線演示地址：http://www.tinygroup.org/tinyuiweb/

源碼地址（必須托管在高大上的開源中國GIT倉庫）：http://git.oschina.net/tinyframework/TinyUiEnterprise

開發環境構建，需要有GIT，MAVEN(3.1.x)，JDK1.6：

git clone https://git.oschina.net/tinyframework/TinyUiEnterprise.git
cd TinyUiEnterprise
mvn install
cd *web
mvn jetty:run

如果走完最后一步，就可以啟動起一個本地環境（注意，沒有別的應用戰用8080端口），這個時候起個瀏覽器，輸入：

http://localhost:8080/tinyuiweb/

 注意，請在IE9以上瀏覽器、Chrome、FireFox等瀏覽器上瀏覽，目前IE8還在作適應性調整。

一些說明，本UI框架中，有一些內容取自H-UI，這個我們和H-UI源創團隊進行過溝通，他們允許我們復用他們框架中的內容。
本UI框架中，在某些外在實現方面參考了SmartAdmin的一些特性，但是沒有復用它的源碼。
本UI框架中，集成了一些開源的JQuery插件，但是不改變原來插件的授權方式，請使用者在使用時查看原始插件的授權方式。

TinyUI的一些特性說明：

• 提供了完整的主頁面框架
• 提供了整頁切換和Ajax局部刷新的支持
• 提供了豐富的菜單插入點
• 提供了多種皮膚
• 提供了豐富的界面元素自定義
• 提供了UI組件包的封裝
• 提供了宏封裝，使得使用時不必關心具體實現
• 提供了流式布局，在手機端也有良好的展現
• 良好的解決了UI組件包之間的依賴關系
• 良好的解決了CSS合并和JS合并及其壓縮方面的問題

下面我通過一些圖形了做一個展示：

上面是其中的一個頁面，組件包列表是根據實際加載的組件包數量實時計算出來的，因此不需要人為進行修改---這個就是依賴TinyUiEngine的強大支持了。

點擊設置按鈕，會顯示界面調整面板，在這里可以對導航條、菜單欄、導般菜單等進行固定與否的調整，也可以調整菜單的位置。還可以選擇是采用全屏還是固定寬度的設置，值得一提的是如果選擇固定寬度，會根據頁面的寬度在970與1170寬度之間自動適應。再下面就是各種各樣的主題風格了。呵呵，現在的主題風格只是簡單調整了一下，用于測試，后面會請專業的美工同學進行系統性的調整。

然后，里面就是幾十個組件的實際示例，我敢保證你想用的多大多組件都已經包含在內了。如果你認為還不夠，請到bbs.tinygroup.org社區中留言，只要提的合理，我們會以你想象不到的速度快速進行添加。

下面我展示一個流式布局的示范：

一開始是整頁寬度的固定寬度顯示，還可以看到兩邊的陰影，現在固定寬度為1170像素。

我們減少它的寬度

它的寬度已經變成970像素寬。

再把它的寬度減少，

可以看到兩邊的隱藏已經沒有了。

由于寬度實在是小，菜單就不再完整顯示，而是只顯示圖標了。

嗯嗯，效果不錯，已經完整的展示了整個過程。

上面是菜單顯示方式，可以看到是非常適合手機等觸摸屏上操作的。

來自：http://my.oschina.net/tinyframework/blog/472385