Keyboard input for Smart Mobile Studio

Smart Mobile Studio provides a rich and well planned out RTL. However, the RTL does take for granted that you do know you way around HTML and that you write more hands-on code than some may be comfortable with.

One question I often get is “Why doesnt the KeyDown and KeyUp events work”. Well, they do! But the law of HTML5 is that no element can accept input (or have focus) without a tabindex being set first. And since many of the standard controls that ship with the RTL dont expect keyboard input (or need keyboard input for that matter), the key-target value was not set by default.

So the solution to why the keyboard event(s) don’t fire on your TW3Panels and other containers (including forms) is quite simply that. Here is how you get keyboard events working in your form:

procedure TForm1.InitializeForm;
begin
  inherited;

  // Set the key-down event
  OnKeyDown:=Procedure (sender:TObject;Key:Integer)
  begin
    writeln(key);
  end;

  // set the key-up event
  OnClick:=procedure (sender:TObject)
  Begin
    if visible then
    self.SetFocus;
  end;

  // this makes the form a key-event target
  w3_setAttrib(self.handle,'tabindex',0);
end;

Note: In the next update of Smart Mobile Studio, all TW3CustomControls initialize the tabindex automatically, so by default all controls will be initialized to accept keyboard input.