純粹B/S方式實現InfoPath的設計和運行時–Web Builder [轉載]

初次接觸Infopath,我就被它的強大的功能，靈活的表單製作方式，全面對Web Services的支援等特點深深的吸引了。曾經嘗試用Infopath來完成一些MIS項目，Infopath卻有一些我們難以逾越的障礙，使得無法方便的和項目緊密結合。主要是有以下幾個方面使得Infopath不能和項目有效結合：

1. Infopath只能在Infopath本身的程式中填寫表單（這個問題去年我曾經解決過，參考Infoview的實現方式）   

2. 不能有效和外部環境結合，比如ASPX頁面中的變數，工作流程引擎的資訊。

3. 實現複雜的資料存取，存在一些困難，需要進行大量的代碼編寫。

4. 和我們傳統MIS系統的開發模式有一定出入，Infopath資料來源的設計不是很方便。不能通過該工具直接對資料庫結構的定義。

缺乏統一或者說更加方便的機制將工作流程、介面、原資料結合起來。
考慮到上面一些因素，我想直接利用Infopath的表單設計功能快速進行項目開發，不是很方便。碰巧在公司一個內容管理項目中有幾項需求：使用者要求自訂資料庫欄位，能快速自訂介面，能自訂商務程序。這時我想到了幾個軟體：Infopath、PowerDesigner、VS.Net 的資料集編輯器和工作流程管理系統。PowerDesiger用來定義資料庫、Infopath用來定義介面、工作流程系統用來定義工作流程、資料集編輯器用來產生資料交換的XSD檔案。後來，經過仔細考慮，這幾個工具相互獨立，要實現他們之間的通訊會很很困難，如果能根據我們自身的業務需求，實現這幾個工具的簡化版本，那就從根本上解決了使用者需求，也從根本上加速了我們的開發速度。
     最後我自己研究了Infopath、PowerDesigner、VS.Net 的資料集編輯器這幾個工具，開始著手設計資料定義工具、介面設計工具和應用定義工具，簡單工作流程管理是我們已經完成的產品。經過一個月左右的設計，我們決定開發這三個工具，並且難度不會太大。採用的開發工具是VS.Net 2003，採用C#寫伺服器端代碼，Javascript+Xml來實現Rich Web Client,同時我們也全面採用了微軟的Enterprise Block作為基礎組件，來處理日誌、異常、資料訪問和加密等基礎架構。
      經過幾個月的開發，我們這三個工具已經完成了第一輪測試，並且利用這幾個工具快速的（具體來說是20天）完成了一個設計50多個資料表的內容管理系統。我想簡單的跟大家分享一下我們的成果和一些思路，同時也介紹一下我們的這幾個工具。

       一、資料架構設計器。
        所謂資料架構設計器，就是用來定義項目中設計到的各個業務對象（中繼資料，或乾脆叫做資料庫），讓定義資訊能夠被介面設計器所利用，能夠方便使用者理解資料模型，能夠方便的修改資料結構。
       這個設計器是我們參考.Net的資料集編輯器進行開發的，它產生的檔案能夠在.Net的資料集編輯器中正常編輯。為了方便我們的項目開發，我們對這個工具進行了一些擴充：
      1、提供圖形介面定義資料表、資料欄位、資料之間的關聯關係。只有關係定義清楚了，才能自動的完成資料的儲存、讀取和檢索。
      2、 增加自訂類型代碼型。項目中有很多欄位是枚舉類型的，它的值是記錄在資料字典中的，因此有必要擴充這種類型，以方便設計介面時能自動以下拉框的形式表現。
      3、採用標準的XSD描述，相容VS.Net。
      4、支援DB2、Oracle、SQL Server資料庫。公司項目環境多樣化，這幾種主流資料庫必須要支援。
      5、可以根據定義自動建立資料庫表。
     說了這麼多，我想我們還是來看看這資料架構設計器長什麼樣子吧，是美是醜大家看吧。

       圖1：主介面

圖2:編輯外鍵

圖3:產生資料庫

 

圖四：欄位屬性

       關於資料架構設計器我就先說到這裡，接下來是本文的重點--B/S模式Infopath的設計時和運行時的實現。

 二、介面設計器

    所謂介面設計器就是用來組織應用的UI元素，將使用者輸入和資料、系統響應協同起來，在這裡可以把介面設計器理解成一個基於B/S架構，採用XML+Javascript+Web Services開發的簡化版Infopath。同時，能夠很好的和具體項目結合的"Infopath" ，當然目前這個介面設計器的功能、易用性、穩定性和Infopath相比還差很遠，只是它在某些項目中比Infopath具有更強的適應性。

     該介面設計器在設計和開發過程中借鑒（有的人願意叫模仿或者剽竊）了 Infopath的一些設計技巧和實現方式。主要體現在以下幾個方面：

1. 介面定義資訊參考Infopath,採用XSD檔案儲存體資料架構資訊，採用XSF資訊儲存控制資訊，採用XSLT檔案儲存體介面布局資訊和資料邦定資訊，採用XML儲存設計時XML資訊，採用Javascript作為指令碼語言。

2. 介面上較多的參考了Infopath的布局方式。

3. 功能上和Infopath一樣支援自訂驗證、資料規則、預設值。

4. 控制項上支援文字框、下拉框、日期等二十多種控制項。

5. 和Infopath一樣全面支援Web Services 

當然該介面設計器也有很多Infopath所不具備的特點，要不我們怎麼能和具體的開發做“完美”（結合的較好罷了，因為自己設計的工具，有什麼需求完全可以自己控制）的結合呢？下面有一些我認為是特點的特徵：

1. 提供自學習、下拉框、重複表格、重複節等二十多個個介面控制項。這裡我們在Infopath的基礎上增加了自學習控制項、樹形選擇控制項（自動邦定到關係型資料表）、邦定標籤。

2. 支援控制項到資料的靈活綁定。

3. 支援資料通用驗證和自訂驗證，使用者無需對資料驗證進行編程。

4. 支援資料規則，能調用Web Services和執行程式指令碼。規則方面我們增加了執行程式指令碼和自動填滿資料域的功能。

5. 支援控制項樣式和不同的介面運行時風格。

6. 支援資料策略，能根據條件對任意欄位的顯示、讀取、修改許可權進行控制。這個功能是Infopath所不具備的，或者說要實作類別似需求的表單，需要更多的代碼和設定。

7. 支援運算式編輯和自訂函數。Infopath只支援一些基本的XSLT引擎中內建的函數，我們還擴充了更多的常用函數，當然能夠把伺服器端的如當前登入使用者資訊，工作流程資訊作為函數來處理。

8. 支援定義資訊的匯出匯入。想當如Infopath的提取表單功能，我們把定義資訊都存在資料庫中，也可到處成檔案。

9. 產生符合XML規範的定義資訊。

10. 能方便產生資料擷取視圖。

11. 能方便產生資料檢索視圖。

12. 能和工作流程管理、使用者管管理無縫銜接。

   下面我們就來看看參考Infopath設計的介面設計器的樣子吧： 

圖5：介面設計器主介面
 

支援豐富的控制項
    在設計這個設計器時，我們根據開發需求，設計了一系列的控制項，讓使用者能夠通過拖拽的方式，設計自己的Web應用介面。目前該設計器支援大部分的Windows控制項，具體說來有以下一些：

文字框 標籤 活動標籤 格式文字框 下拉框 列表框 日期選取器 複選框 單選框 文本地區 按鈕 節 Tab控制項

自學習控制項 樹型選擇控 可選節 重複節 大綱細節 項目符號清單 編號清單 普通列表 檔案附件 圖片 分隔線

資料繫結機制

   資料邦定是很多軟體開發工具帶有的功能，VB6，VS.Net，Delphi等都提供了靈活的資料邦定機制。在該設計器裡也提供了資料邦定機制，它不是把控制項邦定到某個資料集，而是直接將控制項邦定到某個視圖（設計器設出來的介面稱為視圖）的控制項。然後通過XSLT和XML的轉換，來產生預期的和資料邦定的介面。

其實我這裡所說的邦定，無非是產生和XML相關的XSLT資訊而已，下面一段是簡單的邦定了欄位的XSLT片段：

- <div id="CTRL197" class="" style="">
  <span /> 
  <input class="PlainText repeatTableInput" onfocus="TextBoxOnFocus(this);" onblur="TextBoxOnBlur(this);" onkeydown="TextBoxOnKeyDown(this,event)" onchange="setXmlValue(this);" isRepeat="true" style="width:280px;" binding="T_PUBLISHER/CCOUNTRYPUBLIC" value="{CCOUNTRYPUBLIC}" xctname="PlainText" ctrlId="CTRL197" chineseName="出版地" /> 
  </div>

   花括弧括上的就是該控制項邦定到的欄位，那麼運行時就可以根據這些資訊進行資料存取了。
使用者輸入驗證機制

使用者輸入驗證是軟體開發過程中的一項重要而繁瑣的工作，經常要佔據開發人員不少的時間。這個問題在介面設計器中必須得到解決。我們根據自身的開發經驗總結了一下，發現驗證不外乎以下兩種：

1. 通用驗證，對資料的類型、輸入格式、長度、大小進行驗證。

2. 聯合驗證，對視圖中多個欄位之間的關係進行關聯驗證。

因此我們在設計器中加入了滿足這兩種情形的驗證機制。

   大家不妨可以看看，在介面設計器中是如何來實現這些驗證的。

      1、開啟需要驗證的控制項或欄位的屬性視窗

     

 

     2、選擇資料驗證按鈕，開啟資料驗證視窗

   3、添加或者修改一個驗證

 

 

預設值設定機制

所謂預設值就是給某個控制項/域自動的賦予某個值，而大部分情況下該值必須是動態、可計算的、與環境相關的。因此，預設值的設定編輯器，必須能擷取環境資訊，支援運算式和指令碼。我們是通過方程式編輯器，結合資料域的選擇，函數的選擇來實現的。

圖8：方程式編輯器

圖9:函數選取器

規則設定機制

規則實際上有些類似於控制項的事件，就像我們在寫VB程式時，雙擊某個控制項在其onclick事件下編碼來實現一些功能。在該設計器中，可以通過UI的方式來通過設定這些規則，當運行時滿足特定條件就可以觸發這些規則的操作。目前，我們支援訊息對話方塊操作、運算式對話方塊操作、設定網域作業、調用Web Services操作、執行指令碼操作、自動填滿操作，能滿足平時開發的大部分應用情境。

圖10:規則設定視窗

圖11:規則編輯視窗

圖12:操作設定視窗

資料策略機制

在MIS系統開發過程中遇到最多的介面要素控制便是，哪些控制項（欄位域）什麼時候顯示，是麼時候唯讀，設麼時候隱藏。這些控制往往是和使用者多變的業務需求相關聯的，比如在審批時只允許讀欄位，職位小於處級的只能查看錶單，諸如此類的需求。我們傳統的做法是在程式裡（有時也通過資料庫配置）編寫這些規則，這樣做費時費力是其次，最難對付的就是使用者過幾天就可能改變這些策略，這樣一來項目幾乎就沒有完工的時候。基於這些考慮，我們在設計器中引入了資料策略的概念，通過條件運算式可以控制介面元素的讀寫，由於規則是動態配置的，所以可以應對使用者多變的需求，這也許就是“隨需而變”吧。

 

 
圖13:策略條件構造

圖14:資料原則設定

介面設計器運行時

介面設計好之後，需要一些解析機制來支撐UI的產生、資料的存取、人機互動的控制。該設計器運行時的設計原理是：

1. 編寫大量的通用javascript指令碼來控制介面的表現，類比富用戶端。這些指令碼得益於swanky深厚的javascript功底和介面設計功底，否則這種機制是很難得到良好表現

2. 伺服器段編寫一系列的通用Web服務，來實現和資料庫、工作流程管理系統、使用者認證管理系統的互動。

3. 大量運用XML來支撐資料的緩衝，介面的緩衝。

下面有幾個是我們項目中，客戶需要的介面，這些介面是完全用我們的設計器實現的。

圖15：設計介面預覽

圖16：設計介面預覽

結束語

我們在項目開發過程中經常遇到的一些問題，從總結問題的角度出發，抽象一些常見的應用情境，這就引發了我們對資料架構設計器、介面設計器、工作流程管理系統（本文不作論述）的思考，最終轉換成一個內部協助工具輔助的開發。今天，我將這兩個小工具的一些特性貼出來，算是對前一段工作的一個簡單的回顧和總結，同時也希望我的一些挫折和經驗能對大家有所協助。資料架構設計器、介面設計器、工作流程管理系統這幾個工具我們會一直開發下去，對其進行完善，歡迎大家溝通交流，相互學習。