9 Replies Latest reply on Oct 27, 2008 12:09 PM by Jens Weintraut

    How to trigger togglePanel vie EL?

    Jens Weintraut Apprentice

      Hi there,

      I want to display a search mask and search results on one page. The mask should be embedded in a togglePanel or similar. When the user starts a search and results are available the search panel should be collapsed. Is this possible? After reading the docs I don't know how I could do this.

      Thanks in advance
      Newlukai

        • 1. Re: How to trigger togglePanel vie EL?
          Jens Weintraut Apprentice

          Hi there,

          is there really no possibility to do something like this? I just want to show or hide a SimpleTogglePanel depending on the result of an EL.

          Thanks in advance
          Newlukai

          • 2. Re: How to trigger togglePanel vie EL?
            Ilya Shaikovsky Master

            just use rendered ="#{bean.somebooleanproperty}" :) manage this property during actions if need and update the parent of this simpletoggle panel

            • 3. Re: How to trigger togglePanel vie EL?
              Jens Weintraut Apprentice

               

              "ilya_shaikovsky" wrote:
              just use rendered ="#{bean.somebooleanproperty}" :) manage this property during actions if need and update the parent of this simpletoggle panel


              Would be a workaround, but that's not really what I'm looking for.

              • 4. Re: How to trigger togglePanel vie EL?
                Ilya Shaikovsky Master

                oh.. sorry.. you need not hide but collapse the panel? then just manage opened attribute of simpletooglepanel in your request. Or in case of toggle panel usage

                • 5. Re: How to trigger togglePanel vie EL?
                  Jens Weintraut Apprentice

                  Right. That's what I want and what I treid. It doesn't work as expected. I used an EL expression for the "opened" attribute, but it only worked when the page is rendered the first time. After a reload the panel is in the state it was before.

                  • 6. Re: How to trigger togglePanel vie EL?
                    Ilya Shaikovsky Master

                    I have no problems with next code

                     <h:form>
                     <h:panelGrid columns="3" width="100%" columnClasses="tpanels,tpanels,tpanels">
                     <rich:simpleTogglePanel switchType="ajax" label="Ajax Switch Type" height="90px" opened="#{userBean.opened}" id="ajax">
                     This type allows to perform the partial view update instead of the
                     whole page reloading. You also can reRender other components
                     while the panel content is toggled.
                     </rich:simpleTogglePanel>
                     </h:panelGrid>
                     <a4j:commandButton reRender="ajax" action="#{userBean.switchPanel}"></a4j:commandButton>
                     </h:form>
                    
                    


                    where userBean - session scoped.

                    • 7. Re: How to trigger togglePanel vie EL?
                      Jens Weintraut Apprentice

                      OK. Thanks. I'll give it a try. Do you know how to use modalPanel in this way? I want it to popup if a certain condition is true, otherwise it should be closed.

                      • 8. Re: How to trigger togglePanel vie EL?
                        Ilya Shaikovsky Master

                        use showWhenRendered attribute binded in the same manner. If the attribute will become true - modal will be rendered after request complete.

                        • 9. Re: How to trigger togglePanel vie EL?
                          Jens Weintraut Apprentice

                           

                          "ilya_shaikovsky" wrote:
                          I have no problems with next code
                           <h:form>
                           <h:panelGrid columns="3" width="100%" columnClasses="tpanels,tpanels,tpanels">
                           <rich:simpleTogglePanel switchType="ajax" label="Ajax Switch Type" height="90px" opened="#{userBean.opened}" id="ajax">
                           This type allows to perform the partial view update instead of the
                           whole page reloading. You also can reRender other components
                           while the panel content is toggled.
                           </rich:simpleTogglePanel>
                           </h:panelGrid>
                           <a4j:commandButton reRender="ajax" action="#{userBean.switchPanel}"></a4j:commandButton>
                           </h:form>
                          
                          


                          where userBean - session scoped.


                          It works. Almost. The action method I call with the commandButton returns null to rerender the page. The opened attribute evaluates the size of a list to decide whether to collapse or expand the togglePanel.

                          <ui:composition
                           xmlns="http://www.w3.org/1999/xhtml"
                           xmlns:ui="http://java.sun.com/jsf/facelets"
                           xmlns:h="http://java.sun.com/jsf/html"
                           xmlns:f="http://java.sun.com/jsf/core"
                           xmlns:s="http://jboss.com/products/seam/taglib"
                           xmlns:a4j="http://richfaces.org/a4j"
                           xmlns:rich="http://richfaces.org/rich"
                           template="/template.xhtml">
                          
                          <ui:define name="content">
                           <h:outputText value="#{msgs.header_searchByPlatform}" styleClass="h1" />
                          
                           <s:div styleClass="formBox">
                           <h:form id="platform">
                           <s:div styleClass="buttonBar">
                           <a4j:commandButton action="#{search.searchByPlatform}" value="Search"
                           reRender="searchForm, resultCount, resultTree" />
                           </s:div>
                          
                           <s:div styleClass="clearButtonBarFloat" />
                          
                           <h:outputText value="#{msgs.header_searchByPlatform_searchForm}" styleClass="h2" />
                          
                           <rich:simpleTogglePanel switchType="ajax" label="Search Form"
                           opened="#{search.releases != null ? search.releases.size le 0 : true}"
                           id="searchForm">
                          
                           <s:div styleClass="decorateInput">
                           <h:outputLabel value="#{msgs.label_platform_browser}"
                           id="label_platform_browser" for="platform_browser" />
                          
                           <h:selectOneMenu value="#{platform.browser}" id="platform_browser">
                           <s:selectItems value="#{browsers}" var="browser" label="#{browser.name}"
                           noSelectionLabel="#{msgs.label_noSelectionLabel}" />
                           <s:convertEntity />
                           </h:selectOneMenu>
                           </s:div>
                          
                           <!-- and some attributes more here -->
                          
                           </rich:simpleTogglePanel>
                          
                           <s:div styleClass="formSpacer" />
                          
                           <h:outputText value="#{msgs.header_searchByPlatform_results}:
                           #{search.releases != null ? search.releases.size : 0}"
                           styleClass="h2" id="resultCount" />
                          
                           <rich:tree
                           id="resultTree"
                           switchType="client"
                           value="#{search.releaseTree}"
                           var="item"
                           ajaxKeys="#{null}">
                           </rich:tree>
                           </h:form>
                           </s:div>
                          </ui:define>
                          </ui:composition>


                          The search form should be hidden when there are results. When the page is loaded and I start a search with a result the search form is hidden. The I open it again, enter some other data and start the search again. Then I see that there are other results but the panel still is expanded. It doesn't "automatically" collapse anymore.

                          Do you have an idea?

                          Thanks in advance
                          Newlukai