Máy ứng dụng của Google cho Java: Phần 2: Xây dựng ứng dụng sát thủ pot

Máy ứng dụng của Google cho Java: Phần 2: Xây dựng ứng dụng sát thủ
Xây dựng ứng dụng quản lý liên hệ riêng của bạn trong Máy ứng dụng
Rick Hightower , Giám đốc, eBlox
Tóm tắt: Toàn bộ ý nghĩa của một nền tảng đám mây giống như Máy ứng dụng
của Google (Google App Engine) cho Java™ là ở chỗ có thể tưởng tượng, xây
dựng và triển khai các ứng dụng sát thủ có chất lượng chuyên nghiệp có thể mở
rộng — không phải phá sản ngân hàng hoặc biến mình thành người mất trí. Trong
phần thứ hai của bài viết ba phần của mình giới thiệu về Máy ứng dụng của
Google cho Java, Rick Hightower sẽ đưa bạn vượt ra ngoài các ví dụ làm sẵn của
Phần 1 bằng một hướng dẫn từng bước để viết và triển khai một ứng dụng quản lý
liên hệ đơn giản bằng cách sử dụng Máy ứng dụng cho Java.
Trong Phần 1 của bài giới thiệu này về xây dựng các ứng dụng Java có khả năng
mở rộng với Máy ứng dụng (App Engine) cho Java, bạn đã tìm hiểu bộ công cụ
Eclipse và cơ sở hạ tầng của nền tảng điện toán đám mây của Google (hay PAAS)
cho các nhà phát triển Java. Các ví dụ trong bài viết đã có sẵn, để cho bạn có thể
tập trung vào việc tích hợp Máy ứng dụng cho Java với Eclipse và nhanh chóng
thực hành xây dựng và triển khai các kiểu ứng dụng khác nhau — cụ thể là xây
dựng một ứng dụng bằng cách sử dụng Bộ công cụ Web của Google (Google Web
Toolkit - GWT) và một ứng dụng dựa trên servlet. Bài viết này xây dựng trên nền
tảng đó và cũng chuẩn bị cho bạn các bài tập lập trình nâng cao hơn trong Phần 3
của bài viết này.
Ứng dụng quản lý-liên hệ mà bạn sẽ xây dựng cho phép một người sử dụng lưu trữ
thông tin liên hệ cơ bản như tên, địa chỉ thư điện tử (e-mail) và số điện thoại. Để
tạo ứng dụng này, bạn sẽ sử dụng trình thủ thuật tạo dự án GWT của Eclipse.
Từ CRUD đến liên hệ
Bước đầu tiên để xây dựng một ứng dụng mới trong Máy ứng dụng cho Java, bây
giờ như bạn biết, là khởi chạy trình thủ thuật tạo dự án trong Eclipse. Khi đó, bạn
có thể khởi chạy trình thủ thuật bộ khởi động dự án GWT để tạo ra một dự án
GWT. (Phần 1 của bài viết này trình bày các chỉ dẫn chi tiết để tạo một dự án
GWT trong Máy ứng dụng cho Java.)
Để thực hiện bài tập này, bạn sẽ bắt đầu bằng một ứng dụng CRUD đơn giản và

sau đó thêm kho lưu trữ thực. Bây giờ, hãy sử dụng một đối tượng truy cập dữ liệu
(DAO) với triển khai thực hiện giả, như thấy trong Liệt kê 1:

Liệt kê 1. Giao diện với ContactDAO


package gaej.example.contact.server;

import java.util.List;

import gaej.example.contact.client.Contact;

public interface ContactDAO {
void addContact(Contact contact);
void removeContact(Contact contact);
void updateContact(Contact contact);
List<Contact> listContacts();
}

ContactDAO thêm các phương thức để thêm một mối liên hệ, loại bỏ một mối liên
hệ, cập nhật một mối liên hệ và trả về một danh sách tất cả các mối liên hệ. Nó là
một giao diện CRUD rất cơ bản để quản lý các mối liên hệ. Lớp Contact (Liên hệ)
là đối tượng miền của bạn, như thấy trong Liệt kê 2:

Liệt kê 2. Đối tượng miền liên hệ (gaej.example.contact.client.Contact)


package gaej.example.contact.client;

import java.io.Serializable;

public class Contact implements Serializable {

private static final long serialVersionUID = 1L;
private String name;
private String email;
private String phone;

public Contact() {

}

public Contact(String name, String email, String phone) {
super();
this.name = name;
this.email = email;
this.phone = phone;
}

public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
public String getEmail() {
return email;
}
public void setEmail(String email) {
this.email = email;

}
public String getPhone() {
return phone;
}
public void setPhone(String phone) {
this.phone = phone;
}


}

Đối với phiên bản đầu tiên của ứng dụng này, bạn sẽ làm việc với một đối tượng
giả, lưu trữ các mối liên hệ trong một bộ sưu tập nằm ngay trong bộ nhớ, như thấy
trong Liệt kê 3:

Liệt kê 3. Lớp DAO giả


package gaej.example.contact.server;

import gaej.example.contact.client.Contact;

import java.util.ArrayList;
import java.util.Collections;
import java.util.LinkedHashMap;
import java.util.List;
import java.util.Map;

public class ContactDAOMock implements ContactDAO {

Map<String, Contact> map = new LinkedHashMap<String, Contact>();

{
map.put("",
new Contact("Rick Hightower", "", "520-555-
1212"));
map.put("",
new Contact("Scott Fauerbach", "", "520-555-
1213"));
map.put("",
new Contact("Bob Dean", "", "520-555-1214"));

}

public void addContact(Contact contact) {
String email = contact.getEmail();
map.put(email, contact);
}

public List<Contact> listContacts() {
return Collections.unmodifiableList(new ArrayList<Contact>(map.values()));

}

public void removeContact(Contact contact) {
map.remove(contact.getEmail());
}

public void updateContact(Contact contact) {
map.put(contact.getEmail(), contact);

}

}

Tạo các dịch vụ từ xa
Bây giờ mục tiêu của bạn là tạo ra một giao diện người dùng đồ họa GWT, cho
phép bạn sử dụng DAO. Nó sẽ sử dụng tất cả các phương thức trên giao diện
ContactDAO. Bước đầu tiên là bao bọc chức năng của lớp DAO (phiên bản tương
lai sẽ thực sự trao đổi với kho lưu trữ dữ liệu trên phía máy chủ vì thế nó phải ở
trên máy chủ) trong một dịch vụ, như cho thấy trong Liệt kê 4:

Liệt kê 4. ContactServiceImpl

package gaej.example.contact.server;

import java.util.ArrayList;
import java.util.List;

import gaej.example.contact.client.Contact;
import gaej.example.contact.client.ContactService;

import com.google.gwt.user.server.rpc.RemoteServiceServlet;

public class ContactServiceImpl extends RemoteServiceServlet implements
ContactService {
private static final long serialVersionUID = 1L;
private ContactDAO contactDAO = new ContactDAOMock();

public void addContact(Contact contact) {
contactDAO.addContact(contact);

}

public List<Contact> listContacts() {
List<Contact> listContacts = contactDAO.listContacts();
return new ArrayList<Contact> (listContacts);
}

public void removeContact(Contact contact) {
contactDAO.removeContact(contact);

}

public void updateContact(Contact contact) {
contactDAO.updateContact(contact);
}


}

Chú ý rằng ContactServiceImpl thực hiện RemoteServiceServlet và sau đó định
nghĩa các phương thức để thêm một mối liên hệ, liệt kê các mối liên hệ, loại bỏ
một mối liên hệ và cập nhật một mối liên hệ. Nó ủy quyền tất cả các hoạt động này
cho ContactDAOMock. ContactServiceImpl chỉ là một trình bao bọc (wrapper)
xung quanh ContactDAO để trưng ra chức năng của ContactDAO cho GUI GWT.
ContactServiceImpl được ánh xạ trong tệp web.xml tới URI /contactlist/contacts
trong tệp web.xml, như chỉ ra trong Liệt kê 5:

Liệt kê 5. web.xml for ContactService

<servlet>

<servlet-name>contacts</servlet-name>
<servlet-class>gaej.example.contact.server.ContactServiceImpl</servlet-class>
</servlet>

<servlet-mapping>
<servlet-name>contacts</servlet-name>
<url-pattern>/contactlist/contacts</url-pattern>
</servlet-mapping>

Để cho phép mặt trước GUI truy cập vào dịch vụ này, bạn cần phải định nghĩa cả
hai giao diện dịch vụ từ xa và giao diện dịch vụ từ xa không đồng bộ, như hiển thị
trong các Liệt kê 6 và 7:

Liệt kê 6. ContactService

package gaej.example.contact.client;

import java.util.List;

import com.google.gwt.user.client.rpc.RemoteService;
import com.google.gwt.user.client.rpc.RemoteServiceRelativePath;

@RemoteServiceRelativePath("contacts")
public interface ContactService extends RemoteService {
List<Contact> listContacts();
void addContact(Contact contact);
void removeContact(Contact contact);
void updateContact(Contact contact);
}

Liệt kê 7. ContactServiceAsync

package gaej.example.contact.client;

import java.util.List;

import com.google.gwt.user.client.rpc.AsyncCallback;

public interface ContactServiceAsync {
void listContacts(AsyncCallback<List <Contact>> callback);
void addContact(Contact contact, AsyncCallback<Void> callback);
void removeContact(Contact contact, AsyncCallback<Void> callback);
void updateContact(Contact contact, AsyncCallback<Void> callback);
}

Chú ý rằng ContactService triển khai thực hiện giao diện RemoteService và định
nghĩa một @RemoteServiceRelativePath, chỉ rõ một đường dẫn tương đối của
"các mối liên hệ". Đường dẫn tương đối này tương ứng với đường dẫn mà bạn đã
định nghĩa cho dịch vụ này trong tệp web.xml (chúng phải khớp).
ContactServiceAsync có các đối tượng gọi lại sao cho GWT GUI có thể được
thông báo về các cuộc gọi từ máy chủ mà không chặn hoạt động của máy khách
khác.
Đi tắt qua mã rối (spaghetti code)
Tôi không phải là một người hâm mộ viết mã rắc rối và tôi tránh viết như thế bất
cứ khi nào tôi có thể. Một ví dụ về mã rối sẽ là một nhóm các lớp bên trong ẩn
danh mà các phương thức của nó xác định các lớp vô danh bên trong. Các lớp bên
trong này, đến lượt chúng, lại thực hiện các cuộc gọi lại để gọi các phương thức,
mà sau đó các phương thức này được định nghĩa nội tuyến trong một lớp bên
trong. Eo ôi! Thành thật mà nói, tôi không thể đọc hoặc hiểu mã bị làm rối tung

lên, ngay cả khi nó chính là mã tôi viết! Vì vậy, để dàn phẳng những thứ này ra
một chút, tôi muốn đề nghị chia GUI GWT thành ba phần:
 ContactListEntryPoint
 ContactServiceDelegate
 ContactListGUI
ContactListEntryPoint là điểm vào chính; nó thực hiện việc kết nối sự kiện GUI.
ContactServiceDelegate bao bọc chức năng ContactService và ẩn giấu việc kết nối
các cuộc gọi lại của lớp bên trong. ContactListGUI quản lý tất cả các thành phần
GUI và xử lý các sự kiện từ GUI và Service (Dịch vụ). ContactListGUI sử dụng
ContactServiceDelegate để tạo ra các yêu cầu của ContactService.
Tệp ContactList.gwt.xml (một nguồn tài nguyên trong gaej.example.contact) chỉ
rõ ContactListEntryPoint là điểm vào chính cho ứng dụng này bằng cách sử dụng
phần tử entry-point (điểm vào) như chỉ ra trong Liệt kê 8:

Liệt kê 8. ContactList.gwt.xml

<entry-point class='gaej.example.contact.client.ContactListEntryPoint'/>

Lớp ContactListEntryPoint triển khai thực hiện giao diện EntryPoint từ GWT
(com.google.gwt.core.client.EntryPoint), báo hiệu rằng lớp này sẽ được gọi để
khởi tạo GUI. ContactListEntryPoint không làm nhiều việc. Nó tạo ra một cá thể
của ContactListGUI và một cá thể của ContactServiceDelegate, và sau đó cho
phép chúng biết về nhau để cho chúng có thể cộng tác. ContactListEntryPoint sau
đó thực hiện việc kết nối sự kiện GUI. ContactListEntryPoint được hiển thị trong
Liệt kê 9:

Liệt kê 9. ContactListEntryPoint

package gaej.example.contact.client;

import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.event.dom.client.ClickEvent;
import com.google.gwt.event.dom.client.ClickHandler;
import com.google.gwt.user.client.ui.HTMLTable.Cell;

/**
* Entry point classes define onModuleLoad().
*/
public class ContactListEntryPoint implements EntryPoint {
private ContactListGUI gui;
private ContactServiceDelegate delegate;

/**
* This is the entry point method.
*/
public void onModuleLoad() {

gui = new ContactListGUI();
delegate = new ContactServiceDelegate();
gui.contactService = delegate;
delegate.gui = gui;
gui.init();
delegate.listContacts();
wireGUIEvents();


}

private void wireGUIEvents() {
gui.contactGrid.addClickHandler(new ClickHandler(){

public void onClick(ClickEvent event) {
Cell cellForEvent = gui.contactGrid.getCellForEvent(event);
gui.gui_eventContactGridClicked(cellForEvent);
}});

gui.addButton.addClickHandler(new ClickHandler(){
public void onClick(ClickEvent event) {
gui.gui_eventAddButtonClicked();
}});

gui.updateButton.addClickHandler(new ClickHandler(){
public void onClick(ClickEvent event) {
gui.gui_eventUpdateButtonClicked();
}});

gui.addNewButton.addClickHandler(new ClickHandler(){
public void onClick(ClickEvent event) {
gui.gui_eventAddNewButtonClicked();

}});

}
}

Chú ý rằng ContactListEntryPoint kết nối các sự kiện dành cho addButton,
updateButton, contactGrid và addNewButton. Nó làm điều này bằng cách đăng ký
các lớp bên trong vô danh đã triển khai thực hiện giao diện lắng nghe (listener) các
sự kiện của các tiện ích GUI ấy. Đó là một kỹ thuật rất giống với xử lý sự kiện
trong Swing. Các sự kiện tiện ích GUI là từ các tiện ích được GUI
(ContactListGUI) tạo ra, tôi sẽ thảo luận nó một chút. Chú ý rằng lớp GUI có các

phương thức gui_eventXXX để đáp lại các sự kiện GUI.
ContactListGUI tạo các tiện ích GUI và đáp lại các sự kiện từ chúng.
ContactListGUI dịch các sự kiện GUI thành các hành động mà người dùng muốn
thực hiện trên ContactsService. ContactListGUI sử dụng ContactServiceDelegate
để gọi các phương thức trên ContactService. ContactServiceDelegate tạo ra một
giao diện không đồng bộ với ContactService và sử dụng nó để tiến hành các cuộc
gọi Ajax không đồng bộ. ContactServiceDelegate sẽ thông báo cho
ContactListGUI về các các sự kiện (trả về thành công hay thất bại) từ dịch vụ này.
ContactServiceDelegate được hiển thị trong Liệt kê 10:

Liệt kê 10. ContactServiceDelegatepackage gaej.example.contact.client;

import java.util.List;

import com.google.gwt.core.client.GWT;
import com.google.gwt.user.client.rpc.AsyncCallback;

public class ContactServiceDelegate {
private ContactServiceAsync contactService =
GWT.create(ContactService.class);
ContactListGUI gui;

void listContacts() {
contactService.listContacts(new AsyncCallback<List<Contact>> () {
public void onFailure(Throwable caught) {
gui.service_eventListContactsFailed(caught);
}

public void onSuccess(List<Contact> result) {
gui.service_eventListRetrievedFromService(result);

}
}//end of inner class
);//end of listContacts method call.
}

void addContact(final Contact contact) {
contactService.addContact(contact, new AsyncCallback<Void> () {
public void onFailure(Throwable caught) {
gui.service_eventAddContactFailed(caught);
}

public void onSuccess(Void result) {
gui.service_eventAddContactSuccessful();
}
}//end of inner class
);//end of addContact method call.
}

void updateContact(final Contact contact) {
contactService.updateContact(contact, new AsyncCallback<Void> () {
public void onFailure(Throwable caught) {
gui.service_eventUpdateContactFailed(caught);
}

public void onSuccess(Void result) {
gui.service_eventUpdateSuccessful();
}
}//end of inner class
);//end of updateContact method call.

}

void removeContact(final Contact contact) {
contactService.removeContact(contact, new AsyncCallback<Void> () {
public void onFailure(Throwable caught) {
gui.service_eventRemoveContactFailed(caught);
}

public void onSuccess(Void result) {
gui.service_eventRemoveContactSuccessful();
}
}//end of inner class
);//end of updateContact method call.
}

}

Chú ý rằng ContactServiceDelegate thông báo cho ContactListGUI về các sự kiện
dịch vụ thông qua các phương thức bắt đầu bằng service_eventXXX. Như đã đề
cập trước đó, một trong những mục tiêu của tôi khi viết ContactListGUI là tránh
các lớp bên trong bị lồng nhau và tạo ra một lớp GUI tương đối bằng phẳng (để tôi
có thể dễ dàng đọc và làm việc với nó sau này). ContactListGUI chỉ dài 186 dòng
và khá đơn giản. ContactListGUI quản lý chín tiện ích GUI và cũng cộng tác với
ContactServiceDelegate để quản lý một danh sách CRUD, như trong Liệt kê 11:

Liệt kê 11. ContactListGUI đang hoạt động

package gaej.example.contact.client;

import java.util.List;

import com.google.gwt.user.client.ui.Button;
import com.google.gwt.user.client.ui.Grid;
import com.google.gwt.user.client.ui.Hyperlink;
import com.google.gwt.user.client.ui.Label;
import com.google.gwt.user.client.ui.RootPanel;
import com.google.gwt.user.client.ui.TextBox;
import com.google.gwt.user.client.ui.HTMLTable.Cell;

public class ContactListGUI {
/* Constants. */
private static final String CONTACT_LISTING_ROOT_PANEL =
"contactListing";
private static final String CONTACT_FORM_ROOT_PANEL =
"contactForm";
private static final String CONTACT_STATUS_ROOT_PANEL =
"contactStatus";
private static final String CONTACT_TOOL_BAR_ROOT_PANEL =
"contactToolBar";
private static final int EDIT_LINK = 3;
private static final int REMOVE_LINK = 4;

/* GUI Widgets */
protected Button addButton;
protected Button updateButton;
protected Button addNewButton;
protected TextBox nameField;
protected TextBox emailField;
protected TextBox phoneField;
protected Label status;

protected Grid contactGrid;
protected Grid formGrid;

/* Data model */
private List<Contact> contacts;
private Contact currentContact;
protected ContactServiceDelegate contactService;

Chú ý rằng ContactListGUI theo dõi mối liên hệ hiện tại được nạp vào biểu mẫu
(currentContact) và danh sách các mối liên hệ trong danh sách (contacts). Hình 1
cho thấy các tiện ích tương ứng với GUI được tạo ra như thế nào:

Hình 1. Các tiện ích hoạt động trong GUI quản lý liên hệ

Liệt kê 12 cho thấy ContactListGUI tạo các tiện ích và biểu mẫu về một mối liên
hệ và sau đó đặt các tiện ích trong biểu mẫu đó:

Liệt kê 12. ContactListGUI tạo và đặt các tiện ích

public class ContactListGUI {
/* Constants. */
private static final String CONTACT_LISTING_ROOT_PANEL =
"contactListing";
private static final String CONTACT_FORM_ROOT_PANEL =
"contactForm";
private static final String CONTACT_STATUS_ROOT_PANEL =
"contactStatus";
private static final String CONTACT_TOOL_BAR_ROOT_PANEL =
"contactToolBar";

public void init() {
addButton = new Button("Add new contact");
addNewButton = new Button("Add new contact");
updateButton = new Button("Update contact");
nameField = new TextBox();
emailField = new TextBox();
phoneField = new TextBox();
status = new Label();
contactGrid = new Grid(2,5);

buildForm();
placeWidgets();
}

private void buildForm() {
formGrid = new Grid(4,3);
formGrid.setVisible(false);

formGrid.setWidget(0, 0, new Label("Name"));
formGrid.setWidget(0, 1, nameField);

formGrid.setWidget(1, 0, new Label("email"));
formGrid.setWidget(1, 1, emailField);

formGrid.setWidget(2, 0, new Label("phone"));
formGrid.setWidget(2, 1, phoneField);

formGrid.setWidget(3, 0, updateButton);
formGrid.setWidget(3, 1, addButton);

}

private void placeWidgets() {
RootPanel.get(CONTACT_LISTING_ROOT_PANEL).add(contactGrid);
RootPanel.get(CONTACT_FORM_ROOT_PANEL).add(formGrid);
RootPanel.get(CONTACT_STATUS_ROOT_PANEL).add(status);

RootPanel.get(CONTACT_TOOL_BAR_ROOT_PANEL).add(addNewButton);
}

Phương thức ContactListEntryPoint.onModuleLoad gọi phương thức
ContactListGUI init. Phương thức init gọi phương thức buildForm để tạo ra một
biểu mẫu mới và điền các trường để chỉnh sửa các dữ liệu liên hệ. Phương thức
init sau đó gọi phương thức placeWidgets, để đặt các tiện ích contactGrid,
formGrid, status và addNewButton vào các khe được định nghĩa trong các trang
HTML chứa ứng dụng GUI này, được định nghĩa trong Liệt kê 13:

Liệt kê 13. ContactList.html định nghĩa các khe cho các tiên ích


<h1>Contact List Example</h1>

<table align="center">
<tr>
<td id="contactStatus"></td> <td id="contactToolBar"></td>
</tr>
<tr>
<td id="contactForm"></td>
</tr>
<tr>

<td id="contactListing"></td>
</tr>
</table>