ajax call to JSF 2.0 backing beans from map

[Ukyo Virgden]

Hi,

Is it possible to ajaxify valueChangeListener events with JSF 2.0
ajax library?

I've got a map, a marker and a backing bean called locationManager.
What I'm trying to achieve is to dynamically render
the "coords" group whenever the marker location changes.

<m:map id="map" jsVariable="map" width="640px" height="480px"
latitude="#{locationManager.lat}"
longitude="#{locationManager.lng}" zoom="14">
<m:marker id="cPoint" jsVariable="cPoint" draggable="true"
submitOnValueChange="true"
valueChangeListener="#{locationManager.rangeChanged}"/>
</m:map>

<h:panelGroup id="coords">
lat: <h:outputText id="lat" value="#{locationManager.lat}"/>
<br/>
lng: <h:outputText id="lon" value="#{locationManager.lng}"/>
</h:panelGroup>

I can think of two ways to do that.

1- Add an m:eventlistener to marker and point it to a javascript
function and make it call the bean through jsf.ajax.request
2- using some <f:ajax> tag ajaxify the valueChangeListener.

Any idea how to achieve this?

Thanks in advance,
Ukyo

--
You received this message because you are subscribed to the Google Groups "gmaps4jsf-dev" group.
To post to this group, send email to gmaps4...@googlegroups.com.
To unsubscribe from this group, send email to gmaps4jsf-de...@googlegroups.com.
For more options, visit this group at http://groups.google.com/group/gmaps4jsf-dev?hl=en.

[Hazem Saleh]

The only way till now is the JavaScript approach.
However, we are working on: http://code.google.com/p/gmaps4jsf/issues/detail?id=109
To support the <f:ajax> tag with the marker events.

--
Hazem Ahmed Saleh Ahmed

Author of (The Definitive Guide to Apache MyFaces and Facelets):
http://www.amazon.com/Definitive-Guide-Apache-MyFaces-Facelets/dp/1590597370
http://www.amazon.com/-/e/B002M052KY

Web blog: http://hazems.blogetery.com/

[Web 2.0] Mashups Integration with JSF:
http://code.google.com/p/mashups4jsf/

[Ukyo Virgden]

Is there any example for the javascript approach?

[Hazem Saleh]

You will use the <m:eventListener>[1] to define a client side event on the marker and use it to send your XHR.

[1] http://www.mashups4jsf.com/gmaps4jsf-examples/pages/mapEvents.jsp.source

[Ukyo Virgden]

Well, that part I figured out myself :) The troubling part is how to submit the ajax call with JSF 2.0 javascript library. I think I'm getting somewhere with my trials, I'll share as soon as I accomplish that.

Thanks, 

Ukyo

[Hazem Saleh]

Yes, it is done in GMaps4JSF 3.0.0, Ajaxified marker actions:
http://www.mashups4jsf.com/gmaps4jsf-examples2-3.0.0/pages/markersAjax.xhtml

It is completely complaint with the JSF 2.0 Ajax model.

On Sat, Apr 13, 2013 at 1:46 AM, <jdpay...@gmail.com> wrote:

Any updates on how to do this?

Thanks

Jeff

To unsubscribe from this group and stop receiving emails from it, send an email to gmaps4jsf-de...@googlegroups.com.

To post to this group, send email to gmaps4...@googlegroups.com.

Visit this group at http://groups.google.com/group/gmaps4jsf-dev?hl=en.

For more options, visit https://groups.google.com/groups/opt_out.
 
 

--

Hazem Ahmed Saleh Ahmed

Author of JavaScript Unit Testing book:
http://www.amazon.com/dp/1782160620/

Co-author of (The Definitive Guide to Apache MyFaces and Facelets) book:
http://www.amazon.com/-/e/B002M052KY

DeveloperWorks Contributing Author
https://www.ibm.com/developerworks/mydeveloperworks/blogs/hazem/entry/ibm_developerworks_contributing_author?lang=en_us

An Apache committer, IBMer, and a technical speaker

Twitter: http://www.twitter.com/hazems

[Hazem Saleh]

In order to update the map, it has to be redrawn with the specified values in the attributes.

In order to implement your desired behavior, you need to save the changed map zoom in a JSF hidden field whose value is for example #(bean.zoom}, and then set this expression in the zoom attributes as follows (zoom="#{bean.zoom}").

In order to save the map zoom, You can listen to the map zoom changed event and then save its value in the hidden field:
https://developers.google.com/maps/documentation/javascript/events#EventListeners

It is about two lines of JavaScript code.

On Sat, Apr 13, 2013 at 2:04 AM, <jdpay...@gmail.com> wrote:

Thanks for your quick reply.  I don't think I asked the question correctly, thanks for your patience.  I'm looking to have my map display 0 to N markers depending on table selection.

<m:map id="eventmap" width="800px" height="600px" latitude="#{map.latitude}" longitude="#{map.longitude}"

                        jsVariable="eventmap" zoom="2"

                        partiallyTriggered="true"

                        actionListener="#{map.handleMapClick}">

               <a4j:repeat id="markers" var="event" value="#{PackageController.events}">

                           <m:marker latitude="32.0" longitude="-117.0">

                           <m:htmlInformationWindow htmlText="#{event.parentId}" />

                           </m:marker>

                       </a4j:repeat>

            </m:map>

The bean has 0 to N events to be drawn.  A data table uses:

<a4j:ajax execute="@form" event="selectionchange" listener="#{PackageController.selectionListener}"

                  render=":eventtable,:markers"/>

To render the markers.  My eventtable is updated by the markers and/or map are not.  If I change the render tag like so:

<a4j:ajax execute="@form" event="selectionchange" listener="#{PackageController.selectionListener}"

                  render=":eventtable,:eventmap"/>

It works as desired, except for the unpleasing fact that the map rezooms to world view and not where the user zoomed to.

Any advice, and thank you for your time.

Jeff