Creating Datatable dynamically in JSF

Posted Tuesday, September 20, 2005 1:37 AM by Shunjie
[Intro] [Skip Intro]
All I want is to create a few rows with links according to the user's right in my J2EE project and it took me 6 hours to do so in JSF. Faint. Most probably due to my lack of experience in the framework, but I do believe seriously that there is a serious flaw in it. I choose it in the first place because it seems to be Java's answer to RAD in Web. I think is a headache.

Initially, I decided to use JSTL to loop through the collections of rights and display it. The code is simple, just a tag and done! Well, not so. After 2 hours, nothing is working. I check with dr google and judging from this article, I thought they will work well. Neither the examples or my application works.  Searching through the results from google again reveals this post and inside, reveals a contradictory posting:


Thanks for your interest in JavaServer Faces. There are a few areas
where it was impossible to get JSF and JSTL to cooperate.

1. c:forEach. You can't use it with JSF. use h:dataTable instead

2. c:if Any faces components embedded inside of this tag must have
manually defined IDs. You can't let Faces define the ID for you.

3. I18N. Faces has its own I18N and L10N mechanisms, it's best that you
use them instead of the JSTL ones.

 
My jaw drop when I saw (1.) and I realized I have wasted 2 hours for nothing. So I use datatable instead. I managed to get it working in another 2 hours time (Spend most of the time waiting for the war file to deploy). Below is the code. The other 2 hours is spended trying to apply CSS and style to it, which in the end we simply compromised the design to another cause the style is just not getting right (since I create it dynamically). Anyway the below is the code for adding datatable dynamically to a grouppanel.

Note : Another way is to use HtmlOutputLabel to write out the Html codes yourself. However, that will defeat the purpose of using faces and encapsulating the Html tags.

I miss my visible=false;
[/Intro]

[Code]
//This code is tested and can work =p

           UIData table = new UIData();
           UIColumn col = null;   
           HtmlOutputLink out = null;
           UIOutput txt = null;
        
           table.setVar("item");
         
           table.setId("table1");
         
           col = new UIColumn();
       
           UIOutput header = new UIOutput();
           header.setId("header1");
           header.setValue((String)names.get(i));
          
           col.setHeader(header);
           col.setId("column1");
          
           out = new  HtmlOutputLink();
           out.setId("out1");
           txt = new UIOutput();
           txt.setId("txt1");
            //Change item.page accordingly to your own object's property
           ValueBinding vb =
           FacesContext.getCurrentInstance().getApplication().createValueBinding("#{item.page}");
           out.setValueBinding("value", vb);
          
             //Change item.description accordingly to your own object's property
           ValueBinding cb =
           FacesContext.getCurrentInstance().getApplication().createValueBinding("#{item.description}");
           txt.setValueBinding("value", cb);
          
           out.getChildren().add(txt);
           col.getChildren().add(out);
           table.getChildren().add(col);
          
          //itemList is an ArrayList which I had populated
           table.setValue(this.itemList);
           this.groupPanel1.getChildren().add(table);
          //You need to create a CSS class .empty so that you can style the table inside the groupPanel
           this.groupPanel1.setStyleClass("empty");

[/Code]
Filed under: , ,