13 Replies Latest reply on Feb 6, 2009 10:46 AM by Kevin Taylor

    rich:toolTip question

    Kevin Taylor Newbie

      does anyone understand what makes the example, listed below, on the richfaces examples page work? I am thoroughly confused by this. I would think an action or actionlistener would need to be added to the toolTip in order to make it pull its data whenever the dataTable entries were moused over. This does not appear to be the case. The action/actionlistener seems to be deprecated for the tooltip. In a nutshell, I just want to be able to populate the tooltip at the moment a mouseover occurs. In my attempt to achieve this task, the default content appears but the getters for the bean are never reached on the server side. Could someone please explain this to me. It seems like you are forced to pre-populate the tooltip in the case of a tooltip nested within a dataTable, which is the way I would like to use it. I really need help on this.

      <h:form>
       <rich:dataTable value="#{toolTipData.vehicles}" width="400"
       var="vehicle" rowKeyVar="row">
       <f:facet name="header">
       <h:outputText value="Car Store"/>
       </f:facet>
       <rich:column>
       <f:facet name="header">
       <h:outputText value="##" />
       </f:facet>
       <h:outputText value="#{row+1}" />
       </rich:column>
       <rich:column>
       <f:facet name="header">
       <h:outputText value="Make" />
       </f:facet>
       <a4j:outputPanel layout="block">
       <rich:toolTip direction="top-right" mode="ajax" showDelay="300"
       styleClass="tooltip" layout="block">
       <a4j:actionparam name="key" value="#{row}"
       assignTo="#{toolTipData.currentVehicleIndex}" />
      
       <h:panelGrid columns="4">
       <f:facet name="header">
       <h:outputText value="Vehicle details:" />
       </f:facet>
       <h:outputText value="make:" />
       <h:outputText value="#{vehicle.make}" styleClass="tooltipData" />
       <h:outputText value="model:" />
       <h:outputText value="#{vehicle.model}" styleClass="tooltipData" />
       <h:outputText value="year:" />
       <h:outputText value="#{vehicle.year}" styleClass="tooltipData" />
       <h:outputText value="milage:" />
       <h:outputText value="#{vehicle.milage}" styleClass="tooltipData" />
       <h:outputText value="zip:" />
       <h:outputText value="#{vehicle.zip}" styleClass="tooltipData" />
       <h:outputText value="listed:" />
       <h:outputText value="#{vehicle.listed}" styleClass="tooltipData">
       <f:convertDateTime dateStyle="short" />
       </h:outputText>
       <f:facet name="footer">
       <h:panelGroup>
       <h:outputText value="vin: " />
       <h:outputText value="#{vehicle.vin}" styleClass="tooltipData" />
       </h:panelGroup>
       </f:facet>
      
       </h:panelGrid>
       </rich:toolTip>
       <h:outputText id="make" value="#{vehicle.make}"/>
       </a4j:outputPanel>
       </rich:column>
       <rich:column>
       <f:facet name="header">
       <h:outputText value="Model" />
       </f:facet>
       <h:outputText value="#{vehicle.model}" />
       </rich:column>
       <rich:column>
       <f:facet name="header">
       <h:outputText value="Year" />
       </f:facet>
       <h:outputText value="#{vehicle.year}" />
       </rich:column>
       </rich:dataTable>
       </h:form>


        • 1. Re: rich:toolTip question
          Ilya Shaikovsky Master

          Sorry In this code really action listener does nothing and seems remained as development artifact. Data was fetched on initial table rendering.

          Now I updated the sample and put to svn(You could check). In sample now the way to load the data on real tooltip request. (actionparam used to set the current row for tooltip and its action listener called to fill the data object used by tooltip)

          the code to look through without svn checkout:

           <rich:dataTable value="#{toolTipData.vehicles}" width="400"
           var="vehicle" rowKeyVar="row">
           <f:facet name="header">
           <h:outputText value="Car Store"/>
           </f:facet>
           <rich:column>
           <f:facet name="header">
           <h:outputText value="##" />
           </f:facet>
           <h:outputText value="#{row+1}" />
           </rich:column>
           <rich:column>
           <f:facet name="header">
           <h:outputText value="Make" />
           </f:facet>
           <a4j:outputPanel layout="block">
           <rich:toolTip direction="top-right" mode="ajax" showDelay="300"
           styleClass="tooltip" layout="block">
           <f:setPropertyActionListener value="#{vehicle}" target="#{toolTipData.vehicle}" />
           <a4j:actionparam name="key" value="#{row}"
           assignTo="#{toolTipData.currentVehicleIndex}" actionListener="#{toolTipData.fillCurrent}"/>
           <h:panelGrid columns="4">
           <f:facet name="header">
           <h:outputText value="Vehicle details:" />
           </f:facet>
           <h:outputText value="make:" />
           <h:outputText value="#{toolTipData.vehicle.make}" styleClass="tooltipData" />
           <h:outputText value="model:" />
           <h:outputText value="#{toolTipData.vehicle.model}" styleClass="tooltipData" />
           <h:outputText value="year:" />
           <h:outputText value="#{toolTipData.vehicle.year}" styleClass="tooltipData" />
           <h:outputText value="milage:" />
           <h:outputText value="#{toolTipData.vehicle.milage}" styleClass="tooltipData" />
           <h:outputText value="zip:" />
           <h:outputText value="#{toolTipData.vehicle.zip}" styleClass="tooltipData" />
           <h:outputText value="listed:" />
           <h:outputText value="#{toolTipData.vehicle.listed}" styleClass="tooltipData">
           <f:convertDateTime dateStyle="short" />
           </h:outputText>
           <f:facet name="footer">
           <h:panelGroup>
           <h:outputText value="vin: " />
           <h:outputText value="#{toolTipData.vehicle.vin}" styleClass="tooltipData" />
           </h:panelGroup>
           </f:facet>
          
           </h:panelGrid>
           </rich:toolTip>
           <h:outputText id="make" value="#{vehicle.make}"/>
           </a4j:outputPanel>
           </rich:column>
          ...


          and actionListener method pretty simple in this case:

           private int currentVehicleIndex = -1;
           private Vehicle vehicle = null;
          
           public void fillCurrent(ActionEvent event) {
           vehicle = (Vehicle)vehicles.get(currentVehicleIndex);
           }
          

          So you could easily fetch any additional data for tooltip in this way.

          • 2. Re: rich:toolTip question
            Ilya Shaikovsky Master

            sorry forgot to remove

            <f:setPropertyActionListener value="#{vehicle}" target="#{toolTipData.vehicle}" />
            


            It's not nesessary. Just remove it. And I'll recommit.

            • 3. Re: rich:toolTip question
              Kevin Taylor Newbie

              Let me first say thanks for your time and effort. I received an error for the f:setPropertyActionListener. The error indicated that it needs to be nested within a component that handles ActionSource. Do I need this section of code? Also, I tried it without the f:setPropertyActionListener and the actionListener never gets called. Am I missing something? Do I need to somehow associate the actionListener to the mouseover that occurs?

              "ilya_shaikovsky" wrote:
              Sorry In this code really action listener does nothing and seems remained as development artifact. Data was fetched on initial table rendering.

              Now I updated the sample and put to svn(You could check). In sample now the way to load the data on real tooltip request. (actionparam used to set the current row for tooltip and its action listener called to fill the data object used by tooltip)

              the code to look through without svn checkout:
               <rich:dataTable value="#{toolTipData.vehicles}" width="400"
               var="vehicle" rowKeyVar="row">
               <f:facet name="header">
               <h:outputText value="Car Store"/>
               </f:facet>
               <rich:column>
               <f:facet name="header">
               <h:outputText value="##" />
               </f:facet>
               <h:outputText value="#{row+1}" />
               </rich:column>
               <rich:column>
               <f:facet name="header">
               <h:outputText value="Make" />
               </f:facet>
               <a4j:outputPanel layout="block">
               <rich:toolTip direction="top-right" mode="ajax" showDelay="300"
               styleClass="tooltip" layout="block">
               <f:setPropertyActionListener value="#{vehicle}" target="#{toolTipData.vehicle}" />
               <a4j:actionparam name="key" value="#{row}"
               assignTo="#{toolTipData.currentVehicleIndex}" actionListener="#{toolTipData.fillCurrent}"/>
               <h:panelGrid columns="4">
               <f:facet name="header">
               <h:outputText value="Vehicle details:" />
               </f:facet>
               <h:outputText value="make:" />
               <h:outputText value="#{toolTipData.vehicle.make}" styleClass="tooltipData" />
               <h:outputText value="model:" />
               <h:outputText value="#{toolTipData.vehicle.model}" styleClass="tooltipData" />
               <h:outputText value="year:" />
               <h:outputText value="#{toolTipData.vehicle.year}" styleClass="tooltipData" />
               <h:outputText value="milage:" />
               <h:outputText value="#{toolTipData.vehicle.milage}" styleClass="tooltipData" />
               <h:outputText value="zip:" />
               <h:outputText value="#{toolTipData.vehicle.zip}" styleClass="tooltipData" />
               <h:outputText value="listed:" />
               <h:outputText value="#{toolTipData.vehicle.listed}" styleClass="tooltipData">
               <f:convertDateTime dateStyle="short" />
               </h:outputText>
               <f:facet name="footer">
               <h:panelGroup>
               <h:outputText value="vin: " />
               <h:outputText value="#{toolTipData.vehicle.vin}" styleClass="tooltipData" />
               </h:panelGroup>
               </f:facet>
              
               </h:panelGrid>
               </rich:toolTip>
               <h:outputText id="make" value="#{vehicle.make}"/>
               </a4j:outputPanel>
               </rich:column>
              ...


              and actionListener method pretty simple in this case:

               private int currentVehicleIndex = -1;
               private Vehicle vehicle = null;
              
               public void fillCurrent(ActionEvent event) {
               vehicle = (Vehicle)vehicles.get(currentVehicleIndex);
               }
              

              So you could easily fetch any additional data for tooltip in this way.


              • 4. Re: rich:toolTip question
                Ilya Shaikovsky Master

                which version you using? I've checked under 3.3.0 - 3.3.1

                • 5. Re: rich:toolTip question
                  Ilya Shaikovsky Master

                  B.t.w. we checked and it could be used only on 3.2.2 and later

                  • 6. Re: rich:toolTip question
                    Kevin Taylor Newbie

                    I am currently downloading version 3.3.0. I had 3.2.1. I should you more information shortly.

                    • 7. Re: rich:toolTip question
                      Kevin Taylor Newbie

                      It appears to be hitting the actionListener but the getter for the object is never called. I would think it would call after the actionListener resets the object. Is my thinking off on this?

                      • 8. Re: rich:toolTip question
                        Kevin Taylor Newbie

                        After thinking about it some more, it seems like something would have to trigger a reRender of the dataTable contained within the toolTip. If this is the case, do I need to include something with the a4j:actionparam?

                        "kevcpu411" wrote:
                        It appears to be hitting the actionListener but the getter for the object is never called. I would think it would call after the actionListener resets the object. Is my thinking off on this?


                        • 9. Re: rich:toolTip question
                          Ilya Shaikovsky Master

                          No.. tooltip should fetch the data without any additional reRendering. As you could see from my code above.

                          • 10. Re: rich:toolTip question
                            Kevin Taylor Newbie

                            With that said, is the tooltip populated as the dataTable is created or after you perform the mouseover? When I tried it the way you have listed it never called the getter after the actionListener, which I thought would happen before the tooltip actually rendered. I would think that the getter would be called each time you performed a new mouseover. How is the tooltip populating in your example?

                            • 11. Re: rich:toolTip question
                              Ilya Shaikovsky Master

                              in the example from current demosite code - tooltip repopulated after mouseover.

                              • 12. Re: rich:toolTip question
                                Kevin Taylor Newbie

                                Lets take the vehicle example on the richfaces demo site. When you mouseover the cars make, the tooltip displays. The first point of confusion, they have a var named vehicle attached to the datatable. How is this being populated with the currently selected record upon mouseover? I initially thought a getter was being called to complete the population. It seems like this is not the case. Also, where can I see the ToolTipData bean. This might help as well. The only thing I see from the demo is the page.

                                • 13. Re: rich:toolTip question
                                  Kevin Taylor Newbie

                                  okay, I found the code for the class, ToolTipData. When is getCurrentVehicle called? How does ajax know to call getCurrentVehicle? It seems as if this the place where the current record is coming from? Is this correct?

                                  "kevcpu411" wrote:
                                  Lets take the vehicle example on the richfaces demo site. When you mouseover the cars make, the tooltip displays. The first point of confusion, they have a var named vehicle attached to the datatable. How is this being populated with the currently selected record upon mouseover? I initially thought a getter was being called to complete the population. It seems like this is not the case. Also, where can I see the ToolTipData bean. This might help as well. The only thing I see from the demo is the page.