Phát triển các ứng dụng Web AJAX với IBM Rational Application Developer và Dojo

Bài này mô tả cách phát triển các ứng dụng web AJAX với IDE của IBM® Rational® Application Developer (Nhà phát triển ứng dụng Rational của IBM), khi sử dụng các thư viện Dojo được phân phối cùng với IBM® WebSphere® Application Server Feature Pack 2.0 (Gói tính năng của Máy chủ ứng dụng WebSphere 2.0 của IBM). Bài này cũng cung cấp một ví dụ thực hành, có sử dụng tiện ích (widget) Tree của Dojo.

Robert Weisz, Chuyên gia về giá trị gia tăng, IBM Canada

Robert làm với nhóm Chương trình giá trị gia tăng (Accelerated Value Program) của Eclipse và Rational Application Developer. Ông làm việc tại phòng thí nghiệm Toronto của IBM.



James Chung, Nhà phân tích hỗ trợ cao cấp, IBM Canada

Photo of James ChungJames là một Premium Support Analyst (Nhà phân tích hỗ trợ cao cấp) hỗ trợ cho nhánh sản phẩm IBM Rational



02 08 2012

Giới thiệu về AJAX và Dojo

AJAX (Asynchronous JavaScript and XML - JavaScript không đồng bộ và XML) là một xu hướng mới đây theo hướng phát triển ứng dụng web phía máy khách. Nó quy định sự tương tác động giữa trình duyệt của người dùng và máy chủ Web, mà không phải làm mới toàn bộ trang mỗi lần. Do lợi ích của kỹ thuật này, nên đúng là có sẵn một vài công cụ (được gọi khác nhau theo từng loại là các công cụ, các khung công tác hoặc các thư viện) như: Dojo Toolkit (Bộ công cụ Dojo), jQuery, Prototype, YUI (Yahoo! User Interface – Giao diện người dùng Yahoo!), qooxdoo và một vài cái tên nữa.

Để biết thêm thông tin, hãy xem các liên kết trong phần Tài nguyên để có một mô tả về AJAX là gì, các bộ công cụ hoặc các thư viện nào có sẵn và một liên kết đến một sự so sánh giữa Dojo và YUI, cũng đưa ra một cách giải thích hay về lý do vì sao lại sử dụng một thư viện ở vị trí đầu tiên.

IBM® Rational® Application Developer hỗ trợ lập trình AJAX bằng cách kèm theo một trong các công cụ phổ biến hơn của nó, cụ thể là thư viện Dojo (được phân phối với Gói tính năng của IBM® WebSphere® Application Server cho Web 2.0).

Trong Phiên bản 7.5.5.1 và mới hơn của Rational Application Developer, Gói tính năng của WebSphere Application Server cho Web 2.0 là một tùy chọn cài đặt trong Trình quản lý cài đặt (Installation Manager). Khi bạn chọn cài đặt Môi trường kiểm tra (Test Environment) phiên bản 7.0 của WebSphere Application Server, bạn có thể chọn một số Gói tính năng, có kèm theo Web 2.0 (Hình 1).

Hình 1. Cài đặt Gói tính năng cho Web 2.0
Chọn tùy chọn Gói tính năng trong Trình quản lý cài đặt

IBM đóng gói Bộ công cụ Dojo với các phần mở rộng bổ sung như sau:

  • Máy khách SOAP (Simple Open Access Protocol - Giao thức truy cập mở đơn giản) để làm việc với các hình bao SOAP và RPC (cuộc gọi thủ tục từ xa).
  • Các nguồn cấp tin ATOM và ATOM Publishing Protocol (APP – Giao thức xuất bản ATOM) làm thư viện vào/ra (IO) của nguồn cấp tin và kho dữ liệu dựa trên dojo.data.
  • Một OpenSearch Data Store (Kho dữ liệu OpenSearch), là một công cụ của các API dojo.data.
  • Các tiện ích (widget) Gauge, ví dụ như các đồng hồ đo thanh và đồng hồ tương tự (analog).
  • AJAX proxy.

Xem phần Tài nguyên để có thêm chi tiết về Gói tính năng của WebSphere Application Server cho Web 2.0.


Cài đặt Bộ công cụ Dojo trong dự án web của bạn

Hình 2 cho thấy nội dung dự án trước khi bạn thêm Bộ công cụ Dojo (lưu ý rằng không có thư mục dojo nào).

Hình 2. Nội dung dự án trước khi bạn thêm Bộ công cụ Dojo
Không có thư mục dojo nào trước khi thêm Mặt Web 2.0

Để thêm Bộ công cụ Dojo, hãy thực hiện các bước sau.

  1. Chọn dự án Web
    1. Chọn Properties > Project Facets (Các mặt dự án) bên trái.
    2. Ở bên phải, đánh dấu chọn hộp kiểm Web 2.0, như trong Hình 3.
Hình 3. Thêm các tính năng Web 2.0
Chọn Mặt dự án Web 2.0
  1. Nhấn OK. Bạn sẽ thấy quá trình sao chép các tệp của Bộ công cụ Dojo vào dự án web của bạn, như trong Hình 4.
Hình 4. Xác minh quá trình cài đặt
Bộ chỉ thi quá trình cho thấy hoạt động đang diễn ra
  1. Sau khi thêm mặt Bộ công cụ Dojo, bạn sẽ thấy một thư mục có tên là dojo trong WebContent, như trong Hình 5.
Hình 5. Nội dung dự án sau khi bạn thêm mặt Bộ công cụ Dojo
Bạn có thể nhìn thấy thư mục dojo sau khi bạn chọn mặt Web 2.0

Để biết thêm thông tin, bạn có thể xem liên kết Thêm các tiện ích Dojo vào các trang Web của Ấn bản doanh nghiệp Java (Java EE) hiện có trong phần Tài nguyên.


Tránh biên dịch dài dòng không cần thiết

Do thực tế là thư viện của Bộ công cụ Dojo về mặt vật lý đã được thêm vào nội dung Web của bạn, nó sẽ được đưa thêm vào việc xác nhận hợp lệ dự án của bạn, mà dự án đó có thể không cần thiết mở rộng thời gian bắt buộc để hoàn thành việc xây dựng. Thư viện của Bộ công cụ Dojo tiến hành xem xét lại và thực hiện xác nhận hợp lệ riêng của nó. Chắc chắn cần loại trừ toàn bộ thư mục WebContent/dojo ra khỏi việc xác nhận hợp lệ của IDE của Rational Application Developer. Để tránh việc xây dựng phải kéo dài, bạn có thể tạo các bộ lọc loại trừ như sau.

  1. Chọn dự án Web.
  2. Chọn Properties > Validation, để khởi chạy trình hướng dẫn (wizard).
    1. Trong trình hướng dẫn, bạn có thể chọn chạy các trình xác nhận hợp lệ nào, như trong Hình 6.
    2. Bạn cũng có thể tạo ra các quy tắc (ví dụ, để loại trừ thư mục Dojo khỏi bị xác nhận hợp lệ về tính chính xác của HTML và JSP).
Hình 6. Các bộ lọc xác nhận hợp lệ và danh sách các trình xác nhận hợp lệ
Chọn các bộ lọc xác nhận hợp lệ trong khung nhìn Các đặc tính Xác nhận hợp lệ
  1. Để tạo ra một quy tắc loại trừ (ví dụ, với JSP Content validator - Trình xác nhận hợp lệ nội dung JSP), hãy nhấn chuột vào nút các hình e-lip (ellipse icon) bên phải của nó để nhận được trình hướng dẫn về Validation Filters (Các bộ lọc Xác nhận hợp lệ).
  2. Nhấn chuột vào nút Add Exclude Group (Thêm Nhóm loại trừ), như trong Hình 7.
Hình 7. Thêm một nhóm loại trừ
Trong hộp thoại Các bộ lọc xác nhận hợp lệ, hãy nhấn vào Add Exclude Group
  1. Ở bên trái, chọn Exclude Group (Nhóm loại trừ) mới được tạo ra.
  2. Nhấn chuột vào nút Add Rule (Thêm quy tắc), để đưa ra một hộp thoại, ở đó bạn có thể chọn những gì cần loại trừ.
  3. Chọn Folder or File name (Tên thư mục hoặc tên tệp) và nhấn Next, như trong Hình 8.
Hình 8. Chọn Filter type (Kiểu bộ lọc)
Chọn nút tròn tên tệp hoặc tên thư mục
  1. Tiếp theo, nhấn chuột vào nút Browse Folder (Duyệt thư mục) và chuyển hướng đến thư mục dojo trong thư mục WebContent của bạn, như trong Hình 9.
Hình 9. Chọn thư mục để loại trừ không xác nhận hợp lệ
Nhấn nút Browse Folder và chọn thư mục WebContent/dojo
  1. Nhấn Finish.
  2. Xác minh các kết quả. Bạn sẽ thấy thư mục WebContent/dojo trong Exclude Group, như trong Hình 10. Nhấn OK.
Hình 10. Loại trừ Dojo khỏi JSP Content Validator
Thư mục ưebContent/dojo đã được thêm vào nhóm loại trừ
  1. Lặp lại thủ tục này cho các Trình xác nhận hợp lệ khác có liên quan, thường được áp dụng cho thư mục các thư viện dojo, (ví dụ JSP Syntax Validator - Trình xác nhận hợp lệ cú pháp JSPHTML Syntax Validator - Trình xác nhận hợp lệ cú pháp HTML).
  2. Nhấn OK để thoát khỏi hộp thoại Preferences (Các sở thích).

Cập nhật Bộ công cụ Dojo

Thư viện của Bộ công cụ Dojo, có sẵn trong Rational Application Developer, sẽ được cài đặt là một phần của Gói tính năng của WebSphere Server cho Web 2.0. Các bản cập nhật cho thư viện này được tạo sẵn khi có một phiên bản mới của gói tính năng.

Tính đến thời điểm viết bài này, Gói tính năng mới nhất cho Web 2.0 là phiên bản 1.0.1, trong đó có phiên bản 1.4.1 của Bộ công cụ Dojo.

Bộ công cụ Dojo, được nhập khẩu vào các dự án vùng làm việc, không được cập nhật tự động khi bạn cài đặt Gói tính năng mới cho Web 2.0.

Các bước sau cho bạn thấy cách cập nhật một Bộ công cụ Dojo, mà bạn có thể đã cài đặt nó vào dự án web của mình trước đó.

Như bạn đã thấy ở trên, vị trí mặc định cho thư viện dojo nhập khẩu là thư mục WebContent/dojo.

  1. Trong Enterprise Explorer (Trình thám hiểm doanh nghiệp), nhấn phím chuột phải vào dự án web của bạn và chọn Properties (Các đặc tính).
  2. Trong danh sách Properties, chọn Project Facets (Các mặt dự án).
  3. Trong danh sách Project Facets, mở rộng mục Web 2.0, như trong Hình 11.
    1. Bỏ dấu chọn hộp kiểm Dojo Toolkit (Bộ công cụ Dojo).
    2. Nhấn OK
Hình 11. Mở rộng Project Facets của Web 2.0
Bỏ dấu chọn Bộ công cụ Dojo đã đánh dấu trong mặt Web 2.0
  1. Loại bỏ thư mục WebContent/dojo.
  2. Lặp lại các bước 1 và 2.
  3. Trong danh sách Project Facets, mở rộng mục Web 2.0
    1. Đánh dấu chọn hộp kiểm Dojo Toolkit.
    2. Nhấn Further configuration available (Tăng thêm cấu hình thêm có sẵn).
    3. Đảm bảo rằng Loader và CSS là đúng, như trong Hình 12:
      1. Dojo Loader sẽ là dojo/dojo.js
      2. Dojo CSS sẽ là dojo/resources/dojo.css
      3. Dijit CSS sẽ là dijit/themes/dijit.css
      4. Theme CSS sẽ là dijit/themes/tundra/tundra.css
    4. Đánh dấu chọn hộp kiểm Copy to current project (Sao chép vào dự án hiện tại) và đảm bảo rằng Target Folder (Thư mục đích) là WebContent/dojo.
    5. Nhấn OK.
  4. Nhấn OK.
Hình 12. Cấu hình Dojo nâng cao
Chọn Copy to current project để thêm các thư viện Dojo vào dự án của bạn

Thư viện của Bộ công cụ Dojo mới nhất sẽ được sao chép vào dự án. Khi sao chép các tệp, hãy xác minh phiên bản theo các bước sau.

  1. Trong khung nhìn Enterprise Explorer, nhấn phím chuột phải vào dự án Web của bạn và chọn Properties để hiển thị cửa sổ Properties.
  2. Chọn Dojo Toolkit.
  3. Xác minh Version (Phiên bản).

Ví dụ về ứng dụng web

Hãy tải về tệp .zip đính kèm, trong đó có một ứng dụng ví dụ đã sửa đổi được phân phối kèm theo các thư viện Dojo. Nó có hai tệp:

  • Một tệp HTML để xây dựng một cây tương tác của một số dữ liệu phân cấp (trong trường hợp này là các lục địa với một số nước ví dụ mẫu).
  • Tệp thứ hai, theo định dạng trong JSON (JavaScript Object Notation), có tác dụng như kho lưu trữ cho dữ liệu này.

Bắt đầu tạo một vùng làm việc mới của Rational Application Developer, hãy làm theo các bước sau để tạo ra ứng dụng web ví dụ mẫu của bạn.

  1. Nhấn File > New > Dynamic Web Project.
    1. Đặt tên cho dự án.
    2. Chấp nhận tất cả các giá trị mặc định bằng cách nhấn Finish.
    3. Khi được nhắc, thì cũng chấp nhận chuyển sang phối cảnh Web.
  2. Mở rộng dự án web mới được tạo ra,
    1. Chọn thư mục Web Content.
    2. Nhấn phím chuột phải vào thư mục đó và chọn Import > General > Archive File.
    3. Chuyển hướng đến bất cứ nơi nào bạn tải về tệp đính kèm (DojoTreeSampleSourceFiles.zip)
  3. Nhập khẩu và chạy các thư viện Dojo bằng cách làm theo các bước được mô tả trong phần Cài đặt Bộ công cụ Dojo trong dự án web của bạn trong bài này (có nghĩa là, từ Properties > Project Facets > Web 2.0).

Cấu trúc dự án của bạn bây giờ sẽ giống như trong Hình 13.

Hình 13. Các nội dung dự án được cập nhật
Dự án có chứa 2 tệp và thư mục dojo

Theo kết quả nhập khẩu, bây giờ bạn sẽ có một thư mục dojo trong thư mục WebContent, cũng như hai tệp được nhập khẩu là: SampleTree.html và dữ liệu cây trong countries.json.

  1. Để chạy trình diễn này, hãy chọn tệp SampleTree.html.
    1. Nhấn phím chuột phải vào nó và chọn Run As > Run on Server.
    2. Ví dụ này sử dụng Phiên bản 7.0 của WebSphere Test Environment (Môi trường thử nghiệm WebSphere) được cài đặt trước đó, do đó, chọn Existing server (Máy chủ hiện có).

Kết quả cuối cùng của việc chạy bài kiểm tra sẽ trông như Hình 14 dưới đây: một danh sách các lục địa mà bạn có thể mở rộng chúng để xem các nước trong đó.

Hình 14. Dijit của thư viện Dojo: Ví dụ tiện ích Tree (Cây)
Kết quả hiển thị các lục địa và các nước trong một cấu trúc liên kết cây

Bạn đã học được điều gì

Bài này đã cho bạn thấy cách cài đặt và cấu hình các thư viện Dojo kèm theo trong Rational Application Developer và WebSphere Application Server. Bạn cũng đã học được cách tạo ra các ứng dụng web AJAX bằng cách nhập khẩu một tệp ví dụ.


Lời cảm ơn

Tác giả cảm ơn Tommy Kong ở phòng thí nghiệm Toronto của IBM vì đã đọc lại bài này.


Tải về

Mô tảTênKích thước
Dojo tree sample source filesDojoTreeSampleSourceFiles.zip1.56 KB

Tài nguyên

Học tập

Lấy sản phẩm và công nghệ

  • Đánh giá các sản phẩm của IBM theo cách phù hợp nhất với bạn: Tải về nó để dùng thử, dùng thử một sản phẩm trực tuyến, sử dụng một sản phẩm trong một môi trường đám mây hoặc dành một vài giờ trong SOA Sandbox để tìm hiểu cách thực hiện kiến trúc hướng dịch vụ có hiệu quả.

Thảo luận

Bình luận

developerWorks: Đăng nhập

Các trường được đánh dấu hoa thị là bắt buộc (*).


Bạn cần một ID của IBM?
Bạn quên định danh?


Bạn quên mật khẩu?
Đổi mật khẩu

Bằng việc nhấn Gửi, bạn đã đồng ý với các điều khoản sử dụng developerWorks Điều khoản sử dụng.

 


Ở lần bạn đăng nhập đầu tiên vào trang developerWorks, một hồ sơ cá nhân của bạn được tạo ra. Thông tin trong bản hồ sơ này (tên bạn, nước/vùng lãnh thổ, và tên cơ quan) sẽ được trưng ra cho mọi người và sẽ đi cùng các nội dung mà bạn đăng, trừ khi bạn chọn việc ẩn tên cơ quan của bạn. Bạn có thể cập nhật tài khoản trên trang IBM bất cứ khi nào.

Thông tin gửi đi được đảm bảo an toàn.

Chọn tên hiển thị của bạn



Lần đầu tiên bạn đăng nhập vào trang developerWorks, một bản trích ngang được tạo ra cho bạn, bạn cần phải chọn một tên để hiển thị. Tên hiển thị của bạn sẽ đi kèm theo các nội dung mà bạn đăng tải trên developerWorks.

Tên hiển thị cần có từ 3 đến 30 ký tự. Tên xuất hiện của bạn phải là duy nhất trên trang Cộng đồng developerWorks và vì lí do an ninh nó không phải là địa chỉ email của bạn.

Các trường được đánh dấu hoa thị là bắt buộc (*).

(Tên hiển thị cần có từ 3 đến 30 ký tự)

Bằng việc nhấn Gửi, bạn đã đồng ý với các điều khoản sử dụng developerWorks Điều khoản sử dụng.

 


Thông tin gửi đi được đảm bảo an toàn.


static.content.url=http://www.ibm.com/developerworks/js/artrating/
SITE_ID=70
Zone=Rational
ArticleID=825434
ArticleTitle=Phát triển các ứng dụng Web AJAX với IBM Rational Application Developer và Dojo
publish-date=08022012