onFocus and OnBlur

~ paPus ~

unread,

Mar 4, 2011, 11:10:20 AM3/4/11

to lib-gwt-svg

Hi!

I've been trying to add an onFocus and onBlur to the browser window
(or the svgElement or svgDocument or body or html, whatever), with no
luck.
Does anyone know how to call a function upon switching between browser
windows (or minimizing or leaving the browser window): upon loosing or
gaining the focus of the current document.

I have tried this and other things, without success:

doc.addHandler(new FocusHandler()
{
@Override
public void onFocus(FocusEvent event)
{
System.out.println("focus");
}
}, FocusEvent.getType());

Thanks,
Lőrinc

Lukas Laag

unread,

Mar 9, 2011, 1:10:09 PM3/9/11

to lib-g...@googlegroups.com

Hi Lőrinc,

I do not think that onfocus and onblur are supported by SVG (see
http://www.w3.org/TR/SVG11/interact.html#SVGEvents). For some reason,
SVG seems to have events of its own (onfocusin and onfocusout), and
furthermore, they do not seem to be implemented in most browsers
(except opera). I have found an SVG test document which lets one see
events caused by moving the mouse cursor over a target SVG element and
my claims about focusin and focusout are based on that (I am pasting
the test document if you want to try it). Can you give more details on
the scenario where you need focus/blur ? Maybe a workaround is
possible ?

Regards

Lukas

<?xml version="1.0" encoding="UTF-8"?>

<text x="150" y="20" style="fill:black">
Mouse event handlers test.
</text>

<g id="targetGroup" transform="translate(35, 80)">



<g id="target" onfocusin="onEvent(evt, 'onfocusin')"
onfocusout="onEvent(evt, 'onfocusout')" onactivate="onEvent(evt,
'onactivate')" onmousedown="onEvent(evt, 'onmousedown')"
onmouseup="onEvent(evt, 'onmouseup')" onclick="onEvent(evt,
'onclick')" onmouseover="onEvent(evt, 'onmouseover')"
onmousemove="onEvent(evt, 'onmousemove')" onmouseout="onEvent(evt,
'onmouseout')">
<text x="-20" y="-20">Target</text>
<text x="60" y="-10">Use the target to trigger the various events.</text>
<text x="60" y="5">For example, click on the target to create a
'onclick' event.</text>
<circle cx="0" cy="0" r="10" style="fill:#cccccc; stroke:black"/>
<line x1="-10" y1="0" x2="10" y2="0"/>
<line x1="0" y1="-10" x2="0" y2="10"/>
</g>
</g>

<g id="labels">

<g id="mouseEvents" transform="translate(30, 150)">
<g id="mouseEventsLabels">
<text x="0" y="10">onfocusin</text>
<text x="0" y="30">onfocusout</text>
<text x="0" y="50">onactivate</text>
<text x="0" y="70">onmousedown</text>
<text x="0" y="90">onmouseup</text>
<text x="0" y="110">onclick</text>
<text x="0" y="130">onmouseover</text>
<text x="0" y="150">onmousemove</text>
<text x="0" y="170">onmouseout</text>
</g>

<g id="mouseEventsTestIndicators">

<rect x="-15" y="2" width="10" height="10" style="fill:green"/>
<rect id="onfocusin" x="-15" y="2" width="10" height="10" style="fill:red"/>

<rect x="-15" y="22" width="10" height="10" style="fill:green"/>
<rect id="onfocusout" x="-15" y="22" width="10" height="10"
style="fill:red"/>

<rect x="-15" y="42" width="10" height="10" style="fill:green"/>
<rect id="onactivate" x="-15" y="42" width="10" height="10"
style="fill:red"/>

<rect x="-15" y="62" width="10" height="10" style="fill:green"/>
<rect id="onmousedown" x="-15" y="62" width="10" height="10"
style="fill:red"/>

<rect x="-15" y="82" width="10" height="10" style="fill:green"/>
<rect id="onmouseup" x="-15" y="82" width="10" height="10"
style="fill:red"/>

<rect x="-15" y="102" width="10" height="10" style="fill:green"/>
<rect id="onclick" x="-15" y="102" width="10" height="10" style="fill:red"/>

<rect x="-15" y="122" width="10" height="10" style="fill:green"/>
<rect id="onmouseover" x="-15" y="122" width="10" height="10"
style="fill:red"/>

<rect x="-15" y="142" width="10" height="10" style="fill:green"/>
<rect id="onmousemove" x="-15" y="142" width="10" height="10"
style="fill:red"/>

<rect x="-15" y="162" width="10" height="10" style="fill:green"/>
<rect id="onmouseout" x="-15" y="162" width="10" height="10"
style="fill:red"/>

</g>

</g>

<!-- Comment out as these are not in the 20000802 spec
<g id="keyboardEvents" transform="translate(160, 130)">
<g id="keyboardEventsLabel" >
<text x="0" y="10">onkeydown</text>
<text x="0" y="30">onkeypressed</text>
<text x="0" y="50">onkeyup</text>
</g>

< ! - - onkeypressed - - >
<rect x="-15" y="22" width="10" height="10" style="fill:green" />
<rect id="onkeypressed" x="-15" y="22" width="10" height="10"
style="fill:red" />

< ! - - onkeyup - - >
<rect x="-15" y="42" width="10" height="10" style="fill:green" />
<rect id="onkeyup" x="-15" y="42" width="10" height="10" style="fill:red" />
</g>
</g>
-->

</g>

// Mark test as passed
var testPassed = doc.getElementById(indicatorId);
testPassed.setAttribute('style', 'visibility:hidden');
}

]]></script>

</g>



<g id="test-legend" style="fill:black;font-family:Helvetica;font-size:10">
<rect x="10" y="390" width="275" height="50"
style="fill:none;stroke:#000000"/>
<path style="fill:none;stroke:#000000" d="M10 405 h275 M205
405 v35 M10 426 h195 M205 422 h80"/>
<text x="25" y="401">Scalable Vector Graphics (SVG)
Conformance Suite</text>
<a xlink:href="copyright-documents-19990405.html">
<text x="12" y="437" style="fill:blue">
Copyright 2000 W3C. All Rights Reserved.
</text>
</a>
<text style="font-size:12" x="35" y="420">script-uiEvents-BE-02</text>
<text style="font-size:10" x="210" y="417">$Revision: 1.1 $</text>
<text style="font-size:10" x="210" y="435">Release 2.0</text>
<rect id="test-frame" x="1" y="1" width="448" height="448"
style="fill:none; stroke:#000000"/>
</g>
</svg>

~ paPus ~

unread,

Mar 11, 2011, 4:35:42 AM3/11/11

to lib-gwt-svg

Thank you Lukas for your time and expertise!

I mark the user selected objects with a rectangle behind them. On
mousein I create the rectangle, and on mouseout I delete it (I have
pasted the code here for someone).
However, upon switching windows, I won't get the mouseout event and
upon returning to the window, the background rectangle is still there
(but is deleted on the next hover).
It's not a big error, but it should be fixed easily using the window
onblur.

I even tried implementing BlurHandler and FocusHandler, without luck.
I've also tried adding it to the window or body element from JNI,
like:

private native static void initialize() /*-{
window.onblur = function() {
alert(1);
}

document.body.onfocus = function() {
alert(2);
}
}-*/;
or
private native void initialize() /*-{
document.body.setAttribute('onblur', 'alert(1)');
}-*/;
without success (though the last one works from the firebug console);

It's sad that this isn't fixed since 2006:
http://code.google.com/p/google-web-toolkit/issues/detail?id=68

Thanks,
Lőrinc

On Mar 9, 8:10 pm, Lukas Laag <laa...@gmail.com> wrote:
> Hi Lőrinc,
>

> I do not think that onfocus and onblur are supported by SVG (seehttp://www.w3.org/TR/SVG11/interact.html#SVGEvents). For some reason,

> SVG seems to have events of its own (onfocusin and onfocusout), and
> furthermore, they do not seem to be implemented in most browsers
> (except opera). I have found an SVG test document which lets one see
> events caused by moving the mouse cursor over a target SVG element and
> my claims about focusin and focusout are based on that (I am pasting
> the test document if you want to try it). Can you give more details on
> the scenario where you need focus/blur ? Maybe a workaround is
> possible ?
>
> Regards
>
> Lukas
>
> <?xml version="1.0" encoding="UTF-8"?>
>
> 
> 
> 
>

>

> ...
>
> read more »

Lukas Laag

unread,

Mar 12, 2011, 4:15:53 PM3/12/11

to lib-g...@googlegroups.com

A suggestion, I do not know it this applies to you. A trick I use a lot
for highlighting elements is to rely on CSS (I use a the :hover
pseudo-class to change the element color when the cursor hovers over
it). If all you want to do is simply highlight an element when the
cursor hovers over it, it is the best way: you do not have to write any
code aside from the CSS rule, browser portability is very good, plus it
is super-fast

Lukas

Reply all

Reply to author

Forward