PrimeFaces là thư viện component nguồn mở cho JSF 2.0 với hơn 100 components đa năng. PrimeFaces nhanh hơn nhiều so với nhiều thư viện components cho JSF khác, bởi vì những lý do sau:
PrimeFaces là thư viện component nguồn mở cho JSF 2.0 với hơn 100 components đa năng. PrimeFaces nhanh hơn nhiều so với nhiều thư viện components cho JSF khác, bởi vì những lý do sau:
2. Không đòi hỏi cấu hình xml thêm và các depenencies.
3. Hỗ trợ sẵn Ajax dựa trên chuẩn JSF 2.0 Ajax APIs.
3. Hỗ trợ sẵn Ajax dựa trên chuẩn JSF 2.0 Ajax APIs.
4. Skinning Framework with 25+ built-in themes.
5. Tài liệu đây đủ với những những đoạn code mẫu.
Chúng tôi sẽ xây dựng 1 ứng dụng mẫu sử dụng PrimeFaces với những tính năng sau:
1. Một màn hình login chấp nhận username và password và xác thực người dùng.
2. Khi login thành công, người dùng sẽ được xem màn hình User Search. người dùng có thể tìm các users theo tên. Kết quả tìm kiếm sẽ được hiển thị dạng một DataTable với chức năng phân trang và bộ lọc.
3. Khi click và 1 hàng chi tiết user sẽ được hiển thị trong 1 form.
Trươc tiên download các gới jar JSF 2 từ http://javaserverfaces.java.net/download.html
Chép jsf-api-2.0.3.jar, jsf-impl-2.0.3.jar và jstl-1.0.2.jar vào thư mục WEB-INF/lib.
Download PrimeFaces từ http://www.primefaces.org/downloads.html.
Chép primefaces-2.2.RC2.jar vào thự mục WEB-INF/lib.
5. Tài liệu đây đủ với những những đoạn code mẫu.
Chúng tôi sẽ xây dựng 1 ứng dụng mẫu sử dụng PrimeFaces với những tính năng sau:
1. Một màn hình login chấp nhận username và password và xác thực người dùng.
2. Khi login thành công, người dùng sẽ được xem màn hình User Search. người dùng có thể tìm các users theo tên. Kết quả tìm kiếm sẽ được hiển thị dạng một DataTable với chức năng phân trang và bộ lọc.
3. Khi click và 1 hàng chi tiết user sẽ được hiển thị trong 1 form.
Trươc tiên download các gới jar JSF 2 từ http://javaserverfaces.java.net/download.html
Chép jsf-api-2.0.3.jar, jsf-impl-2.0.3.jar và jstl-1.0.2.jar vào thư mục WEB-INF/lib.
Download PrimeFaces từ http://www.primefaces.org/downloads.html.
Chép primefaces-2.2.RC2.jar vào thự mục WEB-INF/lib.
Cấu hình FacesServlet trong web.xml
01
|
<web-app version="2.5">
|
|
02
|
||
03
|
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
|
||
04
|
xsi:schemaLocation="http://java.sun.com/xml/ns/javaeehttp://java.sun.com/xml/ns/javaee/web-app_2_5.xsd"
>
|
||
05
|
||
06
|
<welcome-file-list>
|
|
07
|
<welcome-file>index.jsp</welcome-file>
|
|
08
|
</welcome-file-list>
|
|
09
|
||
10
|
<servlet>
|
|
11
|
<servlet-name>Faces
Servlet</servlet-name>
|
|
12
|
<servlet-class>javax.faces.webapp.FacesServlet</servlet-class>
|
|
13
|
<load-on-startup>1</load-on-startup>
|
|
14
|
</servlet>
|
|
15
|
||
16
|
<servlet-mapping>
|
|
17
|
<servlet-name>Faces
Servlet</servlet-name>
|
|
18
|
<url-pattern>*.jsf</url-pattern>
|
|
19
|
</servlet-mapping>
|
|
20
|
||
21
|
</web-app>
|
Tạo faces-config.xml trong thư mục WEB-INF.
1
|
<faces-config xmlns="http://java.sun.com/xml/ns/javaee">
|
|
2
|
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
|
|
3
|
|||
4
|
version="2.0">
|
||
5
|
||
6
|
</faces-config>
|
|
Trang
chủ index.jsp chỉ forwards đến màn hình login.
1
|
<jsp:forward
page="login.jsf"></jsp:forward>
|
Tạo trang login.xhtml.
01
|
||
02
|
||
03
|
xmlns:f="http://java.sun.com/jsf/core"
|
|
04
|
xmlns:h="http://java.sun.com/jsf/html"
|
|
05
|
xmlns:p="http://primefaces.prime.com.tr/ui">
|
|
06
|
<h:head>
|
|
07
|
<link href="themes/bluesky/skin.css" rel="stylesheet" type="text/css"></h:head>
|
||
08
|
<h:body>
|
||
09
|
</h:body>
|
|
10
|
<center>
|
|
11
|
<p:panel header="Login
Form"> <h:form>
|
|
12
|
<h:panelgrid cellpadding="2" columns="2">
|
|
13
|
<h:outputlabel for="#{userManagedBean.username}" value="UserName">
|
|
14
|
<h:inputtext label="UserName" value="#{userManagedBean.username}"></h:inputtext>
|
|
15
|
<h:outputlabel for="#{userManagedBean.password}" value="Password">
|
16
|
<h:inputsecret value="#{userManagedBean.password}"></h:inputsecret>
|
17
|
<h:commandbutton action="#{userManagedBean.login}" type="submit"value="Login"></h:commandbutton>
|
||
18
|
</h:outputlabel>
|
||
19
|
</h:outputlabel>
|
|
20
|
</h:panelgrid>
|
|
21
|
<div><h:messages></h:messages></div>
</h:form></p:panel></center>
|
|
22
|
||
23
|
</html>
|
Bạn có thể lấy bluesky
theme từ PrimeFaces bundle.
Tạo home.xhtml chứa UserSearchForm, Results dataTable và UserDetails Panel.
Tạo home.xhtml chứa UserSearchForm, Results dataTable và UserDetails Panel.
01
|
||
02
|
||
03
|
||
04
|
||
05
|
xmlns:f="http://java.sun.com/jsf/core"
|
06
|
xmlns:h="http://java.sun.com/jsf/html"
|
07
|
xmlns:p="http://primefaces.prime.com.tr/ui">
|
|
08
|
<h:head>
|
|
09
|
<link type="text/css" rel="stylesheet" href="themes/bluesky/skin.css" />
|
||
10
|
</h:head>
|
||
11
|
<h:body>
|
12
|
<center>
|
13
|
<h:form>
|
|
14
|
<p:panel header="Users
Search Form" style="width: 700;">
|
|
15
|
<h:form>
|
|
16
|
<h:panelGrid columns="3" cellpadding="2">
|
|
17
|
<h:outputLabel for="#{userManagedBean.searchUser}" value="UserName"/>
|
|
18
|
<h:inputText value="#{userManagedBean.searchUser}" label="UserName"></h:inputText>
|
|
19
|
<h:commandButton type="submit" value="Search" action="#{userManagedBean.searchUser}"></h:commandButton>
|
||
20
|
</h:panelGrid>
|
||
21
|
</h:form>
|
|
22
|
</p:panel>
|
|
23
|
|
24
|
25
|
<p:dataTable var="user" value="#{userManagedBean.searchUsersResults}"
|
||
26
|
selection="#{userManagedBean.selectedUser}" selectionMode="single"
|
||
27
|
dynamic="true"
|
|
28
|
onRowSelectUpdate="userUpdateForm"
|
|
29
|
onRowUnselectUpdate="userUpdateForm"
|
|
30
|
rowSelectListener="#{userManagedBean.onUserSelect}"
|
|
31
|
rowUnselectListener="#{userManagedBean.onUserUnselect}"
|
|
32
|
paginator="true" rows="5" style="width:
700">
|
|
33
|
<p:column sortBy="#{user.userId}" filterBy="#{user.userId}">
|
|
34
|
<f:facet name="header">
|
|
35
|
<h:outputText value="Id" />
|
|
36
|
</f:facet>
|
|
37
|
<h:outputText value="#{user.userId}" />
|
|
38
|
</p:column>
|
|
39
|
<p:column sortBy="#{user.username}" filterBy="#{user.username}">
|
||
40
|
<f:facet name="header">
|
||
41
|
<h:outputText value="Name" />
|
|
42
|
</f:facet>
|
|
43
|
<h:outputText value="#{user.username}" />
|
|
44
|
</p:column>
|
|
45
|
<p:column sortBy="#{user.emailId}" filterBy="#{user.emailId}">
|
||
46
|
<f:facet name="header">
|
||
47
|
<h:outputText value="Email" />
|
|
48
|
</f:facet>
|
|
49
|
<h:outputText value="#{user.emailId}" />
|
|
50
|
</p:column>
|
|
51
|
<p:column parser="date" sortBy="#{user.dob}" filterBy="#{user.dob}">
|
||
52
|
<f:facet name="header">
|
||
53
|
<h:outputText value="DOB" />
|
|
54
|
</f:facet>
|
|
55
|
<h:outputText value="#{user.dob}" >
|
|
56
|
<f:convertDateTime pattern="MM/dd/yyyy" />
|
|
57
|
</h:outputText>
|
|
58
|
</p:column>
|
|
59
|
</p:dataTable>
|
|
60
|
<p:panel id="userDetailsPanelId" header="Users
Details" style="width: 700;">
|
|
61
|
<h:panelGrid columns="2" cellpadding="2" id="userUpdateForm" border="0" >
|
|
62
|
<h:outputLabel for="#{userManagedBean.selectedUser.userId}" value="UserId"/>
|
|
63
|
<h:inputText value="#{userManagedBean.selectedUser.userId}" style="width:
100;" readonly="true"></h:inputText>
|
||
64
|
|||
65
|
<h:outputLabel for="#{userManagedBean.selectedUser.username}"value="Username"/>
|
|
66
|
<h:inputText value="#{userManagedBean.selectedUser.username}"readonly="true"></h:inputText>
|
|
67
|
|||
68
|
<h:outputLabel for="#{userManagedBean.selectedUser.emailId}"value="EmailId"/>
|
||
69
|
<h:inputText value="#{userManagedBean.selectedUser.emailId}"readonly="true"></h:inputText>
|
||
70
|
|||
71
|
<h:outputLabel for="#{userManagedBean.selectedUser.gender}" value="Gender"/>
|
|
72
|
<h:inputText value="#{userManagedBean.selectedUser.gender}" readonly="true"></h:inputText>
|
|
73
|
|||
74
|
<h:outputLabel for="#{userManagedBean.selectedUser.dob}" value="DOB"/>
|
||
75
|
<h:inputText value="#{userManagedBean.selectedUser.dob}" readonly="true">
|
||
76
|
<f:convertDateTime pattern="MM/dd/yyyy" />
|
||
77
|
</h:inputText>
|
|
78
|
||
79
|
</h:panelGrid>
|
|
80
|
</p:panel>
|
|
81
|
</h:form>
|
|
82
|
</center>
|
|
83
|
</h:body>
|
|
84
|
</html>
|
|
Tạo
User.java
----------------
Tạo UserService.java hoạt động như bảng dữ liệu giả.
----------------
Tạo UserManagedBean.java
----------------
Đó là tất cả những gì chúng ta cần làm. Bạn có thể chạy ứng dụng và xem
các interface mạnh mẽ với bluesky theme.
Bạn có thể download bạn mẫu như một Eclipse project Here
Bạn có thể download bạn mẫu như một Eclipse project Here
