Problems handling KeyboardEvents on DartFlash - dart

Question

I'm having trouble to handle KeyboardEvents on DartFlash.
I don't know what I'm doing wrong here. Could someone help me?
My intention is to just create a very simple walking character and every time I hit a key, it moves in the x and y, only to start understanding DartFlash API.
Here is the full source code:
class Character extends Sprite
{
TextureAtlas _atlas;
Bitmap _currentBitmap;
int _direction;
String _name;
Character(this._name, this._atlas)
{
this._direction=Direction.down;
this._currentBitmap=this.getBitmap("stand", this._direction);
addChild(this._currentBitmap);
}
String get name => this._name;
Bitmap getBitmap(String name, [int direction, int number])
{
if(direction == null)
{
return new Bitmap(this._atlas.getBitmapData(name));
} else if (number == null)
{
return new Bitmap(this._atlas.getBitmapData("${name}-${Direction.getDirectionName(direction)}"));
}
return new Bitmap(this._atlas.getBitmapData("${name}-${Direction.getDirectionName(direction)}-${number}"));
}
}
Character dk;
void keyboardListener(KeyboardEvent ke) {
print("Key code: ${ke.keyCode}");
dk.x+=1;
dk.y+=1;
}
void main()
{
Stage mainStage = new Stage("mainStage", html.document.query("#mainStage"));
RenderLoop renderLoop = new RenderLoop();
renderLoop.addStage(mainStage);
Resource resource=new Resource();
resource.addTextureAtlas("DarkKnight", "resources/DarkKnight.json", TextureAtlasFormat.JSONARRAY);
resource.load().then((res)
{
print(resource.toString());
dk=new Character("DarkKnight", resource.getTextureAtlas("DarkKnight"));
dk.x=10;
dk.y=10;
mainStage.addChild(dk);
dk.addEventListener(KeyboardEvent.KEY_DOWN, keyboardListener, false);
mainStage.focus=dk;
print("${mainStage.focus.name}");
});
}

Answer 1

There is an easy workaround. Just add an "tabindex" attribute to the canvas element and afterwards you will received KeyboardEvents. If the "tabindex" is not set, then the canvas does not receive keyboard events.
<canvas id="stage" width="800" height="600" tabindex="1"></canvas>
The canvas also needs the focus. You can get the focus by clicking on the canvas or problematically set the focus:
query('#stage').focus();