10 Replies Latest reply on Apr 27, 2010 11:25 AM by Kevin Sapper

    problem with tabs

    Anitha Raj Newbie

      Hello,


      I've 2 tabs in my application - Tab1, Tab2. Each tab is displaying records from the database in a grid. I have delete button associated with each record. Delete button works fine.


      The problem what I'm facing is, if i delete any record from tab2, the record gets successfully deleted but after deletion, tab1 is rendered and records of tab1 will be displayed. I want the records of tab2 to get displayed.
      Can anyone guide me which tag or the attribute i should use in order to get this done?

        • 1. Re: problem with tabs
          Adrian Mitev Master

          Show us your code.

          • 2. Re: problem with tabs
            Anitha Raj Newbie
            Hello Adrian,

            Thanks for replying.

            The two tabs in my application are Location and Contact and the pages that are rendered by the tabs are
            LocationList.xhtml and ContactList.xhtml

            LocationList.xhtml:

            <rich:panel>
                    <f:facet name="header">Location Search Results (#{empty locationList.resultList ? 0 : (locationList.paginated ? locationList.resultCount : locationList.resultList.size)})</f:facet>
                <div class="results" id="locationList">

                <h:outputText value="The location search returned no results."
                           rendered="#{empty locationList.resultList}"/>

                <rich:dataTable id="locationList"
                            var="_location"
                          value="#{locationList.resultList}"
                       rendered="#{not empty locationList.resultList}">
                      
                       <h:column>
                        <f:facet name="header">
                            <ui:include src="layout/sort.xhtml">
                                <ui:param name="entityList" value="#{locationList}"/>
                                <ui:param name="propertyLabel" value="Location Name"/>
                                <ui:param name="propertyPath" value="location.locationName"/>
                            </ui:include>
                        </f:facet>
                        <h:outputText value="#{_location.locationName}"/>
                    </h:column>
                    <h:column>
                        <f:facet name="header">
                            <ui:include src="layout/sort.xhtml">
                                <ui:param name="entityList" value="#{locationList}"/>
                                <ui:param name="propertyLabel" value="Location Type"/>
                                <ui:param name="propertyPath" value="location.locationType"/>
                            </ui:include>
                        </f:facet>
                        <h:outputText value="#{_location.locationType}"/>
                    </h:column>
                    <h:column>
                        <f:facet name="header">
                            <ui:include src="layout/sort.xhtml">
                                <ui:param name="entityList" value="#{locationList}"/>
                                <ui:param name="propertyLabel" value="Business Hours"/>
                                <ui:param name="propertyPath" value="location.businessHours"/>
                            </ui:include>
                        </f:facet>
                        <h:outputText value="#{_location.businessHours}"/>
                    </h:column>
                    <h:column>
                        <f:facet name="header">
                            <ui:include src="layout/sort.xhtml">
                                <ui:param name="entityList" value="#{locationList}"/>
                                <ui:param name="propertyLabel" value="P24 Business Hours"/>
                                <ui:param name="propertyPath" value="location.p24BusinessHours"/>
                            </ui:include>
                        </f:facet>
                        <h:outputText value="#{_location.p24BusinessHours}"/>
                    </h:column>
                    <h:column>
                        <f:facet name="header">
                            <ui:include src="layout/sort.xhtml">
                                <ui:param name="entityList" value="#{locationList}"/>
                                <ui:param name="propertyLabel" value="P24 After Hours"/>
                                <ui:param name="propertyPath" value="location.p24AfterHours"/>
                            </ui:include>
                        </f:facet>
                        <h:outputText value="#{_location.p24AfterHours}"/>
                    </h:column>
                   
                    <rich:column styleClass="action">
                        <f:facet name="header">Action</f:facet>
                        <s:link view="/#{empty from ? 'Location' : from}.xhtml"
                               value="#{empty from ? 'View' : 'Select'}"
                         propagation="#{empty from ? 'none' : 'default'}"
                                  id="locationViewId">
                            <f:param name="locationLocationId"
                                    value="#{_location.locationId}"/>
                        </s:link>
            </rich:column>
            </rich:dataTable>
            <div>
            </rich:panel>


            ContactList.xhtml:

            <rich:panel>
                    <f:facet name="header">Contact Search Results (#{empty contactList.resultList ? 0 : (contactList.paginated ? contactList.resultCount : contactList.resultList.size)})</f:facet>
                <div class="results" id="contactList">

                <h:outputText value="The contact search returned no results."
                           rendered="#{empty contactList.resultList}"/>

                <rich:dataTable id="contactList"
                            var="_contact"
                          value="#{contactList.resultList}"
                       rendered="#{not empty contactList.resultList}">
                       <h:column>
                        <f:facet name="header">
                            <ui:include src="layout/sort.xhtml">
                                <ui:param name="entityList" value="#{contactList}"/>
                                <ui:param name="propertyLabel" value="First Name"/>
                                <ui:param name="propertyPath" value="contact.firstName"/>
                            </ui:include>
                        </f:facet>
                        <h:outputText value="#{_contact.firstName}"/>
                    </h:column>
                    <h:column>
                        <f:facet name="header">
                            <ui:include src="layout/sort.xhtml">
                                <ui:param name="entityList" value="#{contactList}"/>
                                <ui:param name="propertyLabel" value="Last Name"/>
                                <ui:param name="propertyPath" value="contact.lastName"/>
                            </ui:include>
                        </f:facet>
                        <h:outputText value="#{_contact.lastName}"/>
                    </h:column>
                    <h:column>
                        <f:facet name="header">
                            <ui:include src="layout/sort.xhtml">
                                <ui:param name="entityList" value="#{contactList}"/>
                                <ui:param name="propertyLabel" value="Primary Phone"/>
                                <ui:param name="propertyPath" value="contact.primaryPhone"/>
                            </ui:include>
                        </f:facet>
                        <h:outputText value="#{_contact.primaryPhone}"/>
                    </h:column>
                    <h:column>
                        <f:facet name="header">
                            <ui:include src="layout/sort.xhtml">
                                <ui:param name="entityList" value="#{contactList}"/>
                                <ui:param name="propertyLabel" value="Cell Phone"/>
                                <ui:param name="propertyPath" value="contact.cellPhone"/>
                            </ui:include>
                        </f:facet>
                        <h:outputText value="#{_contact.cellPhone}"/>
                    </h:column>
                    <h:column>
                        <f:facet name="header">
                            <ui:include src="layout/sort.xhtml">
                                <ui:param name="entityList" value="#{contactList}"/>
                                <ui:param name="propertyLabel" value="Email Address"/>
                                <ui:param name="propertyPath" value="contact.emailAddress"/>
                            </ui:include>
                        </f:facet>
                        <h:outputText value="#{_contact.emailAddress}"/>
                    </h:column>
                    <rich:column styleClass="action">
                        <f:facet name="header">Action</f:facet>
                        <s:link view="/#{empty from ? 'Contact' : from}.xhtml"
                               value="#{empty from ? 'View' : 'Select'}"
                         propagation="#{empty from ? 'none' : 'default'}"
                                  id="contactViewId">
                            <f:param name="contactContactId"
                                    value="#{_contact.contactId}"/>
                        </s:link>


                        <s:link view="/ContactList1.xhtml"
                               value="Delete"
                         propagation="none"
                                  id="contactDelete"
                                  action="#{contactHome.remove}"
                                  immediate="true">
                           <f:param name="contactContactId"
                                    value="#{_contact.contactId}"/>
                        </s:link>
                    </rich:column>
                </rich:dataTable>


            The page which is rendering the tabs is

            Customer.xhtml:

            <rich:panel style="height:150px">
                    <f:facet name="header">Customer Details</f:facet>


                    <s:decorate id="customerName" template="layout/display.xhtml">
                        <ui:define name="label">Customer Name</ui:define>
                        <h:outputText value="#{customerHome.instance.customerName}"/>
                    </s:decorate>

                   

                    <s:decorate id="city" template="layout/display.xhtml">
                        <ui:define name="label">City</ui:define>
                        <h:outputText value="#{customerHome.instance.city}"/>
                    </s:decorate>
                   
                    </rich:panel>
                   
                    <div class="actionButtons">

                    <s:button view="/CustomerEdit.xhtml"
                                id="edit"
                             value="Edit"/>
                    </div>
                    <rich:tabPanel id="tabs" switchType="client">
                             <rich:tab id="listTab1" label="Location">
                                 <a4j:include  viewId="/LocationList.xhtml" />
                                
                             </rich:tab>
                             <rich:tab id="linktab4" label="Contact">
                              <a4j:include viewId="/ContactList.xhtml" />
                              </rich:tab>
                            
                                          </rich:tabPanel>
                               
                    </ui:define>
                    </ui:composition>
            • 3. Re: problem with tabs
              Thomas Küstermann Newbie

              The currently selected tab has to be submitted to the server if it should get restored. Therefore, place the rich:tab in a h:form and use h:commandButton or a4j:commandButton to execute the action. s:link and s:button don't submit the form and are therefore not suitable.

              • 4. Re: problem with tabs
                Thomas Küstermann Newbie

                Thomas Küstermann wrote on Apr 24, 2010 22:10:


                ... place the rich:tab in a h:form ...


                Sorry, should be rich:tabPanel.

                • 5. Re: problem with tabs
                  Anitha Raj Newbie

                  If i use a4j:commandButton tag what is the value that i should be passing? As I'm new to all these explain me in detail..


                  Thanks

                  • 6. Re: problem with tabs
                    Kevin Sapper Newbie

                    Hi Anitha,


                    if you're working with RichFaces components like a4j:commandButton it is always useful to check out the RichFaces Live-Demo.


                    In this case the 'value' attribute defines the buttons label. For further information take a look at the taglib on RichFace Live-Demo.


                    Kind Regards,

                    //Kevin

                    • 7. Re: problem with tabs
                      Anitha Raj Newbie

                      Hi Kevin,


                      Thanks for replying. But I guess you read only my last post.Actually i have problem in restoring the tab to the currently selected tab. I have two tabs in my application and  they list out the records from the database. I have provided a delete link using which i can delete any of the records. After deleting, i want the records of the currently selected tab to be displayed. But it always displays the records from the first tab.


                      For example- If i delete any record from tab2, it gets successfully deleted and after delete, the records in the tab1 is displayed. I want the records of the tab2 to be displayed.


                      I have also posted my code for reference. Please help


                      Thanks

                      • 8. Re: problem with tabs
                        Kevin Sapper Newbie

                        Hi Anitha,


                        I've to remember myself to read more carefully next time ;)


                        But now I may have a solution for your problem:



                        • At first you've to add a parameter for the selected tab into your page.xml



                        <?xml version="1.0" encoding="UTF-8"?>
                        <page xmlns="http://jboss.com/products/seam/pages"
                              xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
                              xsi:schemaLocation="http://jboss.com/products/seam/pages
                              http://jboss.com/products/seam/pages-2.2.xsd">
                        
                              <param name="selectedTab"/>
                        
                        </page>
                        

                         



                        • Then assign the parameter to the 'selectedTab' attribute of your rich:tabPanel

                        • And finally add the f:param tag to your s:link which passes the id of the current selected tab



                        <rich:tabPanel id="TestTabPanel" switchType="client" selectedTab="#{selectedTab}">
                          <rich:tab id="Tab1">
                            <f:facet name="label">
                              <h:outputText value="Tab 1" />
                            </f:facet>
                            <h:outputText value="This is content of Tab1"/>
                          </rich:tab>
                          <rich:tab id="Tab2">
                            <f:facet name="label">
                              <h:outputText value="Tab 2" />
                            </f:facet>
                            <s:link view="/test.xhtml" value="tab 2 link">
                              <f:param name="selectedTab" value="Tab2"/>
                            </s:link>
                          </rich:tab>
                        </rich:tabPanel>
                        

                                  


                        Kind regards,

                        //Kevin

                        • 9. Re: problem with tabs
                          Anitha Raj Newbie
                          Hi Kevin,

                          I'm using a4j:include tag as i want the page that is getting rendered should be included in the tab itself. So i included the f:param tag in a4j:include tag. But its not working. Please have a look at the code which i 'm giving you now and suggest me how to proceed.

                          <rich:tabPanel id="tabs" switchType="client" selectedTab="#{selectedTab}">
                                              <rich:tab id="listTab1" label="Location">
                                                  <a4j:include  viewId="/LocationList1.xhtml" />
                                                  <f:param name="selectedTab" value="Location"/>
                                              </rich:tab>
                                            
                                                <rich:tab id="linktab4" label="Contact">
                                               <a4j:include viewId="/ContactList1.xhtml" />
                                               <f:param name="selectedTab" value="Contact"/>
                                               </rich:tab>
                          </rich:tabPanel>

                          As you said i have pased the value in page.xml file as shown below.

                          <?xml version="1.0" encoding="UTF-8"?>
                          <page view-id="/Customer1.xhtml"
                          xmlns="http://jboss.com/products/seam/pages"
                          xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://jboss.com/products/seam/pages http://jboss.com/products/seam/pages-2.2.xsd">
                           
                            <param name= "selectedTab"/>

                          </page>
                          • 10. Re: problem with tabs
                            Kevin Sapper Newbie

                            Hi Anitha,


                            the parameter has to be passed by a link or button. Just like this:


                            tabPanel.xhtml


                            <rich:tabPanel id="tabs" switchType="client" selectedTab="#{selectedTab}">
                              <rich:tab id="tab1" label="Tab 1">
                                <a4j:include viewId="/tab1.xhtml" />
                              </rich:tab>
                              <rich:tab id="tab2" label="Tab 2">
                                <a4j:include viewId="/tab2.xhtml" />
                              </rich:tab>
                            </rich:tabPanel>
                            


                            tab1.xhtml


                            <rich:panel>
                              <s:link value="tab1 link" action="/tabPanel.xhtml">
                                <f:param name="selectedTab" value="tab1" />
                              </s:link>
                            </rich:panel>
                            


                            tab2.xhtml


                            <rich:panel>
                              <s:link value="tab2 link" action="/tabPanel.xhtml">
                                <f:param name="selectedTab" value="tab2" />
                              </s:link>
                            </rich:panel>
                            


                            tabPanel.page.xml


                            <?xml version="1.0" encoding="UTF-8"?>
                            <page view-id="/Customer1.xhtml"
                              xmlns="http://jboss.com/products/seam/pages"
                              xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
                              xsi:schemaLocation="http://jboss.com/products/seam/pages
                              http://jboss.com/products/seam/pages-2.2.xsd">
                              <param name= "selectedTab"/>
                            </page>
                            



                            //Kevin