6 Replies Latest reply on Oct 19, 2012 3:16 AM by Siva P

    Display text & image in rich:tab

    Sabarinath Selvaraj Newbie

      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

        • 1. Re: Display text & image in rich:tab
          iabughosh Master

          Hello Sabarinath,

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

           

          regards.

          • 2. Re: Display text & image in rich:tab
            Siva P Master

            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>

             

             

            123456.bmp

            Thanks,

            Siva

            • 3. Re: Display text & image in rich:tab
              Sabarinath Selvaraj Newbie

              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

              • 4. Re: Display text & image in rich:tab
                Siva P Master

                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

                • 5. Re: Display text & image in rich:tab
                  Sabarinath Selvaraj Newbie

                  Hi

                   

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

                  Snap 2012-10-17 at 17.37.53.png

                   

                  Thanks,

                  With Regards,

                  Sabarinath S

                  • 6. Re: Display text & image in rich:tab
                    Siva P Master

                    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:

                     

                    sds.JPG