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

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

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

????? 我們還是回到這里吧,用Word文檔如果設計單據頁面,之前有篇貼子,是使用Aspose.Word類庫來解析Word文檔,這次我們仍然使用這個控件.之前的另外一篇貼子,是WebPanel控件,它是思路是動態加載控件,控件全部取自于XML配置文件,那么我們把Word文檔的布局解析成XML配置文件就可以了.

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

圖-1

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

圖-2

????? 我們在草稿的基礎上定義了某些規則,詳細規則如下,這樣交給開發員才有據可依.規則定義如下

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

控件關鍵字	控件編輯類型	描述
LB	Label	標簽
TB	Textbox	編輯框
CB	Dropdownlist/Combobox	下拉菜單
DT	Webdatechooser	日期控件
DTM	Webdatetimeedit	日期時間控件
RL	Radiobuttonlist	單選框列表
CL	Checkboxlist	復選框列表
BTN	Button	按鈕
GP	Goupbox/Fieldset	組合框
GRID	Gridview/Datagridview	網格控件
CO	Gridview列對象	網格控件中列對象

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

????? 3. 控件的屬性列表有順序定義,如第一個屬性定義的是控件名稱,第二個屬性定義的是標題

????? 4. 可繼續擴展,額外定義好涉及的Db表,注意:可能有多個

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

圖-3

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

圖-4

圖-5

說明

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

2. 左側是樹控件,是Word文檔中解析出來的控件,如Word文檔中的LB[zdmc|診斷名稱]單元格值,就是樹控件中lbl_zdmc的標簽控件

3. 右側部分是個propertyGrid控件,可以直接修改單個控件的屬性,如是否必輸,控件標題等.需要說明的是,這里修改之后,目前還沒有同步到Word文檔中.這里屬于微調,如果有改動,優先調整Word文檔

4. 如圖-5所示,是生成好的XML配置數據,這里我們還需要加工下,就是設置控件對應的Db表名稱和列名稱,這里有個關聯點,就是Db表和列的中文描述信息,與控件標題如果一致的,就可以綁定成功.當然,如果綁定不上,自己手工綁定好了

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

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

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

?

示例代碼

基于Word文檔的UI設計器.Files

基于Word文檔的UI設計器