《開源框架那點事兒20》：公佈TinyUI前端框架

時間 2019-11-19

原文原文鏈接

曾經發表過一篇文章： TinyAdmin前端展示框架，其在線演示路徑爲： http://www.tinygroup.org/tinyadmin/，應該說有不少人仍是感受興趣的。但是由於這個是基於SmartAdmin框架改寫的，儘管咱們本身買了SmartAdmin的受權。但是廣大用戶假設要用的時候，就會有受權相關的問題。這會大大影響一些人的使用決策--尤爲是會再發行的朋友。

再一個緣由是SmartAdmin初看不是不錯的。但是實際用起來，裏面的問題比較多，對IE8基本上可以說是不兼容。儘管咱們努力進行了必定的修正，但是仍是兼容性不夠好。有些用戶體驗方面也有改進的空間，這就愈來愈讓我思考。是否是要有更好的解決方式？
直到AJian和密緣之友增長個人團隊以後，我以爲是時候比較完全的解決問題了。果真。在風淡芸輕、AJian、密緣之友的通力合做下。僅僅用了一個月左右的時間，就拿出一TinyUI的初始版本號，眼下已經基本無缺，固然咱們還在進行系統性的測試，相信還存在一些小問題（有些咱們本身已經發現，正在修正中），歡迎感興趣的同窗們一塊兒來參與改進。php

在線演示地址：http://www.tinygroup.org/tinyuiweb/
源代碼地址（必須託管在高大上的開源中國GIT倉庫）：http://git.oschina.net/tinyframework/TinyUiEnterprise
開發環境構建，需要有GIT，MAVEN(3.1.x)，JDK1.6：
?
html

1
2
3
4
5

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

在運行mvn install的時候，第一次時間比較長，由於要從中央倉庫下載一些資源包，可以抽支菸、喝杯茶、走走步啥的。

假設走完最後一步，就可以啓動起一個本地環境（注意。沒有別的應用戰用8080port），這個時候起個瀏覽器，輸入：

?
前端

1	http://localhost:8080/tinyuiweb/

注意，請在IE9以上瀏覽器、Chrome、FireFox等瀏覽器上瀏覽，眼下IE8還在做適應性調整。

一些說明，本UI框架中。有一些內容取自H-UI，這個咱們和H-UI源創團隊進行過溝通，他們贊成咱們複用他們框架中的內容。git

本UI框架中，在某些外在實現方面參考了SmartAdmin的一些特性。但是沒有複用它的源代碼。
本UI框架中，集成了一些開源的JQuery插件，但是不改變原來插件的受權方式，請使用者在使用時查看原始插件的受權方式。
TinyUI的一些特性說明：
web

提供了完整的主頁面框架
提供了整頁切換和Ajax局部刷新的支持
提供了豐富的菜單插入點
提供了多種皮膚
提供了豐富的界面元素本身定義
提供了UI組件包的封裝
提供了宏封裝，使得使用時沒必要關心詳細實現
提供了流式佈局，在手機端也有良好的展示
良好的攻克了UI組件包之間的依賴關係
良好的攻克了CSS合併和JS合併及其壓縮方面的問題

如下我經過一些圖形了作一個展現：

上面是當中的一個頁面。組件包列表是依據實際載入的組件包數量實時計算出來的，所以不需要人爲進行改動---這個就是依賴TinyUiEngine的強大支持了。

點擊設置button，會顯示界面調整面板。在這裏可以對導航條、菜單條、導般菜單等進行固定與否的調整。也可以調整菜單的位置。

還可以選擇是採用全屏仍是固定寬度的設置，值得一提的是假設選擇固定寬度，會依據頁面的寬度在970與1170寬度之間本身主動適應。再如下就是各類各樣的主題風格了。

呵呵，現在的主題風格僅僅是簡單調整了一下，用於測試，後面會請專業的美工同窗進行系統性的調整。
而後，裏面就是幾十個組件的實際演示樣例。我敢保證你想用的多大多組件都已經包括在內了。假設你以爲還不夠，請到bbs.tinygroup.org社區中留言，僅僅要提的合理。咱們會以你想象不到的速度高速進行增長。

如下我展現一個流式佈局的示範：
一開始是整頁寬度的固定寬度顯示，還可以看到兩邊的陰影，現在固定寬度爲1170像素。