熊伯的外接硬碟: 11月 2015

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年11月17日星期二

dojo/_base/lang

簡介

dojo/_base 目錄下包含了眾多的模組，這些模組是整個 dojo 的基石，支撐著整個 dojo 的架構。其中的 dojo/_base/lang 基本上是一個用來擴充 Javascript 語言功能的一個模組。其所提供的函式多用在 Javascript 物件及物件屬性的操作上。列示常用的函式如下：

exists()
setObject()
getObject()
clone()
mixin()
delegate()
hitch()
partial()
replace()
trim()

這段介紹三個函式：

exists(path, obj): 測試物件 obj 中是否存在著名為 path 的屬性。path 可以是由 "." 分隔的字串，dojo 會延著節點測試屬性值是否為 undefined，直到產生結果為止。若路徑最終的屬性存在時，傳回 true；若路徑中任一節點值為 undefined 時，則傳回 false。 obj 參數在沒有指定時，預設為全域變數－ window 物件。

setObject(path, value, obj): 設定物件中某一屬性的值，若路徑中有任一屬性節點尚未定義，則建立該屬性，一直到路徑中所有的屬性都存在後，將 value 指派給該屬性值。

getObject(path, boolean): 從全域變數 window 為起點，取得 path 路徑中的值。boolean 預設為 false，若路徑所指定的物件不存在，則傳回 undefined。當 boolean 設定為 true 時，，也用全域變數 window 做為路徑的起點，逐一建立路徑中的所有屬性後，最終傳回一個空物件 {}。

setObject() 和 getObject() 乍看之下，很像一般的 setValue() 和 getValue() 函式對。其實不然，setObject() 和 getObject() 兩者在用法上和傳入的參數，都有很大的不同，這點要特別留意。

Script

第 24 行的結果之所以會是 false，是因為在 function() 中（第 8 行）用 var obj 來定義 obj，因此 obj 只存在於 function() 中，並非 global 變數，因此不會加到全域變數 window 之下。第二個參數又沒設定，預設為 window。此時，window 下並沒有 obj 這個變數，因此傳回值為 false。
第 27 行的 getObject() 第二個參數值為 false，所以不會自動建立物件，因此傳回值為 undefined。第 28 行的 getObject() 第二個參數值為 true，而路徑所指定的物件並不存在，所以會在全域變數 window 下自動建立該物件，並傳回一個空物件 - {}。

由第 29 行可以理解到第 28 行的物件己經被建立在全域變數 window 之下。

2015年11月10日星期二

dijit/Tree

簡介

dijit/Tree 是將資料以樹狀結構的方法顯示在畫面上，其資料結構很類似作業系統中的檔案目錄結構。dijit/Tree 在使用時用到的模組還不算少，首先要有一個 dijit/store 中的模組來存放要顯示的資料；其次要有一個 dijit/tree/model 做為介面將存放在 store 中的資料餵給 dijit/Tree 模組；如果 Store 中資料的改變要能即時反應在 dijit/Tree 中，要用一個 dojo/store/Observable 模組將 dijit/store 模組包起來，這樣當 Store 中的資料改變時， Observable 模組才能通知 Tree 模組在畫面上顯示變更的資料。

此外，在 store 中需實作 getChildren() 函式，傳回指定物件的所有子物件，這個函式在 store 中預設沒有提供。在 model 中則需實作 mayHaveChildren() 函式，這個函式得判斷指定物件是否有子物件存在，然後傳回 true 表示有子物件，傳回 false 表示沒有子物件。這個函式是用來判斷該物件的節點要使用什麼圖像來表示。

範例

在範例中，使用 dojo/store/Memory 將資料存放在記憶體中，再用 dojo/store/Observable 將 dojo/store/Memory 包起來；這樣，每當有資料變更時，才能通知 dijit/Tree 呈現變更後的結果。隨後建立一個 dijit/tree/ObjectStoreModel，這是因為範例中用的是 dojo/store/Memory，所以必須配合使用 dijit/Tree/ObjectStoreModel；如果用的是 dojo/data 中舊的 store 模組，則須搭配使用舊的 model，像是 dijit/tree/TreeStoreModel 或是 dijit/tree/ForestStoreModel。

在網頁下載 3 秒後，會在 "/" 下加入一個名為 "home" 的新物件節點，並會在畫面中顯示出新加入的節點。

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

第 24~33 行定義 store 中的資料，每個子物件具有一個 parent 屬性，指出哪個物件為其父物件，這種格式稱為關聯式 (relational)，只有一層的資料結構。如果 Tree 中的資料需要動態改變時，只能使用這種格式。
第 36~42 行建立一個 store，並實作 getChildren() 函式。
第 45 行用一個 dojo/store/Observable 將 store 包覆，讓它能監控資料變更，並通知 dijit/Tree。
第 48~58 行建立 dijit/tree/ObjectStoreModel，並實作 mayHaveChildren() 函式，若有任何物件的 parent 屬性值等於傳入物件的 id 屬性值，即表示該物件為傳入物件的子物件。有子物件時，query 後的結果其 length 會大於 0。
第 61~72 行建立 dijit/Tree，並呼叫 startup() 函式，將其在畫面上呈現。
showRoot:true 設定要顯示根節點，true 為預設值。設定為 false 時，會隱藏根節點。
第 75~77 行設定在下載網頁 3 秒後，在 store 中加入一個 id 為 "home" 的物件，物件加入後，dijit/Tree 會在畫面上顯示新物件的加入。注意這裡是使用 observableStore 而不是 treeStore。

2015年11月4日星期三

dijit/layout/TabContainer

簡介

dijit/layout/TabContainer 也許是除了 dijit/layout/BorderContainer 之外，另一種廣泛被使用的網頁佈局元件了。外觀的變化也多，標箋可以依設計放在內容的上、下、左，右四個方向的其中一個。若標箋過多，畫面上容納不下，還會自動產生可以移動標箋的按鈕，或依設定產生一個下拉式的選單，直接選取所要查看的內容。

範例

下圖是寬度足以容納所有標箋時的樣子。在網頁下載 3 秒後，會選定顯示 Tab_3 的內容；6 秒後，會在「主控台」列示當時展示內容的 dijit。

下圖是寬度不足以容納所有標箋時，自動產生向左、向右箭頭的樣子。

下圖是寬度不足以容納所有標箋時，自動產生向左、向右箭頭，同時設定 useMenu:true，額外產生下拉式選單的樣子。

CSS

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

CCS 中沒有特別的設定。

HTML

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

HTML 裡只要設定一個掛載點既可。

Script

第 19~25 行建立一個 TabContainer 做為容器。
doLayout:true 設定固定容器的大小，不隨展示內容的多寡而變更容器的大小。
tabPosition 設定標箋所在的位置，有 top, bottom, left-h 及 right-h 四個值可以使用。
useMenu:true 設定會在標箋過多時，額外生成一個下拉式的選單。

第 26~54 行依序建立 5 個 ContentPane 並加入 TabContainer 之中，第一個 Tab 設定為可以關閉，此時在標箋的標示右方會出現一個 X 的符號，按下此符號，會移除這個標箋及其內容。

第 58~60 行建立一個定時器，，在網頁下載 3 秒後，用程式選擇顯示 Tab_3 的內容。
第 61~63 行建立另一個定時器，，在網頁下載 6 秒後，在「主控台」列示當時顯示內容之標箋的 dijit 元件。

dijit/layout/StackContainer

簡介

dijit/layout/StackContainer 是 dojo 中對網頁內容的一種佈局方式。取名叫 "Stack"，就知道內容是像堆疊一般堆在一起，在上方有個控制器，控制器中有對應各份內容的按鈕，點按按鈕，即會顯示對應的內容。

範例

範例中用程式法建立了一個 StackContainer 以及 StackController 做為控制器。另外在控制器的前後端各加了一個按鈕，讓展示的內容可以向前，或向後以輪轉的方式顯示內容。在範例中使用了 dojox/layout/ContentPane 做為內容的容器，因此所有在 dojox/layout/ContentPane 可以設定的參數或可使用的函式，都可以被設定和使用。網頁下載 3 秒後，會在「主控台」中列示當時顯示內容頁的 dijit 物件。

CSS

<style>
html {
    width:100%;
    height:100%;
}
body{
    width: 1000px;
    height:100%;
    margin:0 auto;
    padding-top:20px;
}
.box {
    width:400px;
    height:300px;
}
.left {
    float:left;
}
.right {
    float:right;
}
</style>

.box 定義了整個 StackController 加上 StackContainer 的尺寸。如果控制器的寬度過大，版面就會亂掉，所以要當握控制器寬度及整個元件寬度的配合。
.left 和 .right 定義了將向前按鈕和向後按鈕置放於控制器的左右兩端。

HTML

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

HTML 中，定義了各個元件的掛載點。將兩個按鈕放在 <span> 的標記中，藉著控制 <span> 標記的位置來控制按鈕的位置。

Script

第 22~25 行建立了一個 StackContainer 的容器。
doLayout:true 固定了 StackContainer 容器的大小。如果設定為 false 時，容器會隨著顯示內容的的大小而改變。
第 27~40 行依序建立了三個 ContentPane 並加入 StackContainer 之中。
title 設定控制器中按鈕的標示。
第 42~45 行建立 stackController。
containerId 屬性值指定表控制的 StackContainer 名稱。
第 46~58 建立兩個按鈕，一個用 back() 函式來控制向前輪轉，一個用 forward() 函式來控制向後輪轉。
第 63~66 行建立個定時器，於網頁下載後 3 秒在「主控台」中列示當時顯示內容頁的 dijit 物件。
selectedChildWidget 屬性可以取得目前顯示內容之 ContentPane 的 dijit。

2015年11月3日星期二

dijit/layout/AccordionContainer

簡介

dijit/layout/AccordionContainer 是 dojo 的一種佈局方式，顧名思義，它就像一個手風琴 (accordion)，透過點按抬頭欄 (title bar) 以顯示內容。

範例

範例中用程式法建立了一個 AccordionContainer。也在每個抬頭欄的前方加上了表示展開和收歛的小箭頭。在範例中使用了 dojox/layout/ContentPane 做為內容的容器，因此所有在 dojox/layout/ContentPane 可以設定的參數或可使用的函式，都可以被設定和使用。網頁下載 3 秒後，會在「主控台」中列示當時顯示內容頁的 dijit 物件。

CSS

<style>
html {
    width:100%;
    height:100%;
}
body{
    width: 1000px;
    height:100%;
    margin:0 auto;
    padding-top:20px;
}
.claro  .dijitAccordionArrow {
    background:url("js/libs/dijit/themes/claro/images/spriteArrows.png") no-repeat -14px top;
    width:7px;
    height:8px;
    margin-top:-1px;
}
.claro  .dijitAccordionTitleSelected .dijitAccordionArrow {
    background:url("js/libs/dijit/themes/claro/images/spriteArrows.png") no-repeat;
    margin-top:-1px;
}
</style>

.claro .dijitAccordionArrow 設定了表示內容收歛時用的小箭頭圖像，收歛時的箭頭朝右。
.claro dijitAccordionTitleSelected . dijitAccordionArrow 設定了內容展開時的小箭頭圖像，展開時箭頭朝下。
要特別注意圖像所在內容的路徑，必須依照檔案的目錄結構，修改 url 路徑的值。

HTML

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

HTML 中只需設定一個掛載點。

Script

第 19~22 行建立了一個 AccordionContainer 的容器。
doLayout:true 固定了 AccordionContainer 容器的大小。如果設定為 false 時，容器會隨著顯示內容的的大小而改變。
第 23~36 行依序建立了三個 ContentPane 並加入 AccordionContainer 之中。
title 設定抬頭欄的內容。
content 設定所要顯示的內容，內容可以是 HTML 碼。
因為是使用 dojox/layout/ContentPane，所以也可以用 href 這個屬性來動態載入內容。
selected:true 可以用來指定在顯示 AccordionContainer 時，預設要顯示那一份內容。
selectedChildWidget 屬性可以取得目前顯示內容之 ContentPane 的 dijit。
第 39~42 行設定一個定時器，於網頁下載後 3 秒在「主控台」中列示當時顯示內容頁的 dijit 物件。

2015年11月1日星期日

dojo/topic

簡介

dojo/topic 是另一個和 dojo/on 一樣可以藉由某事的發生，而針對某事採取對應行動的機制。不同的地方在於：dojo/on 比較偏向單一的事件，單一的對應行動；dojo/topic 則偏向於藉由發佈單一的主題訊息 (topic)，而相對會有至少有一個及一個以上的對應行動。

topic 有二個常用的函式：

publish(message, obj):: 用來發佈一項主題訊息，第一個參數是所要發佈的主題訊息，為字串型態，字串的內容自定。第二個是隨發佈主題訊息所傳遞的相關資料，為物件型態，物件的內容自定。
var handle = subscribe(message, action):: 用來訂閱主題訊息。第一個參數是所要訂閱的主題訊息，為字串型態，字串的內容須和發佈的主題訊息內容相同。第二個參數則是收到訊息後所要採取的對應行動，型態為函式，函式的參數為 publish() 函式所傳遞的物件。傳回的變數 handle，具有 remove() 函式，用 handle.remove() 可以取消對主題訊息的訂閱。

範例

範例中建立了七個灰色方塊，點按方塊時，該方塊會訂閱主題訊息，程式每三秒會發佈一次主題訊息，有訂閱主題訊息的方塊則會在接到主題訊息時，改變其背景顏色。範例中不能取消主題訊息的訂閱。

CSS

<style>
html {
    width:100%;
    height:100%;
}
body {
    margin: 0 auto;
    width:1000px;
    height:100%;
    padding-top:20px;
}
.box {
    box-sizing:box-sizing;
    margin:10px;
    width:60px;
    height:60px;
    border:3px solid gray;
    background-color:#EEEEEE;
    float:left;
}
.box:hover {
    cursor:pointer;
}
</style>

CSS 中 .box 定義方塊的樣式， .box:hover 定義當游標移到方塊上方時，改變游標的樣式。

HTML

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

HTML 中，定義七個方塊，在點按方塊時，會呼叫 app.subscribe() 函式訂閱主題訊息。

Script

第 22 行定義一個含有彩虹七種顏色的字串陣列。
第 25~27 行則是各方塊訂閱主題訊息及所採取之行動的函式。訂閱的主題為 "changeColor"。
第 30~32 行定義每隔 3 秒鐘，，發佈一次 "changeColor" 主題訊息，發佈主題訊息時，並沒有相關的資料要傳遞，所以第二個參數為一個 null 指標。

訂閱：文章 (Atom)

2015年11月19日 星期四

2015年11月17日 星期二

2015年11月10日 星期二

2015年11月4日 星期三

2015年11月3日 星期二

2015年11月1日 星期日

2015年11月19日星期四

2015年11月17日星期二

2015年11月10日星期二

2015年11月4日星期三

2015年11月3日星期二

2015年11月1日星期日