兩年前，曾打算自己開發一個web開發框架，把部門、人員、權限、日志作為基本服務加入進去，在其基礎上可以做業務快速開發，結果沒有堅持下去，僅僅開了個頭就夭折了。究其原因，一方面是采用自己完全不熟悉的新技術，不算成熟的MVC，對習慣於WEB FORM開發的我，是一個比較大的沖擊，加上EntityFramework涌入的大量概念，對JQuery的一知半解，以及這三項技術自身不成熟帶來的BUG和版本的不斷升級變更，都帶來了很大困擾。兩年之后，重啟開發框架之旅。
開發工具選擇VS2012，后台使用MVC4.0+EntityFramework5，前台選用operamasks-ui2.0 +JQuery1.6.3(Jquery用此版本是跟operamasks-ui2.0匹配，擔心冒然換成新的出來一些莫名其妙的問題)。
關於前台框架的選擇，需要多說兩句。
兩年前，曾經使用過JQuery，當時沒有成套的JQuery控件，往往是根據需要逐個搜尋，例如布局、tree、Tab、datagrid等等，最大的問題就是沒有統一的風格和界面，缺少文檔和示例，以及網上各種對源碼進行任意修改和擴展的版本，需要自己花大量時間摸索和試驗，當時就覺得這種混亂的局面終會結束，出現一個統一的框架。
現在來看，類似的框架涌現出來很多，開始沒有認真篩選對比，大概搜了下，看不少人推薦easyUI，說其免費開源，然后看了下官方網站，網站上提供了豐富的文檔和demo，風格（包括界面風格和編程風格）統一，因此在自己的開發框架中使用了easyUI，用了layout、tree、tab、datagrid等，完成了業務實體增刪改查，感覺還不錯，小問題確實有，比如頁面加載時元素抖動、DataGrid列表界面搜索文本框里加回車事件卻被分頁控件里的頁碼框截獲，還有一個就是沒有控件刷新方法，比如刷新樹，新增了數據后刷新datagrid，得自己寫一個刷新，雖然往往只有一句話，但還是不如直接提供一個方法調用方便……總體來說，用起來還是挺方便。
本想開一個系列，記錄下開發過程中的點點滴滴，與大家交流，剛發了第一篇， EasyUI1.3.1+MVC4.0+EF5.0實戰之一 開篇及布局控件介紹，有園友回復說easyui商用需要付費，於是反過頭來認真讀了下官方的說明，449刀，非年費，不限項目和時間，說實話，這價格還說得過去。
有了這段插曲，於是找其他同類框架來大體比較了下，糾結了下要不要用免費開源的替換掉easyui。
園友的回復集中在LigerUI和DMZ，從搜索引擎來看，ligerui 網上的評價貌似不怎么樣，說個人弄的，有bug也不修復，至於dwz，網上沒評價，倒是掛了幾個后台是java和php的應用案例，貌似還可以。結果自己看了一下二者官方網站，反而覺得DMZ官方頁面亂，控件展現效果比較粗糙,demo和文檔條理性差,反而是ligerui看上去比較精致。
后來有園友提到了operamasks-ui，LGPL協議，看了下官網和團隊，應該是金蝶旗下產品，感覺相當不錯，網上也有不少行業網站的訪談和同類產品性能評測。
另外，下面這篇園子里的文章是比較全面的列舉和簡介前台應用框架，推薦閱讀一下：前端框架你究竟選什么
於是，最終決定嘗試一下，使用operamasks-ui替換掉easyUI，同樣將開發過程中的點點滴滴記錄下來。
官方網站：http://ui.operamasks.org/website/homepage.html 怎么下載和加入項目我就不多說了，參考官網說明即可。
上面說了啰嗦了這么多，下面轉入正題，來說一下最常見的布局。
對於MIS管理系統，常見的布局分為三大塊，頂部是系統名稱，加當前登錄人的賬號、姓名、部門等信息展現，以及注銷、切換賬號等操作按鈕；左側是系統菜單欄，右側是主工作區，點擊左側菜單，可以在主工作區顯示對應的業務處理界面。為了最大程度利用空間，通常還要求左側導航菜單欄可以折疊隱藏顯示。 先上效果圖，有個直觀的印象：
之前的開發，通常就是使用Html的frameset標簽
<frameset cols="25%,50%,25%"> <frame src="frame_a.htm" /> <frame src="frame_b.htm" /> <frame src="frame_c.htm" /> </frameset>
然后在自己編寫JS來控制折疊和隱藏某個區域。
使用operamasks-ui（好長的名字，以下簡稱om）就簡單多了,首先將下載的壓縮包解壓加入到工程中，我選擇放在web工程根目錄下，與視圖文件夾View同級存放，名字為“OperaMasksUI”，然后修改Home控制器對應的Index視圖：
1.在head標簽內部加入對om相關css樣式表的引用
@Styles.Render("~/OperaMasksUI/css/default/om-default.css")
2.在</body>標簽之前加入以下對js文件的引用
@Scripts.Render("~/OperaMasksUI/js/jquery163.min.js")
@Scripts.Render("~/OperaMasksUI/js/operamasks-ui200.min.js")
注：其實上面的Styles.Render 和Scripts.Render真正用途是將多個css和js壓縮和傳輸，后文再找個機會詳細說這塊。這里我是參照默認模板下寫的，誤打誤撞也能運行，可以解析成正確的引用。
參考官方說明和demo，在body里加入以下內容
<div id="page" > <div id="north-panel" /> <div id="center-panel" style="padding: 0 10px;" /> <div id="east-panel" /> <div id="west-panel" /> <div id="south-panel" style="vertical-align:top; text-align:center" > © @DateTime.Now.Year - 版權聲明 </div> </div>
然后，寫js來初始化
$(function () { //初始加載 loadLayout(); }); //加載布局 function loadLayout() { $('#page').omBorderLayout({ panels: [{ id: "north-panel", region: "north", resizable: true, collapsible: true, height: 100, header:false }, { id: "center-panel", region: "center", header: false }, { id: "west-panel", title: "功能菜單", region: "west", resizable: true, collapsible: true, width: 200 }, { id: "south-panel", region: "south", resizable: true, collapsible: true, height: 20, header: false } ], hideCollapsBtn: true, spacing: 7 }); }
與easyui有點區別，Easyui支持兩種方式，一種與上類似，通過js來初始化，另一種可以通過html標簽擴展屬性來初始化，不用寫js代碼
<body class="easyui-layout">
<div region="north" title="" split="true" style="height: 100px;"></div>
……
</body>
前面誇了一下om簡單易用，用其替代easyui的時候就栽了……
由於是在原來已經做好的ui上改的，所以我操作完上述步驟后，就以為大功告成了，結果運行……js報錯，提示，對象不支持“css”屬性或方法，jquery肯定有css方法的，把jquery1.8.0替換成隨om2.0自帶的1.6.3問題依舊，表面上看不出什么問題，后來逐行排查，發現問題出在<div>標簽的閉包上……
<div id="north-panel" /> 改為<div id="north-panel"></div>就正常了
這算BUG嗎？好吧，這算個注意事項。
這還沒完，解決了js報錯，出來的是個白屏，懷疑是沒加高度和寬度，給最外層id為page的div加上了高寬，確實能顯示了，但是，我想要全屏效果，給div高和寬指定100%，還是白屏，於是又補了下基礎知識，需要給html和body加寬度和高度，不然div子元素設置的百分比無效，后來看到了官方demo自適應窗口大小，有了詳細的解釋：
頁面加了DOCTYPE聲明后body和html默認是沒有高度的。因此如果要自適應body大小需要給html和body加上100%的高度。另外，瀏覽器會默認給html和body加上頁邊距，所以還要設置html和body的padding和margin為0
解決方式如下：
<style> html, body { width: 100%; height: 100%; padding: 0; margin:0; overflow: hidden; } </style>
加上后，還是白屏……查看示例，沒發現什么異常，然后推測是填充原因，找了下屬性，把自動填充父元素的fit屬性設為true（默認為false）總算正常了，說實話，這個屬性默認為true更合理。官方demo顯示正常，是因為為每個區域設定了具體的高度和寬度。
好多坑啊好多坑……
還有點不夠完美的地方就是左右邊框基本看不見了，有點缺失的感覺，還算可以忍受。
可以設定上下左右中五個區域，這里沒有使用右側區域，底部區域也僅僅放了一個版權聲明, 頂部是系統名稱，加當前登錄人的賬號、姓名、部門等信息展現，以及注銷、切換賬號等操作按鈕，左側為系統功能菜單導航樹，點擊葉節點后將在中心區域打開對應的業務功能頁面。
與easyui只能左右折疊相比，om可以往四個方向折疊，而且提供了僅占用很小空間的小箭頭方式，更加優美。
比如我想允許左側菜單導航區域折疊，禁止頂部區域折疊，設置hideCollapsBtn為true，設置north-panel的collapsible屬性為false，搞定。
本文從實戰角度出發，加入自己多年來的開發經驗和項目經驗，僅指明關鍵屬性和要注意的事項，其他屬性請查閱官方網站說明。
第一次做開發平台，有些問題也在摸索和思考，歡迎同行討論拍磚，共同進步。