My JSF Books/Videos My JSF Tutorials OmniFaces/JSF PPTs
JSF 2.3 Tutorial
JSF Caching Tutorial
JSF Navigation Tutorial
JSF Scopes Tutorial
JSF Page Author Beginner's Guide
OmniFaces 2.3 Tutorial Examples
OmniFaces 2.2 Tutorial Examples
JSF Events Tutorial
OmniFaces Callbacks Usages
JSF State Tutorial
JSF and Design Patterns
JSF 2.3 New Features (2.3-m04)
Introduction to OmniFaces
25+ Reasons to use OmniFaces in JSF
OmniFaces Validators
OmniFaces Converters
JSF Design Patterns
Mastering OmniFaces
Reusable and less-verbose JSF code

My JSF Resources ...

Java EE Guardian
Member of JCG Program
Member MVB DZone
Blog curated on ZEEF
OmniFaces is an utility library for JSF, including PrimeFaces, RichFaces, ICEfaces ...

[OmniFaces Utilities] - Find the right JSF OmniFaces 2 utilities methods/functions

Search on blog

Petition by Java EE Guardians

Twitter

vineri, 6 noiembrie 2015

[OmniFaces utilities 2.2] Update the row of the given UIData component at the given zero-based row index with support for nested UIData

Before reading this post is recommended to read the Update the row of the given UIData component at the given zero-based row index.
You may be also interested in Update the row of the given UIData component at the given zero-based row index in tables with pagination.


[OmniFaces utilities] The updateRow() method updates the row of the given UIData component at the given zero-based row index. This will basically update all direct children of all UIColumn components at the given row index.

Note that the to-be-updated direct child of UIColumn must be a fullworthy JSF UI component which renders a concrete HTML element to the output, so that JS/ajax can update it. So if you have due to design restrictions for example a <h:panelGroup rendered="..."> without an ID, then you should give it an ID. This way it will render a <span id="..."> which is updateable by JS/ajax.

Method:
Usage:

In order to provide an example, we will use PrimeFaces DataTable. More exactly PrimeFaces DataTable with dynamic columns. The columns of DataTable can be created dynamically using the <p:columns> component, as below:

<h:form id="form">
 <p:dataTable id="players" var="player" value="#{playersBean.players}"  binding="#{playersTable}">                   
  <p:columns value="#{playersBean.columns}" var="column">
   <f:facet name="header">
    <h:outputText value="#{column.header}" />
   </f:facet>
   <h:panelGroup id="rowId">
    #{player[column.property]}
   </h:panelGroup>
  </p:columns>
 </p:dataTable>
 ...

Following the PrimeFaces Showcase example, you can easily add a simple input used to specify the columns to display. Moreover, I have added three buttons for updating the data from first two and last row:

 <h:panelGrid columns="6" style="margin:10px 0">
  <p:outputLabel for="template" value="Template:" style="font-weight:bold"/>
  <p:inputText id="template" value="#{playersBean.columnTemplate}" size="50"/>
  <p:commandButton update="players" actionListener="#{playersBean.updateColumns}" value="Update" 
                   process="@parent" icon="ui-icon-refresh"/>             
  <p:commandButton value="Update First Row (OmniFaces)" action="#{playersBean.updateRow(playersTable, 0)}"/>               
  <p:commandButton value="Update Second Row (OmniFaces)" action="#{playersBean.updateRow(playersTable, 1)}"/>               
  <p:commandButton value="Update Last Row (OmniFaces)" action="#{playersBean.updateRow(playersTable, 9)}"/>                
 </h:panelGrid>
</h:form>

You can also use JSF <h:commandButton> nested in <f:ajax>:

<f:ajax>
 <h:commandButton value="Update First Row (OmniFaces)" action="#{playersBean.updateRow(playersTable, 0)}"/>               
 <h:commandButton value="Update Second Row (OmniFaces)" action="#{playersBean.updateRow(playersTable, 1)}"/>               
 <h:commandButton value="Update Last Row (OmniFaces)" action="#{playersBean.updateRow(playersTable, 9)}"/>
</f:ajax>

The PlayersBean is (Player is a simple and intuitive bean):

import org.omnifaces.util.Ajax;
...

@Named
@ViewScoped
public class PlayersBean implements Serializable {

 private final static List<String> VALID_COLUMN_KEYS = Arrays.asList("ranking", "name", "age", "birthplace", "residence", "height", "weight", "coach", "born");
 private String columnTemplate = "ranking name age birthplace residence";
 private List<ColumnModel> columns;
 private List<Player> players = new ArrayList<>();

 private final SimpleDateFormat sdf = new SimpleDateFormat("dd.MM.yyyy"); // not thread-safe, don't use it in production

 public PlayersBean() {
  try {
      // adding 10 players
      players.add(new Player(2, "NOVAK DJOKOVIC", (byte) 26, "Belgrade, Serbia", 
                  "Monte Carlo, Monaco", (short) 188, (byte) 80, "Boris Becker, Marian Vajda", sdf.parse("22.05.1987")));
      ...
      players.add(new Player(9, "RICHARD GASQUET", (byte) 27, "Beziers, France", 
                  "Neuchatel, Switzerland", (short) 185, (byte) 75, "Sergi Bruguera and Sebastien", sdf.parse("18.06.1986")));
      players.add(new Player(3, "DAVID FERRER", (byte) 31, "Javea, Spain", 
                  "Valencia, Spain", (short) 175, (byte) 73, "Jose Francisco Altur", sdf.parse("02.04.1982")));

      createDynamicColumns();
  } catch (ParseException ex) {
           //...
  }
 }

 public void updateColumns() {
  createDynamicColumns();
 }

 private void createDynamicColumns() {
  String[] columnKeys = columnTemplate.split(" ");
  columns = new ArrayList<>();

  for (String columnKey : columnKeys) {
       String key = columnKey.trim();

       if (VALID_COLUMN_KEYS.contains(key)) {
           columns.add(new ColumnModel(columnKey.toUpperCase(), columnKey));
       }
  }
 }

 public void updateRow(UIData table, int index) {
  long seed = System.nanoTime();
  Collections.shuffle(players, new Random(seed));
  Ajax.updateRow(table, index);
 }

 public List<Player> getPlayers() {
  return players;
 }

 public String getColumnTemplate() {
  return columnTemplate;
 }

 public void setColumnTemplate(String columnTemplate) {
  this.columnTemplate = columnTemplate;
 }

 public List<ColumnModel> getColumns() {
  return columns;
 }

 static public class ColumnModel implements Serializable {

  private final String header;
  private final String property;

  public ColumnModel(String header, String property) {
   this.header = header;
   this.property = property;
  }

  public String getHeader() {
   return header;
  }

  public String getProperty() {
   return property;
  }
 }
}

Some outputs:

Before any updates:
After update the first two and last rows:
Remove the age and residence columns and add the height and weight and born columns:
After update the first two and last rows:

Niciun comentariu :

Trimiteți un comentariu

JSF BOOKS COLLECTION

Postări populare

OmniFaces/JSF Fans

Follow by Email

Visitors Starting 4 September 2015

Locations of Site Visitors