1 Reply Latest reply on Dec 6, 2007 2:34 PM by georgemic

    How to use RichFaces for table

      Hi guys,

      I have to create a HTML table on my page. The table will have 2 columns: 1 for Label and 2nd for the component. In header it will have a label. In footer it has 2 command buttons.

      Label Component
      ---------------------------------------------------------------------
      Database : a HTML Select element
      User Id: a HTML input element of type "text"
      Password: a HTML input element of type "password"
      Language: a HTML Select element

      I was able to do it with JSF without using RichFaces.


      <h:panelGrid id="table_login" columns="2" border="1" headerClass="tableHeaderLabel" columnClasses="tableColumnLabel">
       <f:facet name="header">
       <h:outputText value="#{labels.welcome}"/>
       </f:facet>
      
       <h:outputLabel for="udatabase" value="#{labels.database}" />
       <h:selectOneMenu id="udatabase" value="#{userLoginInfoBean.dataSourceName}" required="true" styleClass="selectOneMenuLabel">
       <f:selectItems value="#{appInfoBean.dataSourceNamesList}"/>
       </h:selectOneMenu>
      
       <h:outputLabel for="uname" value="#{labels.userid}" />
       <h:inputText id="uname" value="#{userLoginInfoBean.userId}" required="true" size="15" styleClass="inputTextLabel">
       </h:inputText>
      
       <h:outputLabel for="upassword" value="#{labels.password}" />
       <h:inputSecret id="upassword" value="#{userLoginInfoBean.userPassword}" required="true" size="15" styleClass="inputTextLabel">
       </h:inputSecret>
      
       <h:outputLabel for="ulanguage" value="#{labels.language}" />
       <h:selectOneMenu id="ulanguage" value="#{userLoginInfoBean.languageId}" required="true" styleClass="selectOneMenuLabel">
       <f:selectItems value="#{appInfoBean.languagesList}"/>
       </h:selectOneMenu>
      
      
       <f:facet name="footer">
       <h:panelGroup style="display:block; text-align:center">
       <h:commandButton id="cblogin" value="#{labels.login}" styleClass="commandButtonLabel" />
       <h:commandButton id="cbreset" value="#{labels.reset}" styleClass="commandButtonLabel" />
       </h:panelGroup>
       </f:facet>
      </h:panelGrid>
      


      Now I have a requirement to have one more row in my table. And that row's label will need a rowspan of 2 rows. I find out that JSF does not support it so now I want to use RichFaces for this problem. Problem is to figure out which component to use. I was thinking rich:dataTable but it is totally different than what I want.

      Can anybody give some idea?

      Thanks




        • 1. Re: How to use RichFaces for table
          georgemic

          You should be able to nest the panelGrid tags to provide the rowspan that you need. Try this:

          <h:panelGrid id="table_login" columns="2" border="1" headerClass="tableHeaderLabel" columnClasses="tableColumnLabel">
           <f:facet name="header">
           <h:outputText value="#{labels.welcome}"/>
           </f:facet>
          
           <h:outputLabel for="udatabase" value="#{labels.database}" />
           <h:selectOneMenu id="udatabase" value="#{userLoginInfoBean.dataSourceName}" required="true" styleClass="selectOneMenuLabel">
           <f:selectItems value="#{appInfoBean.dataSourceNamesList}"/>
           </h:selectOneMenu>
          
           <h:outputLabel for="uname" value="#{labels.userid}" />
           <h:inputText id="uname" value="#{userLoginInfoBean.userId}" required="true" size="15" styleClass="inputTextLabel">
           </h:inputText>
          
           <h:outputLabel for="upassword" value="#{labels.password}" />
           <h:inputSecret id="upassword" value="#{userLoginInfoBean.userPassword}" required="true" size="15" styleClass="inputTextLabel">
           </h:inputSecret>
          
           <h:outputLabel for="ulanguage" value="#{labels.language}" />
           <h:selectOneMenu id="ulanguage" value="#{userLoginInfoBean.languageId}" required="true" styleClass="selectOneMenuLabel">
           <f:selectItems value="#{appInfoBean.languagesList}"/>
           </h:selectOneMenu>
          
           <h:outputLabel for="subtable_content" value="#{labels.subtable_content}" />
           <h:panelGrid id="subtable_content" columns="1" border="0" cellspacing="0" cellpadding="0">
           <h:inputText id="newcomponent1" value="#{userLoginInfoBean.newcomponent1}" required="true" size="15" styleClass="inputTextLabel"/>
           <rich:spacer height="10px"/>
           <h:inputText id="newcomponent2" value="#{userLoginInfoBean.newcomponent2}" required="true" size="15" styleClass="inputTextLabel"/>
           </h:panelGrid>
          
           <f:facet name="footer">
           <h:panelGroup style="display:block; text-align:center">
           <h:commandButton id="cblogin" value="#{labels.login}" styleClass="commandButtonLabel" />
           <h:commandButton id="cbreset" value="#{labels.reset}" styleClass="commandButtonLabel" />
           </h:panelGroup>
           </f:facet>
          </h:panelGrid>