7 Replies Latest reply on Nov 12, 2009 2:59 PM by David Hibbs

    Switching Rich Tab Panels, Tabs stop responding

    David Hibbs Newbie

      I'm trying to put together a UI POC where I switch between several visible components via AJAX in an a4j:outputPanel. This is pretty basic and straightforward.

      The catch that I am encountering is that each of my included components contains a rich:tabPanel, and not all the tabPanels seem to work.

      The first component rendered works perfectly. It renders and I can switch tabs. Then I can switch components a variety of ways (form submit, ajax submit) and get the second component. At this point, the new tabPanel renders with its default display and none of the subsequent rich:tab controls respond to clicks. If I switch back to the original component, the tabPanel there again functions normally.

      Any ideas on a workaround, or if this is simply not going to work? I'm currently running richfaces 3.2.2 SR1.

        • 1. Re: Switching Rich Tab Panels, Tabs stop responding
          Ilya Shaikovsky Master

          show the code.. I guess that the bean which holds your rendered properties - in request. but should be in session.

          • 2. Re: Switching Rich Tab Panels, Tabs stop responding
            David Hibbs Newbie

            OK, here goes.

            Bean: MainComponent

            @Name("MainComponent")
            @Scope(ScopeType.SESSION)
            public class MainComponent
            {
             private String featureName;
             private UIComponent documentTab;
             private UIComponent adminTab;
            
             public UIComponent getDocumentTab() {
             return documentTab;
             }
            
             public void setDocumentTab(UIComponent documentTab) {
             this.documentTab = documentTab;
             }
            
             public UIComponent getAdminTab() {
             return adminTab;
             }
            
             public void setAdminTab(UIComponent adminTab) {
             this.adminTab = adminTab;
             }
            
             public String getFeatureName()
             {
             return featureName;
             }
            
             public void setFeatureName(String featureName)
             {
             this.featureName = featureName;
             }
            
             public MainComponent()
             {
             super();
             featureName = "admin";
             }
            }
            


            This is the main page, main.xhtml
            <!DOCTYPE composition PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
             "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
            <ui:composition xmlns="http://www.w3.org/1999/xhtml"
             xmlns:s="http://jboss.com/products/seam/taglib"
             xmlns:ui="http://java.sun.com/jsf/facelets"
             xmlns:f="http://java.sun.com/jsf/core"
             xmlns:h="http://java.sun.com/jsf/html"
             xmlns:rich="http://richfaces.org/rich"
             xmlns:a4j="http://richfaces.org/a4j"
             template="layout/basicTemplate.xhtml">
            
             <ui:define name="body">
             <a4j:form>
            
             <div id="features" style="position:absolute;top:10px;right:10px;">
            
             <table border="0" cellpadding="2" cellspacing="2">
             <tbody>
             <tr>
             <td>
             <a4j:jsFunction name="updateFeature" reRender="feature">
             <a4j:actionparam name="param1" assignTo="#{MainComponent.featureName}" />
             </a4j:jsFunction>
             </td>
             <td align="center">
             <h:commandLink value="admin" >
             <a4j:actionparam name="featureName" value="admin" assignTo="#{MainComponent.featureName}"/>
             </h:commandLink>
             </td>
            
             <td align="center">
             <h:commandLink value="personal" >
             <a4j:actionparam name="featureName" value="personal" assignTo="#{MainComponent.featureName}"/>
             </h:commandLink>
             </td>
             </tr>
             </tbody>
             </table>
             </div>
            
             <div id="content" style="position:absolute;top:60px;left:10px;right:10px;bottom:10px;border:2px black;">
             <a4j:outputPanel id="feature" layout="block">
             <ui:include src="./features/#{MainComponent.featureName}.xhtml"/>
             </a4j:outputPanel>
             </div>
            
             </a4j:form>
            
             </ui:define>
            </ui:composition>
            


            This is the admin page, features/admin.xhtml
            <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
            <ui:composition xmlns="http://www.w3.org/1999/xhtml"
             xmlns:f="http://java.sun.com/jsf/core"
             xmlns:h="http://java.sun.com/jsf/html"
             xmlns:i="http://primefaces.prime.com.tr/touch"
             xmlns:ui="http://java.sun.com/jsf/facelets"
             xmlns:rich="http://richfaces.org/rich"
             contentType="text/html">
            
             <rich:tabPanel id="adminTabs" immediate="true" binding="#{MainComponent.adminTab}" switchType="ajax">
             <rich:tab label="Templates">
             Templates Tab
             </rich:tab>
             <rich:tab label="Clauses">
             Clauses Tab
             </rich:tab>
             <rich:tab label="Reference">
             Reference Tab
             </rich:tab>
             <rich:tab label="Reports">
             Reports Tab
             </rich:tab>
             </rich:tabPanel>
            
            </ui:composition>
            


            This is the personal page, features/personal.xhtml

            <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
            <ui:composition xmlns="http://www.w3.org/1999/xhtml"
             xmlns:f="http://java.sun.com/jsf/core"
             xmlns:h="http://java.sun.com/jsf/html"
             xmlns:i="http://primefaces.prime.com.tr/touch"
             xmlns:ui="http://java.sun.com/jsf/facelets"
             xmlns:rich="http://richfaces.org/rich"
             contentType="text/html">
            
             <rich:tabPanel id="personalTabs" immediate="true" binding="#{MainComponent.documentTab}" switchType="ajax">
             <rich:tab label="Personal">
             Personal Tab
             </rich:tab>
             <rich:tab label="Templates">
             Templates Tab
             </rich:tab>
             <rich:tab label="Clauses">
             Clauses Tab
             </rich:tab>
             <rich:tab label="Reference">
             Reference Tab
             </rich:tab>
             <rich:tab label="Recent">
             Recent Tab
             </rich:tab>
             <rich:tab label="Favorites">
             Favorites Tab
             </rich:tab>
             </rich:tabPanel>
            
            </ui:composition>
            


            • 3. Re: Switching Rich Tab Panels, Tabs stop responding
              Ilya Shaikovsky Master

              1) binding should not be session scoped.
              2) even worse if you trying to bind different tabPanels to the same binding property.

              • 4. Re: Switching Rich Tab Panels, Tabs stop responding
                David Hibbs Newbie

                 

                "ilya_shaikovsky" wrote:
                1) binding should not be session scoped.
                2) even worse if you trying to bind different tabPanels to the same binding property.


                1) I added the session scoping per your previous message--but maybe I misunderstood? What do you believe should be the scope?

                2) I'm not binding different tabPanels to the same binding property -- admin.xhtml binds to #{MainComponent.featureName} while personal.xhtml binds to #{MainComponent.documentTab}.

                Any other suggestions? Can you duplicate my issue? This is the entirety of the code, running on Seam 2.2 so it should be easy to copy the set-up.

                • 5. Re: Switching Rich Tab Panels, Tabs stop responding
                  Ilya Shaikovsky Master

                   

                  I guess that the bean which holds your rendered properties - in request.


                  I've talked about rendered property :) It was just guess because I haven't seen the code. rendered - should be stored between requests. And the component instance (defined with binding) should not according to JSF spec.



                  • 6. Re: Switching Rich Tab Panels, Tabs stop responding
                    David Hibbs Newbie

                     

                    "ilya_shaikovsky" wrote:
                    I guess that the bean which holds your rendered properties - in request.


                    I've talked about <b>rendered</b> property :) It was just guess because I haven't seen the code. rendered - should be stored between requests. And the component instance (defined with binding) should not according to JSF spec.



                    That's fair, I can certainly see making an educated guess. Unfortunately, I seem to need some education! :) For some reason, I'm just not grasping your meaning. What rendered property are you referring to, what do I need to change, and what does it need to be? Hopefully the 'why' will be self-evident!


                    • 7. Re: Switching Rich Tab Panels, Tabs stop responding
                      David Hibbs Newbie

                      It seems to be working properly now!

                      I switched my pages from ui:composition to ui:component and cleaned up a minor issue with my classpath resulting from my update to the SR release of RichFaces.