Máy ảo javascript với jquery

Lời nói đầu: bài viết này nằm trong loạt 5 bài viết hướng dẫn các kỹ thuật nền tảng để xây dựng 1 ứng dụng J2EE hoàn chỉnh. Các bài viết này dành riêng cho khóa "J2EE nền tảng" củaJava Developer Training Center (JDTC). Sau đây là danh sách toàn bộ bài viết:

- Cốt lõi Java trong phần mềm quản lý J2EE
- Kết nối thế giới hướng đối tượng và quan hệ
- Giao diện người - máy thế hệ mới
- Máy ảo javascript với jquery
- MVC framework nào, đó là câu hỏi cần trả lời

Giới thiệu

Như đã trình bày ở bài trước, sự kết hợp của javascript với các trang web đã tạo nên một thế hệ ứng dụng chạy trên web mới: tiện dụng, đáp ứng nhanh, đẹp mắt. Các ứng dụng chủ yếu nhất của javascript có thể chỉ ra là: kiểm tra dữ liệu nhập bởi người dùng (validation), xử lý dhtml, và quan trọng nhất là Ajax.

javascript cung cấp các hàm cho phép lập trình viên thực hiện một các tất cả những tác vụ mong muốn. Tuy nhiên, hiện nay có một xu hướng sử dụng lại các thư viện javascript viết sẵn bởi vì nó giúp lập trình viên tiết kiệm rất nhiều công sức nếu phải xây dựng từ đầu (from scatch). Hợn thế nữa, nếu dùng js nguyên thủy lập trình viên phải viết rất nhiều dòng lệnh trong khi nếu dùng thư viện có sẵn lập trình viên chỉ cần viết vài dòng lệnh mà vẫn có hiệu quả tương đương.

Có rất nhiều bộ thư viện như vậy ví dụ: Yahoo GUI, Prototypes, Ext JS, và đặc biệt là jquery. Trong số này, jquery là bộ thư viện được ưu chuộng nhất và mạnh mẽ nhất với những đặc điểm sau:

- Đơn giản hóa cú pháp js

- Đảo ngược điều khiển

- Có một cộng đồng đông đảo ngày đêm viết thêm các bộ thư viện tiện ích cho jquery từ điều khiển giao diện, các hiệu ứng chuyển động.

1. Cú pháp của jquery:

Để tiết kiệm code, jquery sử dụng 1 bộ cú pháp rất khác thường. Điều này có thể gây khó khăn cho những người mới bắt đầu. Tuy nhiên "khẩu quyết" để viết jquery có thể tóm tắt như sau:

- Chọn 1 hoặc nhiều thành phần trên trang web

- Chọn biến cố (event) sẽ xảy ra trên thành phần được chọn

- Xử lý biến cố này

Xem ví dụ đơn giản sau. Trang web có 1 nút nhấn và 1 thẻ div. Khi nhấn vào nút nhấn này, thẻ div sẽ hiện ra dòng thông báo: "JDTC - My desire"

- Ta có thể thêm chút hiệu ứng để trang web sống động hơn:

$("#divMsg").html("JDTC is my desire").show("slow");

Nhận xét:

- Toán tử dấu dollar $ cho phép chọn đối tượng bằng cách truyền vào "#id_của_đối_tượng".

- Tiếp sau đó là biến cố có thể xảy ra trên đối tượng đó. Các biến cố này cũng tương tự như trong javascript tuy nhiên không có tiền tố "on" phía trước. Ví dụ: click, dblclick, hover, mouseover, keyup, keypress....

- Biến cố sẽ bọc bởi từ khóa function cho phép định nghĩa 1 hàm xử lý biến cố này. Function chỉ có từ khóa, không có tên để giúp lập trình viên tiết kiệm công sức đặt tên hàm.

- Cascading: chắc có lẽ dịch là "dính chùm". jquery tiết kiệm code bằng cách cho phép gán toán tử dính chùm nhau. Điều này giúp tiết kiệm thời gian khi lập trình viên phải viết các biến trung gian để lưu kết quả tạm.

2. Đảo ngược điều khiển

Tương tự như Spring, jquery cũng cho phép đảo ngược điều khiển. Theo ví dụ ở trên nếu không có jquery ta phải khai báo hàm bên trong đối tượng:

input type="button" value="Say hello" onclick="sayHello();">

jquery cho phép tách rời phần trình bày và phần điều khiển khiến cho việc debug và bảo trì trở nên dễ dàng.

3. Cộng đồng jquery:

Ví dụ bộ thư viện jquery UI cung cấp tất cả các control đẹp rực rỡ góp phần làm website trở nên hấp dẫn và quyến rũ hơn bao giờ hết.

http://jqueryui.com/demos/

jquery UI hỗ trợ các điền khiển nâng cao như kéo thả, slider, accordance... Tận dụng sức mạnh của các thư viện này, trang web của bạn sẽ trở nên "pro" hơn bao giờ hết.

4. Cross browser:

Vấn đề đau đầu của lập trình viên đã được giải quyết triệt để trong jquery. Viết 1 lần chạy mọi nơi đã đúng cho Java giờ lại đúng cho jquery.

5. Hỗ trợ Ajax mượt mà

Ajax đòi hỏi sự kết nối với máy chủ để lấy dữ liệu về và thay đổi một phần nội dung của trang web. Quá trình này diễn ra nhanh hay chậm tùy thuộc vào đường truyền và khả năng xử lý của máy chủ. Để cho giao diện người dùng trở nên thân thiện hơn, ta cần phải có thanh trạng thái báo Ajax đang hoạt động. jquery hỗ trợ làm điều này bằng cách cung cấp 2 hàm ajaxStart và ajaxComplete.

Ví dụ sau cho phép hiển thị thanh "Loading...." khi Ajax đang hoạt động. Thanh trạng thái này thực chất là 1 hình ảnh gif động

$("#imgLoading").ajaxStart(function(){

$(this).show();

});

$("#imgLoading").ajaxComplete(function(){

$(this).hide();

});

Nhờ có cặp hàm này, tất cả các thao tác Ajax trên cùng trang web đều có cùng một "look and feel", mang lại cảm giác thống nhất, dễ dùng cho người dùng.

6. jquery - Máy ảo javascript:

Thực chất jquery có thể được coi như 1 trình biên dịch mini giúp biên dịch các mã lệnh viết bằng ngôn ngữ jquery thành javascript và thực thi được trên trình duyệt.

Xem bảng sau đây để thấy các đại gia như Google, Microsoft, Yahoo đều đã và đang sử dụng jquery cho các ứng dụng của họ.

http://docs.jquery.com/Sites_Using_jQuery

Bài tập

1. Hiện thực bộ menu của ứng dụng jHMS dùng jquery theo kiểu drop-down menu có sử dụng các hiệu ứng fadeIn, fadeOut. Menu hiện ra dùng hiệu ứng slow.

2. Hiện thực chức năng tìm kiếm bệnh nhân dùng Ajax và jquery. Có thanh trạng thái Loading....

3. Hiện thực chức năng thêm mới 1 bệnh nhân xử dụng Ajax để load form nhập. Sau đó dùng Ajax để post dữ liệu và lưu. Nếu lưu thành công thì trả về thông báo lưu thành công và clear form để chuẩn bị nhập tiếp.

Chú ý trong quá trình chờ dùng thanh Loading..... Kết hợp các hiệu ứng fast, slow, fadeIn, fadeOut để làm trang web trở nên sống động.