dojox/form/Manager (part 1)

簡介

表單管理員的模組 dojox/form/Manager ，是用來管理單一輸入表單的工具。模組名最前面的目錄是 dojox，dojox 最後的字母 "x" 表示目錄下的模組是 dojo 的延伸 (extension) 或實驗 (experiment) 性質的模組。雖然被放置在 dojox 目錄下，但 dojox/form/Manager 這個模組己經成熟、穩定到可以應用在正式的開發上了。

dojox/form/Manager 應用時以使用宣告法(Declarative) 為主。表單中的欄位也以使用宣告法建立時最為便利。範例中是一個很簡單的表單管理的應用，實際上，表單管理者的功能還頗強大的，也能應付複雜和動態的表單。

範例

範例中建立了一個很簡單的 form 輸入表格，只有三個欄位及二個按鈕。

CSS

<style>
input, textarea {
    font-family:monospace;
}
</style>

上列的 CSS 碼將輸入欄位的字型改成定寬 (Fixed-Width) 字型，這樣欄位的寬度比較好計算。

HTML

<body class="claro">
    
        Last Name:
        


        First Name:
        


        slary:
         


    
    
    
</body>

在 HTML 中，我們建立了三個欄位，二個文字欄位，一個數字欄位，及二個按鈕，做為測試之用。

Script

第 2 行先建立個全域變數(Global Variable) 名為 app。這個變數會出現在流覽器中的 window 變數之下，全名是 window.app；隨後所定義的變數和函式都掛載在這個變數之下。這樣在 Chrome 的開發者工具中，要找到應用程式中所定義的變數，就比較容易了。

第 17 行的 gatherFromValues(["lastName", "firstName"])會讀取表單中 name 屬性值為 lastName 及 firstName 兩個欄位的輸入值，並傳回一個包含這兩個欄位的 Javascript 物件。如果要讀取更多的欄位，就在參數的陣列中加入要讀取欄位的 name 屬性值。如果沒給任何參數，gatherFromValues()會讀取表單中所有欄位的值，並傳回含有所有欄位的 Javascript 物件。當沒有預設值，同時也沒有輸入任何值時，文字欄位傳回空字串 ""，數字欄位傳回 NaN （Not a Number)。

第 23 行指派了一個值給 submitData.Salary，假裝 submitData 是由伺服器收下來的查詢資料，要將查詢值寫回表單裡。

第 24 行的 setFormValues(submitData)中的參數 submitData 必須是一個 Javascript 的物件，setFormValues() 函式，會將參數物件中的 name/value 項目中的 name 和各欄位 name 屬性的值做對應，如果有對應，則將值指派給該對應欄位的 value 屬性值。如果找不到對應 name 屬性值的欄位，則忽略參數中的該筆 name/value 項目。寫起來很冗長，不容易說清楚，執行一下範例程式就很容易明白了。

第 28 行的 reset() 會將表單的各欄位設回初始值。

這樣，一般輸入表單所需要做的三件大事就可以搞定了。測試結果要到「開發者工具」裡的「主控台」看。

另外， var lastName = form.formWidgetValue("lastName"); 可單獨取得 name="lastName" 輸入欄位的值，也就是該欄位之 value 屬性的值。 form.formWidgetValue("lastName", "Smith"); 則將 name="lastName" 輸入欄位之 value 屬件的值。

熊伯的外接硬碟

2015年9月29日星期二