Phát triển các widget bằng Dojo 1.x

Chia sẻ: Nguyen Nhi | Ngày: | Loại File: PDF | Số trang:34

Thêm vào BST

Báo xấu

90
lượt xem 8
download

Download Vui lòng tải xuống để xem tài liệu đầy đủ

Marco Lerro, Kỹ sư, IBM Roberto Longobardi, Thiết kế giải pháp, IBM Tivoli Software Gianluca Perreca, Kỹ sư, IBM Tivoli Software Alessandro Scotti, Kỹ sư phần mềm, IBM Tóm tắt: Tìm hiểu các cơ sở trong việc phát triển các widget HTML bằng bộ công cụ Dojo JavaScript. Bài viết này chỉ giới thiệu và cung cấp một số ví dụ nhằm giúp bạn trong quá trình xây dựng – khởi đầu bằng một số widget mẫu ví dụ và tiến dần tới các widget phức tạp hơn, đồng thời nêu bật và giải quyết các vấn đề phổ...

Chủ đề:

Bình luận(0) Đăng nhập để gửi bình luận!

Lưu

Nội dung Text: Phát triển các widget bằng Dojo 1.x

Phát triển các widget bằng Dojo 1.x Marco Lerro, Kỹ sư, IBM Roberto Longobardi, Thiết kế giải pháp, IBM Tivoli Software Gianluca Perreca, Kỹ sư, IBM Tivoli Software Alessandro Scotti, Kỹ sư phần mềm, IBM Tóm tắt: Tìm hiểu các cơ sở trong việc phát triển các widget HTML bằng bộ công cụ Dojo JavaScript. Bài viết này chỉ giới thiệu và cung cấp một số ví dụ nhằm giúp bạn trong quá trình xây dựng – khởi đầu bằng một số widget mẫu ví dụ và tiến dần tới các widget phức tạp hơn, đồng thời nêu bật và giải quyết các vấn đề phổ biến mà bạn có thể gặp trong giai đoạn phát triển. Giới thiệu Mục tiêu của bài viết này là cung cấp cho bạn các cơ sở để phát triển widget HTML bằng bộ công cụ Dojo JavaScript, bắt đầu từ phiên bản 1.0. Bài viết này cũng mô tả nhiều ví dụ, bắt đầu từ các widget đơn giản và tiến dần tới các widget phức tạp hơn, trong khi giải quyết các vấn đề phổ biến mà bạn có thể gặp trong khi phát triển widget. Bộ công cụ Dojo là gì? Dojo là bộ công cụ mã nguồn mở, dựa trên JavaScript, dành cho việc phát triển các ứng dụng Web HTML động. Bộ công cụ này cho phép bạn có thể xây dựng nhanh các widget phức tạp hơn các widget HTML tiêu chuẩn. Việc sử dụng các thành phần mà Dojo cung cấp sẽ giúp giao diện người dùng Web của bạn thêm hữu dụng, phản hồi nhanh chóng và thiết thực. API mức thấp và các tầng tương thích mà Dojo cung cấp sẽ giúp bạn viết ra những ứng dụng tương thích với nhiều trình duyệt.
Trước khi bạn bắt đầu Trước khi bắt tay vào, đầu tiên bạn cần phải thiết lập môi trường phát triển. Để làm điều này cần: 1. Tải phiên bản phát hành mới nhất của bộ công cụ Dojo (dojo-release-1.x.x- src.zip hay là dojo-release-1.x.x-src.tar.gz) từ trang chủ của dự án Dojo (xem phần Tài nguyên để tìm địa chỉ) 2. Giải nén nội dung của tệp lưu trữ vào một thư mục, chú ý đến vị trí nơi tệp dojo.js được giải nén. Hệ thống gói sẽ quản lý việc nạp tất cả các mô đun sau khi tệp dojo.js được nạp lên trang web. Khi thực hiện xong, cấu trúc của các thư mục sẽ như trình bày trong Hình 1. Hình 1. Cấu trúc thư mục sau khi bung tệp dojo. Dijit là hệ thống widget được đặt trên tầng đỉnh trên cùng của dojo. Thông qua chủ đề (theme) riêng của mình, gọi là tundra, hệ thống này cung cấp thiết kế và lược đồ màu sắc chung cho tất cả các widget của nó. Dojox là gói phát triển các phần mở rộng của bộ công cụ Dojo. Nó dành cho những người cần đến những chức năng không có trong bộ tập hợp các chức năng chung. Các widgets Dojo Khi duyệt các trang Web, bạn sẽ bắt gặp hàng trăm widget trên màn hình làm việc của mình. Mỗi nút bấm trên trình duyệt Web của bạn là một widget. Mỗi hộp nhập văn bản cũng là một widget. HTML chuẩn cung cấp một tập giới hạn các widget: hộp nhập văn bản, nút bấm và siêu liên kết. Các widget Dojo lấy một mục, ví dụ như hộp nhập văn bản, và thêm các chức năng dành cho các đối tượng thân thiện với người dùng hơn, ví dụ như thêm lịch
dạng đồ họa để chọn ngày tháng chẳng hạn. Việc này được thực hiện mà không hề làm hỏng mục gốc mà trên đó có xây dựng thêm chức năng mới. Một widget Dojo gói gọn các thành phần Web trực quan để dễ dàng tái sử dụng. Nó được định nghĩa nhờ 3 tệp: Tệp JavaScript chứa logic của widget.  Tệp HTML (là tùy chọn) cung cấp một khuôn mẫu giống như HTML cho  widget. Tệp CSS, thường dùng chung cho tất cả các widget (là kiểu dáng chủ đạo -  theme), trong đó chứa các kiểu dáng trực quan được áp dụng cho các khuôn mẫu HTML của widget. Nhập khẩu bộ công cụ Dojo Liệt kê 2 cho thấy một khung sườn HTML cơ sở dùng để nhập khẩu một widget vào trang Web thông thường. Liệt kê 1. Mã HTML để nhập khẩu một widget vào trang Web. Dojo Toolkit Test Page /* CSS style code */
/* Javascript code */ /* Widgets definition code */ Thẻ script đầu tiên khởi tạo bộ công cụ Dojo chỉ đơn giản bằng cách nạp tệp mồi dojo.js. Các thuộc tính parseOnLoad và isDebug của đối tượng djConfig là hai tùy chọn cấu hình phổ biến mà Dojo kiểm tra trong lúc chạy. parseOnLoad bật/tắt việc phân tích cú pháp các thẻ đánh dấu trong lúc nạp lên, trong khi isDebug cho phép hay không cho phép các thông báo lỗi. Đối tượng djConfig cũng có thể được thiết lập giống một biến toàn cục trước khi nạp tệp dojo.js: Liệt kê 2. Mã thiết lập các biến toàn cục với djConfig var djConfig = { isDebug:true, parseOnLoad:true };
Hệ thống gói của Dojo Dojo có hệ thống gói để cấu trúc các lớp của ứng dụng thành các tệp và nạp chúng thông qua hàm dojo.require. Hàm này cho phép nạp từng phần của bộ công cụ Dojo, còn chưa được cho sẵn trong tệp cơ sở dojo.js. Để tạo một widget, bạn phải nhập khẩu khai báo widget bằng cách th êm vào các dòng như trong Liệt kê 3. Liệt kê 3. Mã để nhập khẩu một khai báo widget. dojo.require("widgets.Button"); Bây giờ, bạn có thể chèn mã sau đây vào phần thân: My Butto n
Thuộc tính dojoType làm cho bộ công cụ Dojo quản lý các thẻ theo một cách đặc biệt. Vào thời điểm nạp trang, trình phân tích cú pháp Dojo sẽ tìm kiếm khai báo widget được xác định rõ trong thuộc tính dojoType , khởi tạo một cá thể widget này và thay thế thẻ đó bằng một nút DOM chứa widget đã nhận được. Khai báo một widget Bây giờ, ta hãy xét một ví dụ widget TextBox, gồm một tệp JavaScript, một tệp khuôn mẫu và một tệp kiểu dáng CSS. Đầu tiên, bạn phải tạo một tệp JavaScript, TextBox.js, trong đó có định nghĩa và logic của widget (xem Liệt kê 4) Liệt kê 4. Nội dung của tệp JavaScript TextBox.js dojo.provide("widgets.TextBox"); dojo.require("dijit._Widget"); dojo.require("dijit._Templated"); dojo.declare( "widgets.TextBox", [dijit._Widget, dijit._Templated], { /** the template path */ templatePath: dojo.moduleUrl("widgets", "templates/TextBox.html"), /** the input DOM node */ inputNode: null, /** the label */
label: "", /** onkeyup handler */ onKeyUp: function() { // give a chance to the browser to update the DOM setTimeout(dojo.hitch(this, this.validate), 0); }, /** validate function */ validate: function() { if ( this.inputNode.value === "Ok" ) { // the text is correct dojo.addClass(this.inputNode, "inputOk"); dojo.removeClass(this.inputNode, "inputError"); } else { // the text is incorrect dojo.removeClass(this.inputNode, "inputOk"); dojo.addClass(this.inputNode, "inputError"); } } } );
dojo.provide() định nghĩa tên của widget mới và đăng ký khai báo lớp. Lưu ý rằng: dijit._Widget và dijit._Templated là các lớp cha mẹ bậc trên (superclasses)  của widget TextBox. templatePath, inputNode, và label là các thuộc tính của widget.  onKeyUp() và validate() là các hàm định nghĩa logic của widget.  Bây giờ, bạn có thể định nghĩa tệp khuôn mẫu TextBox.html nh ư biểu diễn trong Liệt kê 5. Liệt kê 5. Nội dung tệp TextBox.html ${label}:
Cụm ${label} sẽ được thay thế bằng thuộc tính label của cá thể widget đó. Khai báo dojoAttachPoint sẽ khiến cho thuộc tính InputNode của widget được đặt thành nút DOM tương ứng với thẻ input. Khai báo dojoAttachEvent sẽ khiến cho các sự kiện onKeyUp (nhận được từ nút input) kích hoạt lời gọi đến phương thức onKeyUp của widget. Lớp textBox và inputOk chỉ tới tên của các lớp CSS được định nghĩa trong tệp TextBox.css. Xem Liệt kê 6. Liệt kê 6. Tên các lớp CSS trong tệp TextBox.css .ibm .textBox { margin: 5px; padding: 5px; background-color: #eee; } .ibm .inputOk { border: 1px solid green; } .ibm .inputError { border: 1px solid red; }
Vì tên các lớp phải là duy nhất trong toàn bộ dự án, nên thường chúng sẽ có một định tố chọn CSS (ví dụ định tố chọn ở đây là ibm). Cuối cùng, widget có thể được tạo ra trên một trang HTML, như chỉ ra trong liệt kê 7. Liệt kê 7. Mã lệnh tạo widget trên trang HTML TextBox Widget @import "../dojo-1.0.0/dojo/resources/dojo.css"; @import "../dojo-1.0.0/dijit/themes/tundra/tundra.css"; @import "templates/TextBox.css";
dojo.require("dojo.parser"); dojo.registerModulePath("widgets", "../../widget"); dojo.require("widgets.TextBox");
Hình 2 hiển thị widget TextBox. Hình 2. Widget TextBox Kiểu khai báo đối lập với kiểu chương trình Dojo hỗ trợ hai mô hình lập trình, khai báo và chương trình. Cả hai mô hình đều có thể sử dụng trên cùng một trang nếu cần. Trong Liệt kê 7, widget được tạo ra theo mô hình khai báo. Một widget tương tự cũng có thể được tạo ra theo mô hình chương trình, như trong Liệt kê 8. Liệt kê 8. Tạo widget TextBox theo mô hình chương trình TextBox Widget
@import "../dojo-1.0.0/dojo/resources/dojo.css"; @import "../dojo-1.0.0/dijit/themes/tundra/tundra.css"; @import "templates/TextBox.css"; dojo.require("dojo.parser"); dojo.registerModulePath("widgets", "../../widget"); dojo.require("widgets.TextBox"); function createWidget() { var widget = new widgets.TextBox();
widget.label = "Name"; widget.startup(); } createWidget(); Bổ sung thêm về các widget Dojo Như đã đề cập từ đầu, một widget Dojo là một khai báo lớp Dojo được thừa kế từ một lớp đặc biệt: lớp dijit._Widget. Lớp này định nghĩa các hành vi cơ sở của một widget và cung cấp các chức năng thông dụng, được chia sẻ chung cho tất cả các triển khai widget. Các nhiệm vụ quan trọng nhất do lớp _Widget triển khai là:
Định nghĩa phương thức create, phương thức này sẽ được tự động gọi khi  khởi tạo một cá thể widget; phương thức này sẽ thi hành tất cả những bước tạo lập cần thiết. Định nghĩa một số phương thức khuôn mẫu (template), chúng cung cấp các  điểm móc nối (hook) đặc biệt dành cho các nhà triển khai widget, mang lại cho họ khả năng triển khai các hành động khởi tạo đặc biệt trong một pha kiến tạo cụ thể. Định nghĩa một loạt các phương thức destroy để dọn sạch các tài nguyên  widget đã được cấp phát. Định nghĩa phương thức event management, chúng sẽ nối buộc các phương  thức widget với các sự kiện nút DOM/sự kiện gọi phương thức. Pha tạo lập widget Phương thức create thực hiện các bước cơ bản sau đây để khởi tạo widget: Sinh ra ID duy nhất cho widget nếu như không được cung cấp Tất cả các widget Dojo đều phải được xác định nhờ một ID duy nhất. Khi một đối tượng widget được khởi tạo ra, nó sẽ được cấp một ID widget. Nếu không có thì Dojo sẽ sinh một ID theo dạng sau: packageName_className_number Ví dụ, một nút nhấn có thể có ID tự động sinh ra là: dijit_form_Button_0. packageName là gói widget mà dấu chấm (.) đã thay bằng dấu gạch dưới (_) (ví dụ, dijit_form), và số hiệu sẽ tăng dần theo từng widget. Đăng ký widget tại sổ đăng ký widget toàn cục Người ta có thể sử dụng phương thức dijit.byId để tìm kiếm các widget, phương thức này sẽ trả lại đối tượng widget tương ứng với ID đã cho. Sổ đăng ký là một đối tượng nằm trong không gian toàn cục ở dijit.registry_hash. Sử dụng các công cụ gỡ lỗi, ví dụ như FireBug (xem Tài nguyên), thâm nhập sổ đăng ký này có thể hữu dụng trong việc dò tìm, ví dụ, các widget có lỗ hổng. Ánh xạ các thuộc tính
Các thuộc tính widget có thể được tái ánh xạ đến các nút do người dùng định nghĩa trong khuôn mẫu widget. Các thuộc tính để ánh xạ và đích tới của chúng được liệt kê trong đối tượng attributeMap. Mỗi thuộc tính của những đối tượng này định nghĩa một ánh xạ theo cách sau: 1. Tên thuộc tính sẽ xác định tên thuộc tính widget, trong đó lưu giá trị để thiết đặt. 2. Giá trị thuộc tính sẽ xác định tên thuộc tính widget lưu trữ nút DOM đích. Nếu thấy xâu rỗng thì sử dụng domNode. Liệt kê 9 cho ta một ví dụ. Liệt kê 9. Khai báo một widget dojo dojo.declare( "MyWidget", dijit._Widget, { // the attribute to map (name and value) title: "myTitle", // the DOM node to be used to set the // title attribute to the "myTitle" value titleNode: null, // the attribute map // the title attribute is mapped to the titleNode
attributeMap: {title: "titleNode"}, // the template string templateString: "", Kết quả khuôn mẫu widget sẽ là: Lưu ý rằng vì lớp base _Widget đã ánh xạ một vài thuộc tính HTML cơ bản (như ID, lớp, kiểu), người triển khai thực hiện không nên ghi đè lên thuộc tính attributeMap. Thay vào đó, họ phải trộn lẫn thuộc tính attributeMap của lớp cơ sở với các giá trị của nó. Liệt kê 10 biểu diễn một ví dụ có được từ lớp _FormWidget. Liệt kê 10. Trộn lẫn thuộc tính atrributeMap lớp cơ sở với các giá trị tùy biến attributeMap: dojo.mixin( dojo.clone(dijit._Widget.prototype.attributeMap), {id:"focusNode", tabIndex:"focusNode", alt:"focusNode"} ), Các phương thức khuôn mẫu
Trong pha tạo widget, một vài phương thức sẽ được gọi, cho phép những người cài đặt thực hiện một số hành động trong các pha khởi tạo cụ thể. Các phương thức sau đây được gọi: 1. postMixInProperties: phương thức này được gọi sau khi tất cả các tham số của widget đã được thiết lập (được trộn) thành các thuộc tính của cá thể widget. Đây là thời điểm thích hợp để tiếp tục khởi tạo thuộc tính, nếu dựa trên các thuộc tính mà việc khởi tạo cá thể đối tượng sẽ cung cấp. 2. buildRendering: phương thức này được gọi vào thời điểm sinh ra biểu hiện của widget. Điểm móc nối này được triển khai trong lớp trộn dijit._Templated, lớp này cũng triển khai các khung sườn widget bằng các khuôn mẫu HTML. Những người triển khai có thể cung cấp cách thực hiện của mình nhằm tinh chỉnh công việc của lớp _Templated. 3. postCreate: phương thức này được gọi sau khi DOM của widget đã sẵn sàng và được chèn vào trang. Người triển khai có thể thao tác trên cấu trúc DOM của widget tại vị trí này. Các widget con chưa được khởi động. 4. startup: cơ hội cuối để thao tác trên widget. Vào lúc này thì các wiget con đã được khởi động. 5. uninitialize: được gọi sau khi widget đã bị hủy bỏ. Người triển khai có thể thực hiện một vài việc dọn dẹp làm sạch không được tự động hóa. Các phương thức khuôn mẫu có thể do người triển khai cung cấp, và người triển khai phải nhớ rằng lớp cha mẹ bậc trên có thể đã triển khai thực hiện các phương thức khuôn mẫu của nó. Để đảm bảo việc khởi tạo chính xác tất cả các lớp trong chuỗi móc xích này, người triển khai phải mã hóa thủ công lời gọi phương thức của lớp bậc trên như được chỉ ra trong Liệt kê 11. Liệt kê 11. Ví dụ về việc gọi phương thức của lớp cha mẹ bậc trên. startup: function() { // call the superclass' method this.inherited("startup", arguments);
// your code here } Như quy ước chung, đối với tất cả các phương thức tạo sinh (tất cả các phương thức khuôn mẫu ngoại trừ uninitialize), phương thức của lớp bậc trên phải được gọi đầu tiên để đảm bảo rằng các mục dữ liệu của lớp bậc trên được khởi tạo chính xác trước khi thao tác với chúng. Đối với phương thức uninitialize thì lại áp dụng quy tắc ngược lại. Một lưu ý cuối cùng là về phương thức startup. Đừng quên rằng phương thức startup được phương thức dojo.parser.parse tự động gọi, trong trường hợp widget được tạo ra bởi một khai báo. Startup sẽ không được thực hiện nếu widget được tạo ra bằng các lệnh chương trình và sẽ phải được khởi động thủ công như trong ví dụ dưới đây. var w = new MyWidget({}); w.startup(); Pha hủy bỏ widget Sau khi được tạo ra, các widget sẽ tồn tại cho đến khi có một yêu cầu hủy bỏ tường minh được thi hành. Người triển khai chịu trách nhiệm quản lý toàn bộ vòng đời của widget, bao gồm cả việc hủy bỏ widget. Nếu khác đi, sẽ đ ưa tới kết quả là có một widget lỗ thủng cho đến khi toàn bộ trang được dọn dẹp sạch sẽ. Widget cung cấp 4 phương thức hủy bỏ là: destroyRendering: phương thức này dọn sạch các mục biểu hiện của  widget. Trừ phi người triển khai cần dọn dẹp từng phần, phương thức này thường được gọi bởi các phương thức hủy bỏ khác.
destroyDescendants: hủy bỏ tất cả các widget con. Trừ phi người triển khai  cần dọn dẹp từng phần, phương thức này được gọi bởi phương thức destroyRecursive. destroy: hủy bỏ các mục widget (chứ không phải là các widget con).  destroyRecursive: hủy bỏ các mục của widget và các widget con. Nếu  widget chứa các widget con bên trong thì bắt buộc phải gọi phương thức này. Trong trường hợp widget có chứa các widget bên trong (ví dụ, có một vài widget trong khuôn mẫu), người triển khai phải nhớ kích hoạt các widget con, hủy bỏ chúng theo cách nào đó mà không bắt người dùng widget phải quyết định xem phải gọi phương thức hủy bỏ nào. Liệt kê 12 cho thấy một phương án khả thi để thực hiện điều này. Liệt kê 12. Ví dụ về việc kích hoạt phương thức hủy bỏ của một widget. uninitialize: function() { // destroy the descendants this.destroyDescendants(); // call the superclass' method this.inherited("uninitialize", arguments); } Quản lý sự kiện Một widget dojo có thể phản ứng lại các sự kiện bên ngoài, xuất phát từ cả các nút DOM lẫn các đối tượng. Những sự kiện này có thể được kết nối thủ công bằng