dojo toolkit basic n.
Download
Skip this Video
Loading SlideShow in 5 Seconds..
Dojo Toolkit Basic PowerPoint Presentation
Download Presentation
Dojo Toolkit Basic

Loading in 2 Seconds...

play fullscreen
1 / 38

Dojo Toolkit Basic - PowerPoint PPT Presentation


  • 273 Views
  • Uploaded on

Dojo Toolkit Basic. IDIC By Cwlin. JavaScript Framework. 隨著網路的時代進步,網頁瀏覽器不再如以往, Internet Explorer 一家獨立, Mozilla Firefox, Google Chrome, Opera 等 … 瀏覽器的競爭越來越激烈 除此之外,手機與平板的發展成熟, 瀏覽 網頁的裝置不再只有桌上型電腦 網頁前 端 程式設計,最容易遇到的問題就是相容性,不同 瀏覽器、不同 裝置、不同畫面都會讓顯示出來的結果不如 預期 一致

loader
I am the owner, or an agent authorized to act on behalf of the owner, of the copyrighted work described.
capcha
Download Presentation

PowerPoint Slideshow about 'Dojo Toolkit Basic' - duane


An Image/Link below is provided (as is) to download presentation

Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.


- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript
dojo toolkit basic

Dojo Toolkit Basic

IDIC

By Cwlin

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

    <!-- load Dojo -->

    <script src="./dojo/dojo.js"data-dojo-config="async: true"></script>

</body>

</html>

slide6
載入元件
  • 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物件的函數
slide7
範例:以滑入的方式顯示文字

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 dom
Dojo DOM
  • Dojo 提供 DOM 相關函數可以用來替代原始 DOM 的寫法並解決瀏覽器相容性的問題
  • DOM 的相關函數大至可分為四類
    • 取得 DOM 物件
    • 建立 DOM 物件
    • 移動DOM 物件
    • 移除 DOM 物件
  • DOM 是 JavaScript 操作 HTML 顯示內容最基礎的方法,所有畫面上動態更新的內容及樣式都是透過操作 DOM 的方式完成
slide11
範例 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>

slide12
取得 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";

});

slide13
建立 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");

});

slide14
移動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");

});

slide15
移除 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);

});

slide16
練習
  • 設計一個清單與四個函數,四個函數可以分別做到以下動作
    • 新增
      • 新增清單項目
    • 上移
      • 將指定的清單項目下移
    • 下移
      • 將指定的清單項目下移
    • 刪除
      • 刪除指定的清單項目
dojo event
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
DOM 事件與 DOJO 事件

參考文件:http://dojotoolkit.org/reference-guide/1.9/quickstart/events.html

slide19
事件參數
  • 事件參數是記錄在當事件發生時的相關資訊
    • 例如:滑鼠點擊的目標、位置、點擊的按鍵…等
  • 事件參數會隨著事件發生時執行的函數傳入
  • 可以透過 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);

        });

});

slide20
練習
  • 設計一個清單與四個按鈕,四個按鈕可以分別做到以下動作
    • 新增
      • 新增清單項目
    • 上移
      • 將點選的清單項目下移
    • 下移
      • 將點選的清單項目下移
    • 刪除
      • 刪除點選的清單項目
slide21
參考資源
  • 範例
    • 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提供了許多的表單元件,由於 Dijit牽涉到表單元件的樣式在使用之前需要額外載入相關的佈景
  • 以下範例使用 claro佈景

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <title>Hello Dijit!</title>

    <!-- load Dojo -->

<script src="./dojo/dojo.js" data-dojo-config="async: true"></script>

<link rel="stylesheet" href="./dojo/dijit/themes/claro/claro.css">

</head>

<!-- set the claro class on our body element -->

<body class="claro">

    <h1 id="greeting">Hello</h1>

</body>

</html>

dijit1
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>
dijit2
Dijit表單元件 (續)
  • 在網頁當中所有畫面的表達是以 HTML 與 CSS 為基礎
  • 因此在使用 Dijit元件時,都會需要指定一個位置 (透過 id)當元件產生後要放置的位置
    • 如: 以上範例的 someNode
  • 所有的 Dijit元件都是以物件導向的方式所開發出來的、可以使用屬性、方法的方式去設定相關的顯示方式、執行元件本身的功能,如上例中:
      • label屬性用來設定按鈕上要顯示的文字
      • on函數用來加入要執行的事件
  • 每一個元件都有不同的屬性及函數用法需要視其提供的功能而定,而這些會依實際使用的程度去查詢相關的文件 (API 文件,用法文件)
slide25
API 文件
  • API 指的是 Application Programming Interface 應用程式介面
    • 是指一個物件用來提供給它人存取的屬性及方法
  • API 文件是用描述一個物件,提供了那些屬性及方法可以讓其它人存取使用
  • Dojo 的 API 文件存放於
    • http://dojotoolkit.org/api/
  • 有關每一個 Dojo 元件實際的詳細功能 (屬性/方法) 都可以從 API 文件中查詢的到
slide26

元件清單

用法

建構子參數說明

可用的屬性

可用的方法

支援的事件

dijit3
取得 Dijit元件
  • Dijit元件其實是由許多 DOM 物件所組合成的複合元件
  • 若要使用這些元件,並不能直接透過 dom.byId的方式
    • 透過 dom.byId會只取得某個部份並不是完整的 Dijit元件
  • 要取得 Dijit元件我們會使用 dijit/registry,如下範例:

require(["dijit/registry"], function(registry){

varwidget = registry.byId("myWidgetId");

});

dijit event
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 的參數均相同
dijit4
常用的 Dijit元件
  • dijit/form/Button
    • 按鈕
  • dijit/form/VaildationTextBox
    • 驗正文字輸入框
  • dijit/form/DateTextBox
    • 日期輸入框
  • dijit/form/FilteringSelect
    • 搜尋下拉式選單
  • dijit/form/Dialog
    • 對話窗
  • 相關資訊
    • http://dojotoolkit.org/reference-guide/1.9/dijit/
dijit5
Dijit元件
  • http://download.dojotoolkit.org/release-1.9.1/dojo-release-1.9.1/dijit/themes/themeTester.html
dijit form button
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>

slide32
以 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"]);

slide33
以 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元件的程式
slide34
程式搛寫與標籤宣告

標籤宣告

程式撰寫

<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>

slide35
程式搛寫與標籤宣告 (續)
  • 使用標籤宣告的方式用法較為簡易在開發時較節省時間,但由於需要額外執行 HTML 分析器的原因執行的效率較差
  • 使用標籤宣告的方式較無法配合程式的語法彈性運用物件,若遇到較複雜的開發仍需要使用程式搛寫的方式
  • 一般而言在開發上我們會使用標籤宣告的方式,主要是節省開發時間且簡單、易於維護,但在必要的時候 (如: 動態產生) 才會選擇以程式搛寫的方式
slide36
使用者介面的設計模式
  • 使用者介面的設計方式採用事件的驅動(Event Driven),不同的元件會有不同的驅動方式,如:
    • 按鈕(Button)
      • OnClick 當滑鼠點擊
    • 文字方塊(TextBox)
      • OnChange當內容更改時
  • 詳細事件可以從 API 文件查詢
  • 開發著可以根據事件的發生執行對應的動作
  • 如右圖: [儲存] 按鈕被點擊時會將資料送回伺服器、[關閉] 按鈕被點擊時會將視窗關閉
slide37
AJAX
  • 以往 JavaScript 僅能在瀏覽器端動作,是無法從伺服器傳送/取得資訊的,因此在應用上較為侷限,只常被做為資料驗証使用
  • 透過 AJAX 的方式瀏覽器可以透過使用者驅動事件,將資訊傳送至伺服器並取得回應的結果,根據結果以不同的方式呈現在畫面上方

瀏覽器端

伺服器端

請求

GET/POST

點選

使用者介面

事件

JavaScript

PHP

查詢

AJAX

回應

JSON

更新

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