box layout using HtmlPanelGroup

[Jignesh Patel]

I have requirement to display multiple panels/panelgrid on the screen. I have used HtmlPanelGroup to accomodate everything. It works but then panelgroup generates view symmetrically, while it has to display like a box layout(i.e. the between each panel should have any gaps, it should be displayed one by one without any gap). Any idea how to resolve this. I am attaching my code as follows:

 	@Factory ("subcategorygrid")
	public HtmlPanelGroup getSubcategoryGrid(){
		HtmlPanelGroup panelgroup = new HtmlPanelGroup();
                               //following doesn't work
		panelgroup.setLayout("box");
		
		//gets list of categories from  hibernate BO
		List<Category> allCategories = category.getAllCategories(hbSession);
		List<HtmlPanel> list =new ArrayList<HtmlPanel>();
		for(Category category:allCategories){		
			HtmlPanel panel=new HtmlPanel();			
			panel.setHeader(category.getCatNm());			
			HtmlPanelGrid subcatGrid = new HtmlPanelGrid();
			Iterator<SubCategory> iter= category.getSubCategories().iterator();
			
		     while(iter.hasNext()){
		    	 SubCategory subCategory =  iter.next();
		    	 String id=subCategory.getSubCatId().toString();
		    	 HtmlAjaxCommandLink link = this.generateLink(id,subCategory.getSubCatNm(), "#{someAction.displaysomeScreen("+id+")}");		    	
		    	 subcatGrid.getChildren().add(link);
		     }
		     panel.getChildren().add(subcatGrid);
		     
		     list.add(panel);
		    
		}
		panelgroup.getChildren().addAll(list);
		return panelgroup;

	}   

[Tim Holloway]

It's a little hard to follow that in code, but there are options available - I just need to explain them in tag terms, where I'm more comfortable.

The panelGrid tag renders as an HTML Table. Like its underlying HTML, there are attributes you can set for cell padding and spacing.

Panels themselves render as HTML divs, I think. At any rate, the style and styleClass attriibutes can be used in conjunction with the standard CSS margin and padding features.

[Jignesh Patel]

Tim Holloway wrote:It's a little hard to follow that in code, but there are options available - I just need to explain them in tag terms, where I'm more comfortable.

The panelGrid tag renders as an HTML Table. Like its underlying HTML, there are attributes you can set for cell padding and spacing.

Panels themselves render as HTML divs, I think. At any rate, the style and styleClass attriibutes can be used in conjunction with the standard CSS margin and padding features.

Tim I have statred putting in xhtml page. This time I have tried to use datagrid(I am flexible on using either datagrid or panelgrid). The code is as follows:

	
<rich:dataGrid value="#{category.getAllCategories(hbSession)}" var="category" columns="3" elements="9" width="600px">
	       <rich:panel>
	      <f:facet name="header">
                 <h:outputText value="#{category.catNm}"></h:outputText>
          </f:facet>
          </rich:panel>
          <h:panelGrid columns="?">         
                <!--  I have to display collections of subcatgories(i.e. set) in panelgrid -->         
        </h:panelGrid>           
	 
	 </rich:dataGrid>
   

As you can see I have to display subcategories for given category. I do have method called category.getSubCategories(), which returns set of subcategories.
But how to display them through use of datagrid and panelgrid.

So my problem is, I have collection of categories which in turn also contains collection of subcategories. And I have to display all together.

When I tried to display through code in my first post, it works but then I have all the grid of equal size, it takes up the max grid size irrespective of size of other grids and I don't want that.

[Tim Holloway]

PanelGrid is designed for straight table displays (HTML table style). DataGrid is a PanelGrid-style display coupled with a data iterator.

In both cases, you should be able to control the overall size of the table display using the "style=" and "styleClass=" attributes on the grid tag. You can also define cell characteristics using the rowClasses and/or columnClasses attributes.

[Jignesh Patel]

So are you saying by using stylesheet I can change the behaviour of table cell to display like a grids with different size?

Is there any other component in rich faces family which provides grid layout?

[Jignesh Patel]

Tim,

I am trying to use projection as style sheet is not going to solve my problem. The code is as follows:

 <rich:dataGrid value="#{category.getAllCategories(hbSession)}" var="category" columns="3" elements="9" width="600px">
	       <rich:panel>
	      <f:facet name="header">
                 <h:outputText value="#{category.catNm}"></h:outputText>
          </f:facet>
          </rich:panel>
         <h:dataTable value="#{category.subCategories}" var="subCategory">  
			<!-- command link code goes here -->
        </h:dataTable>           
	 
	 </rich:dataGrid> 

But I am getting error

 java.lang.NoClassDefFoundError: javax/servlet/jsp/jstl/sql/Result   

.
I do have jboss-el.jar in my lib folder then why this problem is coming. I am using tomcat 6 and seam2.1.2.