ダダ漏れ日記

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アノテーショ...

そうですか。 Dart Editorは今後サポートしないのですか。 About Dart Editorを開いてもバージョンアップのチェックが表示されないからおかしいと思ってたんですよね。 まあDart Edtior、超中途半端でしたね。 今後はWebStorm推奨ですか〜。 有料じゃないですか〜。 プロジェクト移行しなきゃなぁー。 面倒くさいなー。

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?=...

Ver. 1.9.0にて「Asynchrony Support: Phase 2」となり、非同期処理が劇的に書きやすくなった。 もう、thenとか要らない。 そう、then free。 それはオレたちのフリーダム！ そして中カッコ地獄からの卒業 そんな時代に捧げるSleepの実現方法。          await new Future.delayed( const Duration(milliseconds: 500 ), (){} ); …長いな。

バージョンが1.0.0になったし、 Angular.Dartを試してみた。 まずは、 Angular.Dartサイトのチュートリアル からサンプルをダウンロード。 なるほどなるほど。 っていうか、{{name}}って見えてますけど。 ng-cloakを設定しなければイカン？ してもダメですけど。 Dart版では、自力でdisplay:noneを設定しなければいけないと...

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)を見た感じ、無理じゃね？という感じ。

Futureがまだ直感的に使えない。 パッと出てこない。 下記は、Futureを連鎖させるサンプル。 FutureAの次にFutureBをやりたい時に使う。 HttpRequest.getString("http://hoge.com/") .then( (str) {   var  result = str+"hoge";   return new Future.value(result); }) .then( (r) {   print(r);  // http://hoge.com/から取得した文字列にhogeを追加したもの })

Shadow Element（ほんまもんのHtmlElement）を取得するには、 PolymerElementの$を使う。 jQueryっぽいが、ここにはidしか指定できない。 （だって、Map<String,Element>だ） しかも、制限があって、template if等で消される可能性のあるものは検索できないようだ。 （polymer[0.12.2+1]で確認） <polymer-element> <template>   <div id="hoge">  // ←これは取得可能    <template if="{{ visible }}">      <div id="fuga">   // ←これは取得できない      </div>    </template>   </div> <template> </polymer-element> polymerの各種ケースのサンプル https://github.com/dart-lang/polymer-dart-patterns

inputでのon-changeイベントは、focusをlostした時の意味。 編集内容の変更をリアルタイムでウォッチするイベントはon-inputだ。 ただそれだけ。

ある日、Dart Editorで謎の赤バッテンがでるようになった。 packageのimportで「そんなpackageねぇ！」みたなエラーが出ていた。 そんなはずない、と思いつつpackageのツリーを見てみると、確かに一部のpackageが空になっている。 その時は、gitでbranchの切り替えを頻繁にやっていた。そのせいかもしれないなぁ、と思いつつ、Pub Getをやってみるも、 Unhandled exception: Uncaught Error: FileSystemException: Cannot open file, path =... とエラーが出て進まず。 万事休す…と思って、ネットの情報を漁っていたら…ありました。 https://groups.google.com/a/dartlang.org/forum/m/#!msg/editor/Sel-OJd-vfw/1Z2z0wYvY08J PubのCacheを削除するといいよ！ということらしいです。 というわけでこの情報通り、 AppData/Roaming/Pub/Cache/hosted の pub.dartlang.org を削除したらPub Getが通るようになって無事解決です！ このネットの情報では、「Windowsのsymlinkはhellだよ！」みたいなセリフがありました。 いつもはMacでやっているのですが、たまたまWindowsでやらざるを得なくて、いざやったらコレだよ。 Windowsなんとかしてください。 っていうか、Dart Editorのバージョン上げて今までのソースが動かなくなるのが怖くて、サブ機のWindowsで試したんだよね。Dartもそろそろ落ち着いて頂きたい！

DartのDateTime.parseでは、 "2014-04-01T01:02:03+09:00" の文字列をなぜか解析してくれない。 これってRFC3339でもISO8601でも定義されていると思うんだがー。 ホントにトホホだよ！ というわけでDateFormatを使用した回避方法。 まず、intlパッケージをインストール pubspec.yamlのdependenciesに「intl:any」を追記する。 dependencies :     intl : any 続いてソース。 import 'package:intl/intl.dart' ; … var df = new DateFormat("y-M-dTH:m:sZ"); var t = df.parse("2010-10-12T13:20:30+09:00"); print(t) print(t.toUtc()) これで出力内容は、 2010-10-12 13:20:30.000 2010-10-12 04:20:30.000Z となる。 面倒すなぁ。

サーバーサイドもしくはコマンドラインアプリのためのDartのサンプルが用意された。 Dartはブラウザアプリだけではないよ、ってことを本気で言いに来たようだ。 Dart By Example https://www.dartlang.org/dart-by-example/#dart-io-and-command-line-apps 載っている情報は下記の通り。 ファイル関連 ファイル操作、ディレクトリ操作、シンボリックリンクの作成 文字列の読み込み、書き込み バイト配列の読み込み、書き込み テンポラリファイル、ディレクトリの作成 'package:http/http.dart'を使ったHTTPリクエスト GET＆POST ※同じサーバーに連続してリクエストするときClientを再利用する技が目からウロコ レスポンスの読み込み。文字列もしくはバイナリで。 'package:http_server/http_server.dart'を使ったWebサーバー バインド…HttpServer（これはdart:io） ファイルを返すだけのディレクトリ専用クラス…VirtualDirectory 特定のURLパターンで処理を振り分ける…Router, UrlPattern その他 Socket通信…ServerSocket, Socket WebSocket…WebSocketTransformer, WebSocket OS情報取得…Platform.environment, Platform.operationgSystem スクリプト自身のパスを取得…Platform.script 外部コマンドの実行…Process URLやファイルパスの連結、分解、相対パス化、解析…'package:path/path.dart'