dartdart-polymer

Programmatically create Polymer elements

I have an existing application (game using canvas tag) and I want to experiment with using PolymerDart to create the UI elements for it (think things like settings screens, dialog interactions with characters in the game).

I'm trying to get the basic click counter example working. My index.html looks like:

<html>
  <head>
    <title>PraxisClient</title>
    <script async type="application/dart" src="app.dart"></script>
    <script async src="packages/browser/dart.js"></script>
    <script src="packages/web_components/platform.js"></script>
    <script src="packages/web_components/dart_support.js"></script>
    <link rel="import" href="app/elements/click_counter.html">
  </head>
  <body>
    <div id="ui">
    </div>
  </body>
</html>

In my application I'm trying to create the element using:

querySelector('#ui').children.add(new Element.tag('click-counter'));

The click counter code is all identical to the example given at https://www.dartlang.org/polymer/#data-binding

<link rel="import" href="../packages/polymer/polymer.html">
<polymer-element name="click-counter">
  <template>
    <button on-click="{{increment}}">Click Me</button>
    <p>You clicked the button {{count}} times.</p>
  </template>
  <script type="application/dart" src="click_counter.dart"></script>
</polymer-element>

import 'package:polymer/polymer.dart';
import 'dart:html';

@CustomTag('click-counter')
class ClickCounterElement extends PolymerElement {
  @observable int count = 0;

  ClickCounterElement.created() : super.created();

  void increment(Event e, var detail, Node target) {
    count += 1;
  }
}

The error I'm getting is:

URL must be imported by main Dart script: click_counter.dart

However even when I import the click_counter.dart into my application it doesn't seem to help, I just see the tag in the dom and no code is executed.

If I add a "noscript" attribute to the element (<polymer-element noscript>) then I see the template gets shown (but no code is executed).

Solution

  • In the pubspec.yaml the Polymer transformer configuration needs an entry for every entry page

    transformers:
- polymer:
    entry_points:
    - web/index.html

    pub serve should create a warning when this configuration is missing.

    <html>
  <head>
    <title>PraxisClient</title>
    <!-- <script src="packages/web_components/platform.js"></script>
         not necessary anymore with Polymer >= 0.14.0 -->
    <script src="packages/web_components/dart_support.js"></script>
    <link rel="import" href="app/elements/click_counter.html">
  </head>
  <body>
    <div id="ui">
    </div>
    <!-- moved down and removed the `async` attribute 
         these things get modified anyway when you run `pub build`
         if you want to have customized behavior you need to do it
         in a custom transformer or in the build output (as far as I know) -->
    <script type="application/dart" src="app.dart"></script>
    <script src="packages/browser/dart.js"></script>
  </body>
</html>

    change

    <link rel="import" href="../packages/polymer/polymer.html">

    to

    <link rel="import" href="../../packages/polymer/polymer.html">