This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
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
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
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 :
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)
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:
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:
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.
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');}
<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'.
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 đó,
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
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ó.
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:
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:
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ị.
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.
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.
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.
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.
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.
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ọ.
Đâ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.
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 %.
<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)); }
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ị
<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.
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ị.
<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:
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.
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
<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>
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.
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
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).
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:
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.
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
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.
<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:
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.
</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”
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.
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ụ:
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ã)
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() {
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')
});
}
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
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
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"
});
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.
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"
});
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 = "";
},
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
> 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”
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*
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
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 = {
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( ):
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
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"
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( )
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.
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: