dojox/form/Manager (part 2)

簡介

這篇還是講 dojox/form/Manager（表單管理員）。上篇介紹 dojox/form/Manager 時，所用的範例裡，所有的輸入欄位都用宣告法建立，表單的處理也很簡單。但碰到比較複雜的表單時，有些欄位要和其它欄位連動，因此得用程式法動態建立輸入欄位，這時又該如何處理呢？

用宣告法所建立的表單管理員及其它位於表單管理員容器中，也就是 <form></form> 之間，用宣告法所建立的輸入欄位，在剖析器 (parser) 對 HTML 進行剖析時，剖析器會同時將這些輸入欄位的 dijit 納入表單管理員的管理。但是那些透過程式法建立的輸入欄位，在剖析器剖析 HTML 時並不存在，因此也無法納入表單管理員的管理。所以，在用程式法建立完輸入欄位後，要跟表單管理員註冊 (register)，表單管理員才知道要將這個新建的 dijit 納入管理。如果又動態的將該欄位刪除，也得向表單管理員取消註冊 (unregister)，以脫離表單管理員的管理。因為向表單管理員註冊，就會被納管，所以 dijit 的掛載點就算不在表單管理員的容器之中也沒有關係。

範例

這個範例的情境和上篇一樣，不同的是，只用程式法建立了一個文字輸入欄位，不管輸入什麼值，按下 submit 按鈕後，欄位值都會被改成 Blablabla。

CSS

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

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

HTML

<body class="claro">
    

        Type a word:
        
    
    
    
</body>

Script

第 20 行定義 name 屬性，這個屬性一定要給，而且一定得在這裡給，不然 gatherFormValues() 會抓不到這個欄位的值。要特別注意的是，在 HTML 這個 dijit 的掛載點那裡不能給 name 屬性，不然只有 formWidgetValue() 可以取得該欄位的值，gatherFormValues() 卻抓不到。

第 25~26 行將這個 dijit 向表單管理員註冊納管。如果要取消註冊，就用 form.unregesterWidget(word) 來取消註冊。表單管理員納管的所有 dijit，都放在表單管理員的 formWidgets 屬性下。

其它的用法，就沒什麼兩樣了。

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 屬件的值。