Dart - HTML要素, スタイル(Element class, style properties)

Dart: Up and Running
(O'Reilly Media)
Kathy Walrath Seth Ladd (著)
[Kindle版]
このブログでの感想

開発環境

• OS X Mavericks - Apple (OS)
• Dart Editor (開発環境)
• Dartium | Dart/ Structured web apps (ブラウザ, Dart VM 用 (Chromium with the Dart VM))
• Safari (ブラウザ, JavaScript 用)
• Dart (プログラミング言語)

Head First Java 第2版 ―頭とからだで覚えるJavaの基本(Kathy Sierra (著)、Bert Bates (著)、島田 秋雄 (監修)、神戸 博之 (監修)、高坂 一城 (監修)、夏目 大 (翻訳)、オライリージャパン)の13章(Swingの基礎知識)、エクササイズ(コードを当てよう(p.424)))をDartで考えてみる。

その他参考書籍

• What is Dart? [Kindle版] (O'Reilly Media) Kathy Walrath Seth Ladd (著) このブログでの感想

エクササイズ(コードを当てよう(p.424))

コード

sample.dart

import 'dart:html';

void main() {
  run.onClick.listen((MouseEvent event) {
    int width = 650;
    int height = 500;
    DivElement div1 = new DivElement();
    div1.style
        ..width = '${width}px'
        ..height = '${height - 18}px'
        ..backgroundColor = 'darkGray';
    ButtonElement button1 = new ButtonElement();
    button1
        ..text = 'tesuji'
        ..style.width = '${width}px';
    ButtonElement button2 = new ButtonElement();
    button2.text = 'watari';
    div1.append(button2);
    div
        ..setAttribute('align', 'center')
        ..append(div1)
        ..append(button1);
  });
}

DivElement div = querySelector('#d0');
ButtonElement run = querySelector('#run_dart');