ダダ漏れ日記

Dartが1.12になるのに伴い、Polymerが1.0に切り替わったらしく、サンプルを見てみた。 どんだけ変えるのかと。 今までの全く無駄じゃん！ Polymer Dart 1.0 Developer Guide https://github.com/dart-lang/polymer-dart/wiki#10-developer-guide @observableが@propertyに変更 さらに、2way-bindingするには、 @Property(notify: true) と宣言しなくてはいけない。（"P"が大文字なのに注意） プロパティへの値のセットに専用メソッドを使用する @observable String hoge; ... void updateHoge() => hoge = "gg"; これが下のように変わります。 @property String hoge; ... void updateHoge() => set("hoge","gg"); じゃないと、HTML側が更新されないです。 イベントの取り方が変わった イベントの取り方はいくつかあるようです。 方法１：@Listenアノテーション HTML側はidだけ設定します。Dart側でどのIDのどのイベントを受けるかをメソッド単位で設定します。 <button id="hoge">発射</button> @Listen("hoge.click") void fire(e,[_]) => print("hoge"); 方法２：onにListenする案外ベタな方法 attached() {   $["hoge"].on["click"].listen( (e)=>print("hoge") ); } プロパティの変更イベントで受ける 以前はプロパティ名に"Changed"を付けた名前のメソッドが自動的に呼ばれたものが、@Listenアノテーショ...

Polymer 1.0なんてニュースもありますね。 Dart + Polymerも、ようやく実用レベルに達したような気もしてきたこの頃。 というわけで豆知識。 Polymerのレイアウト支援機能 horizontalとかflexとかのキーワードを属性に書くだけでレイアウトしてくれちゃうぞ。 <div horizontal layout>  <div>hoge</div>  <div flex>fuga</div> </div> これで横に並べてくれちゃう。"hoge"はサイズ固定。 https://www.polymer-project.org/0.5/docs/polymer/layout-attrs.html でも、Polymer1.0にこの機能ないんだね…。Styleシートで行うようになっているようだ。なるほど。 プロパティにChangeリスナーを張る プロパティ名の後に"Changed"と書いたメソッドを作成すると、そのプロパティが変更された後に呼ばれる！ @observable String hoge; void hogeChanged() => print("hoge") ---- <input type="text" value="{{hoge}}"> これでinputの入力文字を変更する度にhogehoge出力されるぞ。 そんな便利なこと許されますかね！ idでHtmlElement検索 <div id="hoge"></div> --- var d = $['hoge'] as DivElement; これイケるッス。 でも、途中にtemplateが入ると検索が届かなくなります。要注意！ ある条件でElementを隠したい あるElementを表示したりしなかったりすることは<template if="">でも可能ですが、そうじゃない方法もあります。 <div hidden?=...

HTMLのselectって基本的にワナが多いよね。 Polymerでのselectも正直言って不便。 valueでは初期値が渡せないのでselectedIndexでやるしかないのだが、indexって扱いづらい。 <select value="{{src}}"> というわけで、いい加減イヤになって、独自のカスタムselectを作ってみた。 （Paper Elementsを使うとちゃんとしているのかなー？） こんな感じ。 でも、IEとFirefoxでは動かないんだよね！ $['select']が正しく効かないのよ。 Polymerって一体いつ使い物になるのか？って感じだよね…。 Angularにするかな…。

PolymerでWebアプリを作っている時、 値段を表示したい時とかあるじゃないですか。 <div>スマイル{{ price }}円</div> ってやるじゃないですか。 でも、値段って大抵3桁毎にカンマ付けないと怒られるじゃないですか。 というわけで、Dart側で、 var nf = new NumberFormat("#,##0","ja_JP"); price = nf.format(rowPrice); とかやるのちょっとバカバカしいじゃないですか。 っていうか、こういうのって表示の問題だと思うんですよね！ であれば、MDVでいうとViewであるHTML側でなんとかならんのかと。 って思ってたのですが、 そういうとき、Polymerのカスタムフィルタ機能でなんとかなりそう。 [HTML側] <div>スマイル{{ price | priceformat }}円</div> [Dart側] NumberFormat nf = new NumberFormat("#,##0","ja_JP"); String priceformat( String str ) => nf.format(str); 以上。 本家のPolymerでは、 HTML側でfilterに引数を設定することも可能 なのだが、内部のソース(polymer_expressions/eval.dart)を見た感じ、無理じゃね？という感じ。

observableのプロパティに、setterを使いたいときってあるよね。 こんな感じ。 String _title = ""; @observable String get title => _title; set title( String t ) => _title = "hoge $t"; で、html側で{{title}}ってやるわけですが。 でも、これ動きません！ titleの実体がfunctionだからだと思いますが、変更イベントが飛ばないのです。 というわけで、自分で変更イベントを飛ばせばOKとのこと。 具体的には、setterを下記のように変更します。 set title( String t ) {   _title = notifyPropertyChange( #title, _title, t ); } notifyPropertyChangeの仕様は下記の通り。 dynamic notifyPropertyChange(Symbol field, Object oldValue, Object newValue) 戻り値はnewValueとなっています。 そして、これをするとgetterの@observableが不要になります。つまり、observableに頼らず、自前で変更イベントを出せるってことですね。 …っていうか、#titleって何ヨ？ 本来、const Symbol("title")としなければいけないっぽいが、表記を省略できるってことかね？ 参考資料： 同様の質問 https://groups.google.com/a/dartlang.org/forum/#!topic/web-ui/hxCqmwjnLIA まさにこれのサンプル https://github.com/sethladd/dart-polymer-dart-examples/tree/master/web/setter_with_observable_property_change

PolymerElementを状況に応じて動的に作成すること、したいよね〜。 Seth Laddのサンプルによると、ore-tagというカスタムタグがあるとして、 querySelector("#place").childlen.add( new Element.tag("ore-tag") ); とすればいけるとのこと。 確かにこれで問題なく動くのだが、ワナがひとつ。 Pub Buildすると正しく動かんのだ、これが。 具体的には、enteredViewが呼ばれない。グハッ！ バグじゃね？

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」...