PrimeFaces is an open source component library for JSF 2.0 with more than 100 rich components. PrimeFaces is far better than many other JSF component libraries because of the following reasons: 1. Rich set of UI components (DataTable, AutoComplete, HtmlEditor, Charts etc). 2.No extra xml configuration is required and there is no required dependencies. 3. Built-in Ajax based on standard JSF 2.0 Ajax APIs. 4. Skinning Framework with 25+ built-in themes. 5. Awesome documentation with code examples. Let us build a sample application using PrimeFaces with the following features: 1. A Login screen which accepts username and password and authenticate the user. 2. Upon successful login user will be shown a User Search screen. Users can search for users by their name. The search results will be displayed in a DataTable with pagination, sorting and filtering support. 3. Upon clicking on a row the user details will be displayed in a form. First download JSF 2 jars from http://javaserverfaces.java.net/download.html Place the jsf-api-2.0.3.jar, jsf-impl-2.0.3.jar and jstl-1.0.2.jar jars in WEB-INF/lib folder. Download PrimeFaces from http://www.primefaces.org/downloads.html. Place primefaces-2.2.RC2.jar in WEB-INF/lib folder. Configure FacesServlet in web.xml index.jsp Faces Servlet javax.faces.webapp.FacesServlet 1 Faces Servlet *.jsf Create faces-config.xml in WEB-INF folder. Welcome page index.jsp just forwards to login screen. Create login.xhtml page. You can get the blusky theme from PrimeFaces bundle.Create home.xhtml which contains UserSearchForm, Results dataTable and UserDetails Panel. Create User.java domain class. package com.primefaces.sample;import java.util.Date;public class User{ private Integer userId; private String username; private String emailId; private String phone; private Date dob; private String gender; private String address; public User() {} public User(Integer userId, String username, String emailId, String phone, Date dob, String gender, String address) { this.userId = userId; this.username = username; this.emailId = emailId; this.phone = phone; this.dob = dob; this.gender = gender; this.address = address; } //setter and getters } Create UserService.java which acts as a mock database table. package com.primefaces.sample;import java.util.ArrayList;import java.util.Collection;import java.util.Date;import java.util.HashMap;import java.util.Map;import java.util.Set;public class UserService{ private static final Map USERS_TABLE = new HashMap(); static { USERS_TABLE.put(1, new User(1, "Administrator", "
[email protected]", "9000510456", new Date(), "M", "Hyderabad")); USERS_TABLE.put(2, new User(2, "Guest", "
[email protected]", "9247469543", new Date(), "M", "Hyderabad")); USERS_TABLE.put(3, new User(3, "John", "
[email protected]", "9000510456", new Date(), "M", "Hyderabad")); USERS_TABLE.put(4, new User(4, "Paul", "
[email protected]", "9247469543", new Date(), "M", "Hyderabad")); USERS_TABLE.put(5, new User(5, "raju", "
[email protected]", "9000510456", new Date(), "M", "Hyderabad")); USERS_TABLE.put(6, new User(6, "raghav", "
[email protected]", "9247469543", new Date(), "M", "Hyderabad")); USERS_TABLE.put(7, new User(7, "caren", "
[email protected]", "9000510456", new Date(), "M", "Hyderabad")); USERS_TABLE.put(8, new User(8, "Mike", "
[email protected]", "9247469543", new Date(), "M", "Hyderabad")); USERS_TABLE.put(9, new User(9, "Steve", "
[email protected]", "9000510456", new Date(), "M", "Hyderabad")); USERS_TABLE.put(10, new User(10, "Polhman", "
[email protected]", "9247469543", new Date(), "M", "Hyderabad")); USERS_TABLE.put(11, new User(11, "Rogermoor", "
[email protected]", "9000510456", new Date(), "M", "Hyderabad")); USERS_TABLE.put(12, new User(12, "Robinhood", "
[email protected]", "9247469543", new Date(), "M", "Hyderabad")); USERS_TABLE.put(13, new User(13, "Sean", "
[email protected]", "9000510456", new Date(), "M", "Hyderabad")); USERS_TABLE.put(14, new User(14, "Gabriel", "
[email protected]", "9247469543", new Date(), "M", "Hyderabad")); USERS_TABLE.put(15, new User(15, "raman", "
[email protected]", "9000510456", new Date(), "M", "Hyderabad")); } public Integer create(User user) { if(user == null) { throw new RuntimeException("Unable to create User. User object is null."); } Integer userId = this.getMaxUserId(); user.setUserId(userId); USERS_TABLE.put(userId, user); return userId; } public void delete(User user) { if(user == null) { throw new RuntimeException("Unable to delete User. User object is null."); } USERS_TABLE.remove(user.getUserId()); } public Collection getAllUsers() { return USERS_TABLE.values(); } public User getUser(Integer userId) { return USERS_TABLE.get(userId); } public Collection searchUsers(String username) { String searchCriteria = (username == null)? "":username.toLowerCase().trim(); Collection users = USERS_TABLE.values(); Collection searchResults = new ArrayList(); for (User user : users) { if(user.getUsername() != null && user.getUsername().toLowerCase().trim().startsWith(searchCriteria)) { searchResults.add(user); } } return searchResults; } public void update(User user) { if(user == null || !USERS_TABLE.containsKey(user.getUserId())) { throw new RuntimeException("Unable to update User. User object is null or User Id ["+user.getUserId()+"] is invalid." ); } USERS_TABLE.put(user.getUserId(), user); } protected Integer getMaxUserId() { Set keys = USERS_TABLE.keySet(); Integer maxId = 1; for (Integer key : keys) { if(key > maxId) { maxId = key; } } return maxId; } Create UserManagedBean.java package com.primefaces.sample;import java.util.Collection;import javax.faces.application.FacesMessage;import javax.faces.bean.ApplicationScoped;import javax.faces.bean.ManagedBean;import javax.faces.context.FacesContext;import org.primefaces.event.SelectEvent;import org.primefaces.event.UnselectEvent;@ManagedBean@ApplicationScopedpublic class UserManagedBean{ UserService userService = new UserService(); private String username; private String password; private String searchUser; private Collection searchUsersResults; private User selectedUser; public String getUsername() { return username; } public void setUsername(String username) { this.username = username; } public String getPassword() { return password; } public void setPassword(String password) { this.password = password; } public User getSelectedUser() { if(selectedUser == null){ selectedUser = new User(); } return selectedUser; } public void setSelectedUser(User selectedUser) { this.selectedUser = selectedUser; } public Collection getSearchUsersResults() { return searchUsersResults; } public void setSearchUsersResults(Collection searchUsersResults) { this.searchUsersResults = searchUsersResults; } public String getSearchUser() { return searchUser; } public void setSearchUser(String searchUser) { this.searchUser = searchUser; } public String login() { if("test".equalsIgnoreCase(getUsername()) && "test".equals(getPassword())) { return "home"; } else { FacesContext context = FacesContext.getCurrentInstance(); context.addMessage("username", new FacesMessage("Invalid UserName and Password")); return "login"; } } public String searchUser() { String username = (this.searchUser == null)? "":this.searchUser.trim(); this.searchUsersResults = userService.searchUsers(username); System.out.println(searchUsersResults); return "home"; } public String updateUser() { userService.update(this.selectedUser); return "home"; } public void onUserSelect(SelectEvent event) { } public void onUserUnselect(UnselectEvent event) { } That all we need to do. You can run the application and see the rich user interface with blusky theme. By default we don't get auto-complete for PrimeFaces tag in Eclipse. To enable AutoComplete, Go to Window-->Preferences-->General-->ContentTypes Select JSP and add .xhtml as file association. From http://sivalabs.blogspot.com/2011/02/primefaces-quickstart-tutorial-part1.html