You are viewing a plain text version of this content. The canonical link for it is here.
Posted to users@tapestry.apache.org by Guerin Laurent <lg...@sopragroup.com> on 2012/02/25 12:58:53 UTC
RE : RE : tml parameter rendered into a JavaScript string
Hi Lance,
in fact, in my sample (Eiffel Tower example), i put html content into properties file but you're right : i agree that this could be easier to directly use block binding parameter or the GMap api support for passing the id of a
html element.
I'll try to add this feature in the next release.
Tanks for your feedback.
Laurent
________________________________________
De : Lance Java [lance.java@googlemail.com]
Date d'envoi : samedi 25 février 2012 11:49
À : Tapestry users
Objet : Re: RE : tml parameter rendered into a JavaScript string
Hi Laurent,
I took a look at your library and from what I can see, it is missing the
functionality that I want. It seems that each marker has an info property
which is a string containing the text to render in the info window. I would
like each marker's info window to contain complex html and I would like to
achieve this by passing a block (or perhaps a render command) to the gmap
component which will be used to render each marker's info window.
I have noticed that the google map marker api supports passing the id of a
html element instead of the text content to show for an info window. I
think I will explore the option of rendering a hidden div for each marker's
info window using a RenderCommand parameter and the MarkupWriter. I will
then pass the div id's to the gmap's javascript initializer so that the
info window div can be shown when a marker is clicked.
Unless, of course, someone can tell me how to use tapestry's templating
engine to render strings on the serverside which I can pass to the
javascript initializer. I'm thinking that tapestry must be doing this
somewhere in order for MultiZoneUpdate to work?
On 25 February 2012 06:54, Guerin Laurent <lg...@sopragroup.com> wrote:
> Hi Lance,
>
> with exanpe-t5-lib, we provide a such component with markers and HTML
> InfoWindows :
> http://exanpe-t5-lib.appspot.com/components/googlemap/example2
>
> If you want to build your own component, you can have a look at the source
> code :
>
> https://github.com/exanpe/exanpe-t5-lib/blob/master/src/main/java/fr/exanpe/t5/lib/components/GMap.java
>
> The JS part (l. 2809) :
>
> https://github.com/exanpe/exanpe-t5-lib/blob/master/src/main/resources/fr/exanpe/t5/lib/components/js/exanpe-t5-lib.js
>
> Laurent.
>
> ________________________________________
> De : Lance Java [lance.java@googlemail.com]
> Date d'envoi : vendredi 24 février 2012 17:37
> À : Tapestry users
> Objet : Re: tml parameter rendered into a JavaScript string
>
> It seems I'm having troubles explaining what it is I'm trying to do. I need
> an implementation for generateInfoWindowHtml() in the code below.
>
> @Import(library="mygooglemap.js")
> public class GoogleMap {
> @Inject
> JavaScriptSupport jsSupport;
>
> @Parameter(required=true)
> RenderCommand infoWindow;
>
> @Parameter(required=true)
> List<GoogleMapMarker> markers;
>
> @Parameter(required=true)
> double centerLatitude;
>
> @Parameter(required=true)
> double centerLongitude;
>
> @Parameter(required=true)
> int zoom;
>
>
> @SetupRender
> void setupRender() {
> JSONObject mapInitializer = createInitializerJsonObject();
> jsSupport.addScript("initGoogleMap(%s)", mapInitializer);
> }
>
> private JSONObject createInitializerJsonObject() {
> JSONObject init = new JSONObject();
> JSONArray markerInits = new JSONArray();
> for (GoogleMapMarker marker : markers) {
> JSONObject markerInit = new JSONObject();
> markerInit.put("latitude", marker.getLatitude());
> markerInit.put("longitude", marker.getLongitude());
> markerInit.put("infoWindowHtml",
> generateInfoWindowHtml(marker));
> }
> init.put("centerLatutude", centerLatitude);
> init.put("centerLongitude", centerLongitude);
> init.put("zoom", zoom);
> init.put("markers", markerInits);
>
> return init;
> }
>
> private String generateInfoWindowHtml(GoogleMapMarker marker) {
> // Use tapestry's template engine to generate html using
> marker and infoWindow
> }
>
> }
>
> ---------------------------------------------------------------------
> To unsubscribe, e-mail: users-unsubscribe@tapestry.apache.org
> For additional commands, e-mail: users-help@tapestry.apache.org
>
>
---------------------------------------------------------------------
To unsubscribe, e-mail: users-unsubscribe@tapestry.apache.org
For additional commands, e-mail: users-help@tapestry.apache.org
RE: tml parameter rendered into a JavaScript string
Posted by Guerin Laurent <lg...@sopragroup.com>.
Hi Lance,
We prefer keep the model like this as a matter of separation of concerns, and let the user fill the model with his own server side logic.
BTW, that didn't mean it's not possible to get a list of markers from a database.
You can loop over a list of markers and fetch the marker infos from a database or a lucene search result :
---
tml
---
<ex:gmap t:id="map1" latitude="48.869722" longitude="2.3075">
<t:loop source="markers" value="currentMarker">
<ex:gmapMarker id="currentMarker.id" title="currentMarker.title" latitude="currentMarker.latitude" longitude="currentMarker.longitude" info="currentMarker.info" />
</t:loop>
</ex:gmap>
---
Java
---
@Property
private GMapMarkerModel currentMarker;
public List<GMapMarkerModel> getMarkers()
{
List<GMapMarkerModel> list = new ArrayList<GMapMarkerModel>();
// Fill list from Lucene or Database
return list;
}
Laurent
-----Message d'origine-----
De : Lance Java [mailto:lance.java@googlemail.com]
Envoyé : lundi 27 février 2012 10:46
À : Tapestry users
Objet : Re: tml parameter rendered into a JavaScript string
Hi Laurent,
I think the normal use case for using a google map would be to get a list of markers from a database search or from a lucene search result. Using your current implementation this would mean storing html in the database which I'd like to avoid.
I would like to follow a similar pattern to the tapestry tree component where you do the following:
<t:tree t:id="tree" model="treeModel">
<p:label>
<t:if test="tree.node.leaf">
<t:eventlink event="leafClicked"
context="tree.node.value">${tree.node.label}</t:eventlink>
<p:else>
${tree.node.label}
</p:else>
</t:if>
</p:label>
</t:tree>
The tapestry tree component requires a treeModel. As it iterates the treeModel, it updates the "node" property. Each tree node has a value property which is of generic type T and is the actual data (hibernate
entity?) backing the treeNode which can be used to generate a custom label as I have done above.
http://tapestry.apache.org/5.3.1/apidocs/src-html/org/apache/tapestry5/corelib/components/Tree.html
As a suggestion for implementing this in your library, I would change GMapMarkerModel to GMapMarkerModel<T> and had a public T getValue(). Then I would change the GMap component to update the "currentMarker" property each time it iterates the list.
Then you could do something like:
---
tml
---
<t:gmap t:id="gmap" lat="..." lng="..." zoom="..." markers="markers">
<p:infowindow>
<div>${gmap.currentMarker.value.title}</div>
<div>
<img src="${gmap.currentMarker.value.image}" />
<div>${gmap.currentMarker.value.foo}</div>
<div>${gmap.currentMarker.value.bar}</div>
</div>
</p:infowindow>
</t:gmap>
---
java
---
@InjectComponent
@Property
private GMap gmap;
public List<GMapMarkerModel> getMarkers() {
return getMarkersFromLuceneOrDatabaseEtc();
}
Cheers,
Lance.
On Saturday, 25 February 2012, Guerin Laurent <lg...@sopragroup.com>
wrote:
> Hi Lance,
>
> in fact, in my sample (Eiffel Tower example), i put html content into
properties file but you're right : i agree that this could be easier to directly use block binding parameter or the GMap api support for passing the id of a
> html element.
> I'll try to add this feature in the next release.
>
> Tanks for your feedback.
>
> Laurent
>
> ________________________________________
> De : Lance Java [lance.java@googlemail.com] Date d'envoi : samedi 25
> février 2012 11:49 À : Tapestry users Objet : Re: RE : tml parameter
> rendered into a JavaScript string
>
> Hi Laurent,
>
> I took a look at your library and from what I can see, it is missing
> the functionality that I want. It seems that each marker has an info
> property which is a string containing the text to render in the info
> window. I
would
> like each marker's info window to contain complex html and I would
> like to achieve this by passing a block (or perhaps a render command)
> to the gmap component which will be used to render each marker's info window.
>
> I have noticed that the google map marker api supports passing the id
> of a html element instead of the text content to show for an info
> window. I think I will explore the option of rendering a hidden div
> for each
marker's
> info window using a RenderCommand parameter and the MarkupWriter. I
> will then pass the div id's to the gmap's javascript initializer so
> that the info window div can be shown when a marker is clicked.
>
> Unless, of course, someone can tell me how to use tapestry's
> templating engine to render strings on the serverside which I can pass
> to the javascript initializer. I'm thinking that tapestry must be
> doing this somewhere in order for MultiZoneUpdate to work?
>
>
> On 25 February 2012 06:54, Guerin Laurent <lg...@sopragroup.com> wrote:
>
>> Hi Lance,
>>
>> with exanpe-t5-lib, we provide a such component with markers and HTML
>> InfoWindows :
>> http://exanpe-t5-lib.appspot.com/components/googlemap/example2
>>
>> If you want to build your own component, you can have a look at the
source
>> code :
>>
>>
https://github.com/exanpe/exanpe-t5-lib/blob/master/src/main/java/fr/exanpe/t5/lib/components/GMap.java
>>
>> The JS part (l. 2809) :
>>
>>
https://github.com/exanpe/exanpe-t5-lib/blob/master/src/main/resources/fr/exanpe/t5/lib/components/js/exanpe-t5-lib.js
>>
>> Laurent.
>>
>> ________________________________________
>> De : Lance Java [lance.java@googlemail.com] Date d'envoi : vendredi
>> 24 février 2012 17:37 À : Tapestry users Objet : Re: tml parameter
>> rendered into a JavaScript string
>>
>> It seems I'm having troubles explaining what it is I'm trying to do.
>> I
need
>> an implementation for generateInfoWindowHtml() in the code below.
>>
>> @Import(library="mygooglemap.js")
>> public class GoogleMap {
>> @Inject
>> JavaScriptSupport jsSupport;
>>
>> @Parameter(required=true)
>> RenderCommand infoWindow;
>>
>> @Parameter(required=true)
>> List<GoogleMapMarker> markers;
>>
>> @Parameter(required=true)
>> double centerLatitude;
>>
>> @Parameter(required=true)
>> double centerLongitude;
>>
>> @Parameter(required=true)
>> int zoom;
>>
>>
>> @SetupRender
>> void setupRender() {
>> JSONObject mapInitializer = createInitializerJsonObject();
>> jsSupport.addScript("initGoogleMap(%s)", mapInitializer);
>> }
>>
>> private JSONObject createInitializerJsonObject() {
>> JSONObject init = new JSONObject();
>> JSONArray markerInits = new JSONArray();
>> for (GoogleMapMarker marker : markers) {
>> JSONObject markerInit = new JSONObject();
>> markerInit.put("latitude
---------------------------------------------------------------------
To unsubscribe, e-mail: users-unsubscribe@tapestry.apache.org
For additional commands, e-mail: users-help@tapestry.apache.org
Re: tml parameter rendered into a JavaScript string
Posted by Lance Java <la...@googlemail.com>.
Hi Laurent,
I think the normal use case for using a google map would be to get a list
of markers from a database search or from a lucene search result. Using
your current implementation this would mean storing html in the database
which I'd like to avoid.
I would like to follow a similar pattern to the tapestry tree component
where you do the following:
<t:tree t:id="tree" model="treeModel">
<p:label>
<t:if test="tree.node.leaf">
<t:eventlink event="leafClicked"
context="tree.node.value">${tree.node.label}</t:eventlink>
<p:else>
${tree.node.label}
</p:else>
</t:if>
</p:label>
</t:tree>
The tapestry tree component requires a treeModel. As it iterates the
treeModel, it updates the "node" property. Each tree node has a value
property which is of generic type T and is the actual data (hibernate
entity?) backing the treeNode which can be used to generate a custom label
as I have done above.
http://tapestry.apache.org/5.3.1/apidocs/src-html/org/apache/tapestry5/corelib/components/Tree.html
As a suggestion for implementing this in your library, I would change
GMapMarkerModel to GMapMarkerModel<T> and had a public T getValue(). Then I
would change the GMap component to update the "currentMarker" property each
time it iterates the list.
Then you could do something like:
---
tml
---
<t:gmap t:id="gmap" lat="..." lng="..." zoom="..." markers="markers">
<p:infowindow>
<div>${gmap.currentMarker.value.title}</div>
<div>
<img src="${gmap.currentMarker.value.image}" />
<div>${gmap.currentMarker.value.foo}</div>
<div>${gmap.currentMarker.value.bar}</div>
</div>
</p:infowindow>
</t:gmap>
---
java
---
@InjectComponent
@Property
private GMap gmap;
public List<GMapMarkerModel> getMarkers() {
return getMarkersFromLuceneOrDatabaseEtc();
}
Cheers,
Lance.
On Saturday, 25 February 2012, Guerin Laurent <lg...@sopragroup.com>
wrote:
> Hi Lance,
>
> in fact, in my sample (Eiffel Tower example), i put html content into
properties file but you're right : i agree that this could be easier to
directly use block binding parameter or the GMap api support for passing
the id of a
> html element.
> I'll try to add this feature in the next release.
>
> Tanks for your feedback.
>
> Laurent
>
> ________________________________________
> De : Lance Java [lance.java@googlemail.com]
> Date d'envoi : samedi 25 février 2012 11:49
> À : Tapestry users
> Objet : Re: RE : tml parameter rendered into a JavaScript string
>
> Hi Laurent,
>
> I took a look at your library and from what I can see, it is missing the
> functionality that I want. It seems that each marker has an info property
> which is a string containing the text to render in the info window. I
would
> like each marker's info window to contain complex html and I would like to
> achieve this by passing a block (or perhaps a render command) to the gmap
> component which will be used to render each marker's info window.
>
> I have noticed that the google map marker api supports passing the id of a
> html element instead of the text content to show for an info window. I
> think I will explore the option of rendering a hidden div for each
marker's
> info window using a RenderCommand parameter and the MarkupWriter. I will
> then pass the div id's to the gmap's javascript initializer so that the
> info window div can be shown when a marker is clicked.
>
> Unless, of course, someone can tell me how to use tapestry's templating
> engine to render strings on the serverside which I can pass to the
> javascript initializer. I'm thinking that tapestry must be doing this
> somewhere in order for MultiZoneUpdate to work?
>
>
> On 25 February 2012 06:54, Guerin Laurent <lg...@sopragroup.com> wrote:
>
>> Hi Lance,
>>
>> with exanpe-t5-lib, we provide a such component with markers and HTML
>> InfoWindows :
>> http://exanpe-t5-lib.appspot.com/components/googlemap/example2
>>
>> If you want to build your own component, you can have a look at the
source
>> code :
>>
>>
https://github.com/exanpe/exanpe-t5-lib/blob/master/src/main/java/fr/exanpe/t5/lib/components/GMap.java
>>
>> The JS part (l. 2809) :
>>
>>
https://github.com/exanpe/exanpe-t5-lib/blob/master/src/main/resources/fr/exanpe/t5/lib/components/js/exanpe-t5-lib.js
>>
>> Laurent.
>>
>> ________________________________________
>> De : Lance Java [lance.java@googlemail.com]
>> Date d'envoi : vendredi 24 février 2012 17:37
>> À : Tapestry users
>> Objet : Re: tml parameter rendered into a JavaScript string
>>
>> It seems I'm having troubles explaining what it is I'm trying to do. I
need
>> an implementation for generateInfoWindowHtml() in the code below.
>>
>> @Import(library="mygooglemap.js")
>> public class GoogleMap {
>> @Inject
>> JavaScriptSupport jsSupport;
>>
>> @Parameter(required=true)
>> RenderCommand infoWindow;
>>
>> @Parameter(required=true)
>> List<GoogleMapMarker> markers;
>>
>> @Parameter(required=true)
>> double centerLatitude;
>>
>> @Parameter(required=true)
>> double centerLongitude;
>>
>> @Parameter(required=true)
>> int zoom;
>>
>>
>> @SetupRender
>> void setupRender() {
>> JSONObject mapInitializer = createInitializerJsonObject();
>> jsSupport.addScript("initGoogleMap(%s)", mapInitializer);
>> }
>>
>> private JSONObject createInitializerJsonObject() {
>> JSONObject init = new JSONObject();
>> JSONArray markerInits = new JSONArray();
>> for (GoogleMapMarker marker : markers) {
>> JSONObject markerInit = new JSONObject();
>> markerInit.put("latitude