[Dart] Polymer 資料＆豆知識

DartでWebアプリを作るならPolymerってヤツを使わずにはいれないよね。
ということで、下記、勉強のための資料。

Seth Laddによるサンプル

https://github.com/sethladd/dart-polymer-dart-examples/tree/master/web

Polymerのサイト

http://www.polymer-project.org/

templateのリファレンス

http://www.polymer-project.org/platform/template.html

豆知識

on-clickのコールバックメソッドの引数は決まっている。

void handle(Event e, var detail, Element target )

on-clickのコールバックに独自の引数を渡したい時は独自attributeを使う。

HTML
<td on-click="{{handle}}" data-key="{{data.key}}">

Dart
void handle(Event e, var detail, Element target ) {
var hoge = target.attributes['data-key'];
...
}

PolymerElementにて表示開始を取る時は、enteredView()をオーバーライドする。

void enteredView() {
  print("表示されたなう");
}

PolymerElement内でquerySelectorするときはshadowRootを使う。

void enteredView() {
  var e = this.shadowRoot.querySelector("#mes");
  e.text = "表示されたなう";
}

PolymerプロジェクトをJavaScriptアプリとしてエクスポート

通常のDartプロジェクトはdart2jsを使うんだが、Polymerプロジェクトの場合は、「Pub Build」を使うんだと。以前はPub deployとか--deployオプションとか存在していたけど、現在はこのPub Buildに一本化されている。
手順は下記の通り。

1. pubspec.yamlのentry_pointsが正しいことを確認。
2. pubspec.yamlをOverviewで開いて「Run pub build」をクリック。もしくは、エントリポイントのhtmlを右クリックし、「Build Polymer App」を実行。もしくは、build.dartをRun。
3. しばらく待つと、結果がbuildフォルダにエクスポートされる。
4. buildフォルダのエントリポイントとなるhtmlを右クリックし「Run as JavaScript」を実行。

おっと、packagesの中身まで実体化されているじゃないですか。こりゃ便利！
もしかしたら通常のDartプロジェクトもPub Buildできるのかしら〜！

htmlからアクセスするプロパティには@publishedが必要

DartのクラスのプロパティにPolymerのhtmlからアクセスしようとするじゃないですか。これ実は「@published」が必要なんですよ。知ってました？

<div>{{hoge.fuga}}</div>　←htmlでこうなっていたら…

class Hoge {
  @published String fuga;　←こうする必要がある！
}

これが無くてもDartrium上で平気で動いちゃうのでホンマかいなと思うのですが、なんとこれ、Pub Buildすると動かなくなるんですよ！！
難読化されたソースでエラーが出るとホント心折れそうになりますよ！

querySelectorで取得したElementからPolymerElementのインスタンスを取得

下記のようなPolymerElementのカスタムタグが入っているとして…
<hoge-hoge id="hoge"></hoge-hoge>

xtagを使用すればインスタンス取得可！
var e = querySelector("#hoge");
var p = e.xtag as PolymerElement; ←ですよ！知ってました？