Using RichFaces 3 dataScroller and dataTable -components

RichFaces provides some nice AJAX-components for Java Server Faces but the documentation and examples could be better. RichFaces has great documentation compared to some other frameworks but it could be better with adding a little bit of real world and down to earth examples. So here is one example of using RichFaces dataScroller and dataTable -components with custom CSS-styling, backingBean and JSF-page snippets using Richfaces 3.3.2.SR1 and JSF 1.2_12.

Using RichFaces dataScroller and dataTable components has a big negative property: they work nicely if the amount of data is small but when the row count reaches to thousands they become sluggish or stop working. The rich:dataScroller needs the complete datamodel being loaded into memory and only displays a part of it. Not very efficient if the rowcount exceeds 1000 or so.

Anyways here is some real world example. The icons used in the examples for dataScroller are from Crystal Project Icons.

JSF-page


    
        
            
        
        
            
        
        
            
            
        
            
        
        
            
        
        
            
        
        
            
        
        
            
        
        
            
        
        
            
        
        
            
        
        
            
        
        
            
        

		

    
        
            
        
        
            
        
    
    
        
            
        
        
    


Backing Bean

Create some variables for dataScroller and getters and setters for them:

// RichFaces dataScroller variables
private HtmlDatascroller scroller = new HtmlDatascroller();
private String scrollerPage = "";

// Getting the clicked row's data
public String showRowdata() {
  MyDataModel current = (myDataModel) getResultData().getRowData();
}

CSS styling

/* =RichFaces DataScroller
----------------------------------------------- */
.rich-datascr {font-size: 1.1em;border: 0;}
.rich-table-cell {font-size: 1.0em;}
.rich-table-sortable-header {font-size: 1.1em;font-weight: bold;}
td.rich-datascr-button {background-color: #fff;border: 0px solid #ccc;text-decoration: none;}
td.rich-datascr-button-dsbld {background-color: #fff;}
.rich-datascr-ctrls-separator {padding-right: 5px;}
.rich-dtascroller-table {background: #fff;border: 0;}
.scroller {display: block;background-color: #fff;border: 1px solid #ccc;padding: 3px 3px;margin: 0px 5px 5px 5px;text-decoration: none;}
.scroller:hover {background-color: #eee;}
td.rich-datascr-button-dsbld .scroller {background-color: #eee;}
td.rich-datascr-inact {font-size: 1.2em;color: #000;border: 0;}
td.rich-datascr-inact:hover {text-decoration: underline;}
td.rich-datascr-act {font-size: 1.2em;text-decoration: underline;}
td.rich-datascr-act {border: 0;font-weight: bold;}

Selecting All rows with JavaScript

Add to the JSF-page a new column which has the checkbox. We are using JavaScript to loop through the input fields which are after :tu -ending id-field.


  
    
      
      
        
      
    
  
  

Selecting All rows in backing bean

You can also check all the checkboxes from the backingBean but it has problems with table ordering and when the lists order changes the selection goes wrong.

Add to the JSF-page a new column:


  
    
        
      
    
  

Make a new method to your backingBean:

public void selectAll(ActionEvent event) {
	logger.info("*** backingBean.selectAll(): " + scrollerPage + " ***");
	
	// get the current scroller page
	int page = Integer.valueOf(scrollerPage).intValue();
	if (page != 0) {
	    page = page - 1;
	}
	int start = page * 10;
	int stop = (page * 10) + 10;
	if (stop > getResultList().size()) {
	    stop = getResultList().size();
	}
	logger.debug("> page: " + page + "; start: " + start + "; stop: " + stop);

	// check the boxes on the active page
	for (int i = start; i < stop; i++) {
	    logger.debug("> valitaan: " + i + "; " + selectedAll);
	    getResultList().get(i).setSelected(selectedAll);
	}
}

Posted

in

by

Comments

4 responses to “Using RichFaces 3 dataScroller and dataTable -components”

  1. Yonggang Avatar
    Yonggang

    Do you have any idea how to select right rows when check select all if the data is sorted?

  2. bob Avatar
    bob

    Integer.valueOf(scrollerPage).intValue() can be written as Integer.parseInt(scrollerPage)

  3. Marko Avatar
    Marko

    Thanks,
    When I have some time I will have take a look on that ExtendedDataModel.

    It is now almost a year since we finished our software and RichFaces has come a long way during that time. IIRC that ExtendedDataModel is one of those new features.

  4. fiorenzo Avatar
    fiorenzo

    Good post!
    You can use some tricks for not load alla data in datamodel.
    I like this:
    http://wiki.apache.org/myfaces/WorkingWithLargeTables

    Very simple!

    Or use org.ajax4jsf.model.ExtendedDataModel

    http://livedemo.exadel.com/richfaces-demo/richfaces/dataTable.jsf?tab=dataModel&cid=3474554

    best regards

Leave a Reply

Your email address will not be published. Required fields are marked *