You are viewing a plain text version of this content. The canonical link for it is here.
Posted to users@wicket.apache.org by Chris <ch...@gmx.at> on 2015/02/01 22:44:00 UTC
put Javascript in HTML body
Hi all,
I would like to use Leaflet JS library in order to display open street maps. According to this library, certain JS code has to be placed in the body element of the html underneath a div element, e.g.:
<body>
<div id="map"></div>
<script>
var map = L.map('map').setView([51.505, -0.09], 13);
L.tileLayer('https://{s}.tiles.mapbox.com/v3/{id}/{z}/{x}/{y}.png', {
maxZoom: 18,
attribution: 'Map data © <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, ' +
'<a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, ' +
'Imagery © <a href="http://mapbox.com">Mapbox</a>',
id: 'examples.map-i875mjb7'
}).addTo(map);
L.marker([51.5, -0.09]).addTo(map)
.bindPopup("<b>Hello world!</b><br />I am a popup.").openPopup();
L.circle([51.508, -0.11], 500, {
color: 'red',
fillColor: '#f03',
fillOpacity: 0.5
}).addTo(map).bindPopup("I am a circle.");
</script>
</body>
What is the best way to generate this code in wicket so that map makers can be set dynamically?
I tried to insert it via add(new Label("script“,“...“) but in this case, all the quotation marks are escaped in a wrong way (using \).
Thanks a lot, Chris
Re: put Javascript in HTML body
Posted by Martin Grigorov <mg...@apache.org>.
Hi,
You can extend OnDomReadyHeaderItem, e.g. MyOnDomReadyHeaderItem, and then
filter only instances of this type to be rendered in the <body>.
Martin Grigorov
Wicket Training and Consulting
https://twitter.com/mtgrigorov
On Mon, Feb 2, 2015 at 3:34 PM, Chris <ch...@gmx.at> wrote:
> Hi Martin, Shengche,
>
> thanks a lot!
>
> I used the approach as explained in
> http://wicket.apache.org/guide/guide/resources.html#resources_7 <
> http://wicket.apache.org/guide/guide/resources.html#resources_7> by
> providing a custom IHeaderResponseDecorator and using the Wicket container
> tag. Then I used the OnDomReadyHeaderItem.forScript() method to include the
> specific JavaScript code:
> @Override
> public void renderHead(IHeaderResponse response) {
> response.render(OnDomReadyHeaderItem.forScript(<JS CODE>);
> }
> Because of the HeaderResponseDecorator set in the init method of the
> application, the JS-code of all pages will be placed in the body.
>
> How can I adapt this method, so that by default, all JS-code is placed in
> the header, and only that of a certain page is put in the body tag?
>
> Thanks, Chris
>
>
>
>
> > Am 02.02.2015 um 08:05 schrieb Martin Grigorov <mg...@apache.org>:
> >
> > Hi,
> >
> > If you use Label then you should do: label.setEscapeModelStrings(true).
> >
> > But for your case I'd recommend using OnDomReadyHeaderItem.forScript()
> >
> > Martin Grigorov
> > Wicket Training and Consulting
> > https://twitter.com/mtgrigorov
> >
> > On Sun, Feb 1, 2015 at 11:44 PM, Chris <ch...@gmx.at> wrote:
> >
> >> Hi all,
> >>
> >> I would like to use Leaflet JS library in order to display open street
> >> maps. According to this library, certain JS code has to be placed in the
> >> body element of the html underneath a div element, e.g.:
> >>
> >> <body>
> >> <div id="map"></div>
> >> <script>
> >> var map = L.map('map').setView([51.505, -0.09], 13);
> >> L.tileLayer('https://{s}.tiles.mapbox.com/v3/{id}/{z}/{x}/{y}.png',
> {
> >> maxZoom: 18,
> >> attribution: 'Map data © <a href="http://openstreetmap.org
> ">OpenStreetMap</a>
> >> contributors, ' +
> >> '<a href="http://creativecommons.org/licenses/by-sa/2.0/
> ">CC-BY-SA</a>,
> >> ' +
> >> 'Imagery © <a href="http://mapbox.com">Mapbox</a>',
> >> id: 'examples.map-i875mjb7'
> >> }).addTo(map);
> >> L.marker([51.5, -0.09]).addTo(map)
> >> .bindPopup("<b>Hello world!</b><br />I am a
> >> popup.").openPopup();
> >> L.circle([51.508, -0.11], 500, {
> >> color: 'red',
> >> fillColor: '#f03',
> >> fillOpacity: 0.5
> >> }).addTo(map).bindPopup("I am a circle.");
> >> </script>
> >> </body>
> >>
> >> What is the best way to generate this code in wicket so that map makers
> >> can be set dynamically?
> >> I tried to insert it via add(new Label("script“,“...“) but in this case,
> >> all the quotation marks are escaped in a wrong way (using \).
> >>
> >> Thanks a lot, Chris
>
>
Re: put Javascript in HTML body
Posted by Chris <ch...@gmx.at>.
Hi Martin, Shengche,
thanks a lot!
I used the approach as explained in http://wicket.apache.org/guide/guide/resources.html#resources_7 <http://wicket.apache.org/guide/guide/resources.html#resources_7> by providing a custom IHeaderResponseDecorator and using the Wicket container tag. Then I used the OnDomReadyHeaderItem.forScript() method to include the specific JavaScript code:
@Override
public void renderHead(IHeaderResponse response) {
response.render(OnDomReadyHeaderItem.forScript(<JS CODE>);
}
Because of the HeaderResponseDecorator set in the init method of the application, the JS-code of all pages will be placed in the body.
How can I adapt this method, so that by default, all JS-code is placed in the header, and only that of a certain page is put in the body tag?
Thanks, Chris
> Am 02.02.2015 um 08:05 schrieb Martin Grigorov <mg...@apache.org>:
>
> Hi,
>
> If you use Label then you should do: label.setEscapeModelStrings(true).
>
> But for your case I'd recommend using OnDomReadyHeaderItem.forScript()
>
> Martin Grigorov
> Wicket Training and Consulting
> https://twitter.com/mtgrigorov
>
> On Sun, Feb 1, 2015 at 11:44 PM, Chris <ch...@gmx.at> wrote:
>
>> Hi all,
>>
>> I would like to use Leaflet JS library in order to display open street
>> maps. According to this library, certain JS code has to be placed in the
>> body element of the html underneath a div element, e.g.:
>>
>> <body>
>> <div id="map"></div>
>> <script>
>> var map = L.map('map').setView([51.505, -0.09], 13);
>> L.tileLayer('https://{s}.tiles.mapbox.com/v3/{id}/{z}/{x}/{y}.png', {
>> maxZoom: 18,
>> attribution: 'Map data © <a href="http://openstreetmap.org">OpenStreetMap</a>
>> contributors, ' +
>> '<a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>,
>> ' +
>> 'Imagery © <a href="http://mapbox.com">Mapbox</a>',
>> id: 'examples.map-i875mjb7'
>> }).addTo(map);
>> L.marker([51.5, -0.09]).addTo(map)
>> .bindPopup("<b>Hello world!</b><br />I am a
>> popup.").openPopup();
>> L.circle([51.508, -0.11], 500, {
>> color: 'red',
>> fillColor: '#f03',
>> fillOpacity: 0.5
>> }).addTo(map).bindPopup("I am a circle.");
>> </script>
>> </body>
>>
>> What is the best way to generate this code in wicket so that map makers
>> can be set dynamically?
>> I tried to insert it via add(new Label("script“,“...“) but in this case,
>> all the quotation marks are escaped in a wrong way (using \).
>>
>> Thanks a lot, Chris
Re: put Javascript in HTML body
Posted by Martin Grigorov <mg...@apache.org>.
Hi,
If you use Label then you should do: label.setEscapeModelStrings(true).
But for your case I'd recommend using OnDomReadyHeaderItem.forScript()
Martin Grigorov
Wicket Training and Consulting
https://twitter.com/mtgrigorov
On Sun, Feb 1, 2015 at 11:44 PM, Chris <ch...@gmx.at> wrote:
> Hi all,
>
> I would like to use Leaflet JS library in order to display open street
> maps. According to this library, certain JS code has to be placed in the
> body element of the html underneath a div element, e.g.:
>
> <body>
> <div id="map"></div>
> <script>
> var map = L.map('map').setView([51.505, -0.09], 13);
> L.tileLayer('https://{s}.tiles.mapbox.com/v3/{id}/{z}/{x}/{y}.png', {
> maxZoom: 18,
> attribution: 'Map data © <a href="http://openstreetmap.org">OpenStreetMap</a>
> contributors, ' +
> '<a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>,
> ' +
> 'Imagery © <a href="http://mapbox.com">Mapbox</a>',
> id: 'examples.map-i875mjb7'
> }).addTo(map);
> L.marker([51.5, -0.09]).addTo(map)
> .bindPopup("<b>Hello world!</b><br />I am a
> popup.").openPopup();
> L.circle([51.508, -0.11], 500, {
> color: 'red',
> fillColor: '#f03',
> fillOpacity: 0.5
> }).addTo(map).bindPopup("I am a circle.");
> </script>
> </body>
>
> What is the best way to generate this code in wicket so that map makers
> can be set dynamically?
> I tried to insert it via add(new Label("script“,“...“) but in this case,
> all the quotation marks are escaped in a wrong way (using \).
>
> Thanks a lot, Chris
Re: put Javascript in HTML body
Posted by Shengche Hsiao <sh...@gmail.com>.
Hello
You may check wicket-guide
http://wicket.apache.org/guide/guide/jsintegration.html
Simply override the page#renderHeader(IHeaderResponse response){
response.render(JavaScriptHeaderItem.forScript("your script here",null));
}
And may need to customize the output markup id to work.
On Mon, Feb 2, 2015 at 5:44 AM, Chris <ch...@gmx.at> wrote:
> Hi all,
>
> I would like to use Leaflet JS library in order to display open street
> maps. According to this library, certain JS code has to be placed in the
> body element of the html underneath a div element, e.g.:
>
> <body>
> <div id="map"></div>
> <script>
> var map = L.map('map').setView([51.505, -0.09], 13);
> L.tileLayer('https://{s}.tiles.mapbox.com/v3/{id}/{z}/{x}/{y}.png', {
> maxZoom: 18,
> attribution: 'Map data © <a href="http://openstreetmap.org">OpenStreetMap</a>
> contributors, ' +
> '<a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>,
> ' +
> 'Imagery © <a href="http://mapbox.com">Mapbox</a>',
> id: 'examples.map-i875mjb7'
> }).addTo(map);
> L.marker([51.5, -0.09]).addTo(map)
> .bindPopup("<b>Hello world!</b><br />I am a
> popup.").openPopup();
> L.circle([51.508, -0.11], 500, {
> color: 'red',
> fillColor: '#f03',
> fillOpacity: 0.5
> }).addTo(map).bindPopup("I am a circle.");
> </script>
> </body>
>
> What is the best way to generate this code in wicket so that map makers
> can be set dynamically?
> I tried to insert it via add(new Label("script“,“...“) but in this case,
> all the quotation marks are escaped in a wrong way (using \).
>
> Thanks a lot, Chris
--
----------------------------------------------------------------------->
We do this not because it is easy. We do this because it is hard.
----------------------------------------------------------------------->
ShengChe Hsiao
----------------------------------------------------------------------->
front713@gmail.com
front713@tc.edu.tw
----------------------------------------------------------------------->
VoIP : 070-910-2450
----------------------------------------------------------------------->