8 Replies Latest reply on Jun 9, 2009 12:25 PM by Ilya Shaikovsky

    rich:modalPanel + f:attribute not loading values

    John Ament Master

      I"ve got some markup defined like this

      <rich:panel id="images">
       <f:facet name="header">Images</f:facet>
       <rich:dataGrid columns="2" elements="12" width="450px" value="#{imgSearch.searchResults}" var="image" style="width:360px;">
       <rich:panel style=" width : 180px;">
       <f:facet name="header"><h:outputText value="#{image.fileName}" /></f:facet>
       <img src="/images/img/60/#{image.fileName}" />
       <h:outputText value="#{image.fileName}" /><br />
       <ui:repeat value="#{image.imageProperties}" var="imgProp">
       <h:outputText value="#{imgProp.key}" /> : <h:outputText value="#{imgProp.value}" /><br />
       </ui:repeat>
       <a4j:commandLink actionListener="#{taskExecutor.addSwap}" value="Swap" reRender="pnl_tasks,pnl_results" action="#{taskExecutor.act}">
       <f:attribute name="imageId" value="#{image.imageId}" /></a4j:commandLink> | <a4j:commandLink
       actionListener="#{taskExecutor.delete}" value="Delete" reRender="pnl_tasks,pnl_results" action="#{taskExecutor.act}">
       <f:attribute name="imageId" value="#{image.imageId}" /></a4j:commandLink> | <a4j:commandLink
       actionListener="#{propertyEditor.populate}" value="Add Property" action="#{propertyEditor.blank}"
       reRender="modal_pnl_propEditor" ajaxSingle="true"
       oncomplete="Richfaces.showModalPanel('pnl_propEditor',{width:350,top:200})">
       <f:attribute name="imageFileName" value="#{image.fileName}" />
       </a4j:commandLink>
       </rich:panel>
       </rich:dataGrid>
       <rich:modalPanel height="200" id="pnl_propEditor" moveable="true" width="150">
       <f:facet name="header">Property Editor</f:facet>
       <rich:panel id="modal_pnl_propEditor">
       <h:panelGrid columns="2">
       <h:outputText value="Image:"/>
       <h:outputText value="#{propertyEditor.imageFileName}" />
       <h:outputText value="Property:" />
       <h:inputText value="#{propertyEditor.propertyName}" />
       <h:outputText value="Value:" />
       <h:inputText value="#{propertyEditor.propertyValue}" />
       <a4j:commandButton action="#{propertyEditor.save}" oncomplete="Richfaces.hideModalPanel('pnl_propEditor');" value="Save"
       reRender="pnl_tasks,pnl_results"/>
       <a4j:commandButton action="#{propertyEditor.blank}" oncomplete="Richfaces.hideModalPanel('pnl_propEditor');" value="Cancel"/>
       </h:panelGrid>
       </rich:panel>
       </rich:modalPanel>
       </rich:panel>
      


      My issue is that I need to get that #{image.fileName} into the modal panel. Based on what I did, I feel like it should work, given that my populate method pushes everything into the correct bean. However, my f:attribute is coming up null. I'm sure I could work w/ the imageId too, but it seems like this should be working.

        • 1. Re: rich:modalPanel + f:attribute not loading values
          Nick Belaevski Master

          Hi,

          Works for me perfectly with 3.3.1.GA/JSF RI 1.2_12:

          <rich:dataGrid value="#{forum5Bean.lotOfData}" var="var">
           <a4j:commandLink ajaxSingle="true" actionListener="#{forum5Bean.populate}" value="#{var }">
           <f:attribute name="item" value="#{var}" />
           </a4j:commandLink>
          
           </rich:dataGrid>


          public void populate(ActionEvent event) {
           System.out.println(event.getComponent().getAttributes().get("item"));
           }
          


          If imgSearch bean is request-scoped, this can be the source of the problem - try session scope then.

          • 2. Re: rich:modalPanel + f:attribute not loading values
            John Ament Master

            environment sounds about the same. JBoss AS 5.1 (which comes w/ the latest JSF 1.2, I'd assume), Richfaces 3.3.1. I'm using WebBeans.

            I tried converting to imageId, no luck. Still not passing in.

            The Image type itself is defined as:

             private long imageId;
             private long version;
             private String fileName;
             private String skuAssociated;
             private int altViewPosition;
             private boolean active;
            


            imgSearch is session scoped, and is defined as:

             public List<Image> getSearchResults() {
             return searchResults;
             }
             public void setSearchResults(List<Image> searchResults) {
             this.searchResults = searchResults;
             }
             public void search() {
             String sku2 = getSkuCode()+"_s2_"+getSku();
             logger.error("Found sku2: "+sku2);
             //Query q = entityManager.createQuery("select i from Image i where i.skuAssociated = :sku").setParameter("sku", sku2);
             //searchResults = q.getResultList();
             setSearchResults(imageDAO.findBySku(sku2));
             }
            


            and my populate is defined as:

             public void populate(ActionEvent ae) {
             Map<String,Object> attrs = ae.getComponent().getAttributes();
             Set<String> keys = attrs.keySet();
             for(String key : keys){
             System.out.println("Key: "+key);
             String v = attrs.get(key).toString();
             System.out.println("Value: "+v);
             }
             this.propertyName = null;
             this.propertyValue = null;
             this.imageFileName = null;
             this.edit = false;
             if(attrs.containsKey("propertyName")) {
             this.propertyName = attrs.get("propertyName").toString();
             }
             if(attrs.containsKey("propertyValue")) {
             this.propertyValue = attrs.get("propertyValue").toString();
             }
             if(attrs.containsKey("imageFileName")) {
             this.imageFileName = attrs.get("imageFileName").toString();
             }
             if(attrs.containsKey("edit")) {
             String em = attrs.get("edit").toString();
             if(em.equalsIgnoreCase("Y")) edit= true;
             }
             }
            


            and the only output i get is

            07:45:05,491 INFO [STDOUT] Key: com.sun.facelets.MARK_ID
            07:45:05,492 INFO [STDOUT] Value: -595634370_2_1863393f
            


            • 3. Re: rich:modalPanel + f:attribute not loading values
              John Ament Master

              BTW, other a4j:commandLinks on the page work correctly. I have this right before the modalpanel stuff, and it works perfectly.

              <a4j:commandLink actionListener="#{taskExecutor.addSwap}" value="Swap" reRender="pnl_tasks,pnl_results" action="#{taskExecutor.act}">
              <f:attribute name="imageId" value="#{image.imageId}" /></a4j:commandLink> | <a4j:commandLink actionListener="#{taskExecutor.delete}" value="Delete" reRender="pnl_tasks,pnl_results" action="#{taskExecutor.act}"> <f:attribute name="imageId" value="#{image.imageId}" /></a4j:commandLink> |
              


              • 4. Re: rich:modalPanel + f:attribute not loading values
                Ilya Shaikovsky Master

                so you have modal ni the same form as the link.
                so according to this :

                <h:inputText value="#{propertyEditor.propertyValue}" />
                

                inside the modal the empty input getting submitted to propertyEditor.propertyValue and it becomes null.

                So just use ajaxSingle true on the link which populates the modal(not acceptable for this case) or just move the modal from this form and define the form inside the modal itself.(this should be used according to modal panel limitations).

                • 5. Re: rich:modalPanel + f:attribute not loading values
                  Ilya Shaikovsky Master

                  sorry.. missed ajaxSingle on your link.. :/

                  In any way could you try to move modalPAnel outside the form where submit happens.. You will need thisanyway because you will need to make submit from inside modal panel

                  • 6. Re: rich:modalPanel + f:attribute not loading values
                    John Ament Master

                    Well, at this point, this is my entire facelet. The issue remains.

                    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
                    <html xmlns="http://www.w3.org/1999/xhtml"
                     xmlns:h="http://java.sun.com/jsf/html"
                     xmlns:f="http://java.sun.com/jsf/core"
                     xmlns:ui="http://java.sun.com/jsf/facelets"
                     xmlns:rich="http://richfaces.org/rich"
                     xmlns:a4j="http://richfaces.org/a4j">
                     <ui:composition template="template.xhtml">
                     <ui:define name="pageTitle">Image Manipulation Tool</ui:define>
                     <ui:define name="pageHeader">Edit/Delete Images &amp; Properties</ui:define>
                     <ui:define name="body">
                     <rich:panel rendered="#{login.loggedIn}">
                     <a4j:form id="searchForm">
                     <rich:simpleTogglePanel label="Search (click here)" opened="true" switchType="client">
                     <h:panelGrid columns="5" style=" width : 546px;">
                     <h:outputText value="Division: " />
                     <rich:comboBox defaultLabel="Select Division" value="#{imgSearch.division}">
                     <f:selectItem itemValue="KIDS" itemLabel="KIDS"/>
                     <f:selectItem itemValue="YOUTH" itemLabel="YOUTH"/>
                     <f:selectItem itemValue="OUTRWEAR" itemLabel="OUTRWEAR"/>
                     <f:selectItem itemValue="SPORTS" itemLabel="SPORTS"/>
                     <f:selectItem itemValue="COATS" itemLabel="COATS"/>
                     <f:selectItem itemValue="LINEN" itemLabel="LINEN"/>
                     <f:selectItem itemValue="ACCSRY" itemLabel="ACCSRY"/>
                     <f:selectItem itemValue="MENS" itemLabel="MENS"/>
                     </rich:comboBox>
                     <h:outputText value="Sku: " />
                     <h:inputText value="#{imgSearch.sku}" />
                     <a4j:commandLink action="#{imgSearch.search}" value="Search" reRender="images"/>
                     </h:panelGrid>
                     </rich:simpleTogglePanel>
                     </a4j:form>
                     <h:panelGrid columns="2">
                     <rich:panel id="images">
                     <f:facet name="header">Images</f:facet>
                     <a4j:form id="gridForm">
                     <rich:dataGrid columns="2" elements="12" width="450px" value="#{imgSearch.searchResults}" var="image" style="width:360px;">
                     <img src="/images/img/60/#{image.fileName}" />
                     <h:outputText value="#{image.fileName}" /><br />
                     <ui:repeat value="#{image.imageProperties}" var="imgProp">
                     <h:outputText value="#{imgProp.key}" /> : <h:outputText value="#{imgProp.value}" /><br />
                     </ui:repeat>
                     <a4j:commandLink reRender="pnl_tasks,pnl_results" action="#{taskExecutor.act}"
                     actionListener="#{taskExecutor.addSwap}" value="Swap">
                     <f:attribute name="imageId" value="#{image.imageId}" /></a4j:commandLink> | <a4j:commandLink
                     actionListener="#{taskExecutor.delete}" value="Delete" reRender="pnl_tasks,pnl_results"
                     action="#{taskExecutor.act}"><f:attribute name="imageId" value="#{image.imageId}" />
                     </a4j:commandLink> | <a4j:commandLink
                     actionListener="#{propertyEditor.populate}" value="Add Property"
                     reRender="modalForm" ajaxSingle="true"
                     oncomplete="Richfaces.showModalPanel('pnl_propEditor',{width:350,top:200})"><f:attribute
                     name="imageFileName" value="#{image.imageId}" />
                     </a4j:commandLink>
                     </rich:dataGrid>
                     </a4j:form>
                     </rich:panel>
                     <a4j:form id="rightPanels">
                     <rich:panel id="pnl_tasks" style=" width : 180px;">
                     <f:facet name="header">Tasks</f:facet>
                     <ui:repeat value="#{taskExecutor.taskList}" var="task">
                     <h:outputText value="#{task.name}" escape="false"/> - <h:outputText value="#{task.taskDef}" escape="false"/><br />
                     </ui:repeat>
                     </rich:panel><br />
                     <rich:panel id="pnl_tools" style=" width : 180px;">
                     <f:facet name="header">Tools</f:facet>
                     <a4j:commandLink actionListener="#{taskExecutor.addTask}" action="#{taskExecutor.act}" value="Condense Images" reRender="pnl_tasks,pnl_results">
                     <f:attribute name="task" value="condense" />
                     </a4j:commandLink><br />
                     <a4j:commandLink action="#{taskExecutor.clearTasks}" value="Clear Tasks" reRender="pnl_tasks,pnl_results"/><br />
                     <a4j:commandLink action="#{taskExecutor.executeTasks}" value="Execute Tasks" reRender="pnl_tasks,pnl_results" />
                     </rich:panel><br />
                     <rich:panel id="pnl_results" style=" width : 180px;">
                     <f:facet name="header">Results</f:facet>
                     <ui:repeat value="#{taskExecutor.taskResults}" var="result">
                     <h:outputText value="#{result}" escape="false" /><br />
                     </ui:repeat>
                     <a4j:poll id="poll" interval="500" enabled="#{taskExecutor.poll}"
                     reRender="pnl_results" />
                     </rich:panel>
                     </a4j:form>
                     </h:panelGrid>
                     </rich:panel>
                     <rich:modalPanel height="200" id="pnl_propEditor" moveable="true" width="150">
                     <f:facet name="header">Property Editor</f:facet>
                     <a4j:form id="modalForm">
                     <h:panelGrid columns="2">
                     <h:outputText value="Image:"/>
                     <h:outputText value="#{propertyEditor.imageFileName}" />
                     <h:outputText value="Property:" />
                     <h:inputText value="#{propertyEditor.propertyName}" />
                     <h:outputText value="Value:" />
                     <h:inputText value="#{propertyEditor.propertyValue}" />
                     <a4j:commandButton value="Save"
                     action="#{propertyEditor.save}" oncomplete="Richfaces.hideModalPanel('pnl_propEditor');"
                     reRender="pnl_tasks,pnl_results"/>
                     <a4j:commandButton action="#{propertyEditor.blank}"
                     oncomplete="Richfaces.hideModalPanel('pnl_propEditor');" value="Cancel"/>
                     </h:panelGrid>
                     </a4j:form>
                     </rich:modalPanel>
                     </ui:define>
                     </ui:composition>
                    </html>
                    


                    • 7. Re: rich:modalPanel + f:attribute not loading values
                      John Ament Master

                      I also no longer believe it has anything to do w/ a modal. I can reproduce same thing w/ a rich panel that dynamically shows.

                      • 8. Re: rich:modalPanel + f:attribute not loading values
                        Ilya Shaikovsky Master

                        please feel free to send war sample for this case to me directly (email in profile) or share at sendspace for example.