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 ppsx

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ả, Wro

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

 Ứ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

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

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:

Hình 5 Tạo ra một JSP mới, sử dụng thủ thuật New của Eclipse

Nhấn Next và sau đó nhập tên của JSP mới là employee.jsp Nhấn vào Finish để

hoàn thành việc tạo ra mẫu JSP ban đầu

Bây giờ, biên tập JSP đã tạo ra bằng cách thêm đoạn mã được in đậm như hiển thị trong Listing 1:

Listing 1 Thành phần employee.jsp để xử lý các tương tác giao diện người sử dụng

<%@ page language="java" contentType="text/html; charset=ISO-8859-1"

pageEncoding="ISO-8859-1"%>

<%@ taglib prefix="sql" uri="http://java.sun.com/jsp/jstl/sql" %>

<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">

<link rel="stylesheet" type="text/css" href="dwstyles.css"/>

<title>dW Example Employee Information from DB2 Express C Table</title>

</head>

<body>

<h1>DB2 Employee Information</h1>

<br/>

<c:url value="/employee.jsp" var="empURL"/>

<form action="${empURL}" method="get">

<table>

<tr>

<td colspan="2">

<select name="empno">

<sql:query var="employees" dataSource="jdbc/DataSource"> SELECT * FROM EMPLOYEE ORDER BY LASTNAME </sql:query>

<c:forEach var="employee" items="${employees.rows}"> <option value="${employee.empno}">${employee.lastname}, ${employee.firstnme}</option>

SELECT * FROM EMPLOYEE WHERE EMPNO='${param.empno}' </sql:query>

<c:forEach var="employee" items="${selected.rows}">

<tr>

<td class="label">Department:</td><td>${employee.workdept}</td> </tr>

<tr>

<td class="label">Phone number:</td><td>${employee.phoneno}</td> </tr>

<c:url value="/ShowPhoto" var="photoURL">

<c:param name="empno" value="${param.empno}" />

</c:url>

<img src="${photoURL}"/>

</td>

</c:forEach>

employee.jsp hoạt động như thế nào

Hình 1 chỉ ra cách bố trí của employee.jsp Một danh sách thả xuống — một phần

tử HTML <select> — duy trì danh sách các tên nhân viên

Người sử dụng chọn bất kỳ một trong những nhân viên từ danh sách và nhấn vào

nút find employee Thông tin chi tiết về nhân viên được chọn sau đó sẽ hiển thị,

cùng với một bức ảnh của nhân viên đó nếu có (Không phải tất cả các nhân viên đều có sẵn một ảnh trong cơ sở dữ liệu DB2 mẫu)

Trong employee.jsp, sử dụng mã JSTL trong Listing 2 để tạo ra danh sách thả xuống:

Listing 2 Tạo ra các tên nhân viên động để lựa chọn

<select name="empno">

<sql:query var="employees" dataSource="jdbc/DataSource">

SELECT * FROM EMPLOYEE ORDER BY LASTNAME

LASTNAME trong truy vấn 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 <c:forEach> để lặp theo danh sách các nhân viên được chọn mỗi lần một hàng Một thẻ HTML <option> được tạo ra cho mỗi nhân viên Giá trị của <option> là một số nhân viên và văn bản được hiển thị là họ và tên của nhân viên Ví dụ, <option> được tạo ra cho Bruce Adamson là:

<option value="000150">ADAMSON, BRUCE</option>

Toàn bộ phần tử <select> tồn tại bên trong một thẻ HTML <form> bao quanh, như hiển thị bằng chữ đậm trong Listing 3:

Listing 3 Danh sách <select> bên trong phần tử <form>

<c:url value="/employee.jsp" var="empURL"/>

<form action="${empURL}" method="get">

</form>

Thẻ tạo ra liên kết URL <c:url> tạo ra một URL có định dạng đúng cho bạn, trỏ ngược lại tới chính employee.jsp này để xử lý biểu mẫu URL này được đặt trong một biến gọi là empURL và được sử dụng trong thuộc tính hành động của thẻ

<c:form>

Khi người sử dụng lựa chọn một nhân viên — ví dụ, Bruce Adamson

(empno=000150) — và nhấn vào nút find employee, thông tin biểu mẫu này được

đệ trình ngược lại tới employee.jsp để xử lý bằng URL này:

http://localhost:8080/dwapp/employee.jsp?empno=000150

Xử lý đệ trình biểu mẫu HTML

Trang employee.jsp có hai vai trò:

 Để hiển thị danh sách các nhân viên để lựa chọn

 Để xử lý việc đệ trình biểu mẫu sau khi một nhân viên được chọn

Để xác định xem việc đệ trình biểu mẫu đã được thực hiện chưa, bạn cần phải kiểm tra xem có tồn tại một tham số empno HTTP GET không Bạn có thể sử dụng toán tử empty trong JSTL cho việc kiểm tra này Mã lệnh để trình bày thông tin và ảnh nhân viên được bao trong dấu ngoặc bằng một thẻ <c:if> để thực hiện phép kiểm tra này Đoạn mã này được hiển thị trong Listing 4:

Kiểm tra sự tồn tại của tham số biểu mẫu empno

<c:if test="${!(empty param.empno)}">

<tr>

<sql:query var="selected" dataSource="jdbc/DataSource">

SELECT * FROM EMPLOYEE WHERE EMPNO='${param.empno}' </sql:query>

<c:forEach var="employee" items="${selected.rows}">

sử dụng để trình bày giá trị tham số empno đầu vào trong lệnh SELECT như thấy trong Listing 5:

Listing 5 Nhận được bản ghi của một nhân viên khi sử dụng một truy vấn SQL được tạo ra động

<c:if test=""${!(empty param.empno)}">

<tr>

<sql:query var="selected" dataSource="jdbc/DataSource">

SELECT * FROM EMPLOYEE WHERE EMPNO='${param.empno}' </sql:query>

<c:forEach var="employee" items="${selected.rows}">

${employee.phoneno}

Để tạo ra ảnh nhân viên, bạn sử dụng một thẻ HTML <img> Sử dụng thẻ JSTL

<c:url> tạo ra URL hiển thị hình ảnh này:

<c:url value="/ShowPhoto" var="photoURL">

<c:param name="empno" value="${param.empno}" />

</c:url>

<img src="${photoURL}"/>

Ví dụ, thẻ <img> được tạo ra có hiệu lực cho Bruce Adamson (có empno là

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

empno Số hiệu nhân viên của nhân viên tương ứng

photo_format Đị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 và chọn New > Other (hoặc ấn Ctrl+N) Chọn Web > Servlet

trong trình thủ thuật New Nhập com.ibm.dw làm tên gói Java Package và

ShowPhoto làm tên lớp, như được hiển thị trong Hình 6:

Hình 6 Tạo một servlet mới bằng trình thủ thuật Create Servlet của WTP Eclipse

Nhấn Next Trên màn hình kế tiếp, bạn có thể thiết lập phép ánh xạ URL cho

servlet Phép ánh xạ URL này sẽ được đặt tự động vào trong bộ mô tả triển khai web.xml của ứng dụng dưới dạng một phần tử <servlet-mapping> Trong trường

hợp này, bạn có thể giữ nguyên phép ánh xạ mặc định tới /ShowPhoto Nhấn vào

Finish

Nếu bạn nhìn vào khung nhìn Navigator, bạn sẽ thấy tệp tin

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 như hiển thị trong Listing 6:

Listing 6 Mã lệnh bổ sung thêm cho servlet ShowPhoto.java

throws ServletException, IOException {

String query = "select picture from emp_photo where

photo_format='gif' and empno='"

+ request.getParameter("empno") + "'";

DataSource dsource = null;

Statement stmt= null;

Connection conn =null;

ResultSet rset = null;

try {

InitialContext context = new InitialContext();

dsource =

(DataSource)context.lookup("java:comp/env/jdbc/DataSource"); conn = dsource.getConnection();

}

protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

doGet(request, response);

}

}

Sử dụng trình tổ chức nhập khẩu (import) tự động của Eclipse

Bạn có thể cắt và dán từ mã nguồn của hướng dẫn này (xem Tải về) nếu bạn

muốn Hoặc, nếu bạn đang nhập mã lệnh vào bằng tay, bạn không cần phải gõ phím cả danh sách lệnh nhập khẩu (import) lớn như trên Eclipse có thể tìm kiếm tất cả các thư viện dự án có sẵn để tìm các ký hiệu nhập khẩu của bạn Nhấn chuột

phải vào trong trình soạn thảo mã và chọn Source > Organize Imports (hoặc ấn

Ctrl+Shift+O) Thao tác này sẽ quét mã nguồn của bạn, tìm tất cả các ký hiệu

nhập khẩu vào chưa được phân giải và bổ sung thêm tất cả các lệnh import cần thiết vào đầu tệp mã nguồn Nếu Eclipse gặp bất kỳ sự nhập nhằng nào khi phân giải các ký hiệu nhập khẩu, nó sẽ nhắc bạn lựa chọn gói phần mềm thư viện, mà

ký hiệu phải được nhập khẩu từ đó

Đặc tính này tránh cho bạn không phải mệt mỏi tìm kiếm bằng tay trong việc viết

mã lệnh hàng ngày

Hoạt động của servlet ShowPhoto

Yêu cầu HTTP đầu vào có chứa một tham số có tên là empno Tham số này được

sử dụng để tìm đúng ảnh từ bảng EMP_PHOTO Truy vấn được thiết lập trong chuỗi sau:

InitialContext context = new InitialContext();

InputStream istream;

istream = rset.getBinaryStream(1);

Bạn cần phải thiết lập contentType (kiểu nội dung) đúng cho nội dung trả lời của servlet để đảm bảo rằng trình duyệt có thể diễn giải được thuộc tính kiểu mime image/gif :

response.reset();

response.setContentType("image/gif");

Tất cả những gì còn phải làm là đọc từ luồng nhị phân của trường hình ảnh và ghi

nó ra luồng đầu ra trả lời:

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 hiển thị khi URL sau được yêu cầu:

http://localhost:8080/dwapp/

index.jsp hiện đang chứa ứng dụng danh sách - nhân viên cũ Bạn cần phải thay đổi trang chào đón để trỏ tới employee.jsp Mở tệp tin web.xml từ khung nhìn Navigator và sau đó tìm phần tử <welcome-file-list> Phần tử này chứa các tệp tin

mà Máy chủ ứng dụng tìm kiếm khi hiển thị trang chào đón của ứng dụng Thực hiện thay đổi sau đây (hiển thị bằng chữ đậm trong Listing 7) cho phần tử này:

Listing 7 Cấu hình employee.jsp làm trang chào đón của ứng dụng

Sửa đổi phiếu định kiểu

Bạn cũng cần sửa đổi bản phiếu định kiểu gốc ban đầu dwstyles.css để bao gồm các phần tử kiểu bổ sung, như hiển thị bằng chữ đậm trong Listing 8, mà

employee.jsp sử dụng:

Listing 8 Các phần tử mới được thêm vào phiếu định kiểu dwstyles.css

align: left;

background-color: black; color: white;

Thử nghiệm ứng dụng thông tin-nhân viên

Trước khi bạn có thể chạy ứng dụng, bạn cần phải xây dựng dự án, tức là biên dịch

mã Java và tạo ra tệp tin WAR Nhấn chuột phải vào dwapp trong khung nhìn

Navigator và chọn Build Project Dự án Eclipse của bạn có thể được thiết lập để

xây dựng tự động, trong trường hợp này bạn không cần phải xây dựng bằng tay mỗi lần Kiểm tra trong trình đơn Project trên thanh trình đơn của Eclipse để xem

dự án được thiết lập để xây dựng tự động chưa

Để triển khai ứng dụng mới của bạn lên Máy chủ ứng dụng và thử nghiệm nó,

nhấn chuột phải vào dự án dwapp trong khung nhìn Navigator và chọn Run As >

Run on Server Kiểm tra khung nhìn Servers hai lần xem dự án dwapp đã ở trạng

thái đã đồng bộ (Synchronized) chưa Nếu không, chỉ cần nhấn chuột phải vào dự

án dwapp trong khung nhìn Servers và chọn Publish Eclipse sau đó sẽ đưa phiên

bản WAR mới nhất tới máy chủ và dự án ở trong trạng thái đã đồng 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 khác trong cơ sở dữ liệu để xem thông tin chi tiết về họ Nếu nhân viên bạn chọn có ảnh trong cơ sở dữ liệu, ảnh cũng sẽ được hiển thị

Cải thiện ứng dụng thông tin-nhân viên

Phiên bản hệ thống thông tin nhân viên mà bạn vừa hoàn thành chỉ thích hợp cho một công ty rất nhỏ — có khoảng 30 nhân viên Để xử lý được một công ty có vài trăm nhân viên, việc sử dụng một danh sách thả xuống để chọn nhân viên hầu như không khả thi Hơn nữa, việc gửi qua gửi lại các thông tin của hàng trăm nhân viên

từ DB2 tới JSP mỗi khi danh sách lựa chọn được hiển thị vừa không hiệu quả lại vừa chậm

Trong phần này, bạn sẽ chuẩn bị để xây dựng một nhánh hệ thống thông tin thứ hai nhằm cải thiện tình hình này với một bản thiết kế giao diện người dùng được hoàn thiện tốt hơn

Trải nghiệm của người dùng với thiết kế dựa trên trang so với việc cập nhật động trực quan

Phiên bản dựa trên JSP xử lý việc tìm kiếm nhân viên bằng cách trả về một trang Web mới Đây là hành động tiêu chuẩn của JSP, được gọi ngày càng phổ biến là

thiết kế dựa trên trang có trước (legacy page-based design) Chuỗi tương tác liên

4 Trình duyệt của người dùng sẽ hiển thị trang đáp ứng mới này

Kết quả là người sử dụng cảm thấy khá sốt ruột Sư chậm trễ đệ trình dữ liệu và chờ trả lời là nhận 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 dùng trên các kết nối tốc độ cao, có thể chọn một cách tiếp cận năng động hơn, bao gồm chuỗi các tương tác sau:

1 Người sử dụng thao tác chọn trên một trang HTML

2 Không đệ trình ngay biểu mẫu, mã JavaScript trên trình duyệt gửi truy vấn

do người sử dụng nhập vào đến máy chủ; điều này xảy ra trong nền và người dùng không nhìn thấy

3 Không đợi câu trả lời, trình duyệt vẫn tiếp tục hiển thị trang Web này và cho phép tương tác với người dùng

4 Sau một thời gian, trả lời cho truy vấn được máy chủ gửi lại và mã

JavaScript trên trình duyệt nhận được câu trả lời này Việc này người sử dụng vẫn không nhìn thấy và vẫn tiếp tục tương tác với giao diện người dùng

5 Sử dụng mã HTML (DHTML) động, hiện đại để cho phép các trang Web được sửa đổi trong lúc đang hoạt động bằng cách dùng mã JavaScript Trang Web được cập nhật động với các dữ liệu trả lời Chỉ các phần tử hiển thị cần thay đổi mới được sửa đổ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 này là:

 Tính không đồng bộ (Asynchronicity): Truy vấn được mã lệnh phía trình duyệt gửi đi không đồng bộ, nghiã là không cần phải chờ đợi truy vấn trước được trả về; vì không đồng bộ nên không có phần tử giao diện người dùng nào bị đóng băng hay bị cấm

 JavaScript: Duy nhất JavaScript là ngôn ngữ lập trình phía trình duyệt

được hỗ trợ mọi lúc mọi nơi Tất cả các tương tác giao diện người dùng của ứng dụng được sắp đặt cẩn thận, sử dụng mã JavaScript chạy trên trình duyệt

 XML: Điều này không dễ thấy, nhưng truy vấn cần phải gửi đi gửi về từ

trình duyệt đến máy chủ với các thông số gói kèm Câu trả lời cũng có thể chứa các cấu trúc dữ liệu phức tạp (như là một danh sách các bản ghi nhân viên, với các trường có kích thước và kiểu khác nhau) phải được phân tích

cú pháp bằng mã JavaScript của trình duyệt trước khi sử dụng Một phương pháp đã được kiểm chứng và thử nghiệm để trao đổi qua lại các dữ liệu phức tạp này trên một kết nối HTTP là thông qua XML Các thư viện xử lý XML có thể thực hiện phần lớn việc trao đổi qua lại dữ liệu ấy

Vì vậy, trải nghiệm tương tác cao của người dùng mà bạn nhận được là nhờ có Asynchronous JavaScript và XML — được gọi một cách đơn giản hơn trong cộng đồng phát triển là Ajax

Các thông tin chi tiết về các chủ đề Ajax nằm ngoài phạm vi của hướng dẫn này Xem developerWorks Trung tâm tài nguyên Ajax (Ajax resource center) của

developerWorks, và xem loạt bài Ajax dành cho các nhà phát triển Java (Ajax for Java developers) của Philip McCarthy (xem Tài nguyên), một nguồn tài nguyên

tuyệt vời cho việc học tập về Ajax Hướng dẫn này tập trung vào việc làm thế nào

để bạn có thể áp dụng Ajax để cải thiện giao diện người dùng của ứng dụng thông tin nhân viên và làm thế nào để xây dựng các giải pháp dựa trên Ajax khi sử dụng Eclipse, DB2 Express-C 9.5, và Máy chủ ứng dụng

Thiết kế lại ứng dụng với Ajax

Hình 7 cho thấy giao diện người dùng đã cải tiến của ứng dụng dựa trên Ajax mà bạn đang muốn xây dựng: