dojo tutorial

92
DOJO Tutorial DOJO I. Đánh giá về DOJO 3 II. Dojo User Interface 5 1. Giới thiệu về Dojo 5 2. Cài đặt DOJO 5 3. Dojo Hello World 6 4. Dojo Checkbox 9 5. Dojo Radio Button 10 6. Dojo Combo Box 10 7. Dojo Auto completer 11 8. Dojo Inline Edit Box 13 9. Dojo Inline Date TextBox 14 10. Number Spinner Button 15 11. Dojo Slider 16 12 Dojo StackContainer 17 13. Dojo TabContainer 18 14. Dojo Menu và Menu Item 20 15. Dojo Dialog Box 22 16. Dojo ToolBar 24 16.1 Code chương trình 25

Upload: cuong-nguyen

Post on 04-Nov-2014

102 views

Category:

Documents


1 download

TRANSCRIPT

Page 1: DOJO Tutorial

DOJO Tutorial

DOJOI. Đánh giá về DOJO 3

II. Dojo User Interface 5

1. Giới thiệu về Dojo 5

2. Cài đặt DOJO 5

3. Dojo Hello World 6

4. Dojo Checkbox 9

5. Dojo Radio Button 10

6. Dojo Combo Box 10

7. Dojo Auto completer 11

8. Dojo Inline Edit Box 13

9. Dojo Inline Date TextBox 14

10. Number Spinner Button 15

11. Dojo Slider 16

12 Dojo StackContainer 17

13. Dojo TabContainer 18

14. Dojo Menu và Menu Item 20

15. Dojo Dialog Box 22

16. Dojo ToolBar 24

16.1 Code chương trình 25

16.2 Kết quả hiển thị 26

17. Doko Progress bar 26

Page 2: DOJO Tutorial

18. Dojo Tool tips 27

19. Dojo Tree 28

20. Dojo AccordionContainer 30

21. Dojo BorderContainer 31

22. Dojo ColorPalette 33

23. Dojo Color Picker 34

24. Dojo drag and drop 35

25. Dojo Editor 37

26. Dojo Filtering Select 38

27. Dojo Google Blog Search 40

28. Dojo Google Web Search 40

29. Dojo Show and Hiden Dialog 40

30. Dojo SplitContainer 44

31. Dojo TitlePane 46

32. Dojo ToolTipsDialog 47

33. Dojo TimeSpinner 53

III. DOJO và AJAX 55

1. Dojo Toolkit Package System 55

2. Dojo Toolkit Libraries 56

3. Remoting via dojo.io.bind() 56

3.1 dojo.io.bind() 56

3.2 Transports 56

3.3 XMLHttp transport 57

Page 3: DOJO Tutorial

3.4 Iframe I/O Transport 57

3.5 ScriptScrIO transport 57

3.6 Cú pháp dojo.io.bind( ) 58

3.7 Ví dụ 1: Simple Request 58

3.8 Ví dụ 2: Simple request 58

3.9 Ví dụ 2: bắt lỗi 58

3.10 Ví dụ 3: 59

3.11. Chỉ định định dạng của response 59

3.12 Ví dụ 4: Dynamic content loading (getting javaScript string) 59

3.13 Ví dụ 5: chỉ định kiểu XMLHTTP Transport 60

3.14 Ví dụ 6: submission forms via a request 60

4. Demo: Remoting with dojo.io.bind() 60

4.1 Ví dụ 6: back button 60

4.2 Ví dụ 7: Forward Button 60

4.3 Ví dụ về Bookmarking 61

5. DOM Manupulation 61

5.1 Dojo DOM Manipulation Routines 61

6. Dojo Event System 62

6.1 Nắm bắt các sự kiện JavaScript 62

6.2 Các vấn đề của JavaScript Event Handling 62

6.3 Lý do sử dụng Dojo Event System. 62

6.4 dojo.event.connect(srcObj, “srcFunc”, “targetFunc”) 62

6.5 Dojo Event System: handling DOM Events 63

Page 4: DOJO Tutorial

6.5.1 Ví dụ 1: DOM event sử dụng Named Event handler 63

6.5.2 Ví dụ 2: sử dụng Unnamed (Anonymous) Event Handler 63

6.5.3 Ví dụ 3: thêm một phương thức của một object như một event handler 63

6.5.4 Ví dụ 4: đăng ký nhiều Event Handler 64

6.5.5 Thay đổi việc gọi các hàm 64

6.5.6 Ví dụ 5: gán một function của một object vào một function khác. 64

6.5.7 Aspect-Oriented (“before advice” và “after advice”) 64

6.5.8 Ví dụ 6: gắn một function của một object tới một function khác - “before” 65

6.6 Event Handler Wrapper 65

6.6.1 Ví dụ 7: Event Handler Wrapper 65

6.7 publish/Subscribe Event Handling 66

7. Demo: Dojo Event System 66

7.1 Dojo Event System: Disconnect Event handlers 66

7.2 Một số tài liệu và ví dụ về dojo event system 66

8. Dojo Widget 66

8.1 Sử dụng Dojo Widget 66

8.2 Editor Widget 67

8.3 Cách sử dụng FisheyeList và FisheyeListItem 67

8.4 Tạo các Widget 70

I. Đánh giá về DOJO

-Trong một phần trình bày của bài thuyết trình về Mootools của Peter tại Codecamp. Peter đã trình bày một cách ngắn gọn về sự so sánh tốc độ giữa các framework javascript đang được chạy trên các trình duyệt cơ bản. Và bây giờ chúng ta sẽ kiểm tra

Page 5: DOJO Tutorial

hiệu suất làm việc trong nhóm các công cụ của Mootools, đây là thời điểm để nhìn lại đánh giá của Peter và đánh giá chúng trên nhiều trình duyệt và flatform

- Nếu muốn kiểm tra chính xác các kết quả trên bạn có thể vào link sau để tự mình khám phá http://mootools.net/slickspeed/ hãy bấm start test, chờ đợi và bạn sẽ có kết quả mình muốn

- Kết quả kiểm tra thể hiện qua hình dưới (Thấp hơn có nghĩa là tốt hơn)

Hình ảnh minh họa kết quả kiểm tra của các framework javascript trên các trình duyệt và nền tảng khác nhau.

*> Ví dụ FF(XP-NA) là Firefox 2.0.0.12 no addon cho phép chạy dưới Windows XP

Page 6: DOJO Tutorial

Chúng ta có thể kiểm tra con số thực tế và thông tin đầy đủ của các trình duyệt trong bảng dưới đây :

Dojo 1.0.2 JQuery Mootools 1.2 beta2 Prototype 1.6.0.2

Mozilla Firefox 2.0.0.12 - no addons - winxp

128 266 115 259

Mozilla Firefox 2.0.0.12 - winxp 144 290 127 260

Mozilla Firefox 2.0.0.12 - linux 253 438 255 384

Opera 9.26 - winxp 32 136 148 194

Opera 9.26 - linux 110 188 238 364

Internet Explorer 7 - no addons - winxp 263 330 662 1563

Internet Explorer 7 - winxp 264 334 674 1583

Internet Explorer 6 387 600 945 2279

Internet Explorer 6 - linux (wine) 692 978 1310 2616

Safari 3.0.4 Beta 3 - winxp 36 76 84 116

Konqueror - linux 324 450 X x

Kết luận :

Safari chạy trên Windows XP thực sự là rất nhanh

Mootools và Prototype JS không làm việc trên Konqueror (trình duyệt mặc định của KDE)

Page 7: DOJO Tutorial

Dojo thực thi rất tuyệt vời. Nếu chúng ta dựa trên những nghiên cứu trên thì chắc chắn rằng Dojo là framework javascript nhanh nhất.

Trình duyệt Linux có mức độ chậm hơn đối nghịch với các phiên bản Windows

Prototype là rất chậm trên các trình duyệt IE

Note : Sự đánh giá này chỉ là chủ quan bởi vì kết quả kiểm tra còn phụ thuộc vào hệ điều hành và các nhân tố khác.

II. Dojo User Interface

1. Giới thiệu về Dojo

Các đặc điểm của dojo:

Dojo dựa trên HTML và JavaScript, nó dễ dàng để học và dễ sử dụng. Nó không yêu cầu phải học một ngôn ngữ lập trình mới, chỉ có HTML và JavaScript. Dojo cung cấp một tầng abstraction cao hơn cho lập trình viên. Nó chợ giúp các lập trình

viên phát triển các chức năng mạnh một cách dễ dàng.

Các thành phần có trong Dojo framework:

Dojo tree Dojo button Dojo calendar control Dojo Grid Dojo list box ......

2. Cài đặt DOJO

Dowload Dojo từ trang web: http://dojotoolkit.org/downloads. Trước tiên lựa chọn thư mục mà bạn sẽ dùng để cài đặt Dojo (ví dụ: c:\mydojo), rồi cop

file vừa dowload vào trong thư mục : c:\mydojo” và giải nén file (được mọt thư mục “dojo-release-1.1.1”). Ta sẽ được một thư mục mới, với nội dung:

Page 8: DOJO Tutorial

C

Bây giờ ta cót hể thấy cấu trúc của dojo trong project:

3. Dojo Hello World

tạo một button: Theo ví dụ nay, ta sẽ tạo một button “Hello World”. Để tạo một button trong dojo ta cần một Button Widget chứa 3 thành phần: mouseOut, mouseOver và mouseDown. Các bước để tạo một dojo button widget:

<script type="text/javascript">            // Load Dojo's code relating to widget managing functions            dojo.require("dojo.widget.*");

            // Load Dojo's code relating to the Button widget

Page 9: DOJO Tutorial

            dojo.require("dojo.widget.Button");</script>

Trong đó:

dojo.require("dojo.widget.*") : Nó cho biết ta đã đưa vào dojo widget cho việc quản lý các function.

dojo.require("dojo.widget.Button") : dòng này cho biết ta lạp về Dojo button widget, nếu ta không đưa vào dòng code này, thì đoạn code cho button sẽ không được lạp về bởi dojo, kết quả sẽ lầ một HTML button thay vì những gì ta mong đợi.

Thêm đoạn code sau vào phần body của trang web:

<button dojoType="Button" widgetId="helloButton" onClick="helloPressed();">Hello World!</button>

Thuộc tính chính của đoạn HTML này là thuộc tính dojoType .nó chịu trách nhiệm báo cho Dojo cách để sử lý thành phần khi trang được lạp. Trong trường hợp này bạn sẽ sử dụng một thành phần button cho một nút bấm (button).

widgetId="helloButton" : nó thay thế cho id=”helloButton”.

Kết nối một sự kiện (Event) tới Widget:

Khi ta click vào một nút lệnh thì nó làm gi? Ta chỉ định một sự kiện onClick cho button.

dojo.require("dojo.event.*");

Trong đoạn code trên ta đã sử dụng “dojo.event.*”, nó bao gồm tất cả các hàm sự kiện của Dojo.

Sau khi click vào button, hàm “helloPressed” được gọi và nó thể hiện một message: “Click on the Hello World Button”.

function helloPressed(){      alert('Click on the Hello World Button');}

Đoạn code của cả chương trình:

<html>

<head><title>button</title>    <script type="text/javascript">      dojo.require("dojo.event.*");      dojo.require("dojo.widget.*");      dojo.require("dojo.widget.Button");

      function helloPressed()

Page 10: DOJO Tutorial

      {      alert('Click on the Hello World Button');      }

      function init()      {      var helloButton = dojo.widget.byId('helloButton');      dojo.event.connect(helloButton, 'onClick', 'helloPressed')      }

    dojo.addOnLoad(init);    </script>

</head>

<body bgcolor="#FFFFCC">

<p align="center"><font size="6" color="#800000">Welcome to Roseindia Dojo Project</font></p>

<button dojoType="Button" widgetId="helloButton" onClick="helloPressed();">Hello World!</button><br>    </body>

</html>

--> Kết quả của chương trình:

4. Dojo Checkbox

Page 11: DOJO Tutorial

Trong ví dụ này ta sẽ học cách tạo một checkbox bằng dojo. Để tạo checkbox ta thêm vào : “dijit.form.CheckBox ”

Checkbox cũng tương tự như html nhưng dojo cung cấp thêm nhiều controls và các lựa chọn. Check box có kiểu giá trị Boolean: true hay false.

Ví dụ :

<html>  <head>    <title>checkbox</title>    <!-- check box -->    <script type="text/javascript">      dojo.require("dojo.parser");      dojo.require("dijit.form.CheckBox");    </script>  </head>

  <body>    <h2>Check box</h2>    <input id="cb" dojotype="dijit.form.CheckBox" name="developer"                            checked="checked" value="on" type="checkbox" />    <label for="cb"> Are you a Developer </label>   </body></html> 

--> Kết quả chương trình:

5

. Dojo Radio Button

Lớp RadioButton được khai báo trong file ChackBox.js, do đó bạn cần “dojo.require(dijit.form.CheckBox) ” để cho RadioButton có thể làm việc.

Dojo Radio Buttons cũng giống như hmtl nhưng dojo cung cấp nhiều control cũng như option hơn một radio button thông thường. RadioButton chứa giá trị kiểu Boolean bao gồm: 'true' hoặc 'false'.

Ví dụ:<html>  <head>    <title>Radio</title>    <!-- radio -->    <script type="text/javascript">      dojo.require("dojo.parser");      dojo.require("dijit.form.*");    </script>  </head>

Page 12: DOJO Tutorial

  <body>    <h2>Radio button</h2>    <input dojoType="dijit.form.RadioButton" id="val1" name="group1"           checked="checked" value="Programmer" type="radio" />    <label for="val1"> Programmer </label>    <input dojotype="dijit.form.RadioButton" id="val2"  name="group1"             value="Designer" type="radio" />    <label for="val2"> Designer </label>    <input dojotype="dijit.form.RadioButton" id="val3"  name="group1"                        value="Developer" type="radio" />    <label for="val3"> Developer </label>   </body></html>

--> Kết quả:

6. Dojo Combo Box

Để tạo một comboBox ta cần “dijit.form.ComboBox” Ví dụ:

<html>  <head>    <title>combobox</title>    <!-- combo box -->    <script type="text/javascript">      dojo.require("dojo.parser");      dojo.require("dijit.form.ComboBox");            function setVal1(value) {        console.debug("Selected "+value);      }    </script>  </head>

  <body>    <h2>Combo box</h2>    <select name="country" dojoType="dijit.form.ComboBox"       autocomplete="false" value="country"     onChange="setVal1">      <option>India</option>

Page 13: DOJO Tutorial

      <option>California</option>      <option >Illinois</option>      <option >New York</option>      <option >Texas</option>    </select>  </body></html> 

--> Kết quả:

7

. Dojo Auto completer

Auto Completer: cung cấp logic ngoại vi cho ký tự đề suất được nhập vào (text-entry suggestion) và chức năng hoàn thiện ký tự đề suất được nhập vào.

Ví dụ: ta có một selectBox trong đó chứa nhiều giá trị:

Ở đây ta sẽ có một list các giá trị để lựa chọn. Nhưng nếu số lượng giá trị có thể lựa chọn lớn (vài chục giá trị) thì để lựa chọn một giá trị cần thiết, ta sẽ phải tìm kiếm trong list đó,

Page 14: DOJO Tutorial

Code:

<html>  <head>    <title>Auto Completer Combo</title>      <style type="text/css">        @import "../resources/dojo.css";        @import "../dijit/themes/tundra/tundra.css";      </style>

      <script type="text/javascript" src="dojo.xd.js"        djConfig="parseOnLoad: true"></script>

      <!-- combo box -->      <script type="text/javascript">        dojo.require("dojo.parser");        dojo.require("dijit.form.FilteringSelect");      </script>  </head>

  <body class="tundra">    <h2>Auto Completer Combo box</h2>    <select dojoType="dijit.form.FilteringSelect" name="sname"     autocomplete="false" value="Vinod">      <option value="Vinod">Vinod</option>      <option value="Vikash" >Vikash</option>      <option value="Deepak" >Deepak</option>      <option value="DeepakSir" >Deepak Sir</option>      <option value="Arun" >Arun</option>      <option value="Amar" >Amar</option>      <option value="Aman" >Aman</option>    </select>  </body></html> 

8. Dojo Inline Edit Box

Inline Edit box được mô tả như một vùng đánh dấu và tạo khả năng thay đổi trong dòng đó. Nó thực thi như một thẻ <div> khi không phải ở chế độ chỉnh sửa. Khi người dùng click vào vùng text thì nó được bật chế độ chỉnh sửa. Trong chế độ cho phép chỉnh sửa, người dùng có thể thay đổi nội dung text và save lại. Tuy nhiên nếu người dùng không

Page 15: DOJO Tutorial

save những gì họ đã thay đổi thì nội dung sẽ được dữ nguyên mà không được cập nhật, sau khi đã thay đổi nội dung text, người dùng buộc phải save nó. Nếu không thay đổi nội dung text, cũng không thể save nó.

Code:

<html><head><title>InlineEdit Demo</title>    <style type="text/css">      @import "../resources/dojo.css";      @import "../dijit/themes/tundra/tundra.css";        </style>

    <script type="text/javascript" src="dojo.xd.js"      djConfig="parseOnLoad: true"></script>

    <script type="text/javascript">       dojo.require("dojo.parser");       dojo.require("dijit.form.InlineEditBox");       dojo.require("dijit.form.Textarea");     </script></head>  <body>  Edit Please:<br>    <p id="areaEditable" dojoType="dijit.form.InlineEditBox"      renderAsHtml="true" autoSave="false">      <textarea dojoType="dijit.form.Textarea">        vinod      </textarea>    </p>     </body></html>

Mô tả hoạt động:

lần đâu kho load trang về, bạn được kết quả:

K

hi bạn click vào dòng “vinod” thì nó sẽ chuyển sang chế độ edit mode, và trong chế độ này, bạn có thể thay đổi nội dung của text:

Page 16: DOJO Tutorial

S

9

. Dojo Inline Date TextBox

Đoạn code sau là InlineEditBox cập nhật ngày tháng của dijit.form.DateTextBox và lưu nó tự động. Thẻ textarea bên trong là Textarea widget. Khi người dùng chạy đoạn code này thì họ sẽ nhìn thấy một đoạn text. Nếu người dùng click vào text, thì textarea sẽ được tạo ra trong đó. Để thay đổi giá trị ta chỉ việc chọn một ngày trong calendar hiện ra.

InlineEditBox có một số phương thức get/setDisplayedValue . Đoạn code sau thể hiện cách DateTextBox được đưa vào trong HTML:

<html>

<head>  <title>InlineEdit Date Demo</title>    <style type="text/css">      @import "../resources/dojo.css";      @import "../dijit/themes/tundra/tundra.css";        </style>

    <script type="text/javascript" src="dojo.xd.js"       djConfig="parseOnLoad: true"></script>

    <script type="text/javascript">       dojo.require("dojo.parser");       dojo.require("dijit.form.InlineEditBox");       dojo.require("dijit.form.DateTextBox");     </script>

</head>  <body class="tundra">    <p id="backgroundArea" dojoType="dijit.form.InlineEditBox" >    <input name="date" value="2005-12-30" dojoType="dijit.form.DateTextBox"              constraints={datePattern:'MM/dd/yy'}              lang="en-us"              required="true"              promptMessage="mm/dd/yy"              invalidMessage="Invalid date. Please use mm/dd/yy format.">  </body>

Page 17: DOJO Tutorial

</html>

--> Khi chạy chương trình sẽ hiển thị:

K

1

0. Number Spinner Button

Number Spinner là một GUI dùng để tạo một số nguyên và điền nó vào trong một box một cách dễ dàng khi ta có yêu cầu về một sự thay đổi nhỏ. Có 2 nút: down và up để thay đổi giá trị integer trong box. Khi bạn click vào nút up thì sẽ tăng giá trị trong textbox lên một giá trị và ngược lại, khi click vào nút down sẽ giảm số trong text box đi 1 giá trị.

Đoạn code chương trình:<html><head><title>Number Spinner Demo</title>    <style type="text/css">      @import "../resources/dojo.css";      @import "../dijit/themes/tundra/tundra.css";        </style>    <script type="text/javascript" src="dojo.xd.js" 

djConfig="parseOnLoad: true"></script>    <script type="text/javascript">    dojo.require("dojo.parser");

Page 18: DOJO Tutorial

    dojo.require("dijit.form.NumberSpinner");  </script></head>  <body class="tundra">      <input dojoType="dijit.form.NumberSpinner"          value="0"          smallDelta="1"          constraints="{min:0,max:1550,places:0}"          maxlength="20"          id="integerspinner2">  </body></html>

--> Kết quả chạy demo chương trình:

K

K

1

1. Dojo Slider

Slider là một thành phần GUI, hay nói cách khác một slider là một thước tỷ lệ (scale) với một giá trị được thay đổi bằng cách kéo lên/ xuống hay trái/ phải.

Gọi đến Dojo Slider bằng việc sử dụng dojo.require("dijit.form.Slider") nó cung cấp dijit.form.HorizontalSlider, dijit.form.VerticalSlider và tất cả các lớp label và các lớp rules.

Ví du đơn giản về Dojo Slider:

<html><head>

<title>Slider Example 1</title>

    <style type="text/css">      @import "../resources/dojo.css";      @import "../dijit/themes/tundra/tundra.css";

Page 19: DOJO Tutorial

        </style>    <script type="text/javascript" src="dojo.xd.js" 

djConfig="parseOnLoad: true"></script>

  <script type="text/javascript">       dojo.require("dojo.parser");       dojo.require("dijit.form.Slider");    </script></head>

  <body class="tundra">  <b>Slider:</b>    <div id="horizontalSlider" dojoType="dijit.form.HorizontalSlider"       value="5" minimum="-10" maximum="10" discreteValues="11"       intermediateChanges="true"       onChange="dojo.byId('horizontalSlider').value = arguments[0];"       handleSrc="preciseSliderThumb.png"    ></div>  </body></html>

--> Kết quả chương trình:

12 Dojo StackContainer

Stack container là một container chứa nhiều thành phần con trong đó, nhưng tại mỗi thời điểm nó chỉ hiển thị duy nhất một thành phần con. Stack Container là một thành phần tốt cho wizads, slide shows hay khi có nhiều các khối text.

Code demo

<html><head><title>Stack Container Demo</title>    <style type="text/css">      @import "../resources/dojo.css";

Page 20: DOJO Tutorial

      @import "../dijit/themes/tundra/tundra.css";        </style>    <script type="text/javascript" src="dojo.xd.js"    djConfig="parseOnLoad: true"></script>    <script type="text/javascript">        dojo.require("dojo.parser");        dojo.require("dijit.layout.ContentPane");        dojo.require("dijit.layout.StackContainer");        dojo.require("dijit.form.Button");     </script></head><body class="tundra">        <button id="previous" onClick="dijit.byId('mainTabContainer').back()"><<-Previous</button>        <button id="next" onClick="dijit.byId('mainTabContainer').forward()">   Next->></button>        <div id="mainTabContainer" dojoType="dijit.layout.StackContainer"             style="width: 90%; border:1px solid #9b9b9b; height: 10em;                         margin: 0.5em 0 0.5em 0; padding: 0.5em;">        <p id="Page1" dojoType="dijit.layout.ContentPane" label="Intro">                Page First      </p>               <p id="Page2" dojoType="dijit.layout.ContentPane">                Page Second.    </p>        <p id="Page3" dojoType="dijit.layout.ContentPane" >                Page Third.    </p>   </div></body></html>

--> Kết quả chương trình:

K

hi click vào nút “Previous” và “Next” sẽ thay đổi nội dung hiển thị trong vùng text sang trang trước hoặc trang sau.

Page 21: DOJO Tutorial

13. Dojo TabContainer

TabContainer: đây là một container có nhiều ô cửa sổ (panens), nhưng tại mỗi thời điểm chỉ hiển thị duy nhất một panen. TabContainer có nhiều tab, mỗi tab ứng với một panen, mỗi tab có một tiêu đề và một nút tắt (close button) của panen, khi bạn muốn đóng một tab thì sẽ click vào close button.

Code demo :

<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>TabContainer Demo</title>    <style type="text/css">      @import "../resources/dojo.css";      @import "../dijit/themes/tundra/tundra.css";        </style>    <script type="text/javascript"   src="dojo.xd.js" djConfig="parseOnLoad: true"></script>

  <script type="text/javascript">       dojo.require("dojo.parser");           dojo.require("dijit.layout.ContentPane");           dojo.require("dijit.layout.TabContainer");           dojo.require("dijit.form.Button");     </script></head><body class="tundra"><h1>Tab Container</h1>   <div id="mainTabContainer" dojoType="dijit.layout.TabContainer"        style="width:500px;height:100px">      <div id="tab1" dojoType="dijit.layout.ContentPane"    title="First Tab"  selected="true" closable="true">      First Tab      </div>      <div id="tab2" dojoType="dijit.layout.ContentPane"           title="Second Tab" closable="true">      Second Tab      </div>      <div id="tab3" dojoType="dijit.layout.ContentPane"             title="Third Tab" closable="true">      Third Tab      </div></div></body></html>

--> Kết quả chương trình:

Page 22: DOJO Tutorial

1

4. Dojo Menu và Menu Item

Menu: là một context menu như right-click menu hay popup menu, và nó suất hiện trong một ComboButton và DropDownButton. Nếu bạn click chuột phải vảo popupMenu sẽ suất hiện trên màn hình.

MenuItem là các item trong menu. PopupMenuItem là một MenuItem, nhưng nó hiện một subMenu . Một popupMenu luôn có 2 node con: một tag với nhẫn (sử dụng thể SPAN) và một widget để mở ra.

Sử dụng dijit.Menu widget.

code đề mô:

<html><head><title>Menu Demo</title>    <style type="text/css">      @import "../resources/dojo.css";      @import "../dijit/themes/tundra/tundra.css";        </style>    <script type="text/javascript" src="dojo.xd.js"    djConfig="parseOnLoad: true"></script>

  <script type="text/javascript">       dojo.require("dojo.parser");     dojo.require("dijit.form.Button");       dojo.require("dijit.Menu");     function call_function(choice) {              alert(choice+" was clicked.");        }    function save_function() {              alert("Save Button");        }        function save_as_function(choice) {             alert("Save As Button");        }     </script>

Page 23: DOJO Tutorial

</head><body class="tundra"><b>Creating DropDownButtons</b><br><div dojoType="dijit.form.ComboButton" onclick="save_function">    <span>File</span>            <div dojoType="dijit.Menu" id="saveMenu"    toggle="fade" style="display: none;">                <div dojoType="dijit.MenuItem"                     iconClass="dijitEditorIcon dijitEditorIconSave"     onclick="save_function">                    Save                </div>                <div dojoType="dijit.MenuItem" onclick="save_as_function">                    Save As                </div>            </div>        </div><div dojoType="dijit.form.DropDownButton">            <span>Edit</span>            <div dojoType="dijit.Menu" id="Edit">                <div dojoType="dijit.MenuItem" label="Copy"                        onclick="call_function('copy');"></div>                <div dojoType="dijit.MenuItem" label="Cut"                         onclick="call_function('cut');"></div>                <div dojoType="dijit.MenuItem" label="Paste"                        onclick="call_function('paste');"></div>            </div>        </div>

  <br><br><br><br><br><br>  <h1>Submenu</h1>        <style>        .myIcon {           background-image:              url(http://o.aolcdn.com/dojo/1.0.0/dijit/themes/tundra/images/checkmark.gif);           background-position: -16px 0px;           width: 16px;           height: 16px;        }        </style>               <div dojoType="dijit.Menu" id="submenu1"                 contextMenuForWindow="true">                <div dojoType="dijit.MenuItem" iconClass="myIcon"                     onClick="alert('Hello world');">Enabled Item</div>                <div dojoType="dijit.PopupMenuItem" id="submenu2">                    <span>Submenu</span>                    <div dojoType="dijit.Menu">                                <div dojoType="dijit.MenuItem"                                     onClick="alert('Submenu 1!')">Submenu Item One</div>                                <div dojoType="dijit.MenuItem"                                     onClick="alert('Submenu 2!')">Submenu Item Two</div>

Page 24: DOJO Tutorial

                    </div>                </div>        </div></body></html>

--> Kết quả chạy chương trình:

15. Dojo Dialog Box

Dialog box là một GUI mà nó yêu cầu hay cung cấp thông tin. Một vài Dialog Boxes đưa ra cảnh báo hay lựa chọn trước khi thực thi một lệnh. Trong dialogBox người dùng có thể nhậm vào thông tin của họ.

<html><head><title>TooltipDialog demo</title>    <style type="text/css">      @import "../resources/dojo.css";      @import "../dijit/themes/tundra/tundra.css";        </style>  <script type="text/javascript" src="dojo.xd.js"   djConfig="parseOnLoad: true"></script>

  <script type="text/javascript">       dojo.require("dojo.parser");       dojo.require("dijit.form.Button");       dojo.require("dijit.Dialog");

Page 25: DOJO Tutorial

       dojo.require("dijit.form.TextBox");       function checkPw(dialogFields) {          if (dialogFields.confirmpw != dialogFields.newpw)             alert("Confirmation password is different.");       }     </script></head><body class="tundra">  <div dojoType="dijit.form.DropDownButton">      <span>Login Form</span>      <div dojoType="dijit.TooltipDialog" id="dialog1" title="Login Form" execute="checkPw(arguments[0]);">        <table>          <tr>          <td><label for="name" title="User name">   Username</label></td>              <td><input dojoType="dijit.form.TextBox"    type="text" name="oldpw"></td>          </tr>          <tr>              <td><label for="loc">Password: </label></td>              <td><input dojoType="dijit.form.TextBox"    type="password" name="newpw"></td>          </tr>          <tr>              <td><label for="desc">Confirm Password: </label></td>              <td><input dojoType="dijit.form.TextBox"   type="password" name="confirmpw"></td>          </tr>          <tr>              <td colspan="2" align="center">                  <button dojoType="dijit.form.Button" type="submit">Login</button></td>          </tr>        </table>      </div>  </div></body></html>

--> kết quả chạy chương trình:

k

hi bạn click vào button:

Page 26: DOJO Tutorial

B

S

16. Dojo ToolBar

Đây là một GUI bao gồm các dòng ngan hay cột dọc của các nút để lựa chọn (selected image buttons), nó sẽ cho phép người dùng dễ dàng lựa cọn các chức năng ứng dụng hay một bàn làm việc như: backwards hay forward tới các trang web hoặc lưu trữ hay in trong/ tài liệu trên trình duyệt.

dijit.Menu là một container cho dijit.MenuItem, dijit.ToolBar là một container cho các buttons. Trong toolbar nó chứa các nút Dijit cơ bản (button-based dijit), bao gồm: ComboButtons và DropdownButtons.

Page 27: DOJO Tutorial

16.1 Code chương trình

<html><title>Toolbar</title><head>    <style type="text/css">      @import "../resources/dojo.css";      @import "../dijit/themes/tundra/tundra.css";        </style>

    <script type="text/javascript" src="dojo.xd.js" djConfig="parseOnLoad: true">

</script>

    <script type="text/javascript">       dojo.require("dojo.parser");       dojo.require("dijit.form.Button");       dojo.require("dijit.Toolbar");     function italic() { alert("Italic"); }       function bold() { alert("Bold!"); }       function cut() { alert("Cut!"); }       function copy() { alert("Copy!"); }       function paste() { alert("Paste!"); }       dojo.addOnLoad(function() {     dojo.connect(dojo.byId("toolbar1.italic"),"onclick",italic);           dojo.connect(dojo.byId("toolbar1.bold"),"onclick",bold);           dojo.connect(dojo.byId("toolbar1.cut"),"onclick",cut);           dojo.connect(dojo.byId("toolbar1.copy"),"onclick",copy);           dojo.connect(dojo.byId("toolbar1.paste"),"onclick",paste);       });     </script>

</head><body class="tundra">    <!-- Tags end on line afterwards to eliminate any whitespace -->    <div id="toolbar1" dojoType="dijit.Toolbar">

    <div dojoType="dijit.form.Button" id="toolbar1.cut" iconClass="dijitEditorIcon dijitEditorIconCut" showLabel="false">Cut</div>    <div dojoType="dijit.form.Button" id="toolbar1.copy" iconClass="dijitEditorIcon dijitEditorIconCopy" showLabel="false">Copy</div>    <div dojoType="dijit.form.Button" id="toolbar1.paste" iconClass="dijitEditorIcon dijitEditorIconPaste" showLabel="false">Paste</div>            <!-- The following adds a line between toolbar sections-->      <span dojoType="dijit.ToolbarSeparator"></span>

      <div dojoType="dijit.form.ToggleButton" id="toolbar1.bold" iconClass="dijitEditorIcon dijitEditorIconBold" showLabel="false">Bold</div>      <div dojoType="dijit.form.ToggleButton" id="toolbar1.italic" iconClass="dijitEditorIcon dijitEditorIconItalic" showLabel="false">Italic</div>   </div></body>

Page 28: DOJO Tutorial

</html>

16.2 Kết quả hiển thị

1

7. Doko Progress bar

Progress Bar: là một GUI mà nó đưa ra thông tin phản hồi động về một quá trình sử lý đang chạy. Progress Bar có thể được cập nhật bằng cách gọi hàm javaScirpt. Nó làm việc tốt nhất cho các quá trình điều khiển chạy javaScript hay một chuỗi các XHR javaScript gọi tới server. Progress Bar được dùng cho nhiều loại công việc như: download, upload hay đại diện cho một quá trình sử lý theo định dạng %.

Code Chương trình”:

<html><head><title>Progress Bar Demo</title>

    <style type="text/css">      @import "../resources/dojo.css";      @import "../dijit/themes/tundra/tundra.css";        </style>

    <script type="text/javascript" src="dojo.xd.js"   djConfig="parseOnLoad: true"></script>

    <script type="text/javascript">        dojo.require("dijit.ProgressBar");        dojo.require("dojo.parser");               function download(){            // Split up bar into 5% segments            numParts = Math.floor(100/5);            jsProgress.update({ maximum: numParts, progress:0 });            for (var i=0; i<=numParts; i++){                // This plays update({progress:0}) at 1nn milliseconds,                // update({progress:1}) at 2nn milliseconds, etc.                setTimeout("jsProgress.update({ progress: " + i + " })",(i+1)*100 + Math.floor(Math.random()*100));                    }

Page 29: DOJO Tutorial

        }     </script></head>Progress Bar:<body class="tundra">    <div dojoType="dijit.ProgressBar" style="width:800px"         jsId="jsProgress" id="downloadProgress"></div>    <input type="button" value="Start" onclick="download();" /></body></html>

Giao diện chương trình:

18. Dojo Tool tips

Dojo tool tips là một thành phần GUI được sử dụng với con trỏ mà thường là con trỏ chuột. Nếu con trỏ chuột được đưa vào một item nhưng không click thì một hộp nhỏ với nội dung mô tả về mục này sẽ được hiển thị

Code chương trình:

<html><head><title>Tooltip Demo</title>

    <style type="text/css">      @import "../resources/dojo.css";      @import "../dijit/themes/tundra/tundra.css";          </style>

    <script type="text/javascript" src="dojo.xd.js" djConfig="parseOnLoad: true"></script>

    <script type="text/javascript">      dojo.require("dojo.parser");      dojo.require("dijit.Tooltip");    </script>

</head><body class="tundra"><b>Tooltips:</b> <br><br>        <span id="site1">Roseindia.net</span>

Page 30: DOJO Tutorial

        <div dojoType="dijit.Tooltip" connectId="site1" label="This is a software developement company!">        </div><br><br><br>    <span id="site2">Newstrackindia.com</span>        <div dojoType="dijit.Tooltip" connectId="site2" label="This is a news publishing site!">        </div>    </body></html>

Giao diện:

1

9. Dojo Tree

Dojo tree: là một GUI hỗ chợ cho việc hiển trị cấu trúc câu thư mục. Tree widget đơn giản nhưng thật sự hữu dụng.

Các bước để tạo nên một dojo tree:

Tạo một cây đã có hay cây mới, trong đó mỗ cành (branch) là một thành phần độc lập. Các icon khác nhau cho các lớp lá (leaf) hay cành (branch). Cây dữ liệu được lưu trữ trong API dojo.data Các sự kiện khi người dùng click vào nó. Thêm, xóa hay ẩn các node của tree.

Code chương trình:

<html><title>Tree</title><head>

    <style type="text/css">      @import "../resources/dojo.css";      @import "../dijit/themes/tundra/tundra.css";    </style>

    <script type="text/javascript" src="dojo.xd.js"djConfig="parseOnLoad: true"></script>

Page 31: DOJO Tutorial

    <script>        dojo.require("dojo.data.ItemFileReadStore");        dojo.require("dijit.Tree");        dojo.require("dojo.parser");   </script>

</head><body class="tundra">Simple Tree:<br><br>        <div dojoType="dojo.data.ItemFileReadStore"             url="tree.txt" jsid="popStore" />        <div dojoType="dijit.Tree" store="popStore" labelAttr="sname" label="Tree"></div></body></html>

Nội dung file tree.txt theo định dạng JSON:

{ label: 'name',identifier: 'name',items: [{ name:'Students', type:'cat',children: [{ name:'Vinod', type:'st' },{ name:'Suman', type:'st' },{ name:'Deepak', type:'st' }]

},{ name:'Fruits', type: 'cat',children: [{ name:'Apple', type:'fr' },{ name:'Mango', type:'fr' },{ name:'Graps', type:'fr',children: [{ name:'Sweets', type:'gr' },{ name:'Sour', type:'gr' },{ name:'Salt', type:'gr' }]

}]

},{ name:'Vegetables', type: 'cat'},{ name:'Education', type:'cat'}]

Page 32: DOJO Tutorial

}

Kết quả chương trình:

2

0. Dojo AccordionContainer

AccordionContainer: là một container chứa một thiết lập của nhiều panens. Nhãn của các panen này thì luôn hiển thị, nhưng tại mỗi thời điểm chỉ hiển thị nội dung của một panen. Khi click vào một panen title thì nội dung trong panen đó sẽ được hiển thị.

Code chương trình:

<html><head><title>Accordion Container Example</title>    <style type="text/css">        @import "../dijit/themes/tundra/tundra.css";        @import "/resources/dojo.css"    </style>    <script type="text/javascript" src="dojo.xd.js" djConfig="parseOnLoad: true">

</script>    <script type="text/javascript">       dojo.require("dojo.parser");       dojo.require("dijit.layout.AccordionContainer");     </script></head>

Page 33: DOJO Tutorial

<body class="tundra">        <div dojoType="dijit.layout.AccordionContainer" duration="80"                style="margin-right: 10px; width: 500px; height: 200px;">

        <div dojoType="dijit.layout.AccordionPane" selected="true" 

title="Benefits of Dojo">

           <p >Benefits of Dojo: Associative arrays, Loosely typed variables, Regular expressions, Objects and classes, Highly evolved date, 

math, and string libraries, W3C DOM support in the Dojo.</p >        </div>               <div dojoType="dijit.layout.AccordionPane" title="Introduction to Dojo">          <p>This tips is light towards people with some JavaScript knowledge, priestly used another JavaScript (Ajax) framework before, now have a real need to 

use some of the features found in dojo.</p>        </div>               <div dojoType="dijit.layout.AccordionPane" 

title="WebSite for Dojo Tutorial">           <p>If you want to learn dojo. Please go the following url and read 

the dojo tutorials with running examples.           URL: www.roseindia.net/dojo/</p>        </div>    </div></body></html>

Giao diện chương trình:

Page 34: DOJO Tutorial

2

1. Dojo BorderContainer

BorderContainer: là một container điều khiểu chế độ hiển thị. Ta có 2 chế độ hiển thị: thuộc tính design có thể gán là “headline” (mặc định) hoặc là “sidebar”.

chế độ hiển thị “headline”: vùng hiển thị được kéo dài từ bên trên xuống dưới và toàn bộ chiều rộng của vùng chứa nó. Và duy trì các vùng này luôn nằm chính giữa.

Chế độ hiển thị “sidebar”: vùng hiển thị sẽ đặt ưu tiên hiện đầy đủ chiều cao của box.

Code demo

<html><head>

<title>Layout Container Example</title>    <style type="text/css">        @import "../dijit/themes/tundra/tundra.css";        @import "/resources/dojo.css"    </style>    <script type="text/javascript" src="http://o.aolcdn.com/dojo/1.1/dojo/dojo.xd.js"        djConfig="parseOnLoad: true"></script>

    <script type="text/javascript">        dojo.require("dojo.parser");        dojo.require("dijit.layout.ContentPane");        dojo.require("dijit.layout.BorderContainer");     </script></head>

<body class="tundra">

  <div dojoType="dijit.layout.BorderContainer" design="screenDesign">

     <div dojoType="dijit.layout.ContentPane" id="top" region="top" style="background-color:gray">       <h3> Roseindia Technology Pvt. Ltd.</h3>     </div>

Page 35: DOJO Tutorial

     <div dojoType="dijit.layout.ContentPane" id="left" region="left"       style="background-color:lightblue;width: 125px;">      <B>Tutorials List</B>        <ul>          <li>Struts2</li>          <li>JSP</li>          <li>Servlets</li>          <li>EJB</li>          <li>Hibernate</li>         </ul>

    </div>

    <div dojoType="dijit.layout.ContentPane" id="center" region="center"      style="background-color:white">        <blockquote>Introduction</a>          <ol>            <li>Short description</li>            <li>Brief description </li>            <li>Running Examples</li>          </ol>        </blockquote>    </div>

    <div dojoType="dijit.layout.ContentPane" id="right" region="right"      style="background-color:pink; width: 130px;">      <p><B>Advertisement</B></p>      <img src="advertisement.gif" align="right"/>    </div>

  </div>   </body></html>

Giao diện chương trình:

Page 36: DOJO Tutorial

2

2. Dojo ColorPalette

ColorPalette là một color picker cho các trang web. Nó cung cấp cho người dùng nhiều mầu và có thể lựa chọn mầu mà họ mong muốn. Nó là một sự trừu tượng hóa của các mã màu hexa cung cấp bởi dijit

Code demo:

<html><head>

<title>ColorPalette Demo</title>

   <style type="text/css">      @import "../dijit/themes/soria/soria.css";      @import "/resources/dojo.css";  </style>

    <script type="text/javascript" src="dojo.xd.js" djConfig="parseOnLoad: true">

</script>

    <script type="text/javascript">          dojo.require("dojo.parser");          dojo.require("dijit.ColorPalette");

          function myColorPalette(selectColor) {              console.debug(selectColor);           }     </script>

Page 37: DOJO Tutorial

</head><body class="soria">

        <div dojoType="dijit.ColorPalette" onChange="myColorPalette"></div>

</body></html>

Kết quả:

23. Dojo Color Picker

Color picker: dojox.widget.ColorPicker cho phép người dùng lựa chọn màu (theo mã hexa).

Code demo:

<html><head><title>Color Picker Example</title>

  <style type="text/css">    @import "../dijit/themes/soria/soria.css";    @import "/resources/dojo.css";

Page 38: DOJO Tutorial

    @import "../dojox/widget/ColorPicker/ColorPicker.css";

  </style>

  <script type="text/javascript" src="dojo.js" djConfig="parseOnLoad: true">

</script>

  <script type="text/javascript">    dojo.require("dojox.widget.ColorPicker");    dojo.require("dojo.parser");    </script></head>

<body class="soria">    <b>Please select the color:</b>    <div id="colorPicker" dojoType="dojox.widget.ColorPicker"></div>

</body></html>

Giao diện chương trình:

2

4. Dojo drag and drop

Drag and Drop: đây là kỹ thuật cho việc kéo một item. Click vào một object hay một item có thể kéo và thả, người dùng dữ chuột và kéo object tới vị chí mong muốn.

Code demo:

<html>  <head>  <title>Dojo Drag and Drop Example</title>

Page 39: DOJO Tutorial

    <script type="text/javascript" src="dojo.js" djConfig="parseOnLoad: true">    </script>    <script type="text/javascript">         dojo.require("dojo.dnd.source");        dojo.require("dojo.parser");       </script>  </head><body>

  <h1>Drag and Drop</h1>  <table border="1" cellpadding="0" cellspacing="0">    <tr>      <td valign="top">        <!-- Source -->          <div dojoType="dojo.dnd.Source" jsId="sourceData" class="source">              <b style="background-color:#999999 ">Source Data</b>              <div class="dojoDndItem" dndType="vinod">                  <div>Vinod</div>              </div>              <div class="dojoDndItem" dndType="suman">                  <div>Suman</div>              </div>              <div class="dojoDndItem" dndType="amar">                  <div>Amar</div>              </div>              <div class="dojoDndItem" dndType="ravi">                  <div>Ravi</div>              </div>              <div class="dojoDndItem" dndType="aman">                  <div>Aman</div>              </div>              <div class="dojoDndItem" dndType="deepak">                  <div><img src="1.jpg" /></div>              </div>              <div class="dojoDndItem" dndType="deepak">                  <div><img src="2.jpg" /></div>              </div>          </div>        </td>      <td valign="top">        <!-- Target -->        <div dojoType="dojo.dnd.Target" jsId="targetData" class="target" accept="vinod,suman,amar,ravi,aman,deepak">            <b style="background-color:#999999; ">Target Data</b>        </div>      </td>    </tr>  </table>

</body></html>

Giao diện chương trình:

Page 40: DOJO Tutorial

25. Dojo Editor

Dojo Editor: đây là một editor mà cung cấp cho người dùng khả năng định văn bản. Ta nhập text vào trong editor, bộ editor này cung cấp cho ta hả năng edit văn bản như: chữ đậm, chữ nghiêng, gạch chân. Nếu bạn edit text thì bạn có thể undo hay redo đoạn text đó. Ta có thể căn lề văn bản: trái, phải, giữa.

Code demo:

<html><head>

<title>Editor Demo</title>

     <style type="text/css">      @import "../dijit/themes/soria/soria.css";      @import "/resources/dojo.css";  </style>

    <script type="text/javascript" src="dojo.xd.js" djConfig="parseOnLoad: true">

</script>

        <script type="text/javascript">       dojo.require("dojo.parser");       dojo.require("dijit.Editor");     </script>

</head><body class="soria">

    <textarea name="field" dojoType="dijit.Editor">   

Page 41: DOJO Tutorial

      This tips is light towards people with some JavaScript knowledge, priestly 

used another JavaScript (Ajax) framework before, now have a real need to use some 

of the features found in dojo. In this tips, learn about the dojo and its 

directory structure. The purpose of this tips, for a new user learn to dojo then 

you need to know about the what is dojo and its directory structure.    </textarea>       </body></html>

Giao diện chương trình

Page 42: DOJO Tutorial

26. Dojo Filtering Select

FilteringSelect: cũng tương tự như thẻ select của html, nhưng nó cung cấp sử lý động và giúp người dùng dễ dàng làm việc cới dữ liệu lớn. Nó lạp dữ liệu vào trang. Nó giống như combo box nhưng combo box khôgn cho phép nhập vào dữ liệu mà không có trong combo box đó. Nó chỉ cho phép lựa chọn giá trị có sẵn. Nhưng filteringSelect cho phép người dùng nhập dữ liệu khác (dữ liệu chưa có trong data của filteringselect).

Code demo:<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>Simple FilterSelect Example</title>    <style type="text/css">        @import "../dijit/themes/soria/soria.css";    @import "/resources/dojo.css";    </style>    <script type="text/javascript" src="dojo.xd.js" djConfig="parseOnLoad: true">

</script>    <script type="text/javascript">       dojo.require("dojo.parser");       dojo.require("dijit.form.FilteringSelect");     </script></head><body class="soria">        <select dojoType="dijit.form.FilteringSelect" name="countryName" 

autocomplete="true" value="sel">                <option value="sel" selected="selected">Austria</option>                <option value="1" >Australia</option>                <option value="2" >Canada</option>                <option value="3" >Germany</option>        <option value="4" >Japan</option>                <option value="5" >United Kingdom</option>                <option value="6" >United States of America</option>        <option value="7" >Afghanistan</option>                <option value="8" >Albania</option>                <option value="9" >Algeria</option>        <option value="10" >American Samoa</option>                <option value="11" >Andorra</option>                <option value="12" >Angola</option>        </select></body></html>

Giao diện

Khi click vào combo box:

Page 43: DOJO Tutorial

K

27. Dojo Google Blog Search

28. Dojo Google Web Search

29. Dojo Show and Hiden Dialog

Hai hàm được dùng để hiện và ẩn diablog box

show( ): phương thức này được dùng để hiển thị diablog box hide( ): phương thức này được dùng để ẩn diablog box

Code demo

<html>

Page 44: DOJO Tutorial

  <head>    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />    <title>Show and hide Dialog example</title>    <style type="text/css">      @import "../dijit/themes/soria/soria.css";      @import "/resources/dojo.css";    </style>

     <script type="text/javascript" src="dojo.js" djConfig="parseOnLoad: true">

</script>    <script >      dojo.require("dojo.parser");      dojo.require("dijit.form.Button");      dojo.require("dijit.Dialog");      dojo.require("dijit.form.TextBox");      dojo.addOnLoad(showDialog);      dojo.addOnLoad(hideDialog);      function showDialog() {        dijit.byId('dialog1').show();      }    </script>  </head>    <body class="soria">    <div dojoType="dijit.Dialog" id="dialog1" title="Login">      <form action="Login" method="post" validate="true" id="loginForm">        <table width="258">          <tr>            <td><label>Login</label></td>            <td><input type="text" trim="true" dojoType="dijit.form.TextBox" value="" name="login" id="userId"/></td>          </tr>          <tr >            <td><label>Password</label></td>            <td><input type="password" trim="true" dojoType="dijit.form.TextBox" value="" name="password" id="password"/></td>          </tr>          <tr><td colspan="2">&nbsp;</td></tr>          <tr>            <td colspan="2" align="center">                                                            <table width="100%" border="0" cellspacing="0" cellpadding="0">                <tr>                  <td  align="center" valign="top" width="40%">        <!-- button ok -->                    <button dojoType="dijit.form.Button" type="submit" id="LoginButton" onClick="return validate();">Ok</button></td>                                        <td align="left" valign="top" width="3%">&nbsp;</td>

Page 45: DOJO Tutorial

                           <td align="left" valign="top" width="46%" >                  <!-- button cancel -->                           <button dojoType="dijit.form.Button" type="submit" 

onclick="document.Login.reset()" id="Cancel">Cancel</button></td>                             </td>                <td width="11%" align="left" valign="top">&nbsp;</td>        <td><button dojoType="dijit.form.Button" type="submit" 

onclick="showDialog();"  id="resetPassword"> Show Dialog </button></td>                          </tr>           </table>                            </td>          </tr>        </table>      </form>    </div>

<!-- Forgot Password Form-->

    <div dojoType="dijit.Dialog" id="dialog2" title="Forgot Password">      <form action="doResetPassword.action" method="post" validate="true" id="resetPasswordForm">        <table width="308">          <tr>            <td colspan="2"><label>Enter Login Name</label></td>            <td><input type="text" trim="true" dojoType="dijit.form.TextBox" value="" name="userName" id="userName"/></td>          </tr>          <tr><td><B>Or</B></td></tr>          <tr>            <td colspan="2"><label>Enter Your Email Address</label></td>            <td><input type="text" trim="true" dojotype="dijit.form.TextBox" value="" name="email" id="email"/></td>          </tr>          <tr>          <td align="right">          <button dojoType="dijit.form.Button" type="submit" onclick="validate1()" id="reset">Ok </button></td>          <td align="right" valign="top">

<button dojoType="dijit.form.Button" type="submit" onClick="hideDialog()"  id="cancel1">

Page 46: DOJO Tutorial

Hide Dialog 

</button> 

</td>

</tr>        </table>      </form>    </div>

    <script>              function validate(){

                         userId = document.getElementById('userId').value             password = document.getElementById('password').value             errMsg=" ";                         if(userId == ""){              errMsg +="Please enter User Name\n";              }                         if(password == ""){                errMsg +="Please enter Password" ;              }             if(errMsg!= " "){               alert(errMsg);                       return false;             }               document.forms['loginForm'].submit();          }

    </script>

    <script>      function showDialog() {        dijit.byId('dialog1').hide();        var dlg = dijit.byId('dialog2');        dlg.show();      }

      function validate1(){

                         userName = document.getElementById('userName').value             email = document.getElementById('email').value             errMsg=" ";                                      if(userName == "" && email == ""){              errMsg +="Please enter userName Or email address\n";             }             var reg = /^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+

\.([A-Za-z]{2,4})$/;             if (!(email == "")){

Page 47: DOJO Tutorial

               if(reg.test(email) == false) {                 errMsg+='Invalid Email Address';               }             }                                    if(errMsg!= " "){               alert(errMsg);                       return false;             }               document.forms['resetPasswordForm'].submit();          }

          function hideDialog(){                        var dlg = dijit.byId('dialog2');            dlg.hide();            dijit.byId('dialog1').show();          }    </script>  </body></html>

Giao diện chương trình:

k

hi click vào “Show Dialog”sẽ hiện nên một form:

Page 48: DOJO Tutorial

30. Dojo SplitContainer

SplitContainer: đây là một container chứa nhiều widget con. Tất cả các widget con đều được hiển thị từng side (theo chiều ngang hay dọc: horizontally or vertically ). Có một vạch ngang (bar) giữa các thành phần con này và ta có thể thay đổi kích cỡ của mỗi weidget con bằng cách kéo các vạch ngang (bars). Ta có buộc phải chỉ định kích cỡ (chiều rộng và chiều cao) cho dojo SplitContainer.

Code Demo:

<html><head>

<title>SplitContainer Example</title>    <style type="text/css">        @import "../dijit/themes/tundra/tundra.css";        @import "resources/dojo.css"    </style>

    <script type="text/javascript" src="dojo.xd.js" djConfig="parseOnLoad: true">

</script>    <script type="text/javascript">       dojo.require("dojo.parser");       dojo.require("dijit.layout.SplitContainer");       dojo.require("dijit.layout.ContentPane");     </script>

</head><body class="tundra">

        <div dojoType="dijit.layout.SplitContainer" orientation="horizontal" sizerWidth="10" activeSizing="true"                style="border: 1px solid #FF00FF; width: 600px; height: 205px;">

                <div dojoType="dijit.layout.ContentPane" sizeMin="10" 

Page 49: DOJO Tutorial

sizeShare="10">                    <p><b>Introduction to Dojo and Tips</b></p>                                           This tips is light towards people with some JavaScript 

knowledge, priestly used another JavaScript (Ajax) framework before, now have a 

real need to use some of the features found in dojo. In this tips, learn about 

the dojo and its directory structure.                                       </div>                <div dojoType="dijit.layout.ContentPane" sizeMin="10" 

sizeShare="10">                    <p><b>Benefits of Dojo</b></p>                                                *  Associative arrays<br>              * Loosely typed variables<br>              * Regular expressions<br>              * Objects and classes<br>              * Highly evolved date, math, and string libraries<br>              * W3C DOM support in the Dojo

                                       </div>        </div>

</body></html>

Kết quả:

3

1. Dojo TitlePane

Page 50: DOJO Tutorial

TitlePane là một pane chứa một title ở trên đầu và ta có thể mở và đóng thành phần này. Trong chế độ mở, ta có thể thấy hết nội dung của TitlePane.

Code demo

<html><head>

<title>Dojo TitlePane Example</title>

    <style type="text/css">        @import "../dijit/themes/soria/soria.css";        @import "/resources/dojo.css"    </style>

    <script type="text/javascript" src="dojo.xd.js" djConfig="parseOnLoad: true"></script>

        <script type="text/javascript">           dojo.require("dojo.parser");           dojo.require("dijit.TitlePane");     </script>

</head>

<body class="soria">

        <div dojoType="dijit.TitlePane" title="<b>Welcome to Roseindia Dojo Tutorial</b>">                 This tips is light towards people with some JavaScript knowledge, priestly used another JavaScript (Ajax) framework before, now have a real need to use some of the features found in dojo. In this tips, learn about the dojo and its directory structure. The purpose of this tips, for a new user learn to dojo then you need to know about the what is dojo and its directory structure.

        </div>

</body></html>

Giao diện chương trình:

Page 51: DOJO Tutorial

32. Dojo ToolTipsDialog

Trong ví dụ này ta sẽ xem cách tạo một dojo tooltipdialog. Khi ta click vào nut “Chang Password” thì sẽ hiện ra một dialog box ngay dưới nút đó. Tương tự như thế, khi click vào nút “Forgot Password” cũng sẽ hiện ra một dialog box tương ứng.

Code demo:

<html>  <head>    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />    <title>Show and hide Dialog example</title>    <style type="text/css">      @import "../dijit/themes/soria/soria.css";      @import "/resources/dojo.css";    </style>

     <script type="text/javascript" src="dojo.js" djConfig="parseOnLoad: true">

Page 52: DOJO Tutorial

</script>    <script >      dojo.require("dojo.parser");      dojo.require("dijit.form.Button");      dojo.require("dijit.Dialog");      dojo.require("dijit.form.TextBox");      dojo.addOnLoad(showDialog);      dojo.addOnLoad(hideDialog);      function showDialog() {        dijit.byId('dialog1').show();      }    </script>  </head>    <body class="soria">    <div dojoType="dijit.Dialog" id="dialog1" title="Login">      <form action="Login" method="post" validate="true" id="loginForm">        <table width="258">          <tr>            <td><label>Login</label></td>            <td><input type="text" trim="true" dojoType="dijit.form.TextBox" value="" name="login" id="userId"/></td>          </tr>          <tr >            <td><label>Password</label></td>            <td><input type="password" trim="true" dojoType="dijit.form.TextBox" value="" name="password" id="password"/></td>          </tr>                    <tr>            <td colspan="2" align="center">                                                            <table width="100%" border="0" cellspacing="0" cellpadding="0">                <tr>                  <td  align="center" valign="top" width="40%">        <!-- button ok -->                    <button dojoType="dijit.form.Button" type="submit" id="LoginButton" onClick="return validate();">User Login</button></td>                       <td align="left" valign="top" width="40%" >                  <!-- button cancel -->                           <button dojoType="dijit.form.Button" type="submit" onclick="document.Login.reset()" id="Cancel">Cancel</button></td>                             </td>                        

Page 53: DOJO Tutorial

                  </tr>           </table>                            </td>          </tr>        </table>

        <table width="180" border="0" cellspacing="0" cellpadding="0">                <tr>                  <td>          <div dojoType="dijit.form.DropDownButton">              <span>Change Password</span>              <div dojoType="dijit.TooltipDialog" id="dialog12" title="First Dialog" execute="checkPw(arguments[0]);">                <table>                  <tr>                  <td><label for="name">Old Password: </label></td>                      <td><input dojoType="dijit.form.TextBox" type="password" name="oldpw" id="oldpw"></td>                  </tr>                  <tr>                      <td><label for="loc">New Password: </label></td>                      <td><input dojoType="dijit.form.TextBox" type="password" name="newpw" id="newpw"></td>                  </tr>                  <tr>                      <td><label for="desc">Confirm New Password: </label></td>                      <td><input dojoType="dijit.form.TextBox" type="password" name="confirmpw" id="confirmpw"></td>                  </tr>                  <tr>                      <td colspan="2" align="center">                          <button dojoType=dijit.form.Button type="submit" onclick="changePassword();">Submit</button></td>                  </tr>                </table>              </div>          </div>        </td><td>&nbsp;</td>          <td>          <div dojoType="dijit.form.DropDownButton">              <span>Forgot Password</span>              <div dojoType="dijit.TooltipDialog" id="dialog11" t

itle="First Dialog" execute="checkPw(arguments[0]);">                <table>                  <tr>                  <td><label>Enter UserId: </label></td>                      <td><input dojoType="dijit.form.TextBox" type="text" name="userId"></td>                  </tr>                  <tr><td>Or</td></tr>                  <tr>

Page 54: DOJO Tutorial

                      <td><label>Enter Email Address: </label></td>                      <td><input dojoType="dijit.form.TextBox" type="text" name="email"></td>                  </tr>                                    <tr>                      <td colspan="2" align="center">                          <button dojoType=dijit.form.Button type="submit">Submit</button></td>                  </tr>                </table>              </div>          </div>        </td>

        </tr>        </table>

      </form>    </div>

    <script>              function validate(){

                         userId = document.getElementById('userId').value             password = document.getElementById('password').value             errMsg=" ";                         if(userId == ""){              errMsg +="Please enter User Name\n";              }                         if(password == ""){                errMsg +="Please enter Password" ;              }             if(errMsg!= " "){               alert(errMsg);                       return false;             }               document.forms['loginForm'].submit();          }

    </script>

    <script>            function validate1(){

                         userName = document.getElementById('userName').value             email = document.getElementById('email').value             errMsg=" ";                                      if(userName == "" && email == ""){              errMsg +="Please enter userName Or email address\n";

Page 55: DOJO Tutorial

             }             var reg = /^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+

\.([A-Za-z]{2,4})$/;             if (!(email == "")){               if(reg.test(email) == false) {                 errMsg+='Invalid Email Address';               }             }                                    if(errMsg!= " "){               alert(errMsg);                       return false;             }               document.forms['resetPasswordForm'].submit();          }

    </script>    <script>      function changePassword(){        newpw=document.getElementById('newpw').value        confirmpw=document.getElementById('confirmpw').value        if (newpw!=confirmpw){          alert('Please enter correct confirm password.');        }        else{        alert('You can do any type of action');        }      }    </script>  </body></html>

Giao diện chương trình:

K

hi click vào nút “Change Password”

Page 56: DOJO Tutorial

3

3. Dojo TimeSpinner

TimeSpinner cung cấp cho người dùng khả năng tăng hay dảm thời gian thôgn qua TimeSpinner button trong AM và PM. Nếu ta nhập vào trước 12:00 thì nó hiện thời gian là AM và sau 12:00 nó sẽ hiện thời gian là PM.

Code demo:

Page 57: DOJO Tutorial

<html><head><title> Dojo TimeSpinner Example</title>  <style type="text/css">    @import "../dijit/themes/soria/soria.css";    @import "/resources/dojo.css";  </style><script type="text/javascript" src="dojo.js" djConfig="parseOnLoad: true">

</script>

<script type="text/javascript">  dojo.require("dojox.widget.TimeSpinner");  dojo.require("dojo.parser"); // scan page for widgets

</script></head><body class="soria"><h1>Dojo TimeSpinner Example Demo</h1><br>

  <input id="timeSpinner" dojoType="dojox.widget.TimeSpinner"    value="12:30 PM"    name="timeSpinner"    hours="12"    id="timeSpinner" /></body></html>

Giao diện chương trình:

Page 58: DOJO Tutorial

K

Page 59: DOJO Tutorial

III. DOJO và AJAX

Trong phần này sẽ trình bầy về:

Dojo Toolkit Package System. Remoting via dojo.io.bind Dojo DOM backward/Forward và Bookmarking Dojo Event System Overview DOM events chaining function call AOP event model Dojo Widget Dojo Drag and Drop Dojo Animation Dojo Storage Dojo Performance Tuning

1. Dojo Toolkit Package System

Các thư viện của Dojo được tổ chức trong các package như các thư viện của Java. Ta chỉ cần import vào các package cần sử dụng. Ví dụ:

dojo.require(“dojo.event.*”); dojo.require(“dojo.dnd.*”);

require( ) sẽ lấy về các JavaScript code và lạp nó vào trong trang web.

2. Dojo Toolkit Libraries

dojo.io: AJAX-based để liên lạc với server. dojo.event: thống nhất hệ thống sự kiện cho DOM và các sự kiện lập trình. dojo.lang: Các thủ tục hữu ích để tạo JavaScirpt dễ dàng hơn. dojo.string: thao tác String dojo.dom: các thao tác với DOM dojo.style: các thao tác sử lý CSS Style. dojo.html: Các điều khiển HTML. dojo.reflect: Reflection API dojo.date: xử lý Date. dojo.logging.Logger: thư viện Logging dojo.profile: JS Profiler. dojo.regexp: regular Expression generators dojo.dad: Drag and Drop dojo.collections: tập hợp cấu trúc dữ liệu dojo.crypto: Cryptographic API (api mật mã)

Page 60: DOJO Tutorial

dojo.reflection: sử lý phản hồi (Reflection routines) dojo.math: sử lý toán học. dojo.storage: sử lý lưu trữ. dojo.uri: sử lý nắm bắt URL dojo.widget: Widget framework

3. Remoting via dojo.io.bind()

3.1 dojo.io.bind()

dojo.io.* chứa các API cho phép làm việc trên network I/O

dojo.io.bind() chứa các điều khiển XMLHttpRequest mức thấp. Trên một trình duyệt, dojo.io.bind() là cách tạo ra một “Ajax” requests.

Lợi ích khác:

Chặn back-button. “Trong suốt” với người dùng. Nắm bắt lỗi.

3.2 Transports

dojo.io.bind và các chức năng liên quan có thể liên lạc với server sử dụng các phương thức khác nhau, gọi là transports

XMLHttp Iframe I/O ScriptSrcIO

Mỗi cái trong số chúng đều có những giới hạn/ hạn chế, bạn nên lựa chọn transport nào để làm viêc tốt nhất cho tình hình của bạn(situation).

Transport mặc định là XMLHttp.

3.3 XMLHttp transport

Nó làm việc tốt trong phần lớn các trường hợp, nhưng không thể truyền file, không thể làm việc thông qua domains (ví dụ: không thể kết nối tới trang khác ngoài trang hiện tại), và không thể làm việ với giao thức file://

dojo.require("dojo.io.*");

function mySubmit() {

Page 61: DOJO Tutorial

dojo.io.bind ({

url: 'server.cfm',

handler: callBack,

formNode: dojo.byId('myForm')

});

}

function callBack(type, data, evt) {

dojo.byId('result').innerHTML = data;

}

3.4 Iframe I/O Transport

Iframe I/O transport là hữu dụng vì nó có thể upload file tới server:

dojo.require("dojo.io.*");

dojo.require("dojo.io.IframeIO");

function mySubmit() {

dojo.io.bind ({

url: 'server.cfm',

transport: “IframeTransport”,

handler: callBack,

formNode: dojo.byId('myForm')

});

}

Page 62: DOJO Tutorial

function callBack(type, data, evt) {

dojo.byId('result').innerHTML = data;

}

3.5 ScriptScrIO transport

XMLHttp không thể lạp dữ liệu từ domain khác. ScriptSrcIO stransport hữu dụng cho trường hợp trên. RPC service của Yahoo được phát triển sử dụng ScriptSrcIO

dojo.require(”dojo.io.*”);

dojo.require(”dojo.io.ScriptSrcIO”);

dojo.io.bind({

url: “http://example.com/json.php”,

transport: “ScriptSrcTransport”,

jsonParamName: “callback”,

mimetype: “text/json”,

content: { ... }

});

3.6 Cú pháp dojo.io.bind( )

// Make a request that returns raw text from a URL

dojo.io.bind({

// URL to make a request to

url: "http://foo.bar.com/something",

// Callback function to execute upon successful response

Page 63: DOJO Tutorial

load: function(type, data, evt){ /*do something w/ the data */ },

// Type of data that is returned

mimetype: "text/plain"

// More options

});

3.7 Ví dụ 1: Simple Request

Tạo một request mà nó chả về một dòng text từ một URL

dojo.io.bind({

url: "http://foo.bar.com/sampleData.txt",

load: function(type, data, evt){ /*do something w/ the data */ },

mimetype: "text/plain"

});

3.8 Ví dụ 2: Simple request

Tạo một tham số đầu tiên

var bindArgs = {

url: "http://foo.bar.com/sampleData.txt",

load: function(type, data, evt){ /*do something w/ the data */ },

mimetype: "text/plain"

};

Gửi yêu cầu đi

dojo.io.bind(bindArgs);

3.9 Ví dụ 2: bắt lỗi

Page 64: DOJO Tutorial

Tạo một request mà trả về một dòng text từ một URL với một error handling

dojo.io.bind({

url: "http://foo.bar.com/sampleData.txt",

load: function(type, data, evt){ /*do something w/ the data */ },

error: function(type, error){ /*do something w/ the error*/ },

mimetype: "text/plain"

});

3.10 Ví dụ 3:

Ví dụ này tương tự như ví dụ 2. Nắm bắt lỗi bằng cách sử dụng type:

dojo.io.bind({

url: "http://foo.bar.com/sampleData.txt",

handle: function(type, data, evt){

if(type == "load"){

// do something with the data object

}else if(type == "error"){

// here, "data" is our error object

// respond to the error here

}else{

// other types of events might get passed, handle them here

}

},

mimetype: "text/plain"

Page 65: DOJO Tutorial

});

3.11. Chỉ định định dạng của response

text/plain : kiểu response là định dạng String text/javascript: định dạng của response là javaScript. text/xml: định dạng của response là XML. text/json: định dạng trả về là JSON.

3.12 Ví dụ 4: Dynamic content loading (getting javaScript string)

yêu cầu một đoạn javaScript (javaScript literal string) và đánh giá (evaluate) nó. Để làm điều dó, ta cần thiết lập biến ràng buộc về kiểu của response thông qua tham số mimetype:

dojo.io.bind({

url: "http://foo.bar.com/sampleData.js",

load: function(type, evaldObj){ /* do something */ },

mimetype: "text/javascript"

});

3.13 Ví dụ 5: chỉ định kiểu XMLHTTP Transport

Nếu bạn muốn chắc chắn rằng bạn dang sử dụng XMLHTTP transport, chỉ định XMLHTTP Transport

dojo.io.bind({

url: "http://foo.bar.com/sampleData.js",

load: function(type, evaldObj){ /* do something */ },

mimetype: "text/plain", // get plain text, don't eval()

transport: "XMLHTTPTransport"

Page 66: DOJO Tutorial

});

3.14 Ví dụ 6: submission forms via a request

bind() hỗ trợ việc submission của form thông qua một request (với một thông báo đơn giản rằng nó sẽ không upload file thông qua XMLHTTP)

dojo.io.bind({

url: "http://foo.bar.com/processForm.cgi",

load: function(type, evaldObj){ /* do something */ },

formNode: document.getElementById("formToSubmit")

});

4. Demo: Remoting with dojo.io.bind()

4.1 Ví dụ 6: back button

var sampleFormNode = document.getElementById("formToSubmit");

dojo.io.bind({

url: "http://foo.bar.com/sampleData.js",

load: function(type, evaldObj){

// hide the form when we hear back that it submitted successfully

sampleFormNode.style.display = "none";

},

backButton: function(){

// ...and then when the user hits "back", re-show the form

sampleFormNode.style.display = "";

Page 67: DOJO Tutorial

},

formNode: sampleFormNode

});

4.2 Ví dụ 7: Forward Button

var sampleFormNode = document.getElementById("formToSubmit");

dojo.io.bind({

url: "http://foo.bar.com/sampleData.js",

load: function(type, evaldObj){

// hide the form when we hear back that it submitted successfully

sampleFormNode.style.display = "none";

},

backButton: function(){

// ...and then when the user hits "back", re-show the form

sampleFormNode.style.display = "";

},

forwardButton: function(){

// and if they hit "forward" before making another request, this

// happens:

sampleFormNode.style.display = "none"; // we don't re-submit

},

formNode: sampleFormNode

});

Page 68: DOJO Tutorial

4.3 Ví dụ về Bookmarking

5. DOM Manupulation

5.1 Dojo DOM Manipulation Routines

• dojo.byId(“someid”)

> Same as document.getElementById("someid");

• dojo.dom.isNode(node)

• dojo.dom.getTagName(node)

• dojo.dom.firstElement(node)

• dojo.dom.lastElement(node)

• dojo.dom.nextElement(node)

• dojo.dom.prevElement(node)

• ddojo.dom.moveChildren (srcNode, destNode, trim)

• dojo.dom.copyChildren (srcNode, destNode, trim)

• dojo.dom.removeChildren(node)

• dojo.dom.replaceChildren(node, newChild)

• dojo.dom.removeNode(node)

• dojo.dom.getAncestors(node, filterFunction, returnFirstHit)

• dojo.dom.getAncestorsByTag(node, tag)

• dojo.dom.innerXML(node)

• dojo.dom.createDocumentFromText(str, mimetype):

• dojo.dom.insertAfter(node, reference, force):

Page 69: DOJO Tutorial

• dojo.dom.insertAtPosition(node, reference, position)

• dojo.dom.textContent(node)

> Gets the text-only serialization of a node's children

• dojo.dom.textContent(node, text)

> Sets the text-only serialization of a node's children

6. Dojo Event System

Trong mục này ta sẽ tìm hiểu các phần:

Overview Handling DOM events Chaining function calls Before Adviec Disconnecting event handlers. Resources.

6.1 Nắm bắt các sự kiện JavaScript

Các events là các thành phần của JavaScirpt vì:

Chúng điều khiển giao diện người dùng (User interface). Trả về trong AJAX request. Cho phép các thành phần JavaScript tương tác với nhau.

6.2 Các vấn đề của JavaScript Event Handling

Có sự khác nhau trong code về Even Handling giữa các trình duyệt khác nhau. Số lượng các thành phần JavaScript trong một trang web tăng lên, component code có thể

hướng tới liên kết chặt chẽ hơn và khả năng bảo trì. Việc gán thêm các event handler vào một node là khó.

6.3 Lý do sử dụng Dojo Event System.

Bạn có thể đăng ký để “nắng nghe” các sự kiện thông qua một API đơn giản: dojo.event.connect().

Coi bất cứ hàm nào được gọi như một sự kiện và có thể nắng nghe nó. Nắm bắt nhiều hơn các sự kiện Dom.

Nó cung cấp sự phối hợp nắm bắt các sự kiện ở mức cao hơn. Event handler của bạn có thẻ được gọi “before” hay “after”

Page 70: DOJO Tutorial

Việc thiết lập của event handler trên DOM Nodes điễn ra mà không cần chỉ định rõ các thuộc tính on*

6.4 dojo.event.connect(srcObj, “srcFunc”, “targetFunc”)

Cung cấp một API cho việc nắm bắt các sự kiện. Sử lý như nhau trên các trình duyệt khác nhau. Ngăn chặn các lỗ thủng về bộ nhớ trên một vài trình duyệt. Tập chung vào việc thêm nhiều event handler vào một single event type.

6.5 Dojo Event System: handling DOM Events

6.5.1 Ví dụ 1: DOM event sử dụng Named Event handler

<script type="text/javascript" src="dojo.js"></script>

<script type="text/javascript">

window.onload = function () {

var link = document.getElementById("mylink");

// “myHandler” event handler is registered for the

// "onclick" property of “mylink” node.

dojo.event.connect(link, "onclick", myHandler);

}

// Define an event handler named as “myHandler”

function myHandler(evt) {

alert("myHandler: invoked - this is my named event handler");

}

</script>

<a href="#" id="mylink">Click Me</a>

Page 71: DOJO Tutorial

6.5.2 Ví dụ 2: sử dụng Unnamed (Anonymous) Event Handler

<script type="text/javascript" src="dojo.js"></script>

<script type="text/javascript">

window.onload = function () {

var link = document.getElementById("mylink");

// connect link element 'onclick' property to an anonymous function

dojo.event.connect(link, "onclick", function(evt) {

var srcElement;

if (evt.target) {

srcElement = evt.target;

} else if (evt.srcElement) {

srcElement = evt.srcElement;

}

if (srcElement) {

alert("dojo.event.connect event: " + srcElement.getAttribute("id"));

}

});

}"

</script>

<a href="#" id="mylink" onclick="alert('inline event');">Click Me</a>

6.5.3 Ví dụ 3: thêm một phương thức của một object như một event handler

Page 72: DOJO Tutorial

// Identify the node for which you want register event handler

var handlerNode = document.getElementById("handler");

// This connect() call ensures that when handlerNode.onclick()

// is called, object.handler() will be called with the same arguments.

dojo.event.connect(handlerNode, "onclick", object, "handler");

6.5.4 Ví dụ 4: đăng ký nhiều Event Handler

var handlerNode = document.getElementById("handler");

// Connect also transparently handles multiple listeners.

// They are called in the order they are registered.

// This would kick off two separate actions from a single onclick event:

dojo.event.connect(handlerNode, "onclick", object, "handler");

dojo.event.connect(handlerNode, "onclick", object, "handler2");

6.5.5 Thay đổi việc gọi các hàm

Gắn function của một object vào một function khác:

Sử dụng khi ta cần gọi một function khi một function khác được gọi.

Nguồn gốc của sự kiện là gọi một function không phải là DOM event.o Vẫn sử dụng dojo.event.connect()

dojo.event.connect(srcObj, "srcFunc", targetObj, "targetFunc");

6.5.6 Ví dụ 5: gán một function của một object vào một function khác.

Định nghĩa một object đơn giản:

var exampleObj = {

Page 73: DOJO Tutorial

counter: 0,

foo: function(){

this.counter++;

alert("foo: counter = " + this.counter);

},

bar: function(){

this.counter++;

alert("bar: counter = " + this.counter);

}

}

Vấn đề đặt ra là: tôi muốn exampleObj.bar được gọi mỗi khi exampleObj.foo được goi ? Ta có thể làm điểu này tương tự như cách ta đã làm với DOM events. Bây giờ việc gọi foo( ) sẽ gọi bar( ):

dojo.event.connect(exampleObj, "foo", exampleObj, "bar");

6.5.7 Aspect-Oriented (“before advice” và “after advice”)

Before Advice

dojo.event.connect( ) có thể được dùng để gọi các listeners (event handlers) trước khi sự kiện gốc được gọi.

o Trong thuật ngữ Aspect Oriented Programming , nó được gọi là “before advice”

Ví dụ: “bar” được gọi trước “foo” khi mà exampleObj.foo được gọi:o dojo.event.connect("before", exampleObj, "foo", exampleObj, "bar");

“after advice” là mặc định

Page 74: DOJO Tutorial

6.5.8 Ví dụ 6: gắn một function của một object tới một function khác - “before”

var exampleObj = {

counter: 0,

foo: function(){

this.counter++;

alert("foo: counter = " + this.counter);

},

bar: function(){

this.counter++;

alert("bar: counter = " + this.counter);

}

};

// “bar” function will be called before “foo”

dojo.event.connect(“before”, exampleObj, "foo", exampleObj, "bar");

6.6 Event Handler Wrapper

Trong một vài trường hợp bạn có thể muốn định nghĩa cách truyền hay các tham số của một event handler mà không cần phải sửa source code của thành phần javaScript mà bạn đang sử dụng.

Việc thêm vào “before” và “after” vào một event handler listeners có thể là chưa đủ.

Trong Dojo, nó có thể được thực hiện sử dụng dojo.io.connect với “around” như một tham số đầu tiên.

dojo.io.connect(“around”, ...);

Nó hoạt động giống như Servlet Filter

Page 75: DOJO Tutorial

Cắt các yêu cầu và điều chỉnh cách chuyền tải.

6.6.1 Ví dụ 7: Event Handler Wrapper

// custom event handler wrapper

function customLoadHandler(invocation) {

alert("custom menu name =" + invocation.args[0].name);

// update the name property of the argument

invocation.args[0].name = "Custom Menu";

//call the default event handler

invocation.proceed();

}

function ImageScroller() {

this.load = function (args) {

alert("default menu name=" + args.name);

}

}

var is = new ImageScroller();

dojo.event.connect("around", is, "load", this, "customLoadHandler");

is.load({name: "My Menu", items: ['File', 'Save']});

// alerts "custom menu name=My Menu"

// alerts "default menu name=Custom Menu"

Page 76: DOJO Tutorial

6.7 publish/Subscribe Event Handling

Sử dụng khi bạn cần giao tiếp/liên lạc các sự kiện lặc danh gữa các thành phần. Cho phép tùy chình các thành phần để cho phép topic name được gửi như một sự khởi tạo

tham số để tạo thành phần mềm dẻo hơn.

7. Demo: Dojo Event System

7.1 Dojo Event System: Disconnect Event handlers

Sử dụng dojo.event.disconnect( ) cho các sự kiện.

Phải truyền vào đúng tên như ta đã truyền vào trong dojo.event.connect( ).

dojo.event.topic.unsubscribe( ) cho các topics

Bắt buộc phải truyền vào chính xác tên như đã truyền vào dojo.event.topic.subscribe( )

7.2 Một số tài liệu và ví dụ về dojo event system

Events for JavaScript Components:

https://bpcatalog.dev.java.net/source/browse/*checkout*/bpcatalog/ee5/docs/ajax/handling-js-events.html

Dojo Event System

http://dojotoolkit.org/docs/dojo_event_system.html

Dojo Event Examples

http://dojo.jot.com/EventExamples

8. Dojo Widget

Cung cấp các UI như button, text box, scroll bar, calendar, tree ... Nó có thể là một thành phẩn tích hợp. Có thể thay đổi style. Có thể đăng ký các event handlers. Có thể làm việc trên nhiều trình duyệt khác nhau.

8.1 Sử dụng Dojo Widget

Dùng một trong 3 hàm sau:

Page 77: DOJO Tutorial

<dojo:NameofWidget ../> <div dojoType="NameOfWidget" ..../> <div class="dojo-NameOfWidget" .../>

8.2 Editor Widget

Giao diện chương trình:

Cách thêm vào:

<script>

dojo.require("dojo.widget.Editor");

</script>

<body>

<div dojoType="Editor" items="formatblock;|;

insertunorderedlist;insertorderedlist;|;

Page 78: DOJO Tutorial

bold;italic;underline;strikethrough;|;createLink;">

...

8.3 Cách sử dụng FisheyeList và FisheyeListItem

Ví dụ 1:

<script>

dojo.require("dojo.widget.FisheyeList");

dojo.hostenv.writeIncludes();

</script>

<body>

<div class="dojo-FisheyeList"

dojo:itemWidth="50" dojo:itemHeight="50"

dojo:itemMaxWidth="200" dojo:itemMaxHeight="200"

dojo:orientation="horizontal"

dojo:effectUnits="2"

dojo:itemPadding="10"

dojo:attachEdge="top"

dojo:labelEdge="bottom"

dojo:enableCrappySvgSupport="false"

>

<div class="dojo-FisheyeListItem" onClick="load_app(1);"

dojo:iconsrc="images/icon_browser.png" caption="Web Browser">

</div>

Page 79: DOJO Tutorial

<div class="dojo-FisheyeListItem" onClick="load_app(2);"

dojo:iconsrc="images/icon_calendar.png" caption="Calendar">

</div>

<div class="dojo-FisheyeListItem" onClick="load_app(3);"

dojo:iconsrc="images/icon_email.png" caption="Email">

</div>

<div class="dojo-FisheyeListItem" onClick="load_app(4);"

dojo:iconsrc="images/icon_texteditor.png" caption="Text Editor">

</div>

...

Kết quả:

Page 80: DOJO Tutorial

8.4 Tạo các Widget

Các bước tạo một Widget:

Tạo các template:o dojo/src/widget/templates/HtmlSlideShow.htmlo dojo/src/widget/templates/HtmlSlideShow.css

Tạo một class widget javascript sử dụng Bolilerplate code:o dojo/src/widget/HtmlSlideShow.jso Widget JavaScript class chỉ định đường dẫn đến các template:

Ví dụ:

file HtmlSlideShow.html:

<div style="position: relative; width: 800px; height: 600px;"

dojoAttachPoint="imagesContainer">

Page 81: DOJO Tutorial

<img dojoAttachPoint="img1" border="0" hspace="0" vspace="0"

class="slideShowImg" style="z-index: 1;" />

<img dojoAttachPoint="img2" border="0" hspace="0" vspace="0"

class="slideShowImg" style="z-index: 0;" />

</div>

file HtmlSlideShow.css

.slideShowImg {

position: absolute;

left: 0px;

top: 0px;

border: 2px solid #4d4d4d;

padding: 0px;

margin: 0px;

}

Widget Bolilerplate Code

// tell the package system what classes get defined here

dojo.provide("dojo.widget.SlideShow");

// load dependencies

dojo.require("dojo.widget.*");

// define the widget class

Page 82: DOJO Tutorial

dojo.widget.SlideShow = function(){

// inheritance

// see: http://www.cs.rit.edu/~atk/JavaScript/manuals/jsobj/

dojo.widget.HtmlWidget.call(this);

this.templatePath = dojo.uri.dojoUri("src/widget/templates/HtmlSlideShow.html");

this.templateCSSPath = dojo.uri.dojoUri("src/widget/templates/HtmlSlideShow.css");

this.widgetType = "SlideShow";

}

// complete the inheritance process

dj_inherits(dojo.widget.SlideShow, dojo.widget.HtmlWidget);

// make it a tag

dojo.widget.tags.addParseTreeHandler("dojo:slideshow");

Mai Văn Hà Tham khảo: http://www.roseindia.net và Dojo tutorial của Sun