????? 做管理類軟件的開發(fā)員,畫單據(jù)頁面是必須要經(jīng)歷的事情.之前我做過PowerBuilder的開發(fā),它的數(shù)據(jù)窗口雖然很強(qiáng)大,但是畫數(shù)據(jù)窗口確是一件非常繁瑣的事情.在眾多的UI設(shè)計(jì)器中,恐怕只有VS提供的IDE環(huán)境是最好用的了,但我們不可能讓客戶去裝個(gè)VS來畫他們所需求的單據(jù)頁面.

????? 客戶一般要實(shí)現(xiàn)某個(gè)單據(jù),可能的情況是先在紙上畫好草稿,然后交給實(shí)施員或開發(fā)員,溝通確定功能之后,開發(fā)員就要開始真正建表,畫頁面了.但在這其中,如果客戶突然說要修改個(gè)字段或布局,額,后面的結(jié)果不說了,你們懂的!

????? OK,我們重新規(guī)劃一下流程,既然最容易變化的部分是單據(jù)頁面的布局,可能增加或減少欄目等.我們就把這部分單獨(dú)提取出來,直接使用Word文檔來設(shè)計(jì)單據(jù)頁面,這個(gè)思路來源于微軟的InfoPath程序,它和微軟的另一個(gè)產(chǎn)品SharePoint一起使用, 而且InfoPath程序還可以和Access直接交互.據(jù)說可以解決OA工作流的大部問題,額,沒有嘗試過.有興趣的朋友可以去研究一下.

????? 我們還是回到這里吧,用Word文檔如果設(shè)計(jì)單據(jù)頁面,之前有篇貼子,是使用Aspose.Word類庫來解析Word文檔,這次我們?nèi)匀皇褂眠@個(gè)控件.之前的另外一篇貼子,是WebPanel控件,它是思路是動(dòng)態(tài)加載控件,控件全部取自于XML配置文件,那么我們把Word文檔的布局解析成XML配置文件就可以了.

????? 我們先看一下Word文檔,由客戶設(shè)計(jì)好的草稿,如圖-1所示

圖-1

?????? 一般來說,客戶是可以畫出這個(gè)效果的,當(dāng)然,如果不可以,客戶可以提供紙制的草稿,由實(shí)施員來畫也可以.現(xiàn)在是草稿,我們來看下完成稿是什么樣子,完成稿的意思就是達(dá)到開發(fā)員可以直接開發(fā)的程度,如圖-2所示

圖-2

????? 我們?cè)诓莞宓幕A(chǔ)上定義了某些規(guī)則,詳細(xì)規(guī)則如下,這樣交給開發(fā)員才有據(jù)可依.規(guī)則定義如下

????? 1. 增加控件編輯類型,如LB,TB,CL等.具體含義如下

控件關(guān)鍵字	控件編輯類型	描述
LB	Label	標(biāo)簽
TB	Textbox	編輯框
CB	Dropdownlist/Combobox	下拉菜單
DT	Webdatechooser	日期控件
DTM	Webdatetimeedit	日期時(shí)間控件
RL	Radiobuttonlist	單選框列表
CL	Checkboxlist	復(fù)選框列表
BTN	Button	按鈕
GP	Goupbox/Fieldset	組合框
GRID	Gridview/Datagridview	網(wǎng)格控件
CO	Gridview列對(duì)象	網(wǎng)格控件中列對(duì)象

????? 2. 控件編輯類型后面增加[],里面包含控件名稱/標(biāo)題等屬性.這里的屬性就要根據(jù)控件編輯類型自行定義了,比如:下拉菜單的屬性里定義了數(shù)據(jù)源,編輯框的屬性里定義了初始值等.定義了哪些屬性,就解析哪些屬性.

????? 3. 控件的屬性列表有順序定義,如第一個(gè)屬性定義的是控件名稱,第二個(gè)屬性定義的是標(biāo)題

????? 4. 可繼續(xù)擴(kuò)展,額外定義好涉及的Db表,注意:可能有多個(gè)

????? 經(jīng)過上面文檔的規(guī)則定義,我們下面要做的事情就是解析了,其實(shí)解析也比較簡單,就是將上面的Table里的單元格值翻譯成XML語句,看下部分代碼截圖,如圖-3所示

圖-3

????? 只須按部就班的逐個(gè)單元格解析就可以了,注意:一個(gè)單元格里可能既包含單行文字,也包含子Table,也是可以解析的.大家直接看代碼就清楚了.看下整體效果圖,如圖-4和圖-5所示

圖-4

圖-5

說明

1. 在選擇Word文檔以后,直接加載到dsoframer控件中,可以再次編輯和修改.此控件的使用也有一篇貼子,可以參考

2. 左側(cè)是樹控件,是Word文檔中解析出來的控件,如Word文檔中的LB[zdmc|診斷名稱]單元格值,就是樹控件中l(wèi)bl_zdmc的標(biāo)簽控件

3. 右側(cè)部分是個(gè)propertyGrid控件,可以直接修改單個(gè)控件的屬性,如是否必輸,控件標(biāo)題等.需要說明的是,這里修改之后,目前還沒有同步到Word文檔中.這里屬于微調(diào),如果有改動(dòng),優(yōu)先調(diào)整Word文檔

4. 如圖-5所示,是生成好的XML配置數(shù)據(jù),這里我們還需要加工下,就是設(shè)置控件對(duì)應(yīng)的Db表名稱和列名稱,這里有個(gè)關(guān)聯(lián)點(diǎn),就是Db表和列的中文描述信息,與控件標(biāo)題如果一致的,就可以綁定成功.當(dāng)然,如果綁定不上,自己手工綁定好了

5. 最后,我們就可以將這份配置好的數(shù)據(jù)導(dǎo)出至XML文件,就是被WebPanel控件直接拿來使用了

6. 預(yù)覽的tab頁面就是查看生成的效果圖,就是WebPanel展示出來的效果圖,有興趣的朋友可以查看關(guān)于WebPanel控件的貼子

????? 設(shè)計(jì)器的整體功能還沒有完整想好,目前只是提供了一個(gè)思路,歡迎大家一起討論.等下次出個(gè)”增強(qiáng)版”的時(shí)候,就差不多了.不過,下載文件中也提供了這個(gè)版本的源碼,希望對(duì)大家有所幫助咯.還有其他一些UI設(shè)計(jì)器的代碼,一起參考下

?

示例代碼

基于Word文檔的UI設(shè)計(jì)器.Files

基于Word文檔的UI設(shè)計(jì)器