4 Replies Latest reply on Mar 16, 2010 6:19 AM by nbelaevski

    <rich:gmap in <rich:dataTable : google map is not displaied

    craig12980

      Hi

       

      This is my environment:

       

        • Richfaces 3.3.2
        • Spring 3.0
        • J2SE 1.6.0_18-b07
        • Apache tomcat 6.0.24

       

      I wrote this code:

      web.xml:

      <?xml version="1.0" encoding="UTF-8"?>
      <web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://java.sun.com/xml/ns/javaee" xmlns:web="http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd" xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd" id="WebApp_ID" version="2.5">
           <description>Ricerca Prestazioni</description>
           <display-name>Ricerca Prestazioni</display-name>
        <context-param>
          <param-name>org.jboss.jbossfaces.WAR_BUNDLES_JSF_IMPL</param-name>
          <param-value>true</param-value>
        </context-param>   
         <context-param>
            <param-name>javax.portlet.faces.renderPolicy</param-name>
            <param-value>ALWAYS_DELEGATE</param-value>
         </context-param>     
           <context-param>
                <param-name>javax.faces.DEFAULT_SUFFIX</param-name>
                <param-value>.xhtml</param-value>
           </context-param>
           <context-param>
                <param-name>facelets.REFRESH_PERIOD</param-name>
                <param-value>2</param-value>
           </context-param>
           <context-param>
                <param-name>facelets.DEVELOPMENT</param-name>
                <param-value>true</param-value>
           </context-param>
           <context-param>
                <param-name>javax.faces.STATE_SAVING_METHOD</param-name>
                <param-value>server</param-value>
           </context-param>
           <context-param>
                <param-name>org.richfaces.SKIN</param-name>
                <param-value>laguna</param-value>
           </context-param>
      
         <context-param>
            <param-name>org.richfaces.LoadStyleStrategy</param-name>
            <param-value>DEFAULT</param-value>
         </context-param>
         <context-param>
            <param-name>org.richfaces.LoadScriptStrategy</param-name>
            <param-value>DEFAULT</param-value>
         </context-param>
           <context-param>
                <param-name>contextConfigLocation</param-name>
                <param-value>classpath:spring-beans.xml </param-value>
           </context-param>
           <listener>
                <listener-class>org.springframework.web.context.ContextLoaderListener</listener-class>
           </listener>
           <listener>
                <listener-class>
                     org.springframework.web.context.request.RequestContextListener</listener-class>
           </listener>
           <filter>
                <display-name>Ajax4jsf Filter</display-name>
                <filter-name>ajax4jsf</filter-name>
                <filter-class>org.ajax4jsf.Filter</filter-class>
           </filter>
           <filter-mapping>
                <filter-name>ajax4jsf</filter-name>
                <servlet-name>Faces Servlet</servlet-name>
                <dispatcher>REQUEST</dispatcher>
                <dispatcher>FORWARD</dispatcher>
                <dispatcher>INCLUDE</dispatcher>
           </filter-mapping>
           <servlet>
                <servlet-name>Faces Servlet</servlet-name>
                <servlet-class>javax.faces.webapp.FacesServlet</servlet-class>
                <load-on-startup>1</load-on-startup>
           </servlet>
           <servlet-mapping>
                <servlet-name>Faces Servlet</servlet-name>
                <url-pattern>*.jsf</url-pattern>
           </servlet-mapping>
           <login-config>
                <auth-method>BASIC</auth-method>
           </login-config>
      </web-app>
      

       

       

      faces-config.xml

      <?xml version="1.0"?>
      <faces-config version="1.2" xmlns="http://java.sun.com/xml/ns/javaee"
           xmlns:xi="http://www.w3.org/2001/XInclude" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
           xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-facesconfig_1_2.xsd">
           <!--application>
                <view-handler> org.jboss.portletbridge.application.PortletViewHandler</view-handler>
                <state-manager>org.jboss.portletbridge.application.PortletStateManager</state-manager>
                <el-resolver>org.springframework.web.jsf.el.SpringBeanFacesELResolver</el-resolver>
                <locale-config>
                  <default-locale>it_IT</default-locale>
                  <supported-locale>en_US</supported-locale>
                </locale-config>
           </application-->
           <!-- Va bene per le web application classiche -->
           <application>
                <view-handler>com.sun.facelets.FaceletViewHandler</view-handler>
                <el-resolver>org.springframework.web.jsf.el.SpringBeanFacesELResolver</el-resolver>
                <locale-config>
                  <default-locale>it_IT</default-locale>
                  <supported-locale>en_US</supported-locale>
                </locale-config>          
           </application>
           <navigation-rule>
                <from-view-id>/search.xhtml</from-view-id>
                <navigation-case>
                     <from-outcome>next</from-outcome>
                     <to-view-id>/results.xhtml</to-view-id>
                </navigation-case>
           </navigation-rule>
           <navigation-rule>
                <from-view-id>/results.xhtml</from-view-id>
                <navigation-case>
                     <from-outcome>next</from-outcome>
                     <to-view-id>/detail.xhtml</to-view-id>
                </navigation-case>
                <navigation-case>
                     <from-outcome>prev</from-outcome>
                     <to-view-id>/search.xhtml</to-view-id>
                </navigation-case>
           </navigation-rule>
      </faces-config>
      

       

      spring-beans.xml:

      <?xml version="1.0" encoding="UTF-8"?>
      <beans xmlns="http://www.springframework.org/schema/beans"
           xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
           xmlns:aop="http://www.springframework.org/schema/aop"
           xmlns:context="http://www.springframework.org/schema/context"
           xsi:schemaLocation="http://www.springframework.org/schema/aop http://www.springframework.org/schema/aop/spring-aop-3.0.xsd
                http://www.springframework.org/schema/beans http://www.springframework.org/schema/beans/spring-beans-3.0.xsd
                http://www.springframework.org/schema/context http://www.springframework.org/schema/context/spring-context-3.0.xsd">
           
           <!-- 
                Bean rappresentante il service delle prestazioni
                Al momento utilizzo una semplicissima implementazione che non interagisce col DB 
            -->
           <bean id="prestazioniService"
                class="it.eng.tz.ria.application.richfaces.dao.impl.SimplePrestazioniServiceImpl">
           </bean>
           <!-- 
                Bean per la ricerca; viene utilizzato per la ricerca di prestazioni
                Ha uno scope request visto che per ogni ricerca voglio che sia creato
                Ha il tag scoped-proxy per l'interazione con JSF; con questo tag spring capisce
                che non si deve utilizzare un bean singleton ma deve generare un nuovo bean ad ogni 
                richiesta.
            -->
           <bean id="searchBean"
                class="it.eng.tz.ria.application.richfaces.model.RicercaBean"
                scope="session">
                <property name="service" ref="prestazioniService"></property>
                <aop:scoped-proxy />
           </bean>
           <!-- 
                Bean per il wizard; viene utilizzato per la navigazione
                Ha uno scope session visto che per ogni sessione utente voglio che sia creato
                Ha il tag scoped-proxy per l'interazione con JSF; con questo tag spring capisce
                che non si deve utilizzare un bean singleton ma deve generare un nuovo bean ad ogni 
                avvio di sessione.
            -->     
           <bean id="wizardBean"
                class="it.eng.tz.ria.application.richfaces.controller.WizardController"
                scope="session">
                <property name="service" ref="prestazioniService"></property>
                <aop:scoped-proxy />
           </bean>
      </beans>
      

       

      And i wrote this simple bean:

       

      package it.eng.tz.ria.application.richfaces.model;
      
      import static it.eng.tz.ria.application.richfaces.web.utils.IPrestazioniConstants.DESCRIZIONE_PREST_CRITERIA;
      import static it.eng.tz.ria.application.richfaces.web.utils.IPrestazioniConstants.NOME_PREST_CRITERIA;
      import it.eng.tz.ria.application.richfaces.dao.IPrestazioniService;
      
      import java.io.Serializable;
      import java.util.ArrayList;
      import java.util.Collections;
      import java.util.HashMap;
      import java.util.Iterator;
      import java.util.List;
      import java.util.Map;
      
      import org.richfaces.model.DataProvider;
      import org.richfaces.model.ExtendedTableDataModel;
      import org.richfaces.model.selection.Selection;
      import org.richfaces.model.selection.SimpleSelection;
      import org.springframework.util.StringUtils;
      
      public class RicercaBean implements Serializable {
      
           /**
            * 
            */
           private static final long serialVersionUID = -5060590627316226660L;
           private IPrestazioniService service;
           private String nomePrestazione;
           private String descrizionePrestazione;
           private List<GenericEntity> results = Collections.synchronizedList(new ArrayList<GenericEntity>(0));
           private List<GenericEntity> choosenEntities = Collections.synchronizedList(new ArrayList<GenericEntity>(0));
           private Object tableState;
           private Selection selection = new SimpleSelection();
           private String sortMode = "single";
           private String selectionMode = "single";
           private ExtendedTableDataModel<GenericEntity> dataModel;
           
           public IPrestazioniService getService() {
                return service;
           }
      
           public void setService(IPrestazioniService service) {
                this.service = service;
           }
      
           public String getNomePrestazione() {
                return nomePrestazione;
           }
      
           public void setNomePrestazione(String nomePrestazione) {
                this.nomePrestazione = nomePrestazione;
           }
      
           public String getDescrizionePrestazione() {
                return descrizionePrestazione;
           }
      
           public void setDescrizionePrestazione(String descrizionePrestazione) {
                this.descrizionePrestazione = descrizionePrestazione;
           }
      
           public void doSearch() {
      
                Map<String, String> criteria = Collections.synchronizedMap(new HashMap<String, String>(0));
                if (StringUtils.hasText(getNomePrestazione())) {
      
                     criteria.put(NOME_PREST_CRITERIA, getNomePrestazione());
                }
                if (StringUtils.hasText(getDescrizionePrestazione())) {
      
                     criteria.put(DESCRIZIONE_PREST_CRITERIA, getDescrizionePrestazione());
                }
                results = service.searchEntity(criteria);
           }
      
           public void setResults(List<GenericEntity> results) {
                this.results = results;
           }
      
           public List<GenericEntity> getResults() {
                return results;
           }
      
           public void setSortMode(String sortMode) {
                this.sortMode = sortMode;
           }
      
           public String getSortMode() {
                return sortMode;
           }
      
           public void setSelectionMode(String selectionMode) {
                this.selectionMode = selectionMode;
           }
      
           public String getSelectionMode() {
                return selectionMode;
           }
      
           public void setTableState(Object tableState) {
                this.tableState = tableState;
           }
      
           public Object getTableState() {
                return tableState;
           }
      
           public void setSelection(Selection selection) {
                this.selection = selection;
           }
      
           public Selection getSelection() {
                return selection;
           }
      
           public void doSelect() {
                choosenEntities.clear();
                Iterator<Object> iterator = getSelection().getKeys();
                while (iterator.hasNext()) {
                     Object key = iterator.next();
                     choosenEntities.add(getPrestazioniDataModel().getObjectByKey(key));
                }
           }
      
           public ExtendedTableDataModel<GenericEntity> getPrestazioniDataModel() {
                if (dataModel == null || !results.isEmpty() ){
                     
                     dataModel = createOrUpdateTdm();
                }
                return dataModel;
           }
      
           public void setChoosenEntities(List<GenericEntity> choosenEntities) {
                this.choosenEntities = choosenEntities;
           }
      
           public List<GenericEntity> getChoosenEntities() {
                return choosenEntities;
           }
           private ExtendedTableDataModel<GenericEntity> createOrUpdateTdm(){
                
                dataModel = new ExtendedTableDataModel<GenericEntity>(new DataProvider<GenericEntity>() {
      
                     private static final long serialVersionUID = 5054087821033164847L;
      
                     public Prestazione getItemByKey(Object key) {
                          for (GenericEntity genEntity : results) {
      
                               Prestazione prest = (Prestazione) genEntity;
                               Integer keyInteger = (Integer) key;
                               if (keyInteger.intValue() == ((Integer) (getKey(prest))).intValue()) {
                                    return prest;
                               }
                          }
                          return null;
                     }
      
                     public Object getKey(GenericEntity item) {
                          return item.getKey();
                     }
      
                     public int getRowCount() {
                          return results.size();
                     }
      
                     @Override
                     public List<GenericEntity> getItemsByRange(int arg0, int arg1) {
      
                          return results.subList(arg0, arg1);
                     }
      
                });
                return dataModel;
           }
      }
      

       

      And this is the XHTML page:

      <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:rich="http://richfaces.org/rich" 
                            xmlns:a4j="http://richfaces.org/a4j"
                            xmlns:c="http://java.sun.com/jsp/jstl/core" template="/template.xhtml">
      <a4j:form>
      <a4j:loadBundle var="msg" basename="messages"/>
              <h:panelGrid columns="2" title="#{msg.searchPerformance}" id="ricercaPrestazioni">
                   <h:outputLabel id="performanceName" for="performanceName" value="#{msg.performanceName}" />
                  <h:inputText value="#{searchBean.nomePrestazione}" id="nomePrestazione" />
                  <h:outputLabel id="perfomanceDescription" for="descrPrestazione" value="#{msg.descrizionePrestazione}" />
                  <h:inputText value="#{searchBean.descrizionePrestazione}" id="descrPrestazione" />
                  <a4j:commandButton value="#{msg.ricerca}" action="#{searchBean.doSearch}" reRender="table" />
              </h:panelGrid>
          </a4j:form>
          <rich:spacer height="7"/>
          <br />
          <a4j:form id="contenitoreDeiDati">
      <h:panelGrid columns="2" columnClasses="top , top" >
       <rich:extendedDataTable
                      value="#{searchBean.prestazioniDataModel}" var="prestazione" id="table"
                      width="580px" height="400px"
                      sortMode="#{searchBean.sortMode}"
                      selectionMode="#{searchBean.selectionMode}"
                      tableState="#{searchBean.tableState}"
                      selection="#{searchBean.selection}" >
                      <rich:column sortable="true" sortBy="#{prestazione.idPrestazione}" id="col_2"
                          filterBy="#{prestazione.idPrestazione}" filterEvent="onkeyup" width="170px"
                          label="#{msg.performanceId}">
                          <f:facet name="header">
                              <h:outputText value="#{msg.performanceId}" id="performanceId"/>
                          </f:facet>
                          <h:outputText value="#{prestazione.idPrestazione}" id="prestazioneidPrestazione1"/>
                      </rich:column>
                      <rich:column sortable="true" sortBy="#{prestazione.nomePrestazione}" id="prestazioneidPrestazione2"
                          filterBy="#{prestazione.nomePrestazione}" filterEvent="onkeyup" width="170px"
                          label="#{msg.performanceName}">
                          <f:facet name="header">
                              <h:outputText value="#{msg.performanceName}" id="performanceName2"/>
                          </f:facet>
                          <h:outputText value="#{prestazione.nomePrestazione}" id="nomePrestazione3"/>
                      </rich:column>
                      <rich:column sortable="true" sortBy="#{prestazione.puntina.indirizzo}" id="prestazioneIndirizzoPrestazione2"
                          filterBy="#{prestazione.puntina.indirizzo}" filterEvent="onkeyup" width="170px"
                          label="#{msg.performanceAddress}">
                          <f:facet name="header">
                              <h:outputText value="#{msg.performanceAddress}" id="performanceAddress2"/>
                          </f:facet>
                          <h:outputText value="#{prestazione.puntina.indirizzo}" id="indPrestazione3"/>
                      </rich:column>
                          <a4j:support reRender="selectiontable" id="extended_table_bean_take_selection"
                                              action="#{searchBean.doSelect}"
                                              event="onselectionchange" />
                  </rich:extendedDataTable>
        <h:panelGroup layout="block" style="width:90%">
                   <rich:panel>
                       <f:facet name="header">
                           <h:outputText value="#{msg.localization}" />
                       </f:facet> 
                       <c:foreach var="sel" items="${searchBean.choosenEntities}">
                       
                       </c:foreach>             
                       <rich:dataTable value="#{searchBean.choosenEntities}"
                           var="sel" id="selectiontable" >
                           <rich:column>
      
                           <rich:gmap gmapVar="map" zoom="#{sel.puntina.zoom}" gmapKey="#{sel.puntina.gmapkey}"  style="width:400px;height:400px"  id="gmap" lat="#{sel.puntina.latitudine}" long="#{sel.puntina.longitudine}"/>
                           <!--h:form >
                                   <a4j:jsFunction name="showPlace"  data="#{sel.puntina}" oncomplete="map.setCenter(new GLatLng(data.latitudine, data.longitudine),data.zoom)">
                                          <a4j:actionparam name="id" assignTo="#{sel.currentId}" />
                                   </a4j:jsFunction>
                                 </h:form-->
                           </rich:column>                                          
                       </rich:dataTable>
                   </rich:panel>
      </h:panelGroup>           
      </h:panelGrid>
      </a4j:form>
          <br />          
      </ui:composition>
      

       

      Everything works pretty good except one thing: i can't see the map. I can't understand the reason.

      Do you have any idea?

       

      Best regards,

      Angelo.

        • 1. Re: <rich:gmap in <rich:dataTable : google map is not displaied
          craig12980

          Hi i have seen that if i insert the tag <f:view contentType="text/html" /> the sample works but i must refresh the full page.

          I have this code:

          search.xhtml

          <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:rich="http://richfaces.org/rich" 
                                xmlns:a4j="http://richfaces.org/a4j"
                                template="/template.xhtml">
                                
                              
          <a4j:form>
                  <h:panelGrid columns="2" title="#{msg.searchPerformance}" id="ricercaPrestazioni">
                       <h:outputLabel id="performanceName" for="performanceName" value="#{msg.performanceName}" />
                      <h:inputText value="#{searchBean.nomePrestazione}" id="nomePrestazione" />
                      <h:outputLabel id="perfomanceDescription" for="descrPrestazione" value="#{msg.descrizionePrestazione}" />
                      <h:inputText value="#{searchBean.descrizionePrestazione}" id="descrPrestazione" />
                      <a4j:commandButton value="#{msg.ricerca}" action="#{searchBean.doSearch}" reRender="table" />
                  </h:panelGrid>
              </a4j:form>
              <rich:spacer height="7"/>
              <br />
              <a4j:form id="contenitoreDeiDati">
          <h:panelGrid columns="2" columnClasses="top , top" >
           <rich:extendedDataTable
                          value="#{searchBean.prestazioniDataModel}" var="prestazione" id="table"
                          width="580px" height="400px"
                          sortMode="#{searchBean.sortMode}"
                          selectionMode="#{searchBean.selectionMode}"
                          tableState="#{searchBean.tableState}"
                          selection="#{searchBean.selection}" >
                          <rich:column sortable="true" sortBy="#{prestazione.idPrestazione}" id="col_2"
                              filterBy="#{prestazione.idPrestazione}" filterEvent="onkeyup" width="170px"
                              label="#{msg.performanceId}">
                              <f:facet name="header">
                                  <h:outputText value="#{msg.performanceId}" id="performanceId"/>
                              </f:facet>
                              <h:outputText value="#{prestazione.idPrestazione}" id="prestazioneidPrestazione1"/>
                          </rich:column>
                          <rich:column sortable="true" sortBy="#{prestazione.nomePrestazione}" id="prestazioneidPrestazione2"
                              filterBy="#{prestazione.nomePrestazione}" filterEvent="onkeyup" width="170px"
                              label="#{msg.performanceName}">
                              <f:facet name="header">
                                  <h:outputText value="#{msg.performanceName}" id="performanceName2"/>
                              </f:facet>
                              <h:outputText value="#{prestazione.nomePrestazione}" id="nomePrestazione3"/>
                          </rich:column>
                          <rich:column sortable="true" sortBy="#{prestazione.puntina.indirizzo}" id="prestazioneIndirizzoPrestazione2"
                              filterBy="#{prestazione.puntina.indirizzo}" filterEvent="onkeyup" width="170px"
                              label="#{msg.performanceAddress}">
                              <f:facet name="header">
                                  <h:outputText value="#{msg.performanceAddress}" id="performanceAddress2"/>
                              </f:facet>
                              <h:outputText value="#{prestazione.puntina.indirizzo}" id="indPrestazione3"/>
                          </rich:column>
                              <a4j:support reRender="selectiontable" id="extended_table_bean_take_selection"
                                                  action="#{searchBean.doSelect}"
                                                  event="onselectionchange" />
                      </rich:extendedDataTable>
            <h:panelGroup layout="block" style="width:100%">
                       <rich:panel>
                           <f:facet name="header">
                               <h:outputText value="#{msg.localization}" />
                           </f:facet>             
                           <rich:dataTable value="#{searchBean.choosenEntities}"
                               var="sel" id="selectiontable" >
                               <rich:column>
                                   <f:view contentType="text/html" >
                               <rich:gmap gmapVar="map" 
                                              zoom="#{sel.puntina.zoom}" 
                                              gmapKey="#{sel.puntina.gmapkey}"  
                                              style="width:600px;height:400px" 
                                              lng="#{sel.puntina.longitudine}" 
                                              lat="#{sel.puntina.latitudine}" 
                                              id="gmap" 
                                              mapType="G_HYBRID_MAP" 
                                              oninit="showAddress('#{sel.puntina.indirizzo}')" >
                                               
                                                  <script type="text/javascript">
                                                      /*<![CDATA[*/
                                                            function showAddress(address) {
                                                              new GClientGeocoder().getLatLng(
                                                                address,
                                                                function(point) {
                                                                  if (!point) {
                                                                    alert(address + " not found");
                                                                  } else {
                                                                    map.setCenter(point, 13);
                                                                    var marker = new GMarker(point);
                                                                    map.addOverlay(marker);
                                                                    marker.openInfoWindowHtml(address);
                                                                  }//Fine else
                                                                }//Fine function
                                                              );//Fine getLangLat
                                                            }//fine showaddress
                                                      /*]]>*/
                                                  </script>                                    
                               </rich:gmap>
                               </f:view>
                               </rich:column>                                          
                           </rich:dataTable>
                       </rich:panel>
          </h:panelGroup>           
          </h:panelGrid>
          </a4j:form>
              <br />          
          </ui:composition>
          

          Well when i click on one element of the <rich:extendedDataTable component in google chrome and firefox i have a white page, in internet explorer nothing happens. On all the mentionated browser if i click the F5 button all works pretty good.

          Do you have any ideas on where i'm missing? This is destroying me

           

          Regards,

          Angelo.

          • 2. Re: <rich:gmap in <rich:dataTable : google map is not displaied
            nbelaevski

            Hi Angelo,

             

            rich:gmap component has limitation - it cannot be updated by AJAX.

            • 3. Re: <rich:gmap in <rich:dataTable : google map is not displaied
              craig12980

              Gosh....too sad...so what i need is:

               

              • Or open a new page or popup
              • Or try to use another taglibrary for googleMap (something like GMaps4JSF) and check if the tag admits ajax refreshes

              I'ld like the second one; do u know any good taglibrary?

               

              Thank you

              Angelo

              • 4. Re: <rich:gmap in <rich:dataTable : google map is not displaied
                nbelaevski
                This seems to be a limitation of GMap scripts themselves, not limitation of tag library, however you can try another one - maybe it provides some workaround for the problem.