2 Replies Latest reply on Sep 27, 2007 10:20 AM by Marcio Miranda

    Problem using toggleControl+togglePanel with Ajax support.

    Marcio Miranda Newbie

      Hello,

      My original problem is that I need a collapsible panel with Ajax support and a customizable header. If simpleTogglePanel had a customizable header it would be fine for me, but I understand that it hasn't (there is an open ticket for that in JIRA). By customizable I mean a header facet where I could add additional buttons in the header.

      Said that, I tried to develop the same functionality of simpleTogglePanel using a combination of toggleControl+togglePanel. I created then the following Facelets composition to handle that (work in progress):

      ============================================
      <ui:composition
      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:t="http://myfaces.apache.org/tomahawk"
      xmlns:a4j="http://richfaces.org/a4j"
      xmlns:rich="http://richfaces.org/rich">

      <rich:togglePanel initialState="collapsed" switchType="client" stateOrder="collapsed,expanded">
      <f:facet name="expanded">
      <rich:panel>
      <f:facet name="header">
      <rich:toggleControl value="Topic name (expanded)" switchToState="collapsed"/>
      </f:facet>
      <rich:dragSupport dragIndicator=":indicator"
      dragType="topic" dragValue="1" rendered="#{userBean.editorialRights}">
      <rich:dndParam name="label" value="nome topico" />
      </rich:dragSupport>
      Panel content goes here.#{hotSpot1Bean.hotSpotId}
      </rich:panel>
      </f:facet>
      <f:facet name="collapsed">
      <rich:panel bodyClass="invisible">
      <f:facet name="header">
      <rich:toggleControl value="Topic name (collapsed)" switchToState="expanded"/>
      </f:facet>
      <rich:dragSupport dragIndicator=":indicator"
      dragType="topic" dragValue="1" rendered="#{userBean.editorialRights}">
      <rich:dndParam name="label" value="nome topico" />
      </rich:dragSupport>
      </rich:panel>
      </f:facet>
      </rich:togglePanel>

      </ui:composition>

      ==========================================

      Now, here is the problem. If I configure the togglePanel to use Ajax and use more than one instance of the composition defined above, the component gets lost after the first operation (collapse/expand). If I use only one composition it works well.

      If I configure the togglePanel to use the client type instead of ajax, it works fine even if I use more than one instance of the composition described above.

      What do you suggest? It seems to me that there is a bug when the combination of toggleControl+togglePanel is used more than once in the same view with ajax support.

      Thanks

        • 1. Re: Problem using toggleControl+togglePanel with Ajax suppor
          Ilya Shaikovsky Master

          I'm lost after the last sentence.. I do not see the ajax support component on your snippet. And how it could influence if you perform only collapse/expand.

          B.t.w. what the a4j:log say? Is there are any errors?

          • 2. Re: Problem using toggleControl+togglePanel with Ajax suppor
            Marcio Miranda Newbie

            ilya,

            This code works fine:

            <h:form id="form">
            <rich:togglePanel initialState="collapsed" switchType="ajax" stateOrder="collapsed,expanded">
            <f:facet name="expanded">
             <rich:panel>
             <f:facet name="header">
             <h:panelGroup>
             <rich:toggleControl value="I'm expanded" switchToState="collapsed"/>
             </h:panelGroup>
             </f:facet>
             Topic content goes here.
             </rich:panel>
             </f:facet>
             <f:facet name="collapsed">
             <rich:panel bodyClass="invisible">
             <f:facet name="header">
             <h:panelGroup>
             <rich:toggleControl value="I'm collapsed" switchToState="expanded"/>
             </h:panelGroup>
             </f:facet>
             </rich:panel>
             </f:facet>
             </rich:togglePanel>
            </h:form>


            This code doesn't work (The only difference is that I added another togglePanel to the page) :

            <h:form id="form">
            
            <rich:togglePanel initialState="collapsed" switchType="ajax" stateOrder="collapsed,expanded">
            <f:facet name="expanded">
             <rich:panel>
             <f:facet name="header">
             <h:panelGroup>
             <rich:toggleControl value="I'm expanded" switchToState="collapsed"/>
             </h:panelGroup>
             </f:facet>
             Topic content goes here.
             </rich:panel>
            </f:facet>
            <f:facet name="collapsed">
             <rich:panel bodyClass="invisible">
             <f:facet name="header">
             <h:panelGroup>
             <rich:toggleControl value="I'm collapsed" switchToState="expanded"/>
             </h:panelGroup>
             </f:facet>
             </rich:panel>
            </f:facet>
            </rich:togglePanel>
            
            <rich:togglePanel initialState="collapsed" switchType="ajax" stateOrder="collapsed,expanded">
            <f:facet name="expanded">
             <rich:panel>
             <f:facet name="header">
             <h:panelGroup>
             <rich:toggleControl value="I'm expanded (2)" switchToState="collapsed"/>
             </h:panelGroup>
             </f:facet>
             Topic content goes here.
             </rich:panel>
            </f:facet>
            <f:facet name="collapsed">
             <rich:panel bodyClass="invisible">
             <f:facet name="header">
             <h:panelGroup>
             <rich:toggleControl value="I'm collapsed (2)" switchToState="expanded"/>
             </h:panelGroup>
             </f:facet>
             </rich:panel>
            </f:facet>
            </rich:togglePanel>
            </h:form>
            


            Finally, this code works (the difference from the previous one is that it uses the client switch type instead of ajax)

            <h:form id="form">
            
            <rich:togglePanel initialState="collapsed" switchType="client" stateOrder="collapsed,expanded">
            <f:facet name="expanded">
             <rich:panel>
             <f:facet name="header">
             <h:panelGroup>
             <rich:toggleControl value="I'm expanded" switchToState="collapsed"/>
             </h:panelGroup>
             </f:facet>
             Topic content goes here.
             </rich:panel>
            </f:facet>
            <f:facet name="collapsed">
             <rich:panel bodyClass="invisible">
             <f:facet name="header">
             <h:panelGroup>
             <rich:toggleControl value="I'm collapsed" switchToState="expanded"/>
             </h:panelGroup>
             </f:facet>
             </rich:panel>
            </f:facet>
            </rich:togglePanel>
            
            <rich:togglePanel initialState="collapsed" switchType="client" stateOrder="collapsed,expanded">
            <f:facet name="expanded">
             <rich:panel>
             <f:facet name="header">
             <h:panelGroup>
             <rich:toggleControl value="I'm expanded (2)" switchToState="collapsed"/>
             </h:panelGroup>
             </f:facet>
             Topic content goes here.
             </rich:panel>
            </f:facet>
            <f:facet name="collapsed">
             <rich:panel bodyClass="invisible">
             <f:facet name="header">
             <h:panelGroup>
             <rich:toggleControl value="I'm collapsed (2)" switchToState="expanded"/>
             </h:panelGroup>
             </f:facet>
             </rich:panel>
            </f:facet>
            </rich:togglePanel>
            </h:form>
            


            I'll take a look at the a4j:log documentation to see how it works.

            Thanks for the reply.