Thread: [Gwt-openlayers-users] Handler Hover (Control), how?

>>> THIS PROJECT HAS MOVED, SEE DESCRIPTION BELOW <<<

Brought to you by: ahhughes, ecommand, egunay

gwt-openlayers-users

[Gwt-openlayers-users] Handler Hover (Control), how?

From: Andrew H. <ahh...@gm...> - 2010-11-02 12:45:43

Hi Everyone,

We have a requirement that we need to register a hover handler on a map.
GWT-OpenLayers can't do this yet and the native javascript has me a little
confused... I have a simple javascript example working below. This seems
like it would be complex to wrap, advice would be most appreciated.



<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <link rel="stylesheet" href="
http://openlayers.org/dev/theme/default/style.css" type="text/css" />
        <link rel="stylesheet" href="
http://openlayers.org/dev/examples/style.css" type="text/css" />
        <style type="text/css">
            #map {
                width: 640px;
                height: 480px;
            }
        </style>
        <script src="http://openlayers.org/dev/lib/Firebug/firebug.js
"></script>
        <script src="http://openlayers.org/dev/OpenLayers.js"></script>
        <script type="text/javascript">

            *OpenLayers.Control.Hover = OpenLayers.Class(OpenLayers.Control,
{                *
*                defaultHandlerOptions: {*
*                    'delay': 500,*
*                    'pixelTolerance': null,*
*                    'stopMove': false*
*                },*
* *
*                initialize: function(options) {*
*                    this.handlerOptions = OpenLayers.Util.extend(*
*                        {}, this.defaultHandlerOptions*
*                    );*
*                    OpenLayers.Control.prototype.initialize.apply(*
*                        this, arguments*
*                    ); *
*                    this.handler = new OpenLayers.Handler.Hover(*
*                        this,*
*                        {'pause': this.onPause, 'move': this.onMove},*
*                        this.handlerOptions*
*                    );*
*                }, *
* *
*                onPause: function(evt) {*
*                    var output = document.getElementById('output');*
*                    var msg = 'pause ' + evt.xy;*
*                    output.value = output.value + msg + "\r\n";*
*                },*
* *
*                onMove: function(evt) {*
*                    // do something... like cancel*
*                }*
*            });*

            var map;

            function init(){
                map = new OpenLayers.Map('map');
                var layer = new OpenLayers.Layer.WMS('OpenLayers WMS','
http://vmap0.tiles.osgeo.org/wms/vmap0',{layers: 'basic'});
                map.addLayers([layer]);
*var hoverControl = new OpenLayers.Control.Hover({*
*                    handlerOptions: {*
*                        'delay': 500*
*                    }*
*                }); *
map.addControl(hoverControl);
                map.zoomToMaxExtent();
hoverControl.activate();
            }

        </script>
    </head>
    <body onload="init()">
        <div id="map" class="smallmap"></div>
<textarea class="output" id="output"></textarea></td>
    </body>
</html>

Re: [Gwt-openlayers-users] Handler Hover (Control), how?

From: Edwin C. <com...@gm...> - 2010-11-02 19:38:50

Hi Andrew,

The example you send works nicely, so I wonder what you are confused
about in native JavaScript. Seems a perfectly fine example of a custom
Handler.

A way to incorporate this handler in GWT-OL is by adding the code for
the Hover control in a javascript file and distribute that with GWT-OL
and wrap the native javascript like we wrap other Controls.

There are already some javascript utility functions which are in:
gwt-openlayers-client/src/main/java/org/gwtopenmaps/openlayers/public/js/gwt-openlayers/utils.js

Maybe we could put a ol-extensions.js file in there, and also make
clear in the GWT wrapper class namespace that it uses stuff in this
extensions file.

Another way would be to distribute the handler code with
GWT-OpenLayers and explain in the wrapper Javadoc that the js file
needs to be loaded in the page to use that specific wrapper class.

A combination of Javascript and GWT wrapper seems the way to go, since
I don't see a way to provide a Control in native GWT (you would always
need JSNI to add functions to the Control as fas as I can see).

Greetings,
Edwin

On 2 November 2010 13:45, Andrew Hughes <ahh...@gm...> wrote:
> Hi Everyone,
> We have a requirement that we need to register a hover handler on a map.
> GWT-OpenLayers can't do this yet and the native javascript has me a little
> confused... I have a simple javascript example working below. This seems
> like it would be complex to wrap, advice would be most appreciated.
>
>
> <html xmlns="http://www.w3.org/1999/xhtml">
>     <head>
>         <link rel="stylesheet"
> href="http://openlayers.org/dev/theme/default/style.css" type="text/css" />
>         <link rel="stylesheet"
> href="http://openlayers.org/dev/examples/style.css" type="text/css" />
>
>         <style type="text/css">
>             #map {
>                 width: 640px;
>                 height: 480px;
>             }
>         </style>
>         <script
> src="http://openlayers.org/dev/lib/Firebug/firebug.js"></script>
>         <script src="http://openlayers.org/dev/OpenLayers.js"></script>
>         <script type="text/javascript">
>
>             OpenLayers.Control.Hover = OpenLayers.Class(OpenLayers.Control,
> {
>                 defaultHandlerOptions: {
>                     'delay': 500,
>                     'pixelTolerance': null,
>                     'stopMove': false
>                 },
>
>                 initialize: function(options) {
>                     this.handlerOptions = OpenLayers.Util.extend(
>                         {}, this.defaultHandlerOptions
>                     );
>                     OpenLayers.Control.prototype.initialize.apply(
>                         this, arguments
>                     );
>                     this.handler = new OpenLayers.Handler.Hover(
>                         this,
>                         {'pause': this.onPause, 'move': this.onMove},
>                         this.handlerOptions
>                     );
>                 },
>
>                 onPause: function(evt) {
>                     var output = document.getElementById('output');
>                     var msg = 'pause ' + evt.xy;
>                     output.value = output.value + msg + "\r\n";
>                 },
>
>                 onMove: function(evt) {
>                     // do something... like cancel
>                 }
>             });
>
>             var map;
>
>             function init(){
>                 map = new OpenLayers.Map('map');
>                 var layer = new OpenLayers.Layer.WMS('OpenLayers
> WMS','http://vmap0.tiles.osgeo.org/wms/vmap0',{layers: 'basic'});
>                 map.addLayers([layer]);
> var hoverControl = new OpenLayers.Control.Hover({
>                     handlerOptions: {
>                         'delay': 500
>                     }
>                 });
> map.addControl(hoverControl);
>                 map.zoomToMaxExtent();
> hoverControl.activate();
>             }
>
>         </script>
>     </head>
>     <body onload="init()">
>         <div id="map" class="smallmap"></div>
> <textarea class="output" id="output"></textarea></td>
>     </body>
> </html>
>
>
> ------------------------------------------------------------------------------
> Nokia and AT&T present the 2010 Calling All Innovators-North America contest
> Create new apps & games for the Nokia N8 for consumers in  U.S. and Canada
> $10 million total in prizes - $4M cash, 500 devices, nearly $6M in marketing
> Develop with Nokia Qt SDK, Web Runtime, or Java and Publish to Ovi Store
> http://p.sf.net/sfu/nokia-dev2dev
> _______________________________________________
> Gwt-openlayers-users mailing list
> Gwt...@li...
> https://lists.sourceforge.net/lists/listinfo/gwt-openlayers-users
>
>

Re: [Gwt-openlayers-users] Handler Hover (Control), how?

From: Andrew H. <ahh...@gm...> - 2010-11-03 23:23:01

Getting close but not yet, I think my native javascript is fundementally
flawed... says "OpenLayers is undefined".... perhaps I am missing some
$wnd.* somewhere :'( Any idea's? Sorry to bug people...

------------------------------------------------------------------------------------

public class HoverControl extends Control {

    public interface HoverControlListener {
        void onPause(JSObject evt);
        void onMove(JSObject evt);
    }

    protected HoverControl(JSObject element) {
        super(element);
    }

    public HoverControl(HoverControlListener listener) {
        this(HoverControlImpl.create(listener));
    }

    public static HoverControl narrowToHoverControl(JSObject element) {
        return (element == null) ? null: new HoverControl(element);
    }

}

------------------------------------------------------------------------------------

class HoverControlImpl {

    public static native JSObject create(HoverControl.HoverControlListener
callback) /*-{
        OpenLayers.Control.Hover = OpenLayers.Class(OpenLayers.Control, {

                defaultHandlerOptions: {
                    'delay': 500,
                    'pixelTolerance': null,
                    'stopMove': false
                },

                initialize: function(options) {
                    this.handlerOptions = OpenLayers.Util.extend(
                        {}, this.defaultHandlerOptions
                    );
                    OpenLayers.Control.prototype.initialize.apply(
                        this, arguments
                    );
                    this.handler = new OpenLayers.Handler.Hover(
                        this,
                        {'pause': this.onPause, 'move': this.onMove},
                        this.handlerOptions
                    );
                },

                onPause: function(evt) {

 callback.@com.acme.client.hover.HoverControl.HoverControlListener
::onPause(Lorg/gwtopenmaps/openlayers/client/util/JSObject;)(evt);
                },

                onMove: function(evt) {

 callback.@com.acme.client.hover.HoverControl.HoverControlListener
::onPause(Lorg/gwtopenmaps/openlayers/client/util/JSObject;)(evt);
                }
            });
            return new $wnd.OpenLayers.Control.Hover();
    }-*/;

}

------------------------------------------------------------------------------------



On Wed, Nov 3, 2010 at 6:08 AM, Edwin Commandeur <com...@gm...
> wrote:

> Hi Andrew,
>
> The example you send works nicely, so I wonder what you are confused
> about in native JavaScript. Seems a perfectly fine example of a custom
> Handler.
>
> A way to incorporate this handler in GWT-OL is by adding the code for
> the Hover control in a javascript file and distribute that with GWT-OL
> and wrap the native javascript like we wrap other Controls.
>
> There are already some javascript utility functions which are in:
>
> gwt-openlayers-client/src/main/java/org/gwtopenmaps/openlayers/public/js/gwt-openlayers/utils.js
>
> Maybe we could put a ol-extensions.js file in there, and also make
> clear in the GWT wrapper class namespace that it uses stuff in this
> extensions file.
>
> Another way would be to distribute the handler code with
> GWT-OpenLayers and explain in the wrapper Javadoc that the js file
> needs to be loaded in the page to use that specific wrapper class.
>
> A combination of Javascript and GWT wrapper seems the way to go, since
> I don't see a way to provide a Control in native GWT (you would always
> need JSNI to add functions to the Control as fas as I can see).
>
> Greetings,
> Edwin
>
> On 2 November 2010 13:45, Andrew Hughes <ahh...@gm...> wrote:
> > Hi Everyone,
> > We have a requirement that we need to register a hover handler on a map.
> > GWT-OpenLayers can't do this yet and the native javascript has me a
> little
> > confused... I have a simple javascript example working below. This seems
> > like it would be complex to wrap, advice would be most appreciated.
> >
> >
> > <html xmlns="http://www.w3.org/1999/xhtml">
> >     <head>
> >         <link rel="stylesheet"
> > href="http://openlayers.org/dev/theme/default/style.css" type="text/css"
> />
> >         <link rel="stylesheet"
> > href="http://openlayers.org/dev/examples/style.css" type="text/css" />
> >
> >         <style type="text/css">
> >             #map {
> >                 width: 640px;
> >                 height: 480px;
> >             }
> >         </style>
> >         <script
> > src="http://openlayers.org/dev/lib/Firebug/firebug.js"></script>
> >         <script src="http://openlayers.org/dev/OpenLayers.js"></script>
> >         <script type="text/javascript">
> >
> >             OpenLayers.Control.Hover =
> OpenLayers.Class(OpenLayers.Control,
> > {
> >                 defaultHandlerOptions: {
> >                     'delay': 500,
> >                     'pixelTolerance': null,
> >                     'stopMove': false
> >                 },
> >
> >                 initialize: function(options) {
> >                     this.handlerOptions = OpenLayers.Util.extend(
> >                         {}, this.defaultHandlerOptions
> >                     );
> >                     OpenLayers.Control.prototype.initialize.apply(
> >                         this, arguments
> >                     );
> >                     this.handler = new OpenLayers.Handler.Hover(
> >                         this,
> >                         {'pause': this.onPause, 'move': this.onMove},
> >                         this.handlerOptions
> >                     );
> >                 },
> >
> >                 onPause: function(evt) {
> >                     var output = document.getElementById('output');
> >                     var msg = 'pause ' + evt.xy;
> >                     output.value = output.value + msg + "\r\n";
> >                 },
> >
> >                 onMove: function(evt) {
> >                     // do something... like cancel
> >                 }
> >             });
> >
> >             var map;
> >
> >             function init(){
> >                 map = new OpenLayers.Map('map');
> >                 var layer = new OpenLayers.Layer.WMS('OpenLayers
> > WMS','http://vmap0.tiles.osgeo.org/wms/vmap0',{layers: 'basic'});
> >                 map.addLayers([layer]);
> > var hoverControl = new OpenLayers.Control.Hover({
> >                     handlerOptions: {
> >                         'delay': 500
> >                     }
> >                 });
> > map.addControl(hoverControl);
> >                 map.zoomToMaxExtent();
> > hoverControl.activate();
> >             }
> >
> >         </script>
> >     </head>
> >     <body onload="init()">
> >         <div id="map" class="smallmap"></div>
> > <textarea class="output" id="output"></textarea></td>
> >     </body>
> > </html>
> >
> >
> >
> ------------------------------------------------------------------------------
> > Nokia and AT&T present the 2010 Calling All Innovators-North America
> contest
> > Create new apps & games for the Nokia N8 for consumers in  U.S. and
> Canada
> > $10 million total in prizes - $4M cash, 500 devices, nearly $6M in
> marketing
> > Develop with Nokia Qt SDK, Web Runtime, or Java and Publish to Ovi Store
> > http://p.sf.net/sfu/nokia-dev2dev
> > _______________________________________________
> > Gwt-openlayers-users mailing list
> > Gwt...@li...
> > https://lists.sourceforge.net/lists/listinfo/gwt-openlayers-users
> >
> >
>

Re: [Gwt-openlayers-users] Handler Hover (Control), how?

From: Edwin C. <com...@gm...> - 2010-11-04 19:49:50

Hi Andrew,

Every place where you refer to an object that has been placed on the
window you need $wnd , so that is everywhere where you reference
OpenLayers.something it should be $wnd.OpenLayers.something.

Greetings,
Edwin

On 4 November 2010 00:22, Andrew Hughes <ahh...@gm...> wrote:
> Getting close but not yet, I think my native javascript is fundementally
> flawed... says "OpenLayers is undefined".... perhaps I am missing some
> $wnd.* somewhere :'( Any idea's? Sorry to bug people...
> ------------------------------------------------------------------------------------
> public class HoverControl extends Control {
>     public interface HoverControlListener {
>         void onPause(JSObject evt);
>         void onMove(JSObject evt);
>     }
>     protected HoverControl(JSObject element) {
>         super(element);
>     }
>     public HoverControl(HoverControlListener listener) {
>         this(HoverControlImpl.create(listener));
>     }
>     public static HoverControl narrowToHoverControl(JSObject element) {
>         return (element == null) ? null: new HoverControl(element);
>     }
> }
> ------------------------------------------------------------------------------------
> class HoverControlImpl {
>     public static native JSObject create(HoverControl.HoverControlListener
> callback) /*-{
>         OpenLayers.Control.Hover = OpenLayers.Class(OpenLayers.Control, {
>
>                 defaultHandlerOptions: {
>                     'delay': 500,
>                     'pixelTolerance': null,
>                     'stopMove': false
>                 },
>
>                 initialize: function(options) {
>                     this.handlerOptions = OpenLayers.Util.extend(
>                         {}, this.defaultHandlerOptions
>                     );
>                     OpenLayers.Control.prototype.initialize.apply(
>                         this, arguments
>                     );
>                     this.handler = new OpenLayers.Handler.Hover(
>                         this,
>                         {'pause': this.onPause, 'move': this.onMove},
>                         this.handlerOptions
>                     );
>                 },
>
>                 onPause: function(evt) {
>
>  callback.@com.acme.client.hover.HoverControl.HoverControlListener::onPause(Lorg/gwtopenmaps/openlayers/client/util/JSObject;)(evt);
>                 },
>
>                 onMove: function(evt) {
>
>  callback.@com.acme.client.hover.HoverControl.HoverControlListener::onPause(Lorg/gwtopenmaps/openlayers/client/util/JSObject;)(evt);
>                 }
>             });
>             return new $wnd.OpenLayers.Control.Hover();
>     }-*/;
>
> }
> ------------------------------------------------------------------------------------
>
>
> On Wed, Nov 3, 2010 at 6:08 AM, Edwin Commandeur
> <com...@gm...> wrote:
>>
>> Hi Andrew,
>>
>> The example you send works nicely, so I wonder what you are confused
>> about in native JavaScript. Seems a perfectly fine example of a custom
>> Handler.
>>
>> A way to incorporate this handler in GWT-OL is by adding the code for
>> the Hover control in a javascript file and distribute that with GWT-OL
>> and wrap the native javascript like we wrap other Controls.
>>
>> There are already some javascript utility functions which are in:
>>
>> gwt-openlayers-client/src/main/java/org/gwtopenmaps/openlayers/public/js/gwt-openlayers/utils.js
>>
>> Maybe we could put a ol-extensions.js file in there, and also make
>> clear in the GWT wrapper class namespace that it uses stuff in this
>> extensions file.
>>
>> Another way would be to distribute the handler code with
>> GWT-OpenLayers and explain in the wrapper Javadoc that the js file
>> needs to be loaded in the page to use that specific wrapper class.
>>
>> A combination of Javascript and GWT wrapper seems the way to go, since
>> I don't see a way to provide a Control in native GWT (you would always
>> need JSNI to add functions to the Control as fas as I can see).
>>
>> Greetings,
>> Edwin
>>
>> On 2 November 2010 13:45, Andrew Hughes <ahh...@gm...> wrote:
>> > Hi Everyone,
>> > We have a requirement that we need to register a hover handler on a map.
>> > GWT-OpenLayers can't do this yet and the native javascript has me a
>> > little
>> > confused... I have a simple javascript example working below. This seems
>> > like it would be complex to wrap, advice would be most appreciated.
>> >
>> >
>> > <html xmlns="http://www.w3.org/1999/xhtml">
>> >     <head>
>> >         <link rel="stylesheet"
>> > href="http://openlayers.org/dev/theme/default/style.css" type="text/css"
>> > />
>> >         <link rel="stylesheet"
>> > href="http://openlayers.org/dev/examples/style.css" type="text/css" />
>> >
>> >         <style type="text/css">
>> >             #map {
>> >                 width: 640px;
>> >                 height: 480px;
>> >             }
>> >         </style>
>> >         <script
>> > src="http://openlayers.org/dev/lib/Firebug/firebug.js"></script>
>> >         <script src="http://openlayers.org/dev/OpenLayers.js"></script>
>> >         <script type="text/javascript">
>> >
>> >             OpenLayers.Control.Hover =
>> > OpenLayers.Class(OpenLayers.Control,
>> > {
>> >                 defaultHandlerOptions: {
>> >                     'delay': 500,
>> >                     'pixelTolerance': null,
>> >                     'stopMove': false
>> >                 },
>> >
>> >                 initialize: function(options) {
>> >                     this.handlerOptions = OpenLayers.Util.extend(
>> >                         {}, this.defaultHandlerOptions
>> >                     );
>> >                     OpenLayers.Control.prototype.initialize.apply(
>> >                         this, arguments
>> >                     );
>> >                     this.handler = new OpenLayers.Handler.Hover(
>> >                         this,
>> >                         {'pause': this.onPause, 'move': this.onMove},
>> >                         this.handlerOptions
>> >                     );
>> >                 },
>> >
>> >                 onPause: function(evt) {
>> >                     var output = document.getElementById('output');
>> >                     var msg = 'pause ' + evt.xy;
>> >                     output.value = output.value + msg + "\r\n";
>> >                 },
>> >
>> >                 onMove: function(evt) {
>> >                     // do something... like cancel
>> >                 }
>> >             });
>> >
>> >             var map;
>> >
>> >             function init(){
>> >                 map = new OpenLayers.Map('map');
>> >                 var layer = new OpenLayers.Layer.WMS('OpenLayers
>> > WMS','http://vmap0.tiles.osgeo.org/wms/vmap0',{layers: 'basic'});
>> >                 map.addLayers([layer]);
>> > var hoverControl = new OpenLayers.Control.Hover({
>> >                     handlerOptions: {
>> >                         'delay': 500
>> >                     }
>> >                 });
>> > map.addControl(hoverControl);
>> >                 map.zoomToMaxExtent();
>> > hoverControl.activate();
>> >             }
>> >
>> >         </script>
>> >     </head>
>> >     <body onload="init()">
>> >         <div id="map" class="smallmap"></div>
>> > <textarea class="output" id="output"></textarea></td>
>> >     </body>
>> > </html>
>> >
>> >
>> >
>> > ------------------------------------------------------------------------------
>> > Nokia and AT&T present the 2010 Calling All Innovators-North America
>> > contest
>> > Create new apps & games for the Nokia N8 for consumers in  U.S. and
>> > Canada
>> > $10 million total in prizes - $4M cash, 500 devices, nearly $6M in
>> > marketing
>> > Develop with Nokia Qt SDK, Web Runtime, or Java and Publish to Ovi Store
>> > http://p.sf.net/sfu/nokia-dev2dev
>> > _______________________________________________
>> > Gwt-openlayers-users mailing list
>> > Gwt...@li...
>> > https://lists.sourceforge.net/lists/listinfo/gwt-openlayers-users
>> >
>> >
>
>