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