Hiendt's Weblog

Sử dụng công nghệ JavaServer Faces với Ajax

1. Đặt vấn đề

   Như chú ta đã biết, JSF cung cấp một tính năng vượt trội là giúp ta tự tạo một component bằng cách mở rộng một component.

   Ví dụ đưa ra là tạo một textfield nhập tên. Khi user bắt đầu nhập tên, ứng dụng sẽ dùng ajax thực hiện auto complete với tên mà user đang nhập.

   Vấn đề đặt ra ở đây là: làm sao ta có thể tích hợp ajax vào jsf.

   Và thông qua đó ta sẽ trả lời cho các câu hỏi sau:

• Ajax request sẽ thi hành trong servlet controller hay đuợc quản lý bằng JSF life cycle.

• Ta có thể dùng các components sẵn có của JSF để thi hành Ajax không.

• Javascript sẽ nằm trong Java hay nằm trong file js.

• Khai báo cấu trúc project

• Đóng gói.

2. Giải pháp

   Chúng ta có 3 giải pháp, nhưng bạn muốn dùng giải pháp nào? Hãy trả lời cho tôi các câu hỏi sau:

• Bạn hiện thực một application mới hoàn toàn hay bạn chỉ viết một phần của ứng dụng đó.

• Bạn có thể thêm javascript trực tiếp vào trang, hay thêm vào một bộ thẻ mới vào trang hay không.

• Ajax code có tính reuse không.

Chúng ta sẽ thảo luận 3 giải pháp. Ở 2 giải pháp đầu tiên, ta sẽ hiện thực một component có javascript trong server component. Ở giải pháp 1: JSF life cycle sẽ quản lý Ajax request.

Giải pháp 2, thành phần tạo ra liên lạc với servlet, servlet này sẽ xử lý ajax request. Giải pháp 3, không yêu cầu tạo một component mới, tất cả ajax được xử lý bởi servlet được ta khai báo.

Giải pháp 1:

Tạo JSF Component xử lý ajax script trong client

Ta cần hiện thực một component với các yêu cầu sau:

• Dịch html cho form.

• Dịch link cho javascript quản lý sự kiện.

• Xử lý Ajax request.

Theo các buớc sau:

1. page được gọi. component được dịch ra mã html bởi AutoCompleteTextRenderer.

2. Javascript gọi đến URL, faces/autocomplete-script là một hiện thực của FacesServlet, và được hiện thực bởi RenderPhaseListener

3. User bắt đầu gõ, javascript gọi đến một hiện thực của FacesServlet .

4. RenderPhaseListener xử lý tạo ra file xml, và trả về trên XMLHttpRequest

5. XMLHttpRequest thi hành chức năng update html DOM phụ thuộc dữ liệu có trong file xml.

6. Update button.

Ta cần hiện thực một tag căn bản sau:

completionMethod="#{AutoCompleteTextfield.completeCity}"
value="#{SessionBean.city}" required="true"
/>

Dĩ nhiên khi encode ta sẽ phaỉ encode javascript

Hiện thực sử lý cho ajax request

private void handleAjaxRequest(PhaseEvent event) {
      FacesContext context = event.getFacesContext();
      HttpServletResponse response =
           (HttpServletResponse)context.getExternalContext().getResponse();
       ..
       if ("complete".equals(action)) {
           String method = request.getParameter("method");
           try {
               //get completion items
               response.setContentType("text/xml");
               response.setHeader("Cache-Control", "no-cache");
               //Code to write XML response goes here...

               event.getFacesContext().responseComplete();
               return;
           } catch (EvaluationException ee) {
               ee.printStackTrace();
           } catch (IOException ioe) {
               ioe.printStackTrace();
           }
       }
   }

Và cuối cùng, encode style cho đẹp.