2 Replies Latest reply on Feb 24, 2012 7:19 PM by Ryan Stanley

    rich:togglePanel: actionListeners and immediate=true issues

    Balder Carrate Newbie

      Hi all,

       

      we're just starting our first real app with RichFaces4 and we're facing some issues. We have a rich:togglePanel that switches between list and editor view. We're using switchType="ajax", so only one togglePanelItem is rendered at a time. rich:togglePanel needs to be inside a form:

      <ui:define name="mainLayoutContent">
                <h:form id="gestionPlantillaForm">
                          <rich:togglePanel id="gestionPlantillaPanel"
                                              activeItem="listPlantillaPanel"
                                              switchType="ajax">
                                    <rich:togglePanelItem id="listPlantillaTogglePanelItem"
                                                        name="listPlantillaTogglePanelItem">
                                              <a4j:outputPanel id="listPlantillaPanelRender">
                                                        <div class="actions top">
                                                                  <a4j:commandButton id="createPlantillaAction"
                                                                                      value="Crear Plantilla"
                                                                                      title="Crear una nueva Plantilla en el sistema"
                                                                                      actionListener="#{createPlantillaController.createActionListener}"
                                                                                      render="editPlantillaPanelRender"
                                                                                      styleClass="ss_sprite ss_add">
                                                                            <rich:toggleControl targetItem="editPlantillaTogglePanelItem" event="click" />
                                                                  </a4j:commandButton>
                                                        </div>
                                                        <!-- ListPlantilla -->
                                                        <ui:include src="/protected/plantilla/listPlantilla.xhtml">
                                                                  <ui:param name="listPlantillaController" value="#{listPlantillaController}" />
                                                        </ui:include>
                                              </a4j:outputPanel>
                                    </rich:togglePanelItem>
      
                                    <rich:togglePanelItem id="editPlantillaTogglePanelItem"
                                                        name="editPlantillaTogglePanelItem">
                                              <a4j:outputPanel id="editPlantillaPanelRender">
                                                        <ui:include src="/protected/plantilla/editPlantillaPanel.xhtml">
                                                                  <ui:param name="panelContainerId" value="editPlantillaPanelContainer" />
                                                        </ui:include>
                                              </a4j:outputPanel>
                                    </rich:togglePanelItem>
                          </rich:togglePanel>
                </h:form>
      </ui:define>
      

      List view contains a rich:dataTable and rich:dataScroller and seems to be working just fine. The problem is that actionListener for createPlantillaAction is not executing. However, if we remove the rich:toggleControl inside createPlantillaAction, listener works fine.

       

      Here is the edit view:

       

      <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:a4j="http://richfaces.org/a4j"
                          xmlns:rich="http://richfaces.org/rich">
                <rich:panel id="editPlantillaPanel"
                                    header="Editar Plantilla">
                          <h:panelGrid columns="2"
                                              columnClasses="col-form-label, col-form-input">
                                    <ui:decorate template="/protected/include/formField.xhtml">
                                              <ui:define name="label">
                                                        <h:outputLabel value="Código:" for="codigo" />
                                              </ui:define>
                                              <ui:define name="field">
                                                        <h:inputText id="codigo"
                                                                            value="#{plantilla.codigo}"
                                                                            styleClass="field-medium-short"
                                                                            label="Código">
                                                                  <rich:validator event="blur" />
                                                        </h:inputText>
                                                        <rich:message for="codigo" showDetail="false" showSummary="true" />
                                              </ui:define>
                                    </ui:decorate>
      
                                    <ui:decorate template="/protected/include/formField.xhtml">
                                              <ui:define name="label">
                                                        <h:outputLabel value="Descripción:" for="descripcion" />
                                              </ui:define>
                                              <ui:define name="field">
                                                        <h:inputText id="descripcion"
                                                                            value="#{plantilla.descripcion}"
                                                                            styleClass="field-medium-large"
                                                                            label="Descripción">
                                                                  <rich:validator event="blur" />
                                                        </h:inputText>
                                                        <rich:message for="descripcion" showDetail="false" showSummary="true" />
                                              </ui:define>
                                    </ui:decorate>
                          </h:panelGrid>
      
      
                          <h:panelGroup id="editPlantillaActions"
                                              layout="block"
                                              class="actions bottom">
                                    <a4j:commandButton id="savePlantillaAction"
                                                        actionListener="#{editPlantillaController.saveActionListener}"
                                                        oncomplete="if (#{maximumSeverityChecker.info}) {#{rich:component('gestionPlantillaPanel')}.switchToItem('listPlantillaPanel')}"
                                                        value="Guardar"
                                                        title="Guardar la Plantilla"
                                                        styleClass="ss_sprite ss_accept"
                                                        type="submit">
                                    </a4j:commandButton>
                                    <a4j:commandButton id="cancelPlantillaAction"
                                                        immediate="true"
                                                        actionListener="#{editPlantillaController.cancelActionListener}"
                                                        value="Cancelar"
                                                        title="Cancelar y volver"
                                                        styleClass="ss_sprite ss_cross">
                                              <rich:toggleControl targetItem="listPlantillaPanel" event="click" />
                                    </a4j:commandButton>
                          </h:panelGroup>
                </rich:panel>
      </ui:composition>
      
      

       

      We're facing 2 different issues here:

      1. Both actionListeners in a4j:commandButton aren't invoked
      2. aj4:commandButton "Cancel" action has immediate=true, but rich:validators are firing up and we can't go back to list on empty fields.

       

      What are we missing? I guess that a4j:commandButton with righ:toggleControl is just ignoring actionListeners, is there any way to invoke our custom action listeners? What about the immediate=true in the Cancel button?

       

      Thanks in advance