使用 Visual XForms Designer 開發表單

發表于:2007-05-24來源:作者:點擊數: 標簽:開發XFormsDesignervisual使用
2006 年 3 月,萬維網聯盟(W3C)發布了 XForms 1.0 規范的第二版。不久,IBM alphaWorks 推出新一輪的免費工具推動 XForms 文檔的 開發 。這些工具中最新的是 Visual XForms Designer,能夠以可視化的形式構造表單。Visual XForms Designer 與 Eclipse 結合
2006 年 3 月,萬維網聯盟(W3C)發布了 XForms 1.0 規范的第二版。不久,IBM alphaWorks 推出新一輪的免費工具推動 XForms 文檔的開發。這些工具中最新的是 Visual XForms Designer,能夠以可視化的形式構造表單。Visual XForms Designer 與 Eclipse 結合在一起,具有常見的 Eclipse 結構,比如一個透視圖、一組視圖和帶有選項板驅動設計畫布的編輯器。本文帶領您快速地了解 Visual XForms Designer。了解該工具對于 XForms 表單開發主要階段的促進:定義數據、創建用戶界面控件、提交方式設計、測試完成的表單。

什么是 XForms?

W3C 為滿足表示和收集表單數據的需要開發了 XForms 標準。如 W3C 推薦標準中所述,XForms 的目標是成為 “下一代 Web 表單”。與現有的 HTML 表單技術相比,XForms 具有一些特殊的優點。如推薦標準本身所聲明的那樣,“通過將傳統 XHTML 表單分解成三部分:XForms 模型、實例數據和用戶界面,將表示與內容分離,支持重用和強類型化,從而減少了與服務器通信的次數,提供了設備獨立性,降低了對腳本的需求。”

XForms 文檔有一個數據模型,包含一個或多個 XML 實例文檔。表單操縱這些實例文檔,并負責將 XML 提交到后端系統。

隨著 2006 年 3 月 14 日 XForms 1.0 規范第二版的發布,XForms 到達了一個重要的里程碑。此后不久 alphaWorks 就提供了 Visual XForms Designer。

從何處獲取 Visual XForms Designer?

可以從 IBM alphaWorks(參見 參考資料)上找到安裝說明。要查看使用 Eclipse 自帶的安裝/升級機制獲取 Visual XForms Designer 的詳細說明,請單擊下載選項卡。

Visual XForms Designer 需要 Eclipse 3.1、Eclipse Web Tools 1.0(參見 參考資料),在 1.5-level Java™ Runtime Environment (JRE) 上運行。

創建新的 XForms 文檔

我們使用 Visual XForms Designer 建立一個新的表單。創建新的 XForms 文檔,選擇 Excelpse 標準 New 向導中的 New XForms Document 菜單項(如 圖 1 所示)。


圖 1. 新建 XForms 文檔
新建 XForms 文檔

確定新建文檔的保存位置后,Visual XForms Designer 編輯器就會打開一個新的空白文檔。如果還不在 Visual XForms Designer 透視圖中,編輯器將提示您切換到那里。進入該透視圖后,可以看到如 圖 2 所示的 Eclipse 布局。


圖 2. Visual XForms Designer 透視圖
Visual XForms Designer 透視圖

現在可以建立文檔了。創建 XForms 文檔一般至少需要三個階段:

  1. 定義實例數據
  2. 創建輸入控件并將其綁定到實例數據
  3. 規定表單向后端系統的提交

本文下面三小節將介紹如何使用 Visual XForms Designer 來執行這些任務。最后介紹如何用呈現環境測試表單。

創建實例數據

創建 XForms 文檔時,一般首先要定義數據模型。數據模型包括后面綁定到用戶界面控件的實例數據。

XForms 模型中的實例文檔就是一個 XML 文檔。與任何 XML 文檔一樣,該實例可以有 XML Schema 的支持,也可以沒有,XML Schema 定義了允許的結構。

在 Visual XForms Designer 中,可以用幾種不同的方式定義表單的實例數據。首先,可以從 XML Schema 定義創建一個 XML 實例文檔。在 Visual XForms Designer 中,有一個 Enclosures 視圖(如 圖 3 所示)允許導入外部文檔,包括 XML Schema 文檔。選擇 Enclose Schema File 菜單項后,可以選擇需要的 XML Schema 文件,使其能夠被 Visual XForms Designer 訪問。


圖 3. Enclosures 視圖
Enclosures 視圖

使用 Visual XForms Designer Instance 視圖(如 圖 4 所示)創建和操縱實例文檔。一旦裝入了 Schema 文件,就可以創建符合該 Schema 的實例文檔,單擊 Instance 視圖菜單條左側第二個按鈕。得到的實例文檔對應于模式中聲明的每個元素和屬性都有相應的元素和屬性。


圖 4. Instance 視圖
Instance 視圖

創建表單實例數據的第二種方式是使用文件系統中已經存在的 XML 文檔。同樣,在 Enclosures 視圖(如 圖 3 所示)中提供了這種功能。要裝入實例文檔,右擊 XForms Instance 類別下的模型并選擇 Enclose XML File。裝入實例之后,Instance 視圖中就能看到其元素和屬性,在這里可以根據需要修改實例文檔。

創建實例數據的第三種方式是用老辦法:建立一個空白實例,然后手工編輯。Instance 視圖允許創建新實例,增加和刪除元素或屬性,改變元素和屬性名,刪除元素和屬性節點,重命名和為其賦值。只要右擊需要處理的節點即可看到這些選項(如 圖 5 所示)。


圖 5. Instance 視圖中操縱實例數據的選項
Instance 視圖中操縱實例數據的選項

如果需要用更高級的 XForms 結構(比如數據綁定)來充實表單的數據模型,可以在 XForms 視圖中完成。本文后面討論如何定義表單提交的時候將進一步介紹 XForms 視圖。

創建數據輸入控件

定義實例數據的時候,就進入了創建表單至關重要的第一步。但是,沒有允許用戶輸入數據的控件(如按鈕、輸入字段和下拉選擇框)的表單還不是真正的表單。

Visual XForms Designer 提供了多種方式定義實例數據,與此類似,它也提供了創建輸入控件的多種方式。創建控件最直接的方式就是從編輯器的設計選項板(如 圖 6 所示)中選擇一個控件并拖放到畫布上。


圖 6. 畫布和選項板
畫布和選項板

選項板包括豐富的 XForms 控件創建選項,從分支和重復這樣的流控制,到 XForms 輸入和文本區域這樣的簡單控件。但是,用這種方式在畫布上增加控件后,還有一項任務沒完成:將輸入控件和實例文檔中的數據聯系起來。這項工作可以在 Properties 視圖中完成,只要為相關的屬性提供一個值。另一種辦法是從 Instance 視圖中選擇一個節點,直接拖到控件上。將數據拖到控件上之后,它就與那個數據聯系在一起了。

創建控件更簡單的辦法是從實例數據中選擇節點,拖放到設計畫布的空白區域。拖過去以后,Visual XForms Designer 就會自動創建綁定到所選數據節點的輸入控件,一步就能完成。

創建提交控件

定義實例數據、創建輸入字段并綁定到數據之后還有一項工作:規定表單數據向后端系統的提交方式?,F在,對于 Visual XForms Designer 提供多種定義提交和為用戶啟動提交創建按鈕的方式,您應該不會感到吃驚了吧。

在 XForms 中,提交 是一個抽象的可重用的概念。就是說,提交定義了要提交的內容、提交的目的地以及提交的方法。然后可以將提交捆綁到一個按鈕(XForms 中的觸發器),從而能夠根據特定的用戶動作來啟動。

創建用戶能夠觸發的提交需要分兩步:聲明提交并定義其參數,將其連接到用戶動作。

在 Visual XForms Designer 中,XForms 視圖允許將提交和數據模型關聯在一起。然后,可用標準的 Eclipse Properties 視圖定義提交的內容、目標和方式,如 圖 7 所示。


圖 7. 定義提交屬性
定義提交屬性

創建提交后,只需要將提交節點拖放到畫布上。拖過去后,Visual XForms Designer 就會創建 XForms Submit 控件,當用戶按下時就會激活關聯的提交(如 圖 8 所示)。


圖 8. 帶有 Submit 控件的完整表單
帶有 Submit 控件的完整表單

Visual XForms Designer 也把 XForms Submit 控件放在了選項板上??梢允褂眠x項板添加 Submit 控件,但是此后必須將其連接到提交對象。要創建這種聯系,需要在 Submit 控件的 id 屬性中指定提交的惟一標識符。

測試表單

完成表單后,最后一步就是用實際的 XForms 呈現環境測試它。有多種不同的 XForms 呈現工具(參見 參考資料)。其中一些工具需要表單文檔采用特殊的格式,其他則沒有任何要求。幸運的是,Visual XForms Designer 包含有將文檔轉化成幾種呈現工具之一所需格式的實用程序(如 圖 9 所示)。


圖 9. 轉換選項
轉換選項

Visual XForms Designer 還提供了一組菜單項用本地機器上已經安裝和配置的呈現工具呈現表單(如 圖 10 所示)。


圖 10. 呈現選項
呈現選項

 

最后,圖 11 顯示了 Mozilla Firefox 中呈現的一個簡單表單,它使用了 Mozilla XForms 插件。


圖 11. 呈現的表單
呈現的表單

學到了什么?

通過本文,您看到了 Visual XForms Designer 對表單開發主要階段的支持:數據定義、控件創建、提交創建和測試。希望這種表單開發方式能夠突出 XForms 標準最引人注目的一個方面:清晰地劃分模型和視圖。您看到了首先解決數據實例(模型)創建,然后作為補充在此基礎上解決用戶界面控件(視圖)創建問題的好處。

同時,您也了解了 Visual XForms 編輯器的設計畫布和選項卡,以及提供的很多視圖:Enclosures、Instance、XForms 和 Properties 視圖。還看到了針對特定呈現工具的轉換工具,以及在呈現工具中測試表單的設施。

還有什么需要學習的?

當然,Visual XForms Designer 還有更多的功能。熟悉它的最佳辦法就是安裝到機器上自己試驗??梢詮?IBM alphaWorks 安裝 Visual XForms Designer(參見 參考資料)。

設計器在 Excelipse 幫助系統中提供了完善的文檔。其中包括幫助您入門的動畫教程,從創建到測試的一步一步的詳細說明。

最后,與大部分 alphaWorks 軟件一樣,Visual XForms Designer 也有自己的論壇,可用于分享您的問題和建議。在這里還可以找到一些相關的 alphaWorks 工具:XML Forms Generator 和 Compound XML Document Toolkit。放手創建您自己的 XForms 吧。

原文轉自:http://www.anti-gravitydesign.com

国产97人人超碰caoprom_尤物国产在线一区手机播放_精品国产一区二区三_色天使久久综合给合久久97