jee6 学习笔记 4 - CRUD 2: View Details, Primefaces row selection

screenshot of view details button:
[img]http://dl.iteye.com/upload/attachment/0070/4919/63bd3a10-6e66-3378-a8b8-da534e19e276.png[/img]


screenshot of view details of selected row:
[img]http://dl.iteye.com/upload/attachment/0070/4917/ebfac746-5f12-3989-adcd-359c8bf27385.png[/img]

updated backing bean "StudentSearch.java":
1. added property "Student selectedStudent"
2. added getter/setter for it, as selection action listener

package com.jxee.action.student;

import java.util.List;
import javax.ejb.EJB;
import javax.faces.bean.ManagedBean;
import javax.faces.bean.SessionScoped;
import org.apache.log4j.Logger;
import com.jxee.ejb.student.StudentDAO;
import com.jxee.model.student.Student;

@ManagedBean(name="ss")
@SessionScoped
public class StudentSearch implements Serializable {

  private static final Logger log = Logger.getLogger(StudentSearch.class);

  private List<Student> searchResultList;
  @EJB private StudentDAO dao;

  private String nameFilter;
  private int maxRows = 50;

  // property for Primefaces single row selection
  private Student selectedStudent;


  public String findByName() {
    log.debug("search student by nameFilter: " + nameFilter);
    searchResultList = dao.find(this.nameFilter, maxRows);
    return "studentSearch";
  }

  public String getNameFilter() {
    return nameFilter;
  }

  public void setNameFilter(String afilter) {
    this.nameFilter = afilter;
  }

  public int getMaxRows() {
    return maxRows;
  }

  public void setMaxRows(int maxRows) {
    this.maxRows = maxRows;
  }

  public List<Student> getSearchResultList() {
    return searchResultList;
  }

  public void setSearchResultList(List<Student> searchResultList) {
    this.searchResultList = searchResultList;
  }

  public int getSize() {
    return this.searchResultList != null ? this.searchResultList.size() : 0;
  }

  public Student getSelectedStudent() {
    return selectedStudent;
  }

  //action lister for row selection
  public void setSelectedStudent(Student selectedStudent) {
    log.debug("student selected: " + selectedStudent);
    this.selectedStudent = selectedStudent;
  }

}

updated model Student: missing property "age" before )-;

package com.jxee.model.student;

import java.io.Serializable;
import java.util.Date;
import javax.persistence.Column;
import javax.persistence.Entity;
import javax.persistence.GeneratedValue;
import javax.persistence.Id;
import javax.persistence.Table;
import javax.persistence.Temporal;
import javax.persistence.TemporalType;
import javax.validation.constraints.Max;
import javax.validation.constraints.Min;
import javax.validation.constraints.NotNull;
import javax.validation.constraints.Past;
import javax.validation.constraints.Pattern;
import javax.validation.constraints.Size;

@Entity
@Table(name="STUDENT")
public class Student implements Serializable {

  @Id
  @GeneratedValue
  @Column(name="id")
  private Integer id;

  @Column(name="name")
  @NotNull(message="name cannot be null")
  @Size(min=4,max=20,message="name must be 4-20 characters")
  private String name;

  @Column(name="mobile")
  @Pattern(regexp="^([0-9])(6,15)$", message="invalid mobile number")
  private String mobile;

  @Column(name="age")
  @Min(value=1, message="age cannot be less than 1")
  @Max(value=200, message="age cannot be greater than 200")
  private int age;

  @Column(name="created_date")
  // map to "TemporalType.TIMESTAMP" to output time as well
  @Temporal(TemporalType.TIMESTAMP) 
  @NotNull(message="created_date is required")
  @Past(message="created date cannot be in future")
  private Date created_date;

  public Integer getId() {
    return id;
  }

  public void setId(Integer id) {
    this.id = id;
  }

  public String getName() {
    return name;
  }

  public void setName(String name) {
    this.name = name;
  }

  public int getAge() {
    return age;
  }

  public void setAge(int age) {
    this.age = age;
  }

  public String getMobile() {
    return mobile;
  }

  public void setMobile(String mobile) {
    this.mobile = mobile;
  }

  public Date getCreated_date() {
    return created_date;
  }

  public void setCreated_date(Date created_date) {
    this.created_date = created_date;
  }

  public String toString() {
    StringBuffer sb = new StringBuffer();
    sb.append(Student.class.getName()).append(":[")
      .append("id=").append(this.getId())
      .append(";name=").append(this.getName())
      .append(";mobile=").append(this.getMobile())
      .append("age=").append(this.getAge());
    return sb.toString();
  }
}

updated page "student/studentSearch.xhtml"
1. added a <p:commandButton> to enable row selection
2. added a <p:dialog> to enable view student details

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
    xmlns:f="http://java.sun.com/jsf/core"
    xmlns:h="http://java.sun.com/jsf/html"
    xmlns:p="http://primefaces.org/ui">

<h:head>
	<title>student search</title>
</h:head>

<h:body>

    <h:form id="form">
	    <p:panel header="Student Search Form">
	        <h:panelGrid columns="3">
	            <h:outputLabel value="Name: "/>
	            <h:inputText value="#{ss.nameFilter}"></h:inputText>
	            <h:commandButton type="submit" value="Search" action="#{ss.findByName}"/>
	        </h:panelGrid>
	    </p:panel>

	    <br/>

		<p:panel style="border:0px">
			students found: #{ss.size}
		</p:panel>

		<!-- search result list -->
	   	<p:dataTable id="stuDataTable" 
	   		var="st" value="#{ss.searchResultList}" 
	   		paginator="true" rows="3">  

		    <p:column headerText="name" sortBy="#{st.name}">  
		        <h:outputText value="#{st.name}" />  
		    </p:column> 

		    <p:column headerText="mobile" sortBy="#{st.mobile}">  
		        <h:outputText value="#{st.mobile}" />  
		    </p:column>  

		    <p:column headerText="age" sortBy="#{st.age}">  
		        <h:outputText value="#{st.age}" />  
		    </p:column>

		    <p:column headerText="created date" sortBy="#{st.created_date}">  
		        <h:outputText value="#{st.created_date}">
		        	<f:convertDateTime pattern="yyyy-MM-dd HH:mm:ss"/>
		        </h:outputText>  
		    </p:column>

		    <p:column headerText="Action" style="width:4%">  
	        	<p:commandButton id="idSelectButton" 
	        		update=":form:idDisplay" 
	        		oncomplete="wvStuDialog.show()" 
	        		icon="ui-icon-search" 
	        		title="View Details">  
	            	<f:setPropertyActionListener value="#{st}" target="#{ss.selectedSt}" />  
	            </p:commandButton> 
	        </p:column>

		</p:dataTable> 

		<!-- view detail dialog -->
		<p:dialog id="idStuDlg" header="Student Details" widgetVar="wvStuDialog" 
			resizable="false" showEffect="fade" hideEffect="slide" modal="true">  

	        <h:panelGrid id="idDisplay" columns="2" cellpadding="4" style="margin:0 auto;">  
	            <h:outputText value="id: " />  
	            <h:outputText value="#{ss.selectedSt.id}"/>  

	            <h:outputText value="name: " />  
	            <h:outputText value="#{ss.selectedSt.name}"/>  

	            <h:outputText value="mobile: " />  
	            <h:outputText value="#{ss.selectedSt.mobile}"/>  

	            <h:outputText value="created date: " />  
	            <h:outputText value="#{ss.selectedSt.created_date}"/>  
	        </h:panelGrid>  
	    </p:dialog>  

    </h:form>

</h:body>
</html>

小姐一下：

1, Primefaces provides a few options of row selection to enable row operations.

2, we used basic single row selection to view details of the selected row.

3, basic row selection can be achieved by <p:commandButton>.

3.1, update=":form:idDisplay": use attribute "update" to set the dom id of the element to hold row data. the value corresponds to the element id of <h:panelGrid>, which is a sub-element included in <p:dialog>.

3.2 oncomplete="wvStuDialog.show()": use attibute "oncomplete" to activate the display of the dialog. the value corresponds to attribute "widgetVar" of <p:dialog>.

4, Primefaces makes it pretty easy.

5, it should be noted that the model object "Student" does not implement any extra interfaces at all - it's a simple POJO. So is the backing bean "StudentSearch".