PrimeFaces

Wednesday, September 26, 2012

prime faces filter outside datatable

1. The script

2. The filter outside datatable

<p:outputPanel id="searchFilter" >  
        <h:outputText value="Search all fields:" />  
        <p:inputText  id="searchFilter_text" style="width:150px" />  
      </p:outputPanel>

3. Hide the filter inside the data table

<p:outputPanel style="display:none" >  
            <h:outputText value="Search all fields:" />  
            <p:inputText id="globalFilter" onkeyup="carsTable.filter()" style="width:150px" />  
          </p:outputPanel>

------------------------------------------------------------------

Full working primefaces sample example

1. The xhtml

<?xml version='1.0' encoding='UTF-8' ?>
<!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:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:p="http://primefaces.org/ui"
      >

<h:body>
    <h:form>
      <script>
        function searchKeyPressedHandler() {                
          jQuery(document).delegate("#searchFilter input","keyup", function (event) {
            // alert('searchValue');
            var searchValue = document.getElementById('searchFilter_text').value;                
            $("#myTableId\\:globalFilter").val(searchValue);
            $("#myTableId\\:globalFilter").trigger('keyup');   
          });
        }
        searchKeyPressedHandler();
      </script>

<p:outputPanel id="searchFilter" >  
        <h:outputText value="Search all fields:" />  
        <p:inputText  id="searchFilter_text" style="width:150px" />  
      </p:outputPanel>

<p:dataTable  id="myTableId" var="car" value="#{tableBean.carsSmall}" widgetVar="carsTable"   
                    emptyMessage="No cars found with given criteria" filteredValue="#{tableBean.filteredCars}">

<f:facet name="header" >  
          <p:outputPanel style="display:none" >  
            <h:outputText value="Search all fields:" />  
            <p:inputText id="globalFilter" onkeyup="carsTable.filter()" style="width:150px" />  
          </p:outputPanel>  
        </f:facet>

<p:column id="modelColumn" filterBy="#{car.model}"   
                  headerText="Model" footerText="contains"  
                  filterMatchMode="contains">  
          <h:outputText value="#{car.model}" />  
        </p:column>

<p:column id="yearColumn" filterBy="#{car.year}"  
                  headerText="Year" footerText="startsWith">  
          <h:outputText value="#{car.year}" />  
        </p:column>

<p:column id="manufacturerColumn" filterBy="#{car.manufacturer}"   
                  headerText="Manufacturer" footerText="exact"  
                  filterOptions="#{tableBean.manufacturerOptions}"  
                  filterMatchMode="exact">  
          <h:outputText value="#{car.manufacturer}" />  
        </p:column>

<p:column id="colorColumn" filterBy="#{car.color}"  
                  headerText="Color" footerText="endsWith" filterMatchMode="endsWith">  
          <h:outputText value="#{car.color}" />  
        </p:column>  
      </p:dataTable>  
    </h:form>
  </h:body>
</html>

2. The TableBean.java

import javax.faces.bean.ManagedBean;
import javax.faces.bean.SessionScoped;
import javax.faces.model.SelectItem;

/**
 *
 * @author arun.vc
 */
import java.io.Serializable;
import java.util.ArrayList;
import java.util.List;
import java.util.UUID;

@ManagedBean(name = "tableBean")
@SessionScoped
public class TableBean implements Serializable {

private final static String[] colors;
  private final static String[] manufacturers;

static {
    colors = new String[10];
    colors[0] = "Black";
    colors[1] = "White";
    colors[2] = "Green";
    colors[3] = "Red";
    colors[4] = "Blue";
    colors[5] = "Orange";
    colors[6] = "Silver";
    colors[7] = "Yellow";
    colors[8] = "Brown";
    colors[9] = "Maroon";

manufacturers = new String[10];
    manufacturers[0] = "Mercedes";
    manufacturers[1] = "BMW";
    manufacturers[2] = "Volvo";
    manufacturers[3] = "Audi";
    manufacturers[4] = "Renault";
    manufacturers[5] = "Opel";
    manufacturers[6] = "Volkswagen";
    manufacturers[7] = "Chrysler";
    manufacturers[8] = "Ferrari";
    manufacturers[9] = "Ford";
  }
  private SelectItem[] manufacturerOptions;
  private List<Car> filteredCars;
  private List<Car> carsSmall;

public TableBean() {
    carsSmall = new ArrayList<Car>();

populateRandomCars(carsSmall, 9);
    manufacturerOptions = createFilterOptions(manufacturers);
  }

private void populateRandomCars(List<Car> list, int size) {
    for (int i = 0; i < size; i++) {
      list.add(new Car(getRandomModel(), getRandomYear(), getRandomManufacturer(), getRandomColor()));
    }
  }

public List<Car> getFilteredCars() {
    return filteredCars;
  }

public void setFilteredCars(List<Car> filteredCars) {
    this.filteredCars = filteredCars;
  }

public List<Car> getCarsSmall() {
    return carsSmall;
  }

private int getRandomYear() {
    return (int) (Math.random() * 50 + 1960);
  }

private String getRandomColor() {
    return colors[(int) (Math.random() * 10)];
  }

private String getRandomManufacturer() {
    return manufacturers[(int) (Math.random() * 10)];
  }

private String getRandomModel() {
    return UUID.randomUUID().toString().substring(0, 8);
  }

private SelectItem[] createFilterOptions(String[] data) {
    SelectItem[] options = new SelectItem[data.length + 1];

options[0] = new SelectItem("", "Select");
    for (int i = 0; i < data.length; i++) {
      options[i + 1] = new SelectItem(data[i], data[i]);
    }

return options;
  }

public SelectItem[] getManufacturerOptions() {
    return manufacturerOptions;
  }
}

Global Filter outside the dataTable example

1. The script

2. The filter outside datatable

<p:outputPanel id="searchFilter" >  
        <h:outputText value="Search all fields:" />  
        <p:inputText  id="searchFilter_text" style="width:150px" />  
      </p:outputPanel>

3. Hide the filter inside the data table

------------------------------------------------------------------

Full working primefaces sample example

1. The xhtml

<p:outputPanel id="searchFilter" >  
        <h:outputText value="Search all fields:" />  
        <p:inputText  id="searchFilter_text" style="width:150px" />  
      </p:outputPanel>

<p:column id="yearColumn" filterBy="#{car.year}"  
                  headerText="Year" footerText="startsWith">  
          <h:outputText value="#{car.year}" />  
        </p:column>

2. The TableBean.java

import javax.faces.bean.ManagedBean;
import javax.faces.bean.SessionScoped;
import javax.faces.model.SelectItem;

/**
 *
 * @author arun.vc
 */
import java.io.Serializable;
import java.util.ArrayList;
import java.util.List;
import java.util.UUID;

@ManagedBean(name = "tableBean")
@SessionScoped
public class TableBean implements Serializable {

private final static String[] colors;
  private final static String[] manufacturers;

public TableBean() {
    carsSmall = new ArrayList<Car>();

populateRandomCars(carsSmall, 9);
    manufacturerOptions = createFilterOptions(manufacturers);
  }

public List<Car> getFilteredCars() {
    return filteredCars;
  }

public void setFilteredCars(List<Car> filteredCars) {
    this.filteredCars = filteredCars;
  }

public List<Car> getCarsSmall() {
    return carsSmall;
  }

private int getRandomYear() {
    return (int) (Math.random() * 50 + 1960);
  }

private String getRandomColor() {
    return colors[(int) (Math.random() * 10)];
  }

private String getRandomManufacturer() {
    return manufacturers[(int) (Math.random() * 10)];
  }

private String getRandomModel() {
    return UUID.randomUUID().toString().substring(0, 8);
  }

private SelectItem[] createFilterOptions(String[] data) {
    SelectItem[] options = new SelectItem[data.length + 1];

options[0] = new SelectItem("", "Select");
    for (int i = 0; i < data.length; i++) {
      options[i + 1] = new SelectItem(data[i], data[i]);
    }

return options;
  }

public SelectItem[] getManufacturerOptions() {
    return manufacturerOptions;
  }
}

Tuesday, March 20, 2012

session timeout countdown dialog with primefaces

<p:dialog header="Your session is about to expire!"
                    widgetVar="timeoutDialog" 
                    showEffect="fade" 
                    hideEffect="fade" 
                    modal="true"
                    width="400"
                    height="200"
                    closable="false"
                    draggable="false"
                    resizable="false"   
                    appendToBody="true"
                    >              
            <br/><br/>
            <p>
              <span class="ui-icon ui-icon-alert" style="float:left; margin:0 7px 50px 0;"></span>
              <div>You will be logged off in <span id="dialog-countdown" style="font-weight:bold"></span> seconds.</div>
            </p>
            <br/><br/><br/>
            <p>Do you want to continue your session?</p>            
            <p:commandButton  value="Yes, Keep working"  action="#{loginController.keepAlive}" oncomplete="resetPageTimer()" />
            <p:commandButton value="No, Log off" action="#{loginController.logoutUser}"  />
          </p:dialog>

prime faces session timeout countdown dialog jsf

Monday, March 5, 2012

prime faces dynamic data table columns jsf

Step 1. Create a class item

public class Item {

private String value;

public String getValue() {
    return value;
}

public void setValue(String value) {
    this.value = value;
}

}

Step 2. Create Managed Bean

@ManagedBean(name = "contentController")
@SessionScoped
public class ContentController {

private List<item[]> contentList = new ArrayList<item[]>();
private List<string> columnNames = new ArrayList<string>();

public ContentController() {


    columnNames.add("Name");
    columnNames.add("Age");

    Item[] child = new Item[columnNames.size()];
    Item item = new Item();
    item.setValue("Alanis");
    child[0]= item; //First Row first column

    item = new Item();
    item.setValue("36");
    child[1]= item; //First Row second column

    contentList.add(child); //Adding first row

    child = new Item[columnNames.size()];
    item = new Item();
    item.setValue("Sachin");
    child[0]= item; //Second Row first column

    item = new Item();
    item.setValue("39");
    child[1]= item; //Second Row second column

    contentList.add(child); //Adding second row

}

public List<string> getColumnNames() {
    return columnNames;
}

public void setColumnNames(List<string> columnNames) {
    this.columnNames = columnNames;
}

public List<item[]> getContentList() {
    return contentList;
}

public void setContentList(List<item[]> contentList) {
    this.contentList = contentList;
}
}

3. Create the jsf view

<?xml version='1.0' encoding='UTF-8' ?>
<!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:p="http://primefaces.org/ui"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core">
<body>
        <h:form id="form1" >

          <p:dataTable id="dataTableContent" var="list" value="#{contentController.contentList}" rowIndexVar="rowIndex">
            <p:columns value="#{contentController.columnNames}" columnIndexVar="colIndex" var="item" >
              <f:facet name="header">
                <h:outputText value="#{item}"/>
              </f:facet>
              <h:outputText value="#{list[colIndex].value}"/>
            </p:columns>
          </p:dataTable>
        </h:form>

</body>
</html>

Tuesday, November 2, 2010

Link on Menu Title

How to provide link on a submenu?

<p:submenu>
<f:facet name="label">
<p:menuitem value="Quit" url="http://www.primefaces.org" />
</f:facet>
</p:submenu>