Lưu Quang Triệu

Không ngừng sáng tạo thì sẽ không sợ bị diệt vong

JavaServer Faces là gì?

Posted by millionking on December 1, 2011

Công nghệ Java Server Faces là một UI framework cho việc xây dựng các ứng dụng web chạy trên Java server và thay thế UI phía sau cho client. Các thành phần chính của công nghệ JSF bao gồm:
  • Một API và các bổ sung tham khảo cho: thay thế các thành phần UI và quản lý trạng thái của chúng; xử lý các sự kiện, kiểm tra phía server và chuyển đổi dữ liệu; định nghĩa navigation của trang; hỗ trợ quốc tế hóa và accessibility; và cung cấp khả năng mở rộng cho tất các đặc điểm này.
  • Một thư viện thẻ tùy biến JavaServer Pages (JSP) cho việc định nghĩa các thành phần UI trong một trang JSP
Mô hình lập trình được định nghĩa tốt này và thư viện thẻ thành phần UI tạo kỹ thuật dễ dàng tải việc xây dựng và sửa chữa các ứng dụng web với các UI ở phía server. Với sự tổ chức nhỏ đó, bạn có thể:
  • Điều khiển việc tạo ra các sự kiện phía client từ việc viế mã ứng dụng phía server
  • Ánh xạ các thành phần UI tren một trang cho dữ liệu phía server
  • Khởi dựng một UI với các thành phần có thể tái sử dụng và có khả năng mở rộng
  • Lưu trữ và phục hồi trạng thái UI ngay sau các request
Phần mềm yêu cầu
Để xây dựng, deploy và chạy các ứng dụng JSF bạn cần một môi trường deploy chẳng hạn Java Web Software Development Pack và Java 2 Platform, Standard Edition (J2SE) SDK 1.3 trở lên. Đồng thời download bổ sung công nghệ Java Server Faces. Có thể download các phần mềm cần thiết tại các link dưới đây
Đặc điểm của JSF
Một trong những lợi điểm lớn nhất của công nghệ JSF là nó cho phép một sự phân chia rạch ròi giữa behavior (cách xử lý) và presentation (cách trình bày). Xây dựng ứng dụng web với công nghệ JSP lưu trữ từng phần của việc phân chia này. Tuy nhiên, một ứng dụng JSP không thể ánh xạ những request HTTP thành những xử lý sự kiện các thành phần cụ hể hoặc quản lý các thành phần UI như những đối tượng có trạng thái trên server. Công nghệ JSF cho phép bạn xây dựng các ứng dụng Web nhằm bổ sung việc phân chia rõ ràng hơn behavior và presentation được cho phép bởi kiến trúc UI.
Việc phân chia luận lý từ presentation cũng cho phép mỗi thành viên của một nhóm phát triển ứng dụng Web tập trung vào những phần trong tiến trình phát triển của họ, và cung cấp một mô hình lập trình đơn giản để liên kết những phần đó với nhau. Một mục tiêu quan trọng khác của công nghệ JSF là cung cấp các mức độ thân thuộc các thành phần UI và các khái niệm tầng Web mà không giới hạn bạn trong một công nghệ scripting cụ thể hoặc một ngôn ngữ đánh dấu. Trong khi công nghệ JSF bao gồm một thư viện thẻ tùy biến JSP dùng thay thế các thành phần trên trang JSP, API của công nghệ JSP được phân lớp trực tiếp trên đỉnh của JavaServlet API. Điều này cho phép bạn làm được vài điều: sử dụng công nghệ trình bày khác bên cạnh JSP, tạo ra những thành phần tùy biến của bản thân bản trực tiếp từ những lớp thành phần, và tạo ra luồng xuất cho những thiết bị client khác nhau.

Quan trọng hơn hết, công nghệ JSF cung cấp một kiến trúc dành cho việc quản lý trạng thái các thành phần, xử lý dữ liệu thành phần, kiểm tra nhập liệu của người dùng và xử lý các sự kiện. Trong hầu hết những phần đó, các ứng dụng JSF cũng tương tự như bất kỳ các ứng dụng Java Web khác, Chúng chạy trên một Java Servlet container, và thông thường chứa:

  • Các thành phầns JavaBean (được gọi là những mô hình đối tượng trong công nghệ JSF)
  • Các event listener
  • Các trang, chẳng hạn như JSP
  • Các lớp helper phía server, chẳng hạn như các bean truy cập dữ liệu

Thêm vào những thành phần ở trên, một ứng dụng JSF cũng có:

  • Một thư viện thẻ tùy biến thực thi các thành phần UI trên một trang
  • Một thư viện thẻ tùy biến thay thế các xử lý sự kiện, kiểm tra và những hành động khác
  • Những thành phần UI thay thế trạng thái các đối tượng trên server
  • Các kiểm tra, xử lý sự kiện, và xử lý navigation

Mỗi ứng dụng JSF phải bao gồm một thư viên thẻ tùy biến nhằm định nghĩa các thẻ thay thế các thành phần UI và một thư viện thẻ tùy biến nhằm thay thế các hành động cốt lõi khác, chẳng hạn như các kiểm tra và các xử lý sự kiện. Cả hai loại thư viện thẻ này được cung cấp bởi việc bổ sung JSF.

Thư viện thẻ tùy biến xóa bỏ những gì cần thiết cho các thành phần UI trong HTML hoặc ngôn ngữ đánh dấu khác, kết quả là những thành phần tái sử dụng hoàn toàn. Và thư viện core tạo nên sự dễ dàng để đăng ký các sự kiện, kiểm tra và những hành động khác. Thư viện thẻ tùy biến có thể là thư viện thẻ HTML cơ bản chứa cùng với công nghệ JSF tham khảo bổ sung, hoặc bạn có thể định nghĩa thư viện thẻ của riêng mình nhằm tạo ra các thành phần tùy biến hoặc xuất ra kiểu khác HTML.

Cuối cùng, công nghệ JSF cho phép bạn chuyển đổi và kiểm tra dữ liệu trên những thành phần riêng biệt và thông báo bất kỳ lỗi gì trước khi dữ liệu phía server được cập nhật.

Ví dụ trang JSF
Hãy xem việc phát triển Web dễ dàng như thế nào với công nghệ JSF, tìm kiếm sự khác nhau giữa một trang JSF và một trang JSP. Trang JSP này hỏi bạn nhập tên vào một textfield và click button. Nó sẽ hiển thị tên bạn trên trang.

<html>
      <head><title>Hello</title></head>
      <body bgcolor=”white”>
           <img src=”duke.waving.gif”>
           <h2>My name is Duke. What is yours?</h2>
           <form method=”get”>
                 <input type=”text” name=”username” size=”25″>
                 <input type=”submit” value=”Submit”>
                 <input type=”reset” value=”Reset”>
          </form>
<%  String username = request.getParameter(“username”);
if ( username != null && username.length() > 0 ) {
%>
<%@include file=”response.jsp” %>
<%
}
%>
</body>
</html>

Thậm chí với trang đơn giản này, bạn cần biết làm thế nào để lấy được username từ tham số request, yêu cầu một vài kiến thức lập trình. Một người bình thường có thể không biết cách làm điều này thế nào.
Bây giờ hãy xem phiên bản JSF của trang này. Chú ý rằng, thay vì chứa các response như cùng trang, phiên bản JSF hiển thị response trên trang thứ hai.

Đây là trang thứ nhất:

<HTML>
<HEAD> <title>Hello</title> </HEAD>
<%@ taglib uri=”http://java.sun.com/jsf/html&#8221; prefix=”h” %>
<%@ taglib uri=”http://java.sun.com/jsf/core&#8221; prefix=”f” %>
<body bgcolor=”white”>
<h2>My name is Duke. What is yours?</h2>
<jsp:useBean id=”UserNameBean” scope=”session” />
<f:use_faces>
<h:form id=”helloForm” formName=”helloForm” >
<h:graphic_image id=”wave_img” url=”/wave.med.gif” />
<h:input_text id=”username” valueRef=”UserNameBean.userName”/>
<h:command_button id=”submit” label=”Submit” commandName=”submit” />
</h:form>
</f:use_faces>
</HTML>

Đây là trang thứ hai.

<HTML>
<HEAD> <title>Hello</title> </HEAD>
<%@ taglib uri=”http://java.sun.com/jsf/html&#8221; prefix=”h” %>
<%@ taglib uri=”http://java.sun.com/jsf/core&#8221; prefix=”f” %>
<body bgcolor=”white”>
<h:graphic_image id=”wave_img” url=”/wave.med.gif” />
<f:use_faces>
<h:form id=”responseform” formName=”responseform”>
<h:graphic_image id=”wave_img” url=”/wave.med.gif” />
<h2>Hi, <h:output_text id=”userLabel” valueRef=”UserNameBean.userName” /> </h2>
<h:command_button id=”back” label=”Back” commandName=”back” /><p>
</h:form>
</f:use_faces>
</HTML>

 

Sự khác nhau đầu tiên là những trang này không hề chứa mã Java. Bất kỳ tính luận lý nào cần được thực hiện đều được làm theo mô hình đối tượng hoặc các lớp helper. Tính luận lý có thể tham khảo từ các thẻ thành phần trong các trang. Thẻ h:input_text thay thế text field đặt vào tên user. Thuộc tình valueRef của thẻ h:input_text xác định, tên của user được lưu vào thuộc tính userName trong mô hình đối tượng UserNameBean. Thẻ h:output_text nhận tên user từ UserNameBean và hiển thị nó trong trang thứ hai. Trong khi thật sự bạn có thể gỡ bỏ script bằng việc sử dụng các thẻ JSTL, c:set và c:out, những thẻ này không thể được tập hợp dữ liệu với một thành phần UI có trạng thái, giống như các thẻ input_text và output_text làm. Điều này sẽ thậm chí trở nên quan trọng hơn với  bạn khi bạn xây dựng các ứng dụng phức tạp hơn. Bằng việc gỡ bỏ mã ra khỏi trang và đưa vào mô hình các đối tượng trong server, một nhóm phát triển Web sẽ có nhiều thời gian hơn để sửa chữa và phát triển ứng dụng.
Vai trò của Framework
Bởi vì việc phân chia công việc được cho phép bởi thiết kế công nghệ JSF, việc phát triển và sửa chữa các ứng dụng JSF có thể xử lý dễ dàng và nhanh chóng. Các thành viên củamột nhóm phát triển thông thường bao gồm một danh sách dưới đây. Trong nhiều nhóm, các nhà phát triển riêng biệt đóng nhiều hơn một trong những vai trò dưới đây
  • PageAuthors: người sử dụng ngôn ngữ đánh dấu, giống như HTML, để tạo ra các trang cho ứng dụng Web. Khi sử dụng framework công nghệ JSF, page authors sẽ hầu hết sử dụng thư viện thẻ
  • Application Developers: người lập trình mô hình các thành phần, các xử lý sự kiện, các kiểm tra, và navigation của trang. Application developer có thể cung cấp các lớp helper mở rộng
  • Component Writers: người có kinh nghiệm lập trình UI và đề nghị tạo ra các thành phần tùy biến sự dụng ngôn ngữ lập trình.
  • Những người này có thể tạo ra các thành phần của riêng họ trực tiếp từ các lớp thành phần, hoặc họ có thể kế thừa các thành phần chuẩn cung cấp bởi công nghệ JSF
  • Tool Verdors: người cung cấp các công cụ nhằm tạo ra công nghệ JSF xây dựng UI phía server dễ dàng hơn. Những thành viên chính của công nghệ JSF sẽ là page authors và application developers.
Các thành phần chính
Như hầu hết các công nghệ, Faces có những quy định của nó nhằm đưa ra các khái niệm cơ bản cho những đặc điểm mà nó cung cấp. Chúng tôi đang nói vế những elements như các component UI, validator và rederer. Bạn có thể có một ý kiến tốt về chúng là cái gì, nhưng qui định viết các ứng dụng Faces, bạn phải hiểu được chúng là gì trong thế giới JSF. Phần này, chúng tôi trình bày về những khái niệm cốt lõi và giải thích mối quan hệ của chúng với những phần khác. Có tám khái niệm khi bạn phát triển các ứng dụng JSF
  • UI Component (còn gọi là một control hay đơn giản là component) : một đối tượng có trạng thái, được chứa trên server, cung cấp các chức năng cụ thể để tương tác với một người dùng cuối. UI component là những JavaBean với các thuộc tính, phương thức, sự kiện. Chúng được tổ chức thành một cây các component thường hiển thị như một trang
  • Rederer: Trả lời cho việc hiển thị một UI component và trao đổi một dữ liệu nhập của user vao giá trị của component. Renderer có thể được thiết kế để làm việc với một hoặc nhiều UI component, và một UI component có thể tập hợp với nhiều renderer khác nhau.
  • Validator: Trả lời cho việc chắc chắn rằng giá trị nhập vào bởi user được chấp nhận. Một hoặc nhiều validator có thể được tập hợp với một UI component
  • Backing beans: Các Java Bean xác định tập hợp các giá trị từ các UI component và bổ sung các phương thức listener cho event. Chúng cũng có thể nắm giữ các tham chiếu đến các UI component
  • Converter: Chuyển đổi một giá trị của component thành và từ một chuỗi để hiển thị. Một UI component có thể được tập hợp với một converter duy nhất.
  • Event/listener: JSF sử dụng mô hình event/listener JavaBeans (cũng được sử dụng cho Swing). UI component (và những đối tượng khác) tạo ra các event, và các listener có thể đăng ký để xử lý các sự kiện
  • Messages: Thông tin hiển thị cho user. Chỉ bất kỳ phần ứng dụng nào (backing beans, validators, converter …) có thể tạo ra thông tin hoặc thông điệp lỗi nhằm hiển thị cho user
  • Navigation: Khả năng di chuyển từ một trang đến trang khác. JSF có một hệ thống navigation mạnh mẽ tích hợp với những event listeners.
Vòng đời của việc xử lý request
Chúng ta nói về lập trình Web đơn giản thế nào với các components, events, listeners, và chín mươi khác niệm khác nhau. Vì thế tại sao phần này nói về xử lý request. Trong khi bạn tìm hiểu frameword bên dưới xử lý request của Servlet API, sẽ phân tích Faces xử lý request như thế nào. Điều này cho phép bạn xây dựng các ứng dụng tốt hơn bởi vì bạn sẽ biết chính xác cái gì được đặt ở đâu và khi nào.
  • Bước 1 – Restore View: Hiển thị thay thế tất cả các component tạo nên một trang cụ thể. Nó có thể lưu trữ trên client (thông thường trong một field ẩn trên trình duyệt) hoặc trên server (thông thường trong session)
  • Bước 2 – Apply Request Values: Mỗi UI component chấp nhận dữ liệu nhập có một giá trị được submit thay thế giá trị dữ liệu gốc từ user. Trong suốt bước này, framework ấn định giá trị được submit dựa trên tham số gởi đi trong request. Quá trình này gọi là decoding.
  • Bước 3 – Process Validation: trong bước này, JSF đặt cây component và hỏi mỗi component có chắc chắn rằng giá trị submit là có thể chấp nhận không. Bởi vì giá trị được submit của mỗi component nhập vào được cập nhật bởi bước 2, component bây giờ có hầu hết dữ liệu hiện thời của user. Trước khi validation xảy ra, giá trị được submit được chuyển đổi, bằng mỗi converter đã đăng ký cho component hoặc converter mặc định. Validation là sau khi xử lý trực tiếp bằng component hoặc công bố cho một hoặc nhiều validator.
  • Bước 4 – Update Model Values: Bây giờ chúng ta đã chắc chắn về giá trị cục bộ của các component đã được cập nhật và chính xác và đúng kiểu, có thể chuyển đi với bất kỳ bean nào được tập hợp hoặc mô hình các đối tượng. Bởi vì các đối tượng được tập hơp với các component thông qua các phát biểu JSF EL, đây là nơi các phát biểu này được kiểm tra và các thuộc tính được cập nhật dựa trên giá trị cụ bộ của component.
  • Bước 5 – Invoke Application: Bây giờ các bean cần thiết và mô hình các đối tượng được cập nhật, chúng ta có thể đi xuống việc công bố thông tin. Trong bước này, JSF quảng bá các sự kiện cho bước này đối với bất kỳ listener nào đã được đăng ký.
  • Bước 6 – Render Response: Tại thời điểm này, tất cả xử lý bới framework và ứng dụng đã trải qua. Tất cả chờ được gởi đi trả lời cho user, và đây là mục tiêu chính của bước này. Mục tiêu thứ hai là lưu lại trạng thái hiển thị để nó có thể được phục hồi trong bước Restore View nếu user yêu cầu lại. Trạng thái hiển thị lưu lại trong bước này bởi vì thường thì hiển thị được lưu trên client, vì thế nó là một phần của response nhằm gởi trả cho user. Trong trường hợp này, JSF đang lưu trạng thái trên server, vì thế hiển thị hầu hết được lưu trữ trong session của user.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

 
%d bloggers like this: