Dojo Toolkit 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 提供的物件 (續)

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 • JavaScript <button id="myButton">Click me!</button> <div id="myDiv">Hello World!</div> require(["dojo/on", "dojo/dom", "dojo/dom-style", "dojo/domReady!"], function(on, dom, domStyle, mouse) { varmyButton = dom.byId("myButton"), myDiv = dom.byId("myDiv"); on(myButton, "click", function(evt) { domStyle.set(myDiv, "backgroundColor", "blue"); }); });

DOM 事件與 DOJO 事件 參考文件: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) { varmyButton = 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){ varbutton = 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是要放置按鈕的位置 • 通常是某個 HTMLDIV，如:<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){ varwidget = 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 函數即可，第一個參數便不再需要傳入要連結事件的物件 • 其餘參數與DojoEvent 的參數均相同

常用的 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 • HTML require(["dijit/form/Button", "dojo/dom", "dojo/domReady!"], function(Button, dom){ // Create a button programmatically: varmyButton = new Button({ label: "Click me!",// label 屬性 onClick: function(){ //OnClick 事件 // Do something: dom.byId("result1").innerHTML += "Thank you! "; } }, "progButtonNode"); }); <button id="progButtonNode" type="button"></button> <div id="result1"></div>

以 HTML 方式載入表單元件 • Dijit的元件除了用 JavaScript 語法產生之外也提供了以 HTML 語法載入的方式，讓使用上更為便利 • 需要額外執行語法的分析程式 • 或者在載入 dojo 時設定自動分析語法，加入 parseOnLoad設定，一般常用此方式 • 往後在使用時只需要載入 dojo/parser require(["dojo/parser"], function(parser){ parser.parse(); }); <script type="text/javascript" src="dojo/dojo.js" data-dojo-config="parseOnLoad: true"></script> 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 PHP 查詢 AJAX 回應 JSON 更新

課後練習 • 試用 Dijit完成以下畫面

Dojo Toolkit Basic

Dojo Toolkit Basic

Presentation Transcript

zend framework and dojo toolkit

Shorikan Dojo

Creating AJAX-Powered Forms with the Dojo Toolkit

.NET Dojo

Dojo Toolkit

Coding Dojo

Coding dojo

Dojo

Classroom Dojo

Dojo toolkit

Coding Dojo

Coding dojo

Dojo Secure

Coding Dojo

Dojo: An Accessible JavaScript Toolkit

A Basic Toolkit

Zend Framework and Dojo Toolkit

Data Visualization with Dojo toolkit

Coding dojo