dart - Creating a custom Polymer element -

i'm trying create custom polymer element extends paper-shadow display tweet.

here implementation:

tweet_element.html

<link rel="import" href="packages/paper_elements/paper_shadow.html"> <link rel="import" href="packages/polymer/polymer.html"> <link rel="stylesheet" href="tweet_element.css">  <polymer-element name="tweet-element" extends="paper-shadow">    <template>     <div id="header">       <div id="user-image">         <img src="{{userimageurl}}">       </div>       <div id="details">         <div id="user">{{user}}</div>         <div id="date-published">{{datepublished}}</div>       </div>     </div>      <div id="content">       <div id="text">{{text}}</div>       <div id="photos">{{photos}}</div>     </div>   </template>    <script type="application/dart" src="twitter.dart"></script>  </polymer-element> 

twitter.dart

import 'package:polymer/polymer.dart';  @customtag('tweet-element') class tweetelement extends polymerelement {   @observable string userimageurl;   @observable string user;   @observable string datepublished;   @observable string text;    tweetelement.created() : super.created();    void update(tweet tweet) {     userimageurl = tweet.user.profileimage;     user = '${tweet.user.name} (@${tweet.user.screenname})';     datepublished = _parsedate(tweet.date);     text = tweet.text;   }    ...      } 

and code creates tweetelement , tries add dom:

import 'dart:html'; import 'package:polymer/polymer.dart'; import 'twitter.dart';  ...  var maincontent = queryselector('#main-content'); var element; (var tweet in tweets) {   element = new tweetelement.created();   element.update(tweet);   maincontent.children.add(element); } 

and when run get:

exception: uncaught error: created called outside of custom element creation. 

so tried change twitter.dart to:

tweetelement.created() : super.created();  tweetelement (tweet tweet) {   tweetelement.created();   userimageurl = tweet.user.profileimage;   user = '${tweet.user.name} (@${tweet.user.screenname})';   datepublished = _parsedate(tweet.date);   text = tweet.text; } 

and add element dom this:

var maincontent = queryselector('#main-content'); var element; (var tweet in tweets) {   element = new tweetelement(tweet);   maincontent.children.add(element); } 

and got error:

internal error: unresolved implicit call super constructor 'polymerelement()' tweetelement (tweet tweet) { 

ralph.

you can in 2 ways:

option a

if want create polymer element in dart code, have create tag way:

var mytweetelement = new element.tag ('tweet-element'); maincontent.childern.add(mytweetelement); 

also, check have imported html library:

import 'dart:html'; 

option b: (the coolest one)

you can convenient (and more object oriented) adding factory twitter.dart:

factory tweetelement () => new element.tag('tweet-element'); 

then, creation of tag in dart code, more readable:

var mytweetelement = new tweetelement (); // uses factory transparently maincontent.children.add(mytweetelement); 

additionally, can set values of properties. observable, bindings update automagically:

mytweetelement.userimageurl   = "foo" mytweetelement.user           = "bar" mytweetelement.datepublished  = "baz" mytweetelement.text           = "qux" 

or if cascade operator, can write instead:

mytweetelement..userimageurl  = "foo"               ..user          = "bar"               ..datepublished = "baz"               ..text          = "qux"; 

hope helps.