How To Handle Input With Polymer, Without Blue Border Tab Focus?

Edit 2: Keypress events working, on this jsbin: http://jsbin.com/foyile/1/. The problem is, I need to focus the tab on the element, with these two pieces line of code ready: functi

Solution 1:

You can create a custom element and use bindings like explained in the link from @PeteTNT. There is also special touch-support in Polymer see http://www.polymer-project.org/docs/polymer/touch.html

But there is no reason not to use imperative event listeners like querySelector('xxx').onSomeEvent.listen(...) in a Polymer app or querySelector('xxx').on['some-event'].listen(...) for custom events (you can also use document.on... or window.on... to register events.

declarative example

<link  href="packages/polymer/polymer.html">
<polymer-element name="some-element">
  <template>
   <button on-click="{{buttonClickHandler}}">press me</button>
  </template>
  <script type="application/dart" src="some_element.dart">
</polymer-element>

 'package:polymer/polymer.dart';
@CustomTag('some-element')
class SomeElement extends PolymerElement {

  SomeElement.created() : super.created() {}

  void buttonClickHandler(MouseEvent e) {
    doSomething();
  }
}

Solution 2:

Yes, Polymer uses on-event attributes to bind handler functions for user input.

This is an example from the developer guide that illustrates how to handle key input:

<polymer-elementname="g-cool"on-keypress="{{keypressHandler}}"><template><buttonon-click="{{buttonClick}}"></button></template><script>Polymer({
      keypressHandler: function(event, detail, sender) { ...},
      buttonClick: function(event, detail, sender) { ... }
    });
  </script></polymer-element>

Solution 3:

The official Polymer.Gestures library is made exactly for this purpouse:

• Official Repo: https://github.com/Polymer/polymer-gestures
• Description: http://www.polymer-project.org/docs/polymer/touch.html

Unfortunately there is no Dart version of it yet.

I've opened an Issue on the Dart bug Tracker on this, star it if you want:

https://code.google.com/p/dart/issues/detail?id=21017