How to trigger a KeyboardEvent in Dart

[Mathieu Breton]

Hi,

I have already post this topic on stackoverflow, but as I has no anwser I try here, maybe i will more lucky :D

Like I said in the title, I would like to simulate a keyup event in Dart. The problem is that I have not found how create a new KeyboardEvent object.

The only way that I've found is to use the Event(String type) constructor and then dispatch it on window object. But that doesn't work because of my "keyup" handler who takes a KeyboardEvent in parameter. Example:

window.on.keyUp.add((KeyboardEvent e){
 print('keyUp handler');
});
KeyboardEvent e = new Event("KeyboardEvent");
window.on.keyUp.dispatch(e);

Is there a way to create and dispatch a KeyBoardEvent to simulate a "keyup" in Dart?

Also, I should mention that I tried too to trigger the event in JavaScript, thanks to js-interop library, but it only fires the JS handlers.

[Emily Fortuna]

Hi Mathieu,
You are in luck!
I just checked in a big change yesterday that makes KeyboardEvent
handling better. The short version is check out the
KeyboardEventController class
http://api.dartlang.org/docs/bleeding_edge/dart_html/KeyboardEventController.html
which provides both the keyCode AND the charCode whenever possible/it
makes sense (unlike JS, which only provides one). Its usage is a
little non-standard currently because this is an experimental feature
right now (and probably buggy, since I don't have a bunch of
international keyboards to test with. File bugs as you see them!).
Here's how you use it:

import 'dart:html';
myCustomKeyHandler(KeyEvent e) {
print('The charCode is ${e.charCode}');
print('The keyCode is ${e.keyCode}');
}
main() {
var controller = new KeyboardEventController.keydown(document.window);
controller.add(myCustomKeyHandler);
});

---------
If you don't want to use my new fancy-pants KeyboardEvent controller
for handling events, you can handle events with the regular
KeyboardEvent class, which will behave exactly like JavaScript
keyboard events:

import 'dart:html';
myCustomKeyHandler(KeyboardEvent e) {
print('The charCode is ${e.charCode}');
print('The keyCode is ${e.keyCode}');
}
main() {
document.window.on.keyDown.add(myCustomKeyHandler, false);
});

There is one small catch, though. Like in JavaScript, you can't
programmatically create full-fledged new KeyboardEvents without the
user actually pressing on the Keyboard. So you could write

var event = new KeyboardEvent('keyup', document.window);
document.window.on.keyUp.dispatch(event);

http://api.dartlang.org/docs/bleeding_edge/dart_html/KeyboardEvent.html#KeyboardEvent
but there is the caveat that this event is not going to be fully
populated with values like keyCode and charCode that a real
user-generated keyboard event will have.
Hope this helps!
Emily

> --
> Consider asking HOWTO questions at Stack Overflow:
> http://stackoverflow.com/tags/dart
>
>

[Mathieu Breton]

Hi Emily,

Thank you to have answer so fastly.

This is exactly what I need, I see the modification on the github repository :

https://github.com/dart-lang/bleeding_edge/blob/master/dart/sdk/lib/html/dartium/html_dartium.dart

But, it's not in my local build of SDK (build 15355) when it will be released ?

PS : Although how often a build is released ?

[Emily Fortuna]

The fix went into build 15560.
A new SDK is released every week, so you should see this change come
into your SDK on Monday.

[Mathieu Breton]

Hi,

The build 15699 has just been released so after i have updated my version, I want to test this code to dispatch a KeyUpEvent:

var event = new KeyboardEvent('keyup', document.window);
document.window.on.keyUp.dispatch(event);

But it's throw an Error, you can find the stacktrace below:

Internal error: '/Volumes/data/b/build/slave/dartium-mac-full-trunk/build/src/xcodebuild/DerivedSources/Release/webkit/bindings/dart/dart/html/KeyboardEvent.dart': Error: line 7 pos 208: native function 'KeyboardEvent_initKeyboardEvent_Callback' cannot be found void $dom_initKeyboardEvent(String type, bool canBubble, bool cancelable, LocalWindow view, String keyIdentifier, int keyLocation, bool ctrlKey, bool altKey, bool shiftKey, bool metaKey, bool altGraphKey) native "KeyboardEvent_initKeyboardEvent_Callback";

Build DartEditor : 15699

Dartium version : 25.0.1234.0 (167142)

SDK version : 0.2.7.1_r15699 (i'm not sure for this, I read it in the 'version' file in the 'dart-sdk' directory)

Do you see why i have this error ?

Thank you in advance.

-- 
Mathieu Breton
Xebia IT Architects
Mobile : +33 (0)6 50 17 49 31

[Emily Fortuna]

Hi Mathieu,

The problem is with dartium on our end, and I am investigating. In the meanwhile, if you compile the same code to javascript with dart2js, you should be able to run your code just fine.

Emily

[Mathieu Breton]

Thank you Emily,

It's ok i see you have just too open an issue.

I could use the javascript translation with dart2js in the meanwhile, but i will need to know if my Dart code has been compiled in Javascript code. Do you know if it exist a solution to know if the code run in "Dart mode" or in "Javascript mode" ?

-- 
Mathieu Breton
Xebia IT Architects
Mobile : +33 (0)6 50 17 49 31

[Emily Fortuna]

I'm not certain I understand your question. In the editor, you can
right click your html page or top level dart file and say "Run as
JavaScript" instead of "Run as Dartium."

Is this what you're looking for?

[Mathieu Breton]

Not, I thought rather if it was possible to detect during the runtime if the code is running on a Dart VM or it's running in Javascript. The aim is to enable or not the dispatch of the KeyboardEvent. In "meta-language", i could write like this :

if ( isRunningOnDartVM){

       var event = new KeyboardEvent('keyup', document.window);

       document.window.on.keyUp.dispatch(event);

} else{

// else it's running in Javascript version

[Dennis Kaselow]

I have opened a minor issue on this one because it does not work for 'document' or 'window' if you run it in checked mode.
https://code.google.com/p/dart/issues/detail?id=7225