Khởi đầu các ứng dụng Java của bạn, Phần 2: Phát triển Ajax gọn nhẹ, dễ dàng Xây dựng một ứng dụng web tương tác với bộ khởi đầu các ứng dụng Java của bạn Sing Li, Tư vấn, tác giả, Wrox Press Tóm tắt: Tổ hợp của Eclipse, DB2® Express-C 9.5, và WebSphere® Application Server Community Edition 2.0 — tất cả đều miễn phí để tải về, sử dụng và triển khai — là một bộ sản phẩm từ bản mẫu đến sản xuất tuyệt vời cho mọi nhu cầu phát triển Java™ và Java doanh nghiệp của bạn. Một điều có thể chưa hiển nhiên lắm là bạn còn có thể sử dụng khá dễ dàng các công cụ đã qua kiểm chứng này để tạo ra, thử nghiệm, và triển khai các ứng dụng hàng đầu gọn nhẹ. Hướng dẫn này chỉ dẫn cho bạn đi qua các bước phát triển một ứng dụng quản lý nguồn nhân lực nhỏ, trước tiên bằng cách sử dụng công nghệ dựa trên JavaServer Pages (JSP) truyền thống và sau đó di chuyển nó đến một giải pháp tương tác cao là sử dụng Ajax. Trước khi bạn bắt đầu Sự tích hợp chặt chẽ giữa các công cụ miễn phí tạo thành bộ khởi đầu các ứng dụng Java của bạn: Eclipse, DB2 Express-C 9.5, và WebSphere Application Server Community Edition 2.0 (gọi tắt là Máy chủ ứng dụng) đã đáp ứng tốt các nhu cầu của các nhà phát triển ứng dụng Java EE và các dịch vụ web. Đi đôi với hướng dẫn này là hướng dẫn, Khởi đầu các ứng dụng Java của bạn, Phần 1: Phần mềm miễn phí, phát triển nhanh chóng, trình bày về cách các công cụ này làm việc cùng nhau như thế nào để phát triển phần mềm Java EE. Ngày càng có nhiều nhà phát triển Java đang thử nghiệm các giao diện người dùng trên nền web tương tác cao, bao gồm các lựa chọn mà không đòi hỏi phải sử dụng một thùng chứa Java EE truyền thống. Những khám phá như vậy thường bắt bạn phải học thêm một ngôn ngữ lập trình chưa qua kiểm chứng, phải làm việc với công cụ có mức chất lượng beta, và đặt cược vào công nghệ triển khai chưa qua thử thách với thời gian. Thật bất ngờ cho bạn khi biết được rằng bộ công cụ mạnh, làm ra sản phẩm thực sự, do IBM hậu thuẫn miễn phí mà bạn đang dùng cho các nhiệm vụ phát triển Java EE cũng có thể là người bạn tốt nhất của bạn trong việc khám phá lĩnh vực phát triển giao diện người dùng thay thế. Tin tức tuyệt vời nhất là ở chỗ tất cả các mã chương trình của bạn — gọn nhẹ hay truyền thống — có thể tận dụng ưu thế của tập hợp đặc tính dễ sử dụng, phong phú của Eclipse, sự hoàn thiện và mạnh mẽ của DB2 Express-C, và hỗ trợ triển khai cấp thế giới của Máy chủ ứng dụng. Hướng dẫn này cho bạn thấy làm thế nào để di chuyển một ứng dụng từ một thiết kế truyền thống tới một thiết kế dựa trên công nghệ JavaScript không đồng bộ (Asynchronous JavaScript) và XML (Ajax) — tất cả nằm trong môi trường thân thiện và quen thuộc của bộ khởi đầu ứng dụng Java của bạn. Bộ tập hợp phần mềm khởi đầu Để khởi đầu các ứng dụng Java của bạn, IBM đã gộp một tổ hợp mạnh các thành phần phần mềm có sẵn miễn phí với nhau để truy cập dữ liệu, phát triển và triển khai ứng dụng:  Máy chủ cơ sở dữ liệu DB2 Express-C 9.5  Máy chủ ứng dụng WebSphere phiên bản cộng đồng 2.0  Môi trường phát triển tích hợp Eclipse (Eclipse IDE) Bạn không bị buộc phải sử dụng những gói này trong tổ hợp như trên; mỗi gói đều làm việc được với nhiều thành phần dựa trên các chuẩn mở khác nhau. Bạn có thể sử dụng Eclipse với các máy chủ ứng dụng khác (kể cả không phải Java) và các cơ sở dữ liệu khác. Máy chủ ứng dụng không đòi hỏi DB2 Express-C 9.5 hay Eclipse. Và DB2 Express-C 9.5 có thể phù hợp với các môi trường phát triển và triển khai khác với Eclipse và Máy chủ ứng dụng. Nhưng, rồi bạn sẽ hiểu đầy đủ từ hướng dẫn này, khi sử dụng bộ tích hợp chặt chẽ như một tổng thể nói trên, bạn sẽ có rất nhiều thuận lợi. Thông tin về hướng dẫn này Bạn sẽ bắt đầu hướng dẫn này bằng cách tạo ra một bảng thông tin nhân viên, sử dụng công nghệ JSP và servlet tiêu chuẩn. Bạn sẽ làm tất cả các công việc phát triển và thử nghiệm bằng cách sử dụng bộ khởi đầu các ứng dụng Java. Bạn sẽ thiết kế các ứng dụng trong Eclipse và sau đó triển khai và thử nghiệm nó trên Máy chủ ứng dụng. Các ứng dụng sẽ tìm về và hiển thị thông tin nhân viên, bao gồm cả hình ảnh, từ một cơ sở dữ liệu DB2 Express-C 9.5 theo chế độ tương tác. Sau đó, hướng dẫn này thảo luận về một số hạn chế trong thiết kế ứng dụng JSP và chỉ ra cách làm thế nào để một giải pháp dựa trên Ajax nhẹ có thể giúp để vượt qua các hạn chế này. Hướng dẫn này cũng giới thiệu các khái niệm Ajax cơ bản và một bộ dụng cụ Java phổ biến có tên là Web trực tiếp từ xa (Direct Web Remoting - DWR) (xem Tài nguyên). Bạn sẽ chuyển đổi ứng dụng sang một thiết kế nhẹ. Các ứng dụng được thiết kế lại nằm trong một trang HTML, lưu trú trên Máy chủ ứng dụng hoạt động như một máy chủ Web đơn giản, truy cập trực tiếp thông tin cơ sở dữ liệu DB2 Express C sử dụng Ajax và tuần tự hóa ký pháp đối tượng JavaScript (JavaScript Object Notation - JSON). Hướng dẫn này dẫn dắt bạn qua:  Việc phát triển một bảng thông tin - nhân viên, sử dụng các công nghệ JSP và servlet truyền thống  Xử lý hiển thị các hình ảnh GIF từ các trường đối tượng lớn nhị phân (BLOB) của DB2 bằng một servlet tùy biến  Được giới thiệu về Ajax và Web trực tiếp từ xa (Direct Web Remoting)  Chuyển bảng thông tin -nhân viên sang một thiết kế Ajax nhẹ  Viết mã hỗ trợ phía Java cho ứng dụng mới  Viết mã JavaScript, sử dụng thư viện các tiện ích DWR  Thử nghiệm bảng thông tin - nhân viên tương tác mới Kết thúc hướng dẫn này, bạn sẽ đánh giá được một số khác biệt cơ bản giữa việc thiết kế ứng dụng Java EE truyền thống và cách tiếp cận dựa trên Ajax tương tác cao. Bạn cũng sẽ trở nên thoải mái khi sử dụng bộ Khởi đầu các ứng dụng Java để khám phá các khung công tác phát triển trên nền Java hiện tại và tương lai. Các điều kiện cần có trước Bạn cần phải quen thuộc với việc phát triển Java nói chung và phát triển Java phía máy chủ nói riêng. Hướng dẫn này giả định bạn biết rõ các khái niệm triển khai Java EE cơ bản, ví dụ như các mô tả triển khai và tệp lưu trữ WAR. Bạn cũng cần phải quen thuộc với việc lập trình JSP và sử dụng các thư viện thẻ, như Thư viện thẻ tiêu chuẩn của các trang JavaServer (JavaServer Pages Standard Tag Library - JSTL). Hướng dẫn này giả định rằng bạn hiểu các hoạt động chung của một cơ sở dữ liệu quan hệ và đã lập trình các ứng dụng JDBC. Nó cũng giả định rằng bạn đã hoàn thành việc tìm hiểu hướng dẫn Khởi đầu các ứng dụng Java của bạn: Phần mềm miễn phí, phát triển nhanh chóng. Các yêu cầu hệ thống Để làm theo và thử nghiệm các đoạn mã cho hướng dẫn này, bạn cần các bản cài đặt phần mềm đang hoạt động:  Bản cập nhật 15 Java SE JDK 5 của Sun hoặc bản IBM SDK cho Java phiên bản 5 SR6 hoặc mới hơn.  Bộ khởi đầu các ứng dụng Java của bạn: o DB2 Express-C 9.5 o Máy chủ ứng dụng phiên bản 2.0.0.1 o Eclipse 3.3 và bộ chuyển đổi máy chủ cho WTP cho Máy chủ ứng dụng V.2.0 Để có một cấu hình đúng, bạn cần làm theo các chỉ dẫn tải về và cài đặt chi tiết cho các thành phần này trong các phần có liên quan trong Khởi đầu các ứng dụng Java của bạn: Phần mềm miễn phí, phát triển nhanh chóng.  Ứng dụng danh sách-nhân viên do bạn đã xây dựng trong phần Khởi đầu các ứng dụng Java của bạn: Phần mềm miễn phí, phát triển nhanh chóng.  Cơ sở dữ liệu Sample DB2 Express-C 9.5.  DWR. Các chỉ dẫn chi tiết để thử nghiệm với DWR có trong hướng dẫn này. Cấu hình phần cứng hệ thống được đề nghị để thử nghiệm hướng dẫn này là:  Một hệ thống hỗ trợ JDK / JRE được liệt kê ở trên có ít nhất 1 GB bộ nhớ chính (nên có 2GB).  Thêm ít nhất 10MB dung lượng đĩa còn trống để cài đặt các thành phần phần mềm và các ví dụ. Các chỉ dẫn trong hướng dẫn này dựa trên hệ điều hành Windows®. Tất cả các công cụ và kỹ thuật bao gồm trong hướng dẫn này cũng làm việc trên các hệ thống Linux® và Unix®. Tổng quan Hướng dẫn này xây dựng trên nền tảng khái niệm và cấu hình hệ thống của bài Khởi đầu các ứng dụng Java của bạn: Phần mềm miễn phí, phát triển nhanh chóng. Bạn sẽ sử dụng Eclipse để tạo ra hai phiên bản của một ứng dụng quản lý nguồn nhân sự để truy cập tương tác thông tin nhân viên được lưu trữ trong một cá thể DB2 Express-C 9.5 và bạn sẽ sử dụng Máy chủ ứng dụng để triển khai các ứng dụng. Trong bài Khởi đầu các ứng dụng Java của bạn: Phần mềm miễn phí, phát triển nhanh chóng, bạn đã:  Tải về và cài đặt DB2 Express-C 9.5, Máy chủ ứng dụng, Eclipse, và bộ chuyển đổi máy chủ WTP cho Máy chủ ứng dụng.  Cài đặt một cơ sở dữ liệu mẫu, do bản cài đặt DB2 Express-C 9.5 cung cấp, có chứa thông tin nhân viên.  Triển khai một pool cơ sở dữ liệu do máy chủ quản lý trong Máy chủ ứng dụng.  Cấu hình khung nhìn Data Source Explorer tích hợp trong Eclipse để truy cập vào các lược đồ và các nội dung bảng của cơ sở dữ liệu mẫu DB2.  Viết mã một ứng dụng JSP để truy cập cơ sở dữ liệu mẫu DB2 để liệt kê thông tin nhân viên, sử dụng hỗ trợ phát triển ứng dụng Web, Web Tools Platform (WTP) của Eclipse.  Triển khai ứng dụng JSP lên Máy chủ ứng dụng để thử nghiệm, sử dụng bộ chuyển đổi máy chủ cho nền các công cụ Web (Web Tools Platform – WTP) cho Máy chủ ứng dụng.  Thử nghiệm ứng dụng JSP bằng cách triển khai nó trong một cài đặt hiện có của Máy chủ ứng dụng. Bắt đầu với ứng dụng đơn giản do bạn đã tạo ra trong bài Khởi đầu các ứng dụng Java của bạn: Phần mềm miễn phí, phát triển nhanh chóng, hướng dẫn này bổ sung thêm một trang JSP mới để cho phép bạn truy vấn tương tác thông tin nhân viên từ cơ sở dữ liệu DB2. Không giống như ứng dụng gốc ban đầu, trong đó liệt kê thông tin về tất cả các nhân viên trong một bảng, ứng dụng JSP này hiển thị một bản ghi thông tin nhân viên mỗi lần. Các thông tin được hiển thị bao gồm ảnh của nhân viên, như thấy trong Hình 1: Hình 1. Ứng dụng hiển thị thông tin nhân viên tương tác Để hiển thị một ảnh, một servlet chuyên dụng truy vấn cơ sở dữ liệu DB2 tìm các dữ liệu hình ảnh nhị phân được lưu trữ trong các trường BLOB và sau đó chuyển bức ảnh tới trình duyệt như là một hình ảnh. Các dụng cụ phát triển ứng dụng và thử nghiệm của nền các công cụ Web của Eclipse giúp bạn tạo ra servlet này nhanh chóng. Tính tương tác của thiết kế này bị hạn chế, và nó không thể đối phó với một cơ sở dữ liệu nhân viên lớn hơn, do đó, tôi sẽ giới thiệu một giải pháp tốt hơn để giải quyết các thiếu sót này nhờ áp dụng các kỹ thuật Ajax nhẹ hiện đại. Tạo ứng dụng thông tin nhân viên dựa trên JSP Bản đầu tiên của ứng dụng sẽ hiển thị một thông tin của nhân viên, bao gồm cả ảnh của họ nếu có, như thấy trong Hình 1. Người sử dụng chọn các thông tin nhân viên cần hiển thị, từ một danh sách thả xuống các tên nhân viên. Trong Hình 1, bản ghi nhân viên của Adamson Bruce được chọn và hiển thị. Cách dễ nhất để tạo ra ứng dụng này là sửa đổi dự án từ bài Khởi đầu các ứng dụng Java của bạn: Phần mềm miễn phí, phát triển nhanh chóng. Hình 2 cho thấy các dự án trong IDE Eclipse từ hướng dẫn này: Hình 2. Dự án dwapp gốc trong Eclipse hiển thị một bảng nhân viên Bắt đầu từ dự án dwapp được hiển thị trong Hình 2, bạn sẽ thêm vào hoặc sửa đổi các thành phần ứng dụng Web trong bảng 1: Bảng 1. Các thành phần của ứng dụng Web về thông tin nhân viên Thành phần Mô tả employee.jsp Một trang JSP không có kịch bản lệnh (không nhúng mã Java). Nó x ử lý tương tác của người dùng và sử dụng các thẻ JSTL SQL để truy vấn các thông tin của cơ sở dữ liệu DB2. Bạn nên thêm thành phần này. ShowPhoto.java servlet Một Java servlet để truy vấn cơ sở dữ liệu DB2 tìm thông tin ảnh nhân viên. Các ảnh nhân viên được lưu trữ theo nhiều định dạng trong cơ sở dữ liệu, trong các trường BLOB. Ở đây chỉ có các định dạng ảnh GIF được sử dụng. Servlet này viết kết quả đầu ra của nó theo một định dạng luồng tương thích với kiểu MIME, đúng yêu cầu của phần tử hiển thị <IMG> của trình duyệt . Việc truy cập cơ sở dữ liệu được thực hiện thông qua một nguồn dữ liệu hệ thống, nhận được qua giao diện thư mục và đặt tên của Java (Java Naming and Directory Interface - JNDI) và được hỗ trợ bởi pool cơ sở dữ liệu toàn hệ thống đã cấu hình trên Máy chủ ứng dụng trong bài Khởi đầu các ứng dụng Java của bạn: Phần mềm miễn phí, phát triển nhanh chóng. Bạn nên thêm thành phần này. dwstyles.css Bạn sẽ sửa đổi phiếu định kiểu (stylesheet) này để xử lý định dạng bổ sung cho trang employee.jsp mới. Làm thế nào để cho các thành phần ứng dụng phù hợp với nhau Hình 3 cho thấy cách các thành phần ứng dụng phù hợp với nhau như thế nào: Hình 3. Cấu trúc của ứng dụng thông tin - nhân viên Thành phần employee.jsp sinh ra trang web có chứa giao diện người dùng. Trang web đã tạo ra này được trình bày trên trình duyệt của người dùng. Người sử dụng tương tác với trang đã trình bày để truy vấn thông tin nhân viên bằng cách đệ trình một biểu mẫu (form) HTML. JSP xử lý dữ liệu biểu mẫu đã đệ trình và tìm thông tin nhân viên từ cơ sở dữ liệu. JSP sau đó tạo ra và trả về một trang web chứa các thông tin ấy. Ảnh nhân viên dưới định dạng GIF được tạo ra riêng biệt, do ShowPhoto servlet thực hiện. Servlet này nhận các dữ liệu hình ảnh từ cùng một cơ sở dữ liệu DB2 Express-C 9.5. Sử dụng bộ khởi đầu các ứng dụng Java của bạn để mã hoá, thử nghiệm và triển khai các ứng dụng Hình 4 cho thấy bộ khởi đầu trợ giúp tạo ra ứng dụng này như thế nào: Hình 4. Phát triển ứng dụng bằng các công cụ miễn phí Bạn sẽ viết mã cho ứng dụng trong Eclipse và sử dụng một cá thể của Máy chủ ứng dụng do Eclipse điều khiển để triển khai và thử nghiệm ứng dụng đó. Thành phần JSP của ứng dụng truy cập vào cơ sở dữ liệu mẫu của DB2 Express-C 9.5 thông qua một pool JDBC do Máy chủ ứng dụng quản lý. Thành phần servlet của ứng dụng cũng sử dụng cùng pool được quản lý ấy để truy cập vào các trường BLOB từ cơ sở dữ liệu, chuyển đổi chúng thành thông tin đồ họa để hiển thị như là các ảnh của nhân viên trong trình duyệt. JSP lựa chọn nhân viên Bắt đầu từ dự án dwapp trong Eclipse như thấy trong Hình 2, nhấn chuột phải vào thư mục WebContent trong khung nhìn Navigator và chọn New > Other (hoặc ấn Ctrl+N). Chọn Web > JSP từ thủ thuật New, như hiển thị trong Hình 5: [...]... bộ Nếu Máy chủ ứng dụng không phải đang chạy, Eclipse khởi động nó Các ứng dụng được gói lại như một tệp tin WAR và được triển khai tới Máy chủ ứng dụng Khởi chạy trình duyệt Web bên trong (hoặc bên ngoài) và truy cập vào URL của ứng dụng: http://localhost:8080/dwapp/ (Tìm nút Open Web Browser trên thanh công cụ của Eclipse để tìm một trình duyệt bên trong) Bây giờ bạn có thể thử chọn các nhân viên... của trường hình ảnh và ghi nó ra luồng đầu ra trả lời: while((size= istream.read(buffer))!= -1 ) { response.getOutputStream().write(buffer,0,size); } Thao tác này hoàn tất servlet ShowPhoto .java Tiếp theo, bạn sẽ thiết lập trang chào đón ban đầu của ứng dụng Thiết lập trang chào đón của ứng dụng Web Theo mặc định, ứng dụng Web hiển thị index.jsp như là trang chào đón Đây là trang được Máy chủ ứng dụng. .. đổi Cảm giác trải nghiệm của người sử dụng được cải thiện rất nhiều Việc chờ đợi đáp ứng từ máy chủ và việc làm mới/ cập nhật theo từng trang một không còn nữa Thay vào đó, người sử dụng nhận thấy các trải nghiệm tương tác quen thuộc Về cơ bản cảm thấy giống như dùng một ứng dụng tại chỗ Ajax làm cho tương tác người sử dụng được đáp ứng tốt hơn Các thuộc tính chính của ứng dụng tương tác nhiều hơn... ảnh của nhân viên: http://localhost:8080/dwapp/ShowPhoto?empno=00150 servlet ShowPhoto .java tạo ra luồng bit của ảnh Hiển thị ảnh từ các trường BLOB DB2 Các bức ảnh nhân viên được lưu trữ trong bảng EMP_PHOTO của cơ sở dữ liệu mẫu DB2 Bảng 2 mô tả các trường của bảng này: Bảng 2 Các trường của bảng EMP_PHOTO Tên trường empno photo_format Mô tả Số hiệu nhân viên của nhân viên tương ứng Định dạng của. .. value="${employee.empno}">${employee.lastname}, ${employee.firstnme} Bạn sử dụng thẻ JSTL SQL để thực hiện một truy vấn lựa chọn tất cả các bản ghi nhân viên từ cơ sở dữ liệu DB2 Điều này tương tự như truy vấn đã được bạn sử dụng trong ví dụ Khởi đầu các ứng dụng Java của bạn: Phần mềm miễn phí, phát triển nhanh chóng Lần này, thông tin nhân viên được trả về theo tên họ được sắp xếp... cho servlet ShowPhoto .java package com.ibm.dw; import java. io.IOException; import java. io.InputStream; import java. sql.Connection; import java. sql.ResultSet; import java. sql.SQLException; import java. sql.Statement; import javax.naming.InitialContext; import javax.naming.NamingException; import javax.servlet.ServletException; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse;... thấy rõ Các thay đổi được hiển thị theo mẫu tất cả-hoặc-không có gì (all-or-nothing) — ngay cả khi chỉ có một phần nhỏ của trang HTML cần thay đổi, toàn bộ trang được tìm về từ máy chủ và được trình bày lại Nói ngắn gọn, cảm giác trải nghiệm của người dùng với các ứng dụng Web điển hình là rất khác với các ứng dụng trên máy tại chỗ như xử lý văn bản và lịch biểu Để cải thiện cảm giác trải nghiệm của người... tương ứng Định dạng của ảnh Các ảnh được lưu trữ theo nhiều định dạng để giúp cho việc hiển thị hình ảnh dễ dàng hơn mà không cần mã chuyển đổi phức tạp Ứng dụng này chỉ sử dụng cho các ảnh có định dạng GIF picture Các bit nhị phân của hình ảnh, được lưu giữ trong một trường BLOB Kích thước lớn nhất của trường này là 102.400 byte Để tạo servlet ShowPhoto .java trong IDE Eclipse, đầu tiên hãy điểm sáng WebContent... SQL) để làm cho việc lựa chọn các tên từ danh sách thả xuống dễ dàng hơn Bạn thực hiện truy vấn SQL đối với jdbc/DataSource Việc này được cấu hình trong kế hoạch triển khai geronimo-web.xml của ứng dụng và trỏ tới pool cơ sở dữ liệu toàn hệ thống có tên là dwDatasource, đã được cấu hình trên Máy chủ ứng dụng Sau đó, bạn sử dụng thẻ vòng lặp để lặp theo danh sách các nhân viên được chọn mỗi... com.ibm.dw.ShowPhoto .java trong thư mục src, bên ngoài thư mục WebContent WTP Eclipse giữ mã nguồn ở đây để dễ dàng bảo trì và tổ chức, nhưng sao chép các tệp tin lớp được biên dịch vào đúng vị trí trong thư mục WEB-INF/classes để triển khai ứng dụng Web tự động Các bước mà bạn vừa thực hiện xong tạo ra một khung sườn servlet trong ShowPhoto .java Bây giờ hãy sửa đổi mã nguồn bằng cách thêm các dòng chữ đậm . Khởi đầu các ứng dụng Java của bạn, Phần 2: Phát triển Ajax gọn nhẹ, dễ dàng Xây dựng một ứng dụng web tương tác với bộ khởi đầu các ứng dụng Java của bạn Sing Li, Tư. chủ ứng dụng) đã đáp ứng tốt các nhu cầu của các nhà phát triển ứng dụng Java EE và các dịch vụ web. Đi đôi với hướng dẫn này là hướng dẫn, Khởi đầu các ứng dụng Java của bạn, Phần 1: Phần. dụng bộ khởi đầu các ứng dụng Java của bạn để mã hoá, thử nghiệm và triển khai các ứng dụng Hình 4 cho thấy bộ khởi đầu trợ giúp tạo ra ứng dụng này như thế nào: Hình 4. Phát triển ứng dụng