Thứ Ba, 4 tháng 10, 2016

JSF FRAMEWORK

JSF FRAMEWORK
  • JSF là viết tắt của JavaServer Faces, một bản miêu tả kĩ thuật giúp đơn giản hóa việc phát triển giao diện cho các ứng dụng Web viết bằng Java bằng cách dùng các thành phần dùng lại được (reusable components).
    JSF là một bộ khung (framework) phát triển các ứng dụng Web viết bằng Java nhằm làm đơn giản hóa quá trình phát triển giao diện người dùng cho các ứng dụng J2EE. Để tạo ra giao diện hiển thị, JSF dùng dạng cấu trúc cây của các thẻ, mỗi thẻ là một thành phần giao diện (component) và FacesServlet servlet sẽ thực hiện công đoạn chuyển đổi ra giao diện tương ứng cho người dùng với định dạng HTML. Ngoài ra, JSF cũng có thể sử dụng các kĩ thuật hiển thị khác, như XUL. JSF bao gồm:
    1. Một tập các hàm API để biểu diễn các thành phần UI (giao diện người dùng) và quản lí thạng thái của chúng, xử lí các sự kiện và kiểm tra dữ liệu đầu vào, qui định việc di chuyển trang (page navigation), hỗ trợ tính đa ngôn ngữ và hỗ trợ cho người sử dụng (accessibility)
    2. Một số thành phần (component) có sẵn
    3. Hai thư viện chứa các thẻ tùy biến JSP (JavaServer Pages custom tag) để có thể biểu diễn một JavaServer Faces interface bên trong một trang JSP.
    4. Mô hình sự kiện ở phía máy chủ (server-side event model)
    5. Khả năng quản lí trạng thái
    6. Managed Beans (JavaBeans được tạo bằng dependency injection
  • JSF Framework được xây dựng trên nền tảng MVC Pattern  trên Web nhưng đưa thêm khả năng hỗ trợ biến cố (event driven framework) mà đa số các framework của web còn thiếu sót, điều này tiếp cận tương ứng tự mô hình Swing – xây dựng ứng dụng desktop. Do vậy, JSF còn được mệnh danh là Swing được chạy trên phía Server (Server Side)
  • JSF còn hỗ trợ cơ chế rendering trong việc hỗ trợ giao diện cho người dùng trong quá trình xử lý (User Interface) và đây là đặc tính nổi bật của JSF theo nghĩa JSF đa số hỗ trợ chữ V (View) trong mô hình MVC chuẩn (event – biến cố là một phần trong View)
  • Do tính chất hỗ trợ giao diện cho nên JSF đưa ra một tập các thư viện trên trang jsp – tag library để hỗ trợ giao diện, checking ràng buộc – validation, ép kiểu dữ liệu – conversion, hỗ trợ đa ngôn ngữ - localization, …
  • Các thành phần của JSF Framework
    • Managed Bean hay tên gọi khác là Backing Bean
      • Bản chất là Java Beans được dùng kết hợp với các thành phần UI interface – các phương thức hàm hỗ trợ trình bày giao diện cho người dùng, trao đổi dữ liệu với các thành phần khác trong ứng dụng, lưu trữ và chuyển xử lý khi người dùng tương tác
      • Hỗ trợ 3 tầm vực khác nhau trong ứng dụng khi thao tác như request, session và application. Tầm vực none – chỉ là một javabeans hay java object thông thường
      • Backing beans phải được đăng ký với tập tin cấu hình (faces-config.xml) của ứng dụng để ứng dụng có thể cơ chế để lưu trữ và tương tác với bean
      • Tương tác giữa form, UI component với Backing Beans sử dụng EL language với syntax #{EL expression} (dùng dấu # thay cho dấu $)
      • Beans có khả năng hỗ trợ Biến cố - Event Handling, hỗ trợ chuyển trang – Navigation, thực hiện Validation
    • UI Component
      • Hỗ trợ trình bày giao diện để người dùng tương tác trực tiếp và trình bày kết quả về phía người dùng
                                                          
    • Renderer
      • Hỗ trợ tính toán, xử lý kết quả để kết xuất trình bày giá trị trong các thành phần UI để trình bày giao diện chính xác và hợp lý từ kết xuất của chương trình trong lúc thực thi
      • Hỗ trợ cơ chế “Look and Feel”
    • Events và Listeners
      • Hỗ trợ cơ chế đón nhận biến cố và xử lý biến cố (Event Handling) trên khái niệm của M (Model) trong MVC kết hợp với Managed Bean
        • Navigation
          • Cung cấp cơ chế chuyển trang, chuyển xử lý trong quá trình ứng dụng thực hiện tượng tự khái niệm C (Controller) trong mô hình MVC
          • Có 02 loại mô hình Static và Dynamic Model
            • Static Model: di chuyển đến duy nhất một trang cụ thể và không thay đổi hay không thể thay đổi từ lúc lập trình hay trong quá trình trang thực thi (trang chuyển đến đã được xác định chính xác)
      • Dynamic Model: cấu hình để chuyển đến trang tương ứng tùy theo kết quả xử lý của ứng dụng 

          • Validator
            • Hỗ trợ cơ chế kiểm tra dữ liệu trên các thành phần UI để đảm bảo dữ liệu được nhập đúng và có ràng buộc theo đúng yêu cầu của ứng dụng
          • Converter
            • Hỗ trợ cơ chế ép kiểu dữ liệu trong quá trình xử lý
          • Message
            • Hỗ trợ trình bày các thông tin – message về phía người dùng, thông báo lỗi hay hỗ trợ cơ chế I18N – hỗ trợ ứng dụng đa ngôn ngữ
  • Kiến trúc của JSF
      • Qua hình ảnh mô tả trên, chúng ta nhận thấy rằng
        • Mô hình MVC thể hiện rất rõ ràng, khi người dùng request, toàn bộ request bắt buộc phải qua Controller. Ở dây JSF Framework đặt tên Servlet là Faces và che nó lại và cho phép người lập trình mapping linh động không bị code lệ thuộc như bình thường trong mô hình MVC thông qua tập tin faces-config.xml, nơi người dùng khái báo các managed beans, mapping việc chọn lựa trang xử lý, chuyển xử lý và truyền thông số giữa các bean và các trang
        • Sau khi tiếp nhận, Faces Servlet xác định bean tương ứng – Model để chuyển xử lý hay xác định trang JSF – View tương tự như cơ chế MVC xác định trang JSP và Model tương ứng để thực hiện xử lý và kết xuất dữ liệu lên form JSF để trình bày
        • Kết quả, xử lý hay giao diện kết xuất phải được đưa qua Faces Servlet để chuyển response về cho người yêu cầu
      • Chi tiết quá trình xử lý của JSF từ lúc tiếp nhận đến lúc response trả về người dùng thực hiện qua 6 giai đoạn như sau
        • Khi xác định request từ người dùng, JSF thực hiện phase đầu tiên là Restore View
          • Thực hiện xây dựng các thành phần giao diện từ form yêu cầu của người dùng
          • Các UI Component được tổ chức theo dạng hình cây và trạng thái của các control hay nói cách khác là giá trị nhập liệu của người dùng (State), trạng thái kích hoạt biến cố mà người dùng chọn lựa kích hoạt được thu thập, tổng hợp và đưa vào Faces Servlet
        • Sau khi đã hoàn tất phase Restore View, JSF chuyển sang phase thứ 2 là Apply Request Value
          • Từ thông tin thu thập được, JSF chuyển qua ép kiểu tương ứng thành kiểu dữ liệu khai báo từ trong managed bean hay tương ứng với loại control của form nhập liệu
          • Nếu dữ liệu không thể ép kiểu thì tức thời JSF thông báo lỗi và response cho Faces Context hay Faces Servlet để Faces Servlet thông báo cho người dùng
          • Nếu việc ép kiểu – chuyển kiểu diễn ra thông thường, JSF chuyển dữ liệu sang phase tiếp theo
        • Trong phase Process Validation,
          • Dữ liệu tiếp tục được kiểm tra ràng buộc tương ứng với yêu cầu xây dựng ứng dụng và cấu hình trong thành phần validators, trong bean
          • Nếu dữ liệu valid bị sai thì tức thời JSF thông báo lỗi và response cho Faces Context hay Faces Servlet để Faces Servlet thông báo cho người dùng
          • Nếu đúng thì chuyển dữ liệu cập nhật vào trong managed beans
        • Update Model Value: cập nhật giá trị tương ứng vào các thuộc tính trong backing beans – managed beans
        • Invoke Application
          • Khi cập nhật thành công, Faces Servlet hay Faces Context dựa trên biến cố kích hoạt, thực hiện gọi (invoke) phương thức xử lý tương ứng, xác định trang jsf kết xuất
          • Đón nhận kết quả xử lý
        • Render response
          • Dữ liệu kết xuất khi xử lý xong sẽ được chuyển đổi tương ứng nạp vào form, cập nhật giá trị các control UI
          • Render để trình bày kết quả trên form và đưa kết xuất cho Faces Servlet hay Faces Context để response cho người dùng kết quả thực hiện
    • Các taglib JSF hỗ trợ trong JSP
      • HTML Tag Library: hỗ trợ cho các control HTML
      • Core Tag Library: hỗ trợ truyền tham số, xử lý, chuyển thông tin giữa các thành phần ứng dụng, ....
        • Syntax: <%@ taglib uri=“http://java.sun.com/jsf/core” prefix=“f”%>
    • Các bước xây dựng ứng dụng sử dụng JSF Framework
      • Tạo ứng dụng Web thông thường
      • Đưa framework JSF vào trong ứng dụng
      • Định nghĩa các managed bean của ứng dụng và đăng ký với tập tin cấu hình (faces-config.xml)
      • Xây dựng giao diện kết nối các managed bean
      • Mapping các trang giao diện thông qua navigation (faces-config.xml)

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.
Tổng hợp JSF

- Một ứng dụng JSF điển hình không cần phải có mã Java và có rất ít mã ngôn ngữ biểu thức phổ quát (JSTL EL) trong 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ụ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.
-Hiện tại công nghệ JSF có rất nhiều framework, đó là:
  • Mojarra JavaServer Faces (cung cấp bởi Oracle [3])
  • PrimeFaces ( cung cấp bởi PrimeTek – một công ty phần mềm Brazil [4])
  • RichFaces (cung cấp bởi JBOSS – Redhat [5])
  • MyFaces Trinidad (cung cấp bởi Apache Software Foundation [6])
  • OmniFaces (được phát triển chính bởi Arijan Tijims, Bauke Scholtz, Jan Beernink [7])
  • ICEfaces (phát triển bởi ICEsoft [8])
Có vài framework nữa tuy nhiên không phổ biến. Các JSF framework kể trên đều có phiên bản miễn phí. Thực tế sử dụng trên thế giới, cũng như tại Việt Nam, trong các JSF framework kể trên, thì phổ biến hơn cả là PrimeFaces, sau đó đến RichFaces.

Các phiên bản JSF

  • JSF 1.0 - bản miêu tả kĩ thuật của JSF chính thức đầu tiên
  • JSF 1.1 - bản sửa lỗi chính thức. Không có thay đổi về kĩ thuật hay HTML renderkit.
  • JSF 1.2 - bản chính thức chuẩn bị ra mắt và được miêu tả bởi JSR 252.
    • những cải tiến để cung cấp những giải pháp tạm thời cho vấn đề trộn lẫn nội dung (content-interweaving problem) được nói đến tại http://www.onjava.com/pub/a/onjava/2004/06/09/jsf.html
    • cung cấp các XML Schema cho các file cấu hình, thay cho việc dùng DTD
    • các cải tiến để cho phép các 'faces applications có thể xử lí nhiều khung (multi-frame), hay các thiết kế đa cửa sổ người dùng (multi-window UI)
    • các cải tiến thư viện thể f: để nâng cao 'TCK coverage, các sự kiện liên quan chu trình sống của f:view, và một số đặc tính nhỏ khác
    • các cải tiến trong việc hỗ trợ trang trí cho các đối tượng API
    • cải tiến an ninh cho phía trình khách trong việc lưu giữ trạng thái
    • giải quyết vấn đề "duplicate button press"
    • tổ chức lại bản miêu tả kĩ thuật theo từng phần tiêu chuẩn (normative), và không tiêu chuẩn, để giúp cho việc hiện thực dễ dàng hơn.
    • Các sửa lỗi cho portlet
    • Một số sửa lỗi đòi hỏi sự thay đổi chút ít trong bản miêu tả kĩ thuật

Mục tiêu của JSF

8 mục tiêu thiết kế sau là lí do cho sự ra đời của JSF:
  1. Tạo ra một bộ khung gồm các thành phần giao diện người dùng chuẩn (standard GUI component framework) nhằm giúp cho các công cụ phát triển dễ dàng hơn cho người dùng trong việc tạo GUI chất lượng cao đồng thời quản lí các kết quả của GUI với xử lí thực thi của chương trình.
  2. Định ra một tập các lớp cơ sở của Java (lightweight Java base classes) biểu diễn cho các thành phần UI, trạng thái mỗi thành phần, và các sự kiện đầu vào. Những lớp này sẽ xử lí những vấn đề liên quan đến chu kì sống của GUI, đặc biệt là quản lí trạng thái trong suốt chu trình sống của một trang của thành phần GUI đó.
  3. Cung cấp một tập các thành phần GUI chung, bao gồm các thành phần HTML form input. Những thành phần này sẽ được dẫn xuất từ tập đơn giản các lớp cơ sở (đề cập ở #1) đề từ đó có thể định ra các thành phần mới.
  4. Cung cấp một mô hình JavaBeans để có thể truyền đi (dispatch) các sự kiện từ các GUI controls phía máy khách đến các xử lí hiện thực cụ thể từ phía ứng dụng máy chủ.
  5. Định ra các hàm APIs để kiểm chứng dữ liệu nhập, bao gồm hỗ trợ kiểm chứng từ phía máy chủ.
  6. Chỉ định một mô hình để có thể đa ngôn ngữ hóa hay địa phương hóa các GUI.
  7. Khởi tạo tự động dữ liệu ra phù hợp cho máy khách đích, dựa vào mọi dữ liệu cấu hình ở máy khách đó, bao gồm cả dựa vào phiên bản trình duyệt, ví dụ.
  8. Việc khởi tạo tự động dữ liệu ra còn kèm theo các đòi hỏi về hỗ trợ người dùng (accessibility), được quy định bởi WAI.

Ưu điểm
  • Tách biệt hoàn toàn giữa hành vi và cách trình bày
  • Kiểm soát tính có trạng thái (statefulness) ở mức thành phần
  • Các sự kiện dễ dàng được liên kết với mã phía máy chủ
  • Sử dụng các khái niệm thành phần UI và tầng Web (Web-tier) quen thuộc
  • Cung cấp nhiều dụng cụ của nhà sản xuất phần mềm đã tiêu chuẩn hóa
  • Sự hỗ trợ IDE tuyệt vời
  • thời gian phát triển ứng dụng nhanh mà vẫn hỗ trợ AJAX.
Nhược điểm
JSF có nhược điểm, JSF dựa trên cơ chế stateful component (tương tự cơ chế của ASP.NET WebForm) nên có nhược điểm là dung lượng request, response gửi qua lại giữa client-server lớn, dẫn đến thời gian giao tiếp giữa 2 phía sẽ lâu. Bản chất của HTTP là stateless , trong khi JSF cố giữ trạng thái các component trong ứng dụng bằng cơ chế stateful của component.
Người đăng: vào lúc

Không có nhận xét nào:

Đăng nhận xét

Đăng ký: Đăng Nhận xét (Atom)