袁永福--南京都昌信息科技有限公司創始人

WinForm表單，HTML表單，XSLT表單，三位一體的表單工具

 袁永福( http://www.xdesigner.cn ) 2007-8-15
    我正在開發的表單工具是一種三位一體的表單工具(點擊下載其概念版本)，它同時集成了對WinForm,HTML和XSLT的設計功能，使用它，對于同一個表單模板，無需修改即可生成WinForm表單，HTML表單和XSLT表單。
WinForm表單
    表單樣式設計器是類似VS.NET的WinForm窗體設計器，保存的是表單元素的絕對坐標信息，因此比較容易根據表單模板來生成WinForm界面。表單元素類型和WinForm控件類型是一一對應的。處理起來比較簡單。
表單執行引擎根據表單設計來生成WinForm界面處理過程比較簡單，首先使用表單文檔對象模型加載表單設計文檔，然后遍歷該表單文檔中所有的表單元素對象，針對每一個表單元素對象生成一個對應的WinForm控件，然后添加到一個容器中。
    在生成WinForm界面時，表單執行引擎會加上便于用戶使用的一些特性，比如會根據表單元素在設計界面中的從左到右從上到下的順序設置各個WinForm控件的焦點屬性。生成文本標簽時，若文本標簽后面的某個數據輸入框具有文本鏈接則將生成的文本標簽控件綁定到這個數據輸入框上，當用點擊文本標簽控件時就會設置焦點到該數據輸入框，其行為類似HTML文檔中的Label元素。
    生成了WinForm界面并投入運行時，表單引擎會監控用戶輸入的表單數據，若用戶修改了表單數據，則就檢查表單文檔中的表單元素之間的關聯信息列表，根據需要執行表單元素依賴關系和表單元素數值表達式，以達到表單的動態特性。
用戶保存數據時，表單引擎會遍歷整個表單WinForm界面的控件收集表單數據，并根據各個表單元素的數據引用屬性指定的XPath屬性將表單數據填充到一個XML文檔中，然后向應用系統提供這個包含數據的XML文檔。而應用系統就可以利用這個XML文件進行后續處理，比如保存或更新數據庫。
    由于表單工具生成的表單設計文檔是采用XML格式，因此其他非.NET的應用系統可以根據這個XML文檔動態加載生成各種類型的WinForm控件，動態生成表單界面，這樣就擴大了表單工具在C/S系統中的應用范圍。

Html表單
    表單樣式設計器雖然采用控件拖拽式的設計用戶體驗，使用絕對坐標來設置表單元素的位置，但表單引擎仍然可以根據表單文檔生成HTML文檔。

HTML排版樣式
    HTML文檔中的表單元素可以使用絕對坐標定位方式，即在元素的style屬性中添加”position:absolute ; left:xxx px ; top:xxx px”，這樣可以使用絕對坐標方式進行HTML元素的定位。這樣可以比較方便的根據表單文檔生成HTML文檔，但這種簡單的處理是不完善的。可能帶來以下幾個缺點。

1. 使用絕對坐標定位的表單會嚴重干擾表單工具和應用系統的集成。在應用系統中，表單界面一般是作為應用系統界面的一部分進行顯示，應用系統界面上還有很多不屬于表單工具的HTML元素，使用絕對坐標定位的表單元素很容易和非表單元素之間相互覆蓋，使得應用系統的界面無法使用。
2. 使用絕對坐標定位的HTML表單代碼難于修改。在少數情況下，表單工具生成的HTML表單需要手工微調，若采用絕對坐標定位則修改表單元素HTML代碼比較困難。
3. 無法實現某些表單頁面的動態特效。若表單文檔中存在表單元素依賴關系，則一些表單 元素的可用狀態依賴其他表單元素的狀態。表單工具可以做到一種特效，使得某些元素的可見狀態依賴其他表單元素。若采用絕對坐標定義，當某些元素由于依賴關系而導致不可見時，用戶界面可能出現大片空白，影響用戶界面的美觀。

    為解決上述問題，表單工具會生成流式排版的HTML表單，生成的HTML代碼是很簡潔的，沒有使用 “position:absolute”來使用絕對定位表單元素。
    表單文檔中使用絕對坐標來定位表單元素，但HTML文檔卻采用流式排版樣式，這兩種排版樣式是截然不同的，表單工具內部采用特殊的算法將絕對坐標排版方式轉化為流式排版樣式，并針對IE瀏覽器進行了優化，然后針對每一個表單元素生成對應的HTML元素。經過測試，這種處理方法生成的HTML文檔顯示樣式和表單的設計樣式非常接近。從而解決了絕對坐標方式帶來的問題。
    在表單元素中有一個特殊的表單元素類型，那就是單/復選框按鈕組。這種表單元素，包含了若干個單/復選框。在設計時這個表單元素是作為一個整體來編輯的，在生成的WinForm表單中也是作為一個整體創建的。但在輸出HTML表單則需要將內部項目拆開分散輸出，從而生成若干個<input type=”radio”>或<input type=”checkbox” >，而且這些項目有可能不是連續的輸出。

HTML頁面動態效果
    HTML表單中也要實現和WinForm表單中一樣效果的表單元素依賴關系和數值表達式，這需要依賴JavaScript腳本來實現。因此表單工具在生成HTML表單式需要隨之輸出維護表單動態效果的JavaScript腳本。
    一般的可以表單工具可以根據表單文檔的元素關系信息列表，針對每一個表單元素，拼湊出一段JavaScript腳本，然后綁定到HTML元素的事件屬性中。比如可以在<input type=text>元素的onblur事件添加處理表單式的代碼，在<input type=checkbox>元素的onclick 屬性中添加處理表單元素依賴關系的代碼。這樣生成的HTML文檔中夾雜著大量的JavaScript腳本。這樣可以實現HTML表單的動態特效，但仍有不足。其主要缺點有

1. 大大加大了生成的HTML文檔的大小，生成的HTML代碼比較臃腫，難于閱讀和處理，可能導致應用系統加載大型表單速度緩慢。
2. 在少數情況下，開發人員需要手工修改表單HTML文檔來進行微調，若HTML文檔中充斥著大量的不成片的JavaScript代碼，則閱讀和修改HTML文檔比較困難。

    根據通常的編程規范，不應當大量出現功能相同的程序代碼。而表單HTML代碼中出現大量的重復相同功能的JavaScript腳本代碼，不符合通常的編程規范，這種JavaScript代碼維護困難，不利用手工集中修改。
    為了解決這些問題，應當盡量減少HTML文檔中生成的JavaScript腳本。而且將JavaScript腳本要實現的功能提取出來，編寫通用的JavaScript腳本并單獨保存到一個外部的js文件。這樣HTML文檔中使用<script src=xxxx >來引用通用的JavaScript腳本。此外還利用HTML文檔的不嚴格的特性，將某些控制信息保存在HTML元素中擴展屬性中。
    在這種思路下，報表工具生成的HTML表單時，在一些HTML元素上追加某些擴展屬性，例如使用 idlist 擴展屬性來說明指定的編號的元素和該項目進行綁定，表單工具還使用了通用的JavaScript函數來統一實現HTML表單動態效果。這樣生成的HTML文檔中沒有多少JavaScript代碼，生成的HTML代碼非常簡潔，體積小，而且便于閱讀和修改；而且由于JavaScript代碼集中在一起，因此維護方便。

瀏覽器兼容性說明
    經過測試，表單工具生成的HTML表單可以在IE6.0中正常運行，能實現自動的表單元素依賴關系以及表單內表達式運算。但在Firefox2.0中，能正常顯示表單界面，但沒有任何動態特性，無法執行表單元素依賴關系和表單內表達式運算，可能是由于Firefox只支持標準的HTML，不支持擴展屬性而導致的。因此建議使用表單工具的客戶端瀏覽器應當為IE6.0或更高版本，若表單中沒有定義元素依賴關系或表達式是可以使用其他瀏覽器。
    XSLT表單是基于HTML表單的，因此這個瀏覽器兼容性說明同樣適用于XSLT表單。

XSLT表單
表單工具還能生成XSLT表單，這個功能的基礎是HTML表單。XSLT表單首先是標準的XSLT文檔。表單文檔的數據可以保存為XML文檔。而使用表單工具生成的XSLT表單，可以利用這個數據XML文檔執行XSLT轉化，生成用于顯示數據的HTML文檔。
比如某個表單，生成的數據XML文檔片斷為

    則表單設計時定義了一個文本框，它的數據引用為Employees/Address，則表單工具為這個文本框生成的XSLT片斷為

    將這個XML文檔片斷和XSLT片斷進行XSLT轉化，則會生成字符串

    這個字符串就是標準的HTML代碼，這段HTML代碼在瀏覽器中就能顯示一個包含數據的文本輸入框。
在應用程序中，將表單數據XML文檔和XSLT表單進行XSLT轉化，即可生成已經包含數據的HTML頁面。這個過程包含的三個技術，XML,XSLT,HTML都是國際標準，是跨語言跨平臺的技術，因此表單工具通過HTML表單和XSLT表單為其他的非.NET的B/S系統提供了支持，比如asp，Java，PHP等等。
    表單工具能針對文本框，單/復選框，單/復選框按鈕組，列表框和下拉列表輸出XSLT代碼。從而構造出非常靈活的XSLT表單。
    在實際應用中，可以由表單工具事先設計好表單，并生成HTML表單和XSLT表單，保存在應用系統的指定位置，比如某個目錄或者數據庫中，而應用系統在從指定位置加載HTML表單或XSLT表單，這樣就能在應用系統中使用表單工具設計出來的表單。如此這樣，基于.NET的表單工具可以和其他使用任何技術（包括asp，Jsp，J2ee，php等等）的B/S系統進行協同工作，將表單工具在B/S系統的中應用范圍擴展到最大。

下一篇談談表單數據的處理。