How to initialize a paper element in Dart?

Question

Newbie problem. I am playing with Polymer.dart, and following the beginner tutorials. The Dart code gets invoked, but is unable to instantiate the PaperItem. How can I do this ? The error I get is :

Cannot read property 'toString' of null (first line of addTodoItem below)

mini.dart

import 'dart:html';
import 'package:polymer/polymer.dart';
import 'package:paper_elements/paper_input.dart';
import 'package:paper_elements/paper_item.dart';
import 'package:core_elements/core_menu.dart';

PaperInput paperInput;
CoreMenu coreMenu;

void main() {
  print("enter main");
  initPolymer().run(() {
    Polymer.onReady.then((_) {
        paperInput = querySelector('#todo-input');
        coreMenu = querySelector('#todo-list');
        paperInput.onChange.listen(addTodoItem);
    });
  });
}

void addTodoItem(Event e) {
  PaperItem newTodo = new PaperItem.created();
  newTodo.text = paperInput.value;
  paperInput.value='';
  coreMenu.children.add(newTodo);
}

mini.html

<!DOCTYPE html>

<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Mini</title>

<script src="packages/web_components/dart_support.js"></script>
<!-- <script src="packages/web_components/platform.js"></script>
     not necessary anymore with Polymer >= 0.14.0 -->

<link rel="import" href="packages/core_elements/core_header_panel.html">
<link rel="import" href="packages/core_elements/core_toolbar.html">
<link rel="import" href="packages/core_elements/core_menu.html">
<link rel="import" href="packages/paper_elements/paper_tabs.html">
<link rel="import" href="packages/paper_elements/paper_input.html">
<link rel="import" href="packages/paper_elements/paper_item.html">

<script type="application/dart" src="mini.dart"></script>
<script async src="packages/browser/dart.js"></script>

<link rel="stylesheet" href="mini.css">

</head>
<body unresolved touch-action="auto">
  <core-header-panel> <core-toolbar>
  <paper-tabs id="tabs" selected="all" valueattr="name" self-end>
  <paper-tab name="all">ALL</paper-tab> <paper-tab name="favorites">FAVORITES</paper-tab>
  </paper-tabs> </core-toolbar>

  <h2>TODO list</h2>

  <div>
    <paper-input floatingLabel label="Action Item" id="todo-input">
    </paper-input>
  </div>

  <div>
    <core-menu id="todo-list"> </core-menu>
  </div>

  </core-header-panel>
</body>
</html>

score 2 · Accepted Answer · edited May 23 '17 at 10:33

2

This is not the right way to dynamically create instances of Polymer elements

PaperItem newTodo = new PaperItem.created();

the right way is

PaperItem newTodo = new Element.tag('paper-item');

or

var newTodo = new Element.tag('paper-item') as PaperItem;

Just as additional note:
Polymer elements that extend DOM elements (which is not the case for core-elements or paper-elements) need an additional parameter - see Dynamically create polymer element for more details.

edited May 23 '17 at 10:33

Community

1
1

answered Aug 03 '14 at 21:04

Günter Zöchbauer

623,577
216
2,003
1,567

Thanks again ! Wonder why these things are not covered in documentation... as a beginner, I doubt I would have thought of this solution. – dev Aug 03 '14 at 21:09
1

You are right - but you find it all here at StackOverflow. I also created https://code.google.com/p/dart/issues/detail?id=20341 – Günter Zöchbauer Aug 03 '14 at 21:16

How to initialize a paper element in Dart?

1 Answers1