熊伯的外接硬碟: dijit/form/*

顯示具有 dijit/form/* 標籤的文章。顯示所有文章

2015年11月19日星期四

dijit/form/ToggleButton

簡介

dijit/form/ToggleButton 是一個介於按鈕 (Button) 和檢核框 (CheckBox) 之間的一個圖形介面。外觀是按鈕，行為卻像檢核框，其狀態只在 true 和 false 之間變化；而按鈕的標示也可以隨著狀態的改變而變化。和檢核框最大的不同是 ToggleButton 不接受 Form 或 Form Manager 的管控，因此不能透過後兩者去讀取或收集 TobbleButton 的狀態。因此，可以說 ToggleButton 比較像是個行為圖像，而非資料輸入用的圖像。
dijit/form/ToggleButton 繼承了 dijit/form/Button 。因此，在外觀、行為及屬性都和按鈕很像。第一次按下 ToggleButton 時，傳回值一律為 true；之後，每按一次，狀態便在 true 和 false 之間變化。

範例

範例中建立了三個外觀不同的按鈕，以展示一般 ToggleButton 在使用時，通常會具有的外觀。一個具有一般按鈕的外觀，一個只有圖像，最後一個按鈕同時有圖像和標示文字。

CSS

<style>
html {
    width:100%;
    height:100%;
}
body{
    margin:0 auto;
    width:1000px;
    height:100%;
    padding-top: 20px;
}
</style>

CSS 中沒有特別的樣式需要設定。

HTML

<body class="claro">
    
    
    
</body>

HTML 中簡單的設定三個按鈕的掛載點。

Script

建立 ToggleButton 的方式和建立 Button 的方式非常類似，最大不同的地方在於 ToggleButton 多數時間在處理 onChange 事件，而非 onCkick 事件。而其作用的方式則和 CheckBox 非常類似，只在二個狀態間轉換。 ToggleButton 的狀態只有二種，就是 true 和 false。如果要知道目前是處於那一種狀態，可以用 var btn = register.byId("btn1"); btn1.get("checked"); 來取得目前的狀態；也可以用 btn.set("checked", "false"); 來設定狀態；這點則和 CheckBox 透過 "value" 不同。

2015年10月20日星期二

dijit/form/HoriztonalSlider

簡介

dojo 的 Slider （滑動條）有二個：dijit/form/HorizontalSlider 及 dijit/form/VerticalSlider。看名字就可以知道，一個「橫躺」，一個「直立」，功能和操作方式都相同，透過滑動指示游標來決定輸入值，用方向鍵來移動指示游標也行。slider 的建立比多數的 dijit 要複雜，滑動條和刻度和數值標示，分成了三個元件，建起來頗為費時。

範例

在範例中先建立了一個 form manager 做為容器，內中建立了二個 slider，一個用宣告法，一個用程式法；另外建立了一個按鈕來讀取輸入值。記得打開「開發者工具」的「主控台」查看結果。

CSS

<style>
html {
    width:100%;
    height:100%;
}
body {
    margin: 0 auto;
    width:1000px;
    height:100%;
    padding-top:20px;
}
</style>

這次直接在元件中定義樣式。

HTML

<body class="claro">
    
        
        Declarative
        
            
            
            
                0
                1
                2
                3
                4
                5
                6
                7
                8
                9
                10
            
        
        


         
            Programmatic
            
                
                    0%
                    10%
                    20%
                    30%
                    40%
                    50%
                    60%
                    70%
                    80%
                    90%
                    100%
                    
                 
            
        
    
    
</body>

第 5~27 行用宣告法建立一個 Slider。
第 12~13 行建立刻度。
第 14~25 行建立數值落點標示
第 32~47 行建立程式法的掛載點，掛載點共有三個，各在第 32 行、第 33 行及第 46 行，數值落點標示則以 <ul> 標記宣告。

Script

第 24~37 行用程式法建立 slider 的滑動條。各參數作用如下：
name 為輸入值的變數名稱。
style 設定樣式。
value 設定預設值。
minimum 及 maximum 設定最小值及最大值。
discreteValues 設定最小值和最大值中間存在數值的節點個數。
showButtons 設定在滑動條的兩端是否要有按鈕，這兩個按鈕可以用來增加或降低輸入值，每次改變一個節點的值。
clickSelect 設定是否可以直接點選滑動條以輸入數值。
intermediateChange 設定是否在滑動指示游標移動的過程中，每次經過一個數值節點時，都要觸發一次 onChange 事件，預設值為 false，只在滑動指示游標停止時，觸發一次 onChange 事件。
onChange 設定在 onChange 事件發生時，要執行的函式。

第 39~42 行建立落點數值標示。
container 設定為 "topDecoration" 表示數值落點標示處於滑動條的上方。設定為 "bottomDecoration" 時則處於滑動條的下方，如宣告法的 Slider。

第 44~48 行建立刻度標示。
container 設定為 "topDecoration" 表示刻度處於滑動條的上方。設定為 "bottomDecoration" 時則處於滑動條的下方，如宣告法的 Slider。

第 51 行將程式法建立的 slider 向 form manager 註冊納管。

第 52~55 行設定按鈕在觸動時所執行的函式。

Slider 還提供了 increment(event) 及 decrement(event) 兩個函式，可以透過程式去改變 Slider 的值，參數 event 一定要給，在實作時，一般是因為某個事件被觸發了，才會去改變 slider 的值，把觸發的事件當成參數來傳就可以了。當用鍵盤改變 slider 的值時，就會呼叫到這兩個函式。

2015年10月14日星期三

dijit/form/DateTextBox

簡介

在應用程式裡，處理日期這㮔資料也是個很令人頭痛的問題，因為不同的國家對日期的格式有不同的要求，年月日的前後排列順序也大不相同，連中間的分隔號，也各有所好。 dojo 的日期一律採用 ISO 8601 的日期格式做為儲存的標準格式，如果遇到不同的要求，才去做日期格式的轉換。

dijit/form/DateTextBox 提供了一個簡便的日期輸入方式，使用者可以直接輸入日期，或由下拉式的月曆中挑選所要輸入的日期。月曆也會根據語言的設定以適當的文字顯示。

範例

範例中用宣告法建立了一個 dijit/form/DateTextBox 的輸入欄位，另外還建立了一個按鈕以讀取欄位的輸入值，並以 alert() 函式顯示在畫面上。由讀取值可以看出 ISO 8601 的標準日期格式。

CSS

<style>
html {
    width:100%;
    height:100%;
}
body {
    margin: 0 auto;
    width:1000px;
    height:100%; 
    padding-top:20px;
}
.dijitInputField {
    font-family:courier;
}
</style>

用 .dijitInputField class 來定義 dijit/form/DateTextBox 的輸入及顯示字型，用 input 標記的定義沒有用，因為在最終的產生 dijit 的 HTML 裡，真正的 input 標記的 type="hidden"，被隱藏了，這種情況在很多的 dijit 裡都會發生，所以當 CSS 的設定無效時，得進到「開發者工具」裡去看最終 HTML 的長相，才能知道真正要設定那個 class 的樣式才會產生效果。

HTML

<body class="claro">
    Claim Date:
    
    
</body>

第 3~16 行用宣告法定義一個 dijit/formDateTextBox。各屬性的定義如下：
required:true 表示此欄位為必須輸入的欄位。
autoWidth 設定如果為 true 時，欄位的寬度會自動設定與下拉式月曆同寬。
constraints 設定對欄位的限制條件：
datePattern 設定欄位輸入及顯示的格式。
min 設定日期的最小值。
max 設定日期的最大值，此處設定為輸入的當日。
formatLength 設定顯示時的格式為短式 (short) 或長式 (long)，但此欄位設定為長式時，會和 datePattern 的設定互斥，以 datePattern 的設定為優先。
hasDownArrow 的設定若為 false 時，欄位右邊不會出現向下的小箭頭。但當游標進入欄位時，仍會出現月曆。
promptMessage 為輸入提示訊息。
missingMessage 為欄位未輸入時的警告訊息。
invalidMessage 為輸入資料格式不正確時的錯誤訊息。
toolgipPosition 值為一陣列，列出顯示訊息時，訊息出現所在位置的優先順序。

Script

第 18~21 行設定按鈕按下時所要呼叫的函式。

2015年10月11日星期日

dijit/form/CheckBox

簡介

dijit/form/CheckBox 是除了dijit/form/Radiobutton 之外，另一種讓使用者一眼看到所有選項的介面元件。不同的是：

dijit/form/RadionButton 是單選，所有選項只能撰擇其中一項，而 dijit/form/CheckBox 是複選，可以選擇多個選項，甚至全選。
兩者另一個不同點在 dijit/form/RadioButton 的介面是一個圓形按鈕，而 dijit/from/CheckBox 的介面是一個方形的檢核框。
同一組的 dijit/form/RadioButton 的 "name" 屬性值都相同，而 dijit/form/CheckBox 則每個元件的 name 屬性值都不同。

範例

範例中展示了兩組 CheckBox 的選項，一組用宣告法建立，另一組用程式法建立。兩組都放在一個 dojox/form/Manager 的容器中，由 form Manager 管理。另建置按鈕一個，按下按鈕時，在「開發者工具」的「主控台」中，會顯示選擇的結果。

CSS

<style>
html {
    width: 100%;
    height: 100%;
}
body {
    margin: 0 auto;
    width:1000px;
    height:100%;
    padding:20px;
}
</style>

沒有特別的樣式需要設定。

HTML

<body class="claro">

        
            Fruit            
            Apple

            Pineapple

            Banana
        


        
            Drink
            Tea

            Coffee
        

    
</body>

第 5~9 行用宣告法建立三個 CheckBox
第 14~16 行放置二個 CheckBox 的掛載點。注意每個 <input> 標記中的 "name" 屬性值都不相同。

Script

第 20~27 行用程式法建立二個 CheckBox 各自掛載到相對的位置上。
第 30~31 行將兩個用程式法建立的 CheckBox 註冊到 form manager，讓 form manager 知道還有這兩個 dijit 要管。不然會讀取不到選擇值。
第 37 行展示另一種在按鈕被點按 (click) 時，要執行動作的另一種寫法。
第 38 行利用 form manager dijit 的 gatherFormValues() 函式，收集所有輸入資料，並將其顯示在主控台中。所有被選定的 CheckBox 的傳回值都是 true，沒有被選擇的傳回值則都是 fasle。
宣告法中的 CheckBox 並沒有設定預設要選定哪一個選項，如果使用者都沒有選，則 gatherFormValues() 函式中的各項資料的值都是 false。

dijit/form/RadioButton

簡介

dijit/form/RadioButton 的作用是在眾多的選項中挑選一個，和 dijit/form/Select 的作用很類似。在選項不多的情況下， RadioButton 可以一次把選項都顯示在畫面上，所有選項一目瞭然，使用者可以立刻進行挑選，比較有效率。但如果選項過多時，畫面上會顯得有點雜亂，反而不美。同一組的 RadioButton 中，使用者只能單選，也就是說，只能挑選其中一個選項。

範例

範例中展示了兩組 RadioButton 的選項，一組用宣告法建立，另一組用程式法建立。兩組都放在一個 dojox/form/Manager 的容器中，由 form Manager 管理。另建置按鈕一個，按下按鈕時，在「開發者工具」的「主控台」中，會顯示選擇的結果。

CSS

<style>
html {
    width: 100%;
    height: 100%;
}
body {
    margin: 0 auto;
    width:1000px;
    height:100%;
    padding:20px;
}
</style>

沒有特別的樣式需要設定。

HTML

<body class="claro">
    
        
            Fruit            
            Apple<br>
            Pineapple<br>
            Banana
        <br>
        
            Drink
            
                Tea<br>
                Coffee
            
        
    
    
</body>

第 5~9 行用宣告法建立三個 RadioButton
第 15~17 行放置二個 RadioButton 的掛載點。注意每個 <input> 標記中的 "name" 屬性值都是一樣的。

Script

第 22~31 行用程式法建立二個 RadioButton 各自掛載到相對的位置上。
第 34~35 行將兩個用程式法建立的 RadioButton 註冊到 form manager，讓 form manager 知道還有這兩個 dijit 要管。不然會讀取不到選擇值。
第 37 行展示另一種在按鈕被點按 (click) 時，要執行動作的另一種寫法。
第 38 行利用 form manager dijit 的 gatherFormValues() 函式，收集所有輸入資料，並將其顯示在主控台中。
宣告法中的 RadioButton 並沒有設定預設要選定哪一個選項，如果使用者都沒有選，則 gatherFormValues() 函式中的資料 "fruit" 的值會是一個空字串。

2015年10月10日星期六

dijit/form/Select

簡介

dijit/form/Select 是下拉式選單介面元件的其中一種，當輸入值冗長，或後台資料庫的欄位值是以代碼儲存時，讓使用者便於輸入的一個良好選擇。選單中的選項較多時，通常會經過排序，讓使用者容易找到選項；當選項不多時，則依選項使用率的高低，由上至下排列。

範例

範例中同時例示了dijit/form/Select 的宣告法和程式法兩種寫法。在程式法的範例中，又同時展示了 dijit/form/Select 使用 dojo/store/Memory 做為資料來源的寫法，以及如何動態改變選單的選項內容。在程式法中，另建立了一個按鈕，按下按鈕即會改變選單的選項內容。

dijit/form/Select 在預設的狀態下，選單輸入欄位的寬度會依照選單內容的寬度做改變（看宣告法的範例，就會看出來）。這一點在排版時會造成很大的困擾，使用者在輸入時，欄位的寬度一直在變化，對使用者經驗也不佳。採用時，最好幫選單定一個固定的寬度。

CSS

<style>
html {
    width:100%;
    height:100%;
}
body {
    margin: 0 auto;
    width:1000px;
    height:100%;
    padding:20px;
}
</style>

無須定義特別的樣式。

HTML

<body class="claro">
    
        Declative
        
    

 
    
        Programmtic
        
        
      
</body>

第 4~8 行用宣告法定義了一個下拉式選單，並沒有設定其寛度，這樣可以看出欄位會隨選項的寬度改變。此時傳回的值會是屬性 value 的值。
第 14 行則建立一個 dijit 的掛載點，掛載由程式法建立出來的 dijit。
第 15 行則是按鈕的掛載點。

Script

第 21~25 建立按鈕，預設資料來源是 store1，在點按時，呼叫 app.changeStore 函式。同時用 style 定義了 Select 欄位的寬度為 150px。
labelAttr 指定要用 store 中的哪個鍵的名稱做為選項名。
sortByLabel 設定為 false，指定不要依選項名做排序。預設狀態下，會依 label 的名稱排序。
maxHeight 設定下拉式選單的最大高度，以 px 為單位，選項內容超過此高度時，會自動產生捲動軸。設定為 -1 時，會延伸高度至最大值。第 41~46 行建立第一個 Memory store 做為 Select 的預設資料來源。此時傳回的選項值是 id 鍵的值。
第 48~55 行建立第二個 Memory store 做為 Select 要動態變更的選單內容來源。傳回的選項值亦是 id 鍵的值。

第 57~59 行是變更 Select 資料來源的函式，使用 Select 元件的 set() 函式改變 store 鍵的值，以改變選單內容。

2015年9月29日星期二

dijit/form/NumberTextBox

簡介

數值文字框的模組是 dijit/form/NumberTextBox ，用來輸入數值，同時對數值做檢核。

數值文字框為檢核文字框 (dijit/form/ValidationTextBox) 的子類別 (subclass)，因此繼承了檢核文字框的所有屬性。實際上，有些屬性在檢核文字框的類別中就已經存在了；只不過在輸入數值時，也就是使用數值文字框時，才真正派上用場；像 constrains 這個屬性就是如此，其中的大部份的限制條件及格式都是針對數值使用的。

範例

數值超出允許允範圍的錯誤訊息：

CSS

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

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

HTML

<body class="claro">
  旋轉角度(0.0 - 360.0)：
  
</body>

type 屬性在數值文字框時，設定成 type="text" 或 type="number" 都可以，因為在經過 dojo 的「整容」後，最終 HTML 碼的設定都是 type="text"。

當套用 dojo 的外觀時， HTML 中的 size 屬性不起作用，一定得用 style 去設定欄位寬度，實驗結果大約是：（字母數 * 0.7em ）。如果修改了 font-size 屬性，得再做實驗了。

constrains 用來定義對數入數值的限制，中的 min 和 max 屬性，望文生義，就知道是設定輸入數值的最小允許值和最大允許值，允許值的範圍含括 min 及 max 的設定值。

places 指定輸入數值時，數值中必須包含幾位小數。如果不設，就不會針對輸入的數值做小數位個數的檢核。如果在輸入框中輸入數值時，因為小數位的值是 0 而沒有輸入小數位，一樣會造成格式錯誤，並顯示格式錯誤的訊息。

pattern 說明當數值輸入後，重新顯示在輸入框裡的格式。在這個範例中實在沒有多大意義，但如果是金額的輸入時，就大有用處了。寫在這裡，只是提醒自己有這個屬性的存在，可以在輸入數值後，改變數值的顯示格式，然後再一次顯示在數值輸入框中，讓使用者確認。

proptMessage 的訊息為欄位獲得焦點 (focus) 的提示輸入訊息。

missingMessage 是在欄位失去焦點 (blur) 卻沒有輸入值時的警告訊息

invalidMessage 欄位的輸入值不合格式要求 (invalid) 時的錯誤訊息。

rangeMessage 是在輸入數值超出允許數值的範圍時，所要顯示的訊息。

tooptipPosition 需給予一個指定方位的陣列，訊息會依陣列中方位的前後次序，在螢幕上尋找合適的空間顯示訊息。範例中給的值是 "['below', 'above']"，因此訊息會優先出現在欄位的下方，如果此時欄位已經在流覽器視野 (viewport) 的最下方時，訊息就會採用第二順位的位置，出現在欄位的上方。如果屬性值是 "['after', 'before']" 時，訊息就出現在欄位的右方，右方沒有位置時，就出現在左方，以此類推。也可以把四個方向的值都放到陣列中，讓流覽器在上下左右找個最合適的位置顯示訊息。

訊息在顯示時，用的是 dijit/Tooltip 這個元件，字型的大小比 HTML 預設 title 屬性的字型要大些，看得比較清楚。

Script

dijit/form/ValidationTextBox

簡介

檢核文字框 (ValidationTextBox) 的模組名稱是 dijit/form/ValidationTextBox 。這個模組是用來輸入文字資料，同時對輸入的資料做條件檢核。

網頁應用系統一般的習慣是在前端（流覽器）檢核輸入資料的格式及其正確性，而業務邏輯的正確性則在後端（伺服器）上做檢查。而檢核項目是屬於資料的正確性或是業務邏輯的正確性，則需要小心界定。特別是數值的部份，舉例來說，「購買數量的上限」到底是屬於資料的正確性，還是屬於業務還輯的正確性？如果劃分為資料的正確性而在前端做檢核，當變更購買數量上限時，所有在前端有用到這個欄位的網頁都得要做修正，除非特別為這個欄位建立一個類別 (Class) 而在類別裡定義檢核的條件。如果在後端做檢核，理論上而言，只要修改一個地方即可；但如果後端的程式架構沒有設計好，檢核條件都寫死在各程式中，修改起來，恐怕也很讓人頭痛。

範例

範例中展示一個文字輸入檢核框。

欄位輸入提示訊息：

圖 1. 提示訊息

欄位未輸入值的警告訊息，警告訊息在點按驚嘆號或欄位時才會出現：

圖 2. 警告訊息

欄位值格式錯誤的訊息，每輸入一個字元後都會立即做檢核，一檢查到錯誤，就會出現錯誤訊息：

圖 3. 錯誤訊息

CSS

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

input, textarea{} 將輸入欄位的字型改成定寬 (Fixed-Width) 字型，這樣欄位的寬度比較好計算。

HTML

<body class="claro">
    身份證字號：
    
</body>

當套用 dojo 的外觀時， HTML 中的 size 屬性不起作用，一定得用 style 去設定欄位寬度，而且長度還很不好抓，實驗結果大約是：字母數 x 0.7em。如果修改了 font-size 屬性，也許又得做實驗了。

proptMessage 的訊息為欄位獲得焦點 (focus) 的提示輸入訊息。

missingMessage 是在欄位失去焦點 (blur) 卻沒有輸入值時的警告訊息

invalidMessage 欄位的輸入值不合格式要求 (invalid) 時的錯誤訊息。

訊息在顯示時，用的是 dijit/Tooltip 這個元件，字型的大小比 HTML 預設 title 屬性的字型要大些，看得比較清楚。

regExp 定義欄位值的有效輸入格式，用以檢核欄位的輸入值。

Script

因為用宣告法產生介面元件，Javascript 程式中沒有做其它事。

dijit/form/Button

簡介

按鈕 (Button) 模組的名稱是 dijit/form/Button。在網頁應用中，按鈕是最常見的介面元件。論尺寸，則大小都有；說外觀，則各式各樣。但嚴格來說，作用只有一個；就是讓使用者在按下按鈕後，觸發一個事件，讓應用程式採取必要的回應動作。

範例

範例中以程式法建立四個按鈕，顯示在 Chrome 中時，如下圖所示：

圖 1. Button 範例

CSS

<style>

</style>

CSS 中沒有特殊的樣式設定。

HTML

<body class="claro">
    
    
    
    
</body>

HTML 的部份很簡單，就直接建立四個按鈕的掛載節點。

Script

四個按鈕都是直接用程式產生，沒有用到宣告法，因此沒有必要呼叫剖析器 (parser) 去剖析 HTML。也因為不用等剖析器去產生所有用宣告法產生的介面元件，所以也不用呼叫 ready()。其實連 parser 及 ready 這兩個模組都不用在 require() 中載入，這也是程式法產生介面的好處。
第 12 行及第 19 行到第 21 行，展示了二種用程式法建立按鈕，在按下按鈕觸發點按 (click) 事件時，兩種呼叫函式的寫法。這兩種寫法沒有所謂對錯，或哪一種寫法比較好，全看喜好而定。但第 19 行到第 21 行的寫法，函式不能共用；如果有很多按鈕的行為模式都很像時，也許該用第 12 行的寫法，函式中可以判斷觸發事件 (Event) 的屬性值，判斷是哪一個按鈕觸發事件，再決定該如何處理。要使用哪一種，就和個人寫程式的習慣有關了。

由範例中可以看出，使用 dojo 建立一個一般的按鈕並不難。按鈕的尺寸會依標示 (Label) 的長短及圖像的大小，自行調整。如果要變更按鈕的長相，像是把所有的按鈕都變成等寬，讓畫面好看一些，事情就有點複雜了。

補述

如果由 Chrome 的「開發者工具」去檢視最終的 HTML 碼，一個尚未使用 dojo 「裝飾」過的按鈕，HTML 碼如下：

在用 dojo 裝飾過後，最終的 HTML 碼如下：

在這麼長串的 HTML 碼中，要用 CSS 去調整按鈕的外觀，一時還真有無從下手的感覺。如果只是要改變按鈕的寬度，有個簡單一點的方法是在 <button> 的標記中，再加一組具有類別 (class) 屬性的 <div> 或 <span> 標記，把按鈕的標示放在其中。例子如下：

再補上 CSS 碼如下：

.equalWidth {
  width:200px;
}

也就可以搞定這件事了，如果還要改變其它的屬性，就得好好研究上面那一大串的 HTML 碼，看看要如何變更其 CSS 的設定。例如要改變標示 (label) 的顏色成為紅色，就得設定:

#btn1_label {
  color:red";
}

訂閱：文章 (Atom)

2015年11月19日 星期四

2015年10月20日 星期二

2015年10月14日 星期三

2015年10月11日 星期日

2015年10月10日 星期六

2015年9月29日 星期二

2015年11月19日星期四

2015年10月20日星期二

2015年10月14日星期三

2015年10月11日星期日

2015年10月10日星期六

2015年9月29日星期二