Display text & image in rich:tab

[sabarinathsss]

Hi

I m using RichFaces 4.2.2 and I have tried to display the text & image in rich:tab .But the image is not displayed.

how to dispaly text and image in rich:tab ?

<rich:tabPanel switchType="client" >
      <rich:tab id="Tab1" header="Error" onheaderclick="getErrorDetails('ERROR')">
           <f:facet name="label"> 
           <h:graphicImage value="Error.png" alt="Error"/>  Error
           </f:facet>
            <rich:dataTable value="#{SampleManagedBean.dataList}" id="Table" reRender="Scroller" var="result" rows="5" rowClasses="odd-row,even-row ">
            <rich:column>
             <f:facet name="header">
              <h:outputText value="Message" />
             </f:facet>
             <h:outputText value="#{result.get('Message')}" />
            </rich:column>
            <f:facet name="footer">
             <rich:dataScroller id="Scroller" render="Table"></rich:dataScroller>
            </f:facet>
           </rich:dataTable>
      </rich:tab>
      <rich:tab id="Tab2" header="Warn"  onheaderclick="getErrorDetails('WARN')">
           <f:facet name="label"> 
            <h:graphicImage value="Error.png" alt="Error"/>  Error
            </f:facet>
            <rich:dataTable value="#{SampleManagedBean.dataList}" id="Table"  var="result" rows="5" rowClasses="odd-row,even-row ">
            <rich:column>
                  <f:facet name="header">
                   <h:outputText value="Message" />
                  </f:facet>
                  <h:outputText value="#{result.get('Message')}" />
            </rich:column>
      </rich:dataTable>
     </rich:tab>
      <rich:tab id="Tab3" header="Info" onheaderclick="getErrorDetails('INFO')">
           <f:facet name="label"> 
            <h:graphicImage value="../images/i/Error.jpg" alt="Error"/>  Error
            </f:facet>
            <rich:dataTable value="#{SampleManagedBean.dataList}" var="result" rows="5" rowClasses="odd-row,even-row ">
            <rich:column>
                  <f:facet name="header">
                   <h:outputText value="Message" />
                  </f:facet>
                  <h:outputText value="#{result.get('Message')}" />
            </rich:column>

           </rich:dataTable>
      </rich:tab>
</rich:tabPanel>

Thanks in Advance,

Sabarinath

[iabughosh]

Hello Sabarinath,

use f:facet name="header" instead of "title".

regards.

[sivaprasad9394]

Hi Sabarinath Selvaraj,

Try like below It will display both text and image in the tab,

<rich:tabPanel switchType="client">

        <rich:tab header="Overview">

            <f:facet name="label">

            <h:panelGrid columns="2">              

                 <h:panelGroup> 

                     <h:graphicImage value="/img/rar.png" style="float:left"/>   

                     <h:outputLabel value=" PAGE 1"></h:outputLabel> 

                 </h:panelGroup> </h:panelGrid> 

             </f:facet> 

            RichFaces is a component library for JSF and an advanced framework for

            easily integrating AJAX capabilities into business applications.     

        </rich:tab>

        <rich:tab header="Display">

            <f:facet name="label">

            <h:panelGrid columns="2">              

                 <h:panelGroup> 

                     <h:graphicImage value="/img/jar.gif" style="float:left"/>    

                     <h:outputLabel value=" PAGE 2"></h:outputLabel> 

                 </h:panelGroup> </h:panelGrid> 

             </f:facet>

            <p>We are working hard on RichFaces 4.0 which will have full JSF

            2 integration. That is not all though, here is a summary of updates

            and features:</p>          

        </rich:tab>

    </rich:tabPanel>

Thanks,

Siva

[sabarinathsss]

Hi sivaprasad krishnaswamy,

       Thanks for your reply . I have tried with panelGrid but still image is not displayed.

Page:

<rich:tabPanel switchType="client" >
<rich:tab id="Tab1" header="Error" onheaderclick="getErrorDetails('ERROR')">
<f:facet name="label">
     <h:panelGrid columns="2">              
   <h:panelGroup> 
       <h:graphicImage value="Error.png" style="float:left"/>   
       <h:outputLabel value=" Error"></h:outputLabel> 
   </h:panelGroup>
      </h:panelGrid> 
    </f:facet>
  <rich:dataTable value="#{SampleManagedBean.dataList}" id="Table" reRender="Scroller" var="result" rows="5" rowClasses="odd-row,even-row ">
  <rich:column>
   <f:facet name="header">
    <h:outputText value="Message" />
   </f:facet>
   <h:outputText value="#{result.get('Message')}" />
  </rich:column>
  <f:facet name="footer">
   <rich:dataScroller id="Scroller" render="Table"></rich:dataScroller>
  </f:facet>
</rich:dataTable>
</rich:tab>
<rich:tab id="Tab2" header="Warn"  onheaderclick="getErrorDetails('WARN')">
<f:facet name="label">
      <h:panelGrid columns="2">              
    <h:panelGroup> 
        <h:graphicImage value="Error.png" style="float:left"/>   
        <h:outputLabel value=" Error"></h:outputLabel> 
    </h:panelGroup>
       </h:panelGrid> 
    </f:facet>
  <rich:dataTable value="#{SampleManagedBean.dataList}" id="Table"  var="result" rows="5" rowClasses="odd-row,even-row ">
  <rich:column>
   <f:facet name="header">
    <h:outputText value="Message" />
   </f:facet>
   <h:outputText value="#{result.get('Message')}" />
  </rich:column>
</rich:dataTable>
</rich:tab>
<rich:tab id="Tab3" header="Info" onheaderclick="getErrorDetails('INFO')">
<f:facet name="label">
      <h:panelGrid columns="2">              
    <h:panelGroup> 
        <h:graphicImage value="Error.png" style="float:left"/>   
        <h:outputLabel value=" Error"></h:outputLabel> 
    </h:panelGroup>
       </h:panelGrid> 
    </f:facet>
  <rich:dataTable value="#{SampleManagedBean.dataList}" var="result" rows="5" rowClasses="odd-row,even-row ">
  <rich:column>
   <f:facet name="header">
    <h:outputText value="Message" />
   </f:facet>
   <h:outputText value="#{result.get('Message')}" />
  </rich:column>

</rich:dataTable>
</rich:tab>
</rich:tabPanel>

Thanks,

With Regards,

Sabarinath S

[sivaprasad9394]

Check your  image path is properly there and also show some of the images how the tab is displaying for you in screen??

Thanks,

Siva

[sabarinathsss]

Hi

I m checked the image path. it is given correctly.

Thanks,

With Regards,

Sabarinath S

[sivaprasad9394]

Its working properly...please verifiy ur side.....or check with the below code in ur jsp or xhtml page......

<rich:tabPanel switchType="client" >

<rich:tab id="Tab1" header="Error" onheaderclick="getErrorDetails('ERROR')">

<f:facet name="label">

     <h:panelGrid columns="2">             

   <h:panelGroup>

       <h:graphicImage value="/img/error.png" style="float:left"/>  

       <h:outputLabel value=" Error"></h:outputLabel>

   </h:panelGroup>

      </h:panelGrid>

    </f:facet>

     <!-- Datatable1 -->

</rich:tab>

<rich:tab id="Tab2" header="Warn"  onheaderclick="getErrorDetails('WARN')">

<f:facet name="label">

      <h:panelGrid columns="2">             

    <h:panelGroup>

        <h:graphicImage value="/img/warning.png" style="float:left"/>  

        <h:outputLabel value=" Error"></h:outputLabel>

    </h:panelGroup>

       </h:panelGrid>

    </f:facet>

   <!-- Datatable2 -->

</rich:tab>

<rich:tab id="Tab3" header="Info" onheaderclick="getErrorDetails('INFO')">

<f:facet name="label">

      <h:panelGrid columns="2">             

    <h:panelGroup>

        <h:graphicImage value="/img/get_info.png" style="float:left"/>  

        <h:outputLabel value=" Error"></h:outputLabel>

    </h:panelGroup>

       </h:panelGrid>

    </f:facet>

    <!-- Datatable3 -->

</rich:tab>

</rich:tabPanel>

Image: