06.1 Dojo Basic

Transcript 06.1 Dojo Basic

Dojo Toolkit Basic
IDIC
By Cwlin
JavaScript Framework
• 隨著網路的時代進步，網頁瀏覽器不再如以往，Internet
Explorer 一家獨立，Mozilla Firefox, Google Chrome, Opera
等…瀏覽器的競爭越來越激烈
• 除此之外，手機與平板的發展成熟，瀏覽網頁的裝置不再
只有桌上型電腦
• 網頁前端程式設計，最容易遇到的問題就是相容性，不同
瀏覽器、不同裝置、不同畫面都會讓顯示出來的結果不如
預期一致
• 市面上玲瑯滿目的 JavaScript Framework，如: jQuery, Dojo,
ExtJS, YUI 等，都只為了一個目地
• 解決相容性的問題、加速開發
• 然而每一套 Framework 的使用方法都不同，特色與支援的
程度也不盡相同，使用時就必須依需求審慎選擇
Dojo Toolkit
• 免費且開放
• 解決瀏覽器相容性問題
• 包含: DOM/事件/AJAX
• 提供完整的進階的表單元件
• 支援繼承方式開發元件
Dojo Toolkit 的架構
• Dojo
• 解決 JavaScript基礎相容性的問題
• 如: DOM 操作、事件、AJAX
• Dijit
• 提供進階的表單元件
• HTML 所提供的表單元件並不多，其餘需要透過 JavaScript 實作
• Dijit 是以 Dojo 為基礎所開發的表單的元件
• Dojox
• 提供以 Dojo/Dijit 為基礎開發的應用功能
• 如: DataGrid, Chart 等
使用 Dojo (1.9)
• 使用 Dojo 只需像使用一般 JavaScript 一樣，將 Dojo 的檔案
引用
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Tutorial: Hello Dojo!</title>
</head>
<body>
<h1 id="greeting">Hello</h1>

<script src="./dojo/dojo.js" data-dojo-config="async: true"></script>
</body>
</html>
載入元件
•
•
•
•
Dojo Toolkit 由很多物件所組成
每一個物件提供不同的功能
當我們需要使要到其中的功能，會需要先載入相關的物件
例: 使用 Dojo 所提供的 DOM 功能
require(["dojo/dom", "dojo/domReady!"], function(dom){
var greeting = dom.byId("greeting");
greeting.innerHTML += " from Dojo!";
});
• dojo/dom
• 要引用的物件位置，使用陣列表達
• dom
• 載入的物件，若需要載入多個物件，就會有多個參數
• byId
• dom 物件的函數
範例: 以滑入的方式顯示文字
require(["dojo/dom", "dojo/fx", "dojo/domReady!"], function(dom, fx){
// The piece we had before...
var greeting = dom.byId("greeting");
greeting.innerHTML += " from Dojo!";
// ...but now, with an animation!
fx.slideTo({
top: 100,
left: 200,
node: greeting
}).play();
});
•
•
•
•
dojo/fx 提供了視覺效果的功能
當需要同時使用多個物件可以增加載入的套件
傳入的物件與載入元件的順序相同
當物件傳入函數便可以直接使用
Dojo 提供的物件
模組
dojo/dom
dojo/dom-attr
dojo/dom-class
dojo/dom-construct
dojo/dom-form
描述
提供的函數
核心 DOM 功能
byId()
isDescendant()
setSelectable()
DOM 屬性功能
has()
get()
set()
remove()
getNodeProp()
DOM 類別功能
contains()
add()
remove()
replace()
toggle()
DOM 建立功能
toDom()
place()
create()
empty()
destroy()
表單處理功能
fieldToObject()
toObject()
toQuery()
Dojo 提供的物件 (續)
字串處理功能
objectToQuery()
queryToObject()
dojo/dom-geometry
DOM 物件大小相關功能
position()
getMarginBox()
setMarginBox()
getContentBox()
setContentSize()
getPadExtents()
getBorderExtents()
getPadBorderExtents()
getMarginExtents()
isBodyLtr()
docScroll()
fixIeBiDiScrollLeft()
dojo/dom-prop
DOM 屬性功能
get()
set()
DOM 樣式功能
getComputedStyle()
get()
set()
dojo/io-query
dojo/dom-style
Dojo DOM
• Dojo 提供 DOM 相關函數可以用來替代原始 DOM 的寫法並
解決瀏覽器相容性的問題
• DOM 的相關函數大至可分為四類
•
•
•
•
取得 DOM 物件
建立 DOM 物件
移動 DOM 物件
移除 DOM 物件
• DOM 是 JavaScript 操作 HTML 顯示內容最基礎的方法，所
有畫面上動態更新的內容及樣式都是透過操作 DOM 的方
式完成
範例 HTML
• 一般開發並不會由 JavaScript 產生所有的內容，只有需要做到動態
效果的部份，所以一開始我們都會有一份靜態的 HTML 表達整份文
件的架構，做為動態修改的範本
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Demo: DOM Functions</title>
<script src="./dojo/dojo.js"
data-dojo-config="async: true">
</script>
</head>
<body>
<ul id="list">
<li id="one">One</li>
<li id="two">Two</li>
<li id="three">Three</li>
<li id="four">Four</li>
<li id="five">Five</li>
</ul>
</body>
</html>
取得 DOM 物件
• 載入 DOM 的核心元件 dojo/dom
• 使用 dom.byId() 取得要更新的項目
// Require the DOM resource
require(["dojo/dom", "dojo/domReady!"], function(dom) {
node = dom.byId("one");
//更新第一個項目的內容
node.innerHTML = "One has been set";
});
建立 DOM 物件
• 要建立 DOM 物件需要載入 dojo/dom-construct
• 通常新物件會放置在即有 DOM 物件的前/後或裡面，因此仍會
需要載入 dojo/dom 以取得目標的 DOM 物件
• domConstruct.create(HTML 標籤類型, 屬性, 目標, 移動的位置)
• 移動的位置可分為 first/before/after，不填則是代表移置最後
require(["dojo/dom", "dojo/dom-construct", "dojo/domReady!"],
function(dom, domConstruct) {
var list = dom.byId("list"), three = dom.byId("three");
// 在清單內最後新增第六個項目
domConstruct.create("li", {
innerHTML: "Six"
}, list);
// 新增節點在第三項目之後
domConstruct.create("li", {
innerHTML: "Three and a half"
}, three, "after");
});
移動 DOM 物件
• 要移動 DOM 物件同樣需要載入 dojo/dom-construct
• 要移動的位置通常也會是某個 DOM 物件的前/後或裡面因此仍
會需要載入 dojo/dom 以取得目標的 DOM 物件
• domConstruct.place(DOM 節點, 目標, 移動的位置)
• 移動的位置可分為 first/before/after，不填則是代表移置最後
require(["dojo/dom", "dojo/dom-construct", "dojo/domReady!"],
function(dom, domConstruct){
// 將第三項移置清單的第一項
var list = dom.byId("list"), three = dom.byId("three");
domConstruct.place(three, list, "first");
// 將第三項移置第二項之前
var two = dom.byId("two"), three = dom.byId("three");
domConstruct.place(three, two, "before");
});
移除 DOM 物件
• 要清空DOM 物件同樣需要載入 dojo/dom-construct
• 如同前例同樣需要載入 dojo/dom 以取得目標的 DOM 物件
require(["dojo/dom", "dojo/dom-construct", "dojo/domReady!"],
function(dom, domConstruct) {
// 移除指定的項目
var one = dom.byId("one");
domConstruct.destroy(one);
// 清空清單中的所有項目
var list = dom.byId("list");
domConstruct.empty(list);
});
練習
• 設計一個清單與四個函數，四個函數可以分別做到以下動
作
• 新增
• 新增清單項目
• 上移
• 將指定的清單項目下移
• 下移
• 將指定的清單項目下移
• 刪除
• 刪除指定的清單項目
Dojo 事件(Event)
• 為了解決瀏覽器相容性問題 Dojo 提供了另一種事件的寫法
• 事件需要使用 dojo/on 物件
on(DOM 節點, "事件類型", 要執行的動作 (函數));
• 例: 當滑鼠點擊時將下方 DIV 顏色更改為藍色
• HTML
<button id="myButton">Click me!</button>
<div id="myDiv">Hello World!</div>
• JavaScript
require(["dojo/on", "dojo/dom", "dojo/dom-style", "dojo/domReady!"],
function(on, dom, domStyle, mouse) {
var myButton = dom.byId("myButton"),
myDiv = dom.byId("myDiv");
on(myButton, "click", function(evt) {
domStyle.set(myDiv, "backgroundColor", "blue");
});
});
DOM 事件與 DOJO 事件
DOM 事件
DOJO 事件
說明
onchange
change
當元件內容改變
onclick
click
當滑鼠點擊
onkeydown
keydown
當按鍵按下
onkeypress
keypress
當按鍵按下後放開
onkeyup
keyup
當按鍵放開
onmouseout
mouseout
當滑鼠移出元素
onmouseover
mouseover
當滑鼠經過元素
參考文件: http://dojotoolkit.org/reference-guide/1.9/quickstart/events.html
事件參數
• 事件參數是記錄在當事件發生時的相關資訊
• 例如: 滑鼠點擊的目標、位置、點擊的按鍵…等
• 事件參數會隨著事件發生時執行的函數傳入
• 可以透過 console.log() 記錄事件並運用瀏覽器的開發著工
具查看實際的內容
require(["dojo/on", "dojo/dom", "dojo/dom-style", "dojo/domReady!"],
function(on, dom, domStyle, mouse) {
var myButton = dom.byId("myButton"),
myDiv = dom.byId("myDiv");
on(myButton, "click", function(evt) {
console.log(evt);
});
});
練習
• 設計一個清單與四個按鈕，四個按鈕可以分別做到以下動
作
• 新增
• 新增清單項目
• 上移
• 將點選的清單項目下移
• 下移
• 將點選的清單項目下移
• 刪除
• 刪除點選的清單項目
參考資源
• 範例
• http://demos.dojotoolkit.org/demos/
• http://dojocampus.org/explorer/
• API
• http://dojotoolkit.org/api/1.9/
• http://dojotoolkit.org/reference-guide/1.9
Dijit 元件佈景主題
• Dijit 提供了許多的表單元件，由於 Dijit 牽涉到表單元件的
樣式在使用之前需要額外載入相關的佈景
• 以下範例使用 claro 佈景
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Hello Dijit!</title>

<script src="./dojo/dojo.js" data-dojo-config="async: true"></script>
<link rel="stylesheet" href="./dojo/dijit/themes/claro/claro.css">
</head>

<body class="claro">
<h1 id="greeting">Hello</h1>
</body>
</html>
Dijit 表單元件
• 表單元件的產生必須先載入對應的元件
• 例: 產生一個按鈕
require(["dijit/form/Button", "dojo/domReady!"], function(Button){
var button = new Button({
label: "Click Me!"
}, "someNode");
// Sets the event handling for the button
button.on("click", function(e){
console.log("I was clicked!", e);
});
});
• Button 表單物件需要使用 new 方式產生
• someNode 是要放置按鈕的位置
• 通常是某個 HTML DIV，如: <div id="someNode"></div>
Dijit 表單元件 (續)
• 在網頁當中所有畫面的表達是以 HTML 與 CSS 為基礎
• 因此在使用 Dijit 元件時，都會需要指定一個位置 (透過 id)
當元件產生後要放置的位置
• 如: 以上範例的 someNode
• 所有的 Dijit 元件都是以物件導向的方式所開發出來的、可
以使用屬性、方法的方式去設定相關的顯示方式、執行元
件本身的功能，如上例中:
• label 屬性用來設定按鈕上要顯示的文字
• on 函數用來加入要執行的事件
• 每一個元件都有不同的屬性及函數用法需要視其提供的功
能而定，而這些會依實際使用的程度去查詢相關的文件
(API 文件, 用法文件)
API 文件
• API 指的是 Application Programming Interface 應用程式介面
• 是指一個物件用來提供給它人存取的屬性及方法
• API 文件是用描述一個物件，提供了那些屬性及方法可以
讓其它人存取使用
• Dojo 的 API 文件存放於
• http://dojotoolkit.org/api/
• 有關每一個 Dojo 元件實際的詳細功能 (屬性/方法) 都可以
從 API 文件中查詢的到
元件清單
用法
建構子參數說明
可用的屬性
可用的方法
支援的事件
取得 Dijit 元件
• Dijit 元件其實是由許多 DOM 物件所組合成的複合元件
• 若要使用這些元件，並不能直接透過 dom.byId 的方式
• 透過 dom.byId 會只取得某個部份並不是完整的 Dijit 元件
• 要取得 Dijit 元件我們會使用 dijit/registry，如下範例:
require(["dijit/registry"], function(registry){
var widget = registry.byId("myWidgetId");
});
Dijit 事件(Event)
• 由於 Dijit 的元件繼承了 Dojo 的核心，因此在事件的使用
上與 DOM 的事件使用略有不同
// 連結 DOM 事件 "onclick"
var node = dom.byId("foo");
on(node, "click", function(){
});
// 連結 Dijit 事件 "onClick"
var widget = registry.byId("foo");
widget.on("click", function(){
});
• Dijit 元件使用事件只需要直接執行物件的 on 函數即可，第一個
參數便不再需要傳入要連結事件的物件
• 其餘參數與 Dojo Event 的參數均相同
常用的 Dijit 元件
• dijit/form/Button
• 按鈕
• dijit/form/VaildationTextBox
• 驗正文字輸入框
• dijit/form/DateTextBox
• 日期輸入框
• dijit/form/FilteringSelect
• 搜尋下拉式選單
• dijit/form/Dialog
• 對話窗
• 相關資訊
• http://dojotoolkit.org/reference-guide/1.9/dijit/
Dijit 元件
• http://download.dojotoolkit.org/release-1.9.1/dojo-release-1.9.1/dijit/themes/themeTester.html
dijit/form/Button
• JavaScript
require(["dijit/form/Button", "dojo/dom", "dojo/domReady!"], function(Button, dom){
// Create a button programmatically:
var myButton = new Button({
label: "Click me!", // label 屬性
onClick: function(){ // OnClick 事件
// Do something:
dom.byId("result1").innerHTML += "Thank you! ";
}
}, "progButtonNode");
});
• HTML
<button id="progButtonNode" type="button"></button>
<div id="result1"></div>
以 HTML 方式載入表單元件
• Dijit 的元件除了用 JavaScript 語法產生之外也提供了以
HTML 語法載入的方式，讓使用上更為便利
• 需要額外執行語法的分析程式
require(["dojo/parser"], function(parser){
parser.parse();
});
• 或者在載入 dojo 時設定自動分析語法，加入 parseOnLoad
設定，一般常用此方式
<script type="text/javascript" src="dojo/dojo.js"
data-dojo-config="parseOnLoad: true"></script>
• 往後在使用時只需要載入 dojo/parser
require(["dojo/parser"]);
以 HTML 方式載入表單元件
• Dijit 的元件除了用 JavaScript 語法產生之外也提供了以
HTML 語法載入的方式，讓使用上更為便利
• 在使用上要注意的三個地方
<body class="claro">
<button id="btn" data-dojo-type="dijit/form/Button"
data-dojo-props="onClick: function(){ alert('First button was clicked!'); }">
Click Me!
</button>
<script>
// load requirements for declarative widgets in page content
require(["dojo/parser", "dijit/form/Button", "dojo/domReady!"]);
</script>
</body>
• 在使用上要注意的三個地方
• data-dojo-type 為要使用的元件類型
• data-dojo-props 元件要設定的屬性及事件, 如: OnClick
• 要使用的元件仍需要 JavaScript 做載入，並且加入 dojo/parser 的項目
• dojo/parser 是用來分析 HTML 語法並套用 Dijit 元件的程式
程式搛寫與標籤宣告
標籤宣告
程式撰寫
<body class="claro">
<button id="btn2"
data-dojo-type="dijit/form/Button"
data-dojo-props="
iconClass: 'dijitIconNewTask',
showLabel: false,
onClick: function(){ alert('Clicked!'); }">
Click Me!
</button>
<script>
require([
"dojo/parser",
"dijit/form/Button",
"dojo/domReady!"]);
</script>
</body>
<body class="claro">
<div>
<button id="btn2"></button>
</div>
<script>
require([
"dijit/form/Button",
"dojo/domReady!"], function(Button) {
var button2 = new Button({
iconClass: "dijitIconNewTask",
showLabel: false,
label: "Click Me!",
onClick:
function(){ alert("Clicked!"); }
}, "btn2");
button2.startup();
});
</script>
</body>
程式搛寫與標籤宣告 (續)
• 使用標籤宣告的方式用法較為簡易在開發時較節省時間，
但由於需要額外執行 HTML 分析器的原因執行的效率較差
• 使用標籤宣告的方式較無法配合程式的語法彈性運用物件，
若遇到較複雜的開發仍需要使用程式搛寫的方式
• 一般而言在開發上我們會使用標籤宣告的方式，主要是節
省開發時間且簡單、易於維護，但在必要的時候 (如: 動態
產生) 才會選擇以程式搛寫的方式
使用者介面的設計模式
• 使用者介面的設計方式採用事
件的驅動(Event Driven)，不同
的元件會有不同的驅動方式，
如:
• 按鈕(Button)
• OnClick 當滑鼠點擊
• 文字方塊(TextBox)
• OnChange 當內容更改時
• 詳細事件可以從 API 文件查詢
• 開發著可以根據事件的發生執
行對應的動作
• 如右圖: [儲存] 按鈕被點擊時會
將資料送回伺服器、[關閉] 按
鈕被點擊時會將視窗關閉
AJAX
• 以往 JavaScript 僅能在瀏覽器端動作，是無法從伺服器傳
送/取得資訊的，因此在應用上較為侷限，只常被做為資料
驗証使用
• 透過 AJAX 的方式瀏覽器可以透過使用者驅動事件，將資
訊傳送至伺服器並取得回應的結果，根據結果以不同的方
式呈現在畫面上方
瀏覽器端
伺服器端
點選
查詢
請求
GET/POST
事件
使用者介面
JavaScript
更新
AJAX
回應
JSON
PHP
課後練習
• 試用 Dijit 完成以下畫面

06.1 Dojo Basic

Transcript 06.1 Dojo Basic

Directory