rillomas tech log: 12月 2012

以前DartでのWeb Componentsの記事を書いてからまだ一月ちょっとくらいしか経ってないけど、Web Componentsパッケージ側で色々と変化があったせいですでに前の情報が役立たずになってしまっている。ということで最新情報で改めて書く。

何が変わったか

以下の通り。詳しくはDartの開発者が書いた記事へ。

そもそもパッケージの名前がweb_componentsからweb_uiに変わった。
バインディングやらの記法が変わった
Web Componentsとは直接関係ないけど、パッケージの構成が少し変わった。

逆にdwc.dartでのコンパイル方法やらDartiumでの閲覧方法は変わってないのでそこは前回と同じでいける。

コードの修正版

パッケージにしたものをGithubのリポジトリにアップした。ここではそれぞれをもう少し詳しく見ていく。

index.html

このindex.htmlはこのサンプルのエントリーポイントで、Dartのmainが記述されてる。以前は一つのindex.htmlに全部まとめてたんだけど、コンポーネント間の依存関係がうまく解決できなかったので今回は細かくファイルを分けた。

<!doctype html>
<html>
    <head>
        <title>Dart Web UI Sample</title>
        <link rel="stylesheet" type="text/css" href="stylesheets/bootstrap.min.css">
        <link rel="shortcut icon" type="image/png" href="images/favicon.png">
        <link rel="components" href="components/animal-summary.html">
        <script type="text/javascript" src="http://dart.googlecode.com/svn/branches/bleeding_edge/dart/client/dart.js"></script> 
    </head>
    <body>
    <div id="navigationArea" class="navbar">
        <div class="navbar-inner">
            <div class="container">
                <a class="brand" href="#">Dart Web UI Sample</a>
            </div>
        </div>
    </div>
    <div id="animalListArea">
        <ul>
            <template iterate='a in animalList'>
                <animal-summary model="{{a}}" ></animal-summary>
            </template>
        </ul>
    </div>
    <script type="application/dart">
    import 'package:dart_web_ui_sample/src/AnimalSummary.dart';
    import 'package:dart_web_ui_sample/src/Color.dart';

    List<AnimalSummary> animalList = <AnimalSummary>[
        new AnimalSummary("aardvark",0, new Color(140,70,20)),
        new AnimalSummary("giraffe",1, new Color(255,255,0))
        ];
  
    void main() {}
    </script>  
    </body>
</html>

記法やらを新しくしたのと、色を示すColorクラスを追加したのが前と違う点。

animal-summary.html

AnimalSummaryクラスのViewModelとViewに相当するのがこのhtmlファイル。templateタグ内のマークアップがViewで、その下にDartで書かれているクラスがViewModel。

<!doctype html>
<html>
 <head>
  <link rel="components" href="color-editor.html">
 </head>
 <body>
     <element name="animal-summary" constructor="AnimalSummaryViewModel" extends="div">
         <template>
             <div>{{header}}</div>
             <color-editor model="{{model.color}}"></color-editor>
             <canvas id="summary" width="300" height="200"></canvas>
         </template>
         <script type="application/dart">
         import 'package:web_ui/web_ui.dart';
         import 'package:dart_web_ui_sample/src/AnimalSummary.dart';

         class AnimalSummaryViewModel extends WebComponent {

             AnimalSummaryViewModel() {
             }

             String get header => "${model.name}:${model.count}";

             void increment(e) {
                 model.count++;
             }

             void created() {
                print("created.");
             }

             void inserted() {
                 _initializeCanvas("#summary");
                 print("inserted.");
             }

             void _initializeCanvas(String id) {
                 var c = query(id);
                 var ctx = c.getContext('2d');
                 ctx.fillStyle = model.color.cssString;
                 ctx.fillRect(0,0,300,200);
             }

             AnimalSummary model;
         }
         </script>
     </element>
 </body>
</html>

Viewとしてはdiv、canvas、それと別に定義したcolor-editorというComponentを使用している。Canvasに関してはViewModel側でinserted関数を実装することで挿入されたタイミングに合わせて初期化を行なっている点が重要。

試したかんじtemplate内の子要素についてはinsertedのタイミングならqueryで取得できる。ただcreatedでqueryしようとしても現状はnullしか返ってこない。

color-editor.html

color-editorはanimal-summaryのtemplateで使っている色のエディタ。本当はスライダー（input type="range"）を使いたいんだけど、現状はWeb UI側がスライダーとのデータバインディングをサポートしてないみたいで今はテキストボックスを使ってる。

<!doctype html>
<html>
 <body>
     <element name="color-editor" constructor="ColorViewModel" extends="div">
         <template>
          <ul>
              <li>Red:<input type="text" bind-value="red" /></li>
              <li>Green:<input type="text" bind-value="green" /></li>
              <li>Blue:<input type="text" bind-value="blue" /></li>
          </ul>
         </template>
         <script type="application/dart">
         import 'package:web_ui/web_ui.dart';
         import 'package:dart_web_ui_sample/src/Color.dart';

         class ColorViewModel extends WebComponent {
             ColorViewModel() {
             }

             String get red => "${model.red}";
             String set red(String r) => model.red = int.parse(r);

             String get green => "${model.green}";
             String set green(String g) => model.green = int.parse(g);

             String get blue => "${model.blue}";
             String set blue(String b) => model.blue = int.parse(b);

             void created() {

             }

             void inserted() {
              print("r: ${model.red} g: ${model.green} b: ${model.blue}");
             }

             Color model;
         }
        </script>
     </element>
 </body>
</html>

現状は値をViewModel側に渡すタイミング（WPFで言うところのUpdateSourceTrigger）を制御できないので、一文字消すとその段階でViewModelへの値の引渡しが行われる。そのせいで、テキストボックス内の数字を全部消すとnullか何かが渡ってきてエラーが起きる。

本当ならテキストボックスからフォーカスが外れた段階で値の引渡しをやりたい。WPFみたいにタイミングいじれるようになるのか？

Color.dart

ColorはColorViewModelのModelに相当するクラス。見たまんまなので特にいうことはない。あえていえばcssStringというプロパティでCSS用の文字列を返すようにした、という点。

library dart_web_ui_sample;

class Color {
    Color(this.red, this.green, this.blue);
    int red;
    int green;
    int blue;
    String get cssString => "rgb(${red},${green},${blue})";
}

AnimalSummary.dart

本サンプルの主役を張ってるクラス。これも見たまんま。

library dart_web_ui_sample;
import 'package:dart_web_ui_sample/src/Color.dart';

class AnimalSummary {
    AnimalSummary(this.name, this.count, this.color);
    String name = "No Name";
    int count = 0;
    Color color;
}

感想

着実に良くなってる感じ。記法はシンプルになったし、子要素へのqueryも前までできなかったけどできるようになった。書いてて気になったのは下の点くらい。

WPFでいうところのUpdateSourceTriggerみたいに値を引渡すタイミングをいじりたい。
WPFでいうところのConverter的な仕組みで文字列 to 数値の変換のような働きをViewModelの外に出したい。今回でいえば色の数値をViewModelの中でint.parse()してるのをConverter的なクラスにやらせて、ColorViewModelはあくまでintしかインタフェースを持たないようにしたい。
ColorViewModelでの色の変更をAnimalSummaryViewModelに伝えてCanvasの色も更新したいんだけどどうすりゃいいんだ。

でもやっぱhtmlでも部品ごとにhtmlファイル分けて、それぞれで完結するViewとViewModelを書けるのは気持ちいい。

rillomas tech log

2012年12月12日水曜日

Playing with Dart Web UI