Dart - ダイナミックなデータ(HTML, button要素, disabled属性, ボタンの無効化と有効化)

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 JavaScript ―頭とからだで覚えるJavaScriptの基本( Michael Morrison (著), 豊福 剛 (翻訳)、オライリージャパン)の12章(ダイナミックなデータ)、JavaScriptマグネット(p.575)をDartで考えてみる。

その他参考書籍

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

JavaScriptマグネット(p.575)

コード

ajax.dart

import 'dart:html';
import 'dart:math' as math;

void main() {
  search_blog.onClick.listen((MouseEvent) => Blog.searchBlog());
  show_all_blog.onClick.listen((MouseEvent event) => Blog.showBlog());
  view_random.onClick.listen((MouseEvent event) => Blog.randomBlog());
  load_blog.onClick.listen((MouseEvent) {
    div
        ..innerHtml = ''
        ..append(new ProgressElement());
    HttpRequest.request(url).then(processRequest).catchError(handleError);
  });
}

void processRequest(HttpRequest request) {
  div.innerHtml = '';
  Document xml_doc = request.responseXml;
  try {
    Element title = xml_doc.querySelector('title');
    if (title != null) {
      Blog.title = title.text;
    }
    Element author = xml_doc.querySelector('author');
    List<Element> entries = xml_doc.querySelectorAll('entry');
    Blog.blogs = [];
    entries.forEach((Element entry) {
      Element date = entry.querySelector('date');
      Element body = entry.querySelector('body');
      Element image = entry.querySelector('image');
      new Blog(date: date, body: body, image: image, signature: author);
    });
    Blog.showBlog(5);
    for (ButtonElement button in [search_blog, show_all_blog, view_random]) {
      button.disabled = false;
    }
  } catch (e) {
    div.text = '$e';
  }
}

void handleError(var e) {
  div.text = '$e';
}

ButtonElement load_blog = querySelector('#load_blog');
DivElement div = querySelector('#d0');
ButtonElement search_blog = querySelector('#search_blog');
InputElement search_text = querySelector('#search_text');
ButtonElement show_all_blog = querySelector('#show_all_blog');
ButtonElement view_random = querySelector('#view_random');
String url = 'http://mkamimura.com/kamimura_blog/javascript/' +
    'head_first_javascript/blog.xml';
ProgressElement progress = new ProgressElement();

class Blog implements Comparable {
  static String title;
  static List<Blog> blogs = [];
  static math.Random random = new math.Random();
  static void showBlog([int n]) {
    div.innerHtml = '';
    if (title != null) {
      DivElement div1 = new DivElement();
      div1.text = title;
      div.append(div1);
    }
    blogs.sort((Blog x, Blog y) => x.compareTo(y));
    n = n == null ? blogs.length : n;
    int i = 0;
    bool highlight = true;
    for (i = 0; i < n; i += 1) {
      BRElement br = new BRElement();
      div
          ..append(blogs[i].toHtml(highlight))
          ..append(br);
      highlight = !highlight;
    }
  }
  static void searchBlog() {
    String text = search_text.value;
    DivElement div1 = new DivElement();
    for (Blog blog in blogs) {
      if (blog.containText(text)) {
        div1 = blog.toHtml(true);
        break;
      }
    }
    if (div1 == null) {
      div1.innerHtml = '検索テキストを含むエントリは見つかりませんでした。';
    }
    div
        ..innerHtml = ''
        ..append(div1);
  }
  static void randomBlog() {
    Blog blog = blogs[random.nextInt(blogs.length)];
    div
        ..innerHtml = ''
        ..append(blog.toHtml(true));
  }
  DateTime date;
  String body;
  String image;
  String signature;
  Blog({Element date, Element body, Element image, Element signature}) {
    if (date != null) {
      List strs = date.text.split(new RegExp(r'/'));
      this.date = new DateTime(int.parse(strs[2]), int.parse(strs[0]),
          int.parse(strs[1]));
    } else {
      this.date = new DateTime.now();
    }
    this.body = body != null ? body.text : 'Nothing going on today';
    if (image != null) {
      this.image = image.text;
    }
    this.signature = signature != null ? signature.text : 'Anonymous';
    blogs.add(this);
  }
  int compareTo(Blog other) => other.date.compareTo(date);
  String shortFormat() => '${date.month}/${date.day}/${date.year}';
  DivElement toHtml(bool highlight) {
    DivElement div = new DivElement();
    if (highlight) {
      div.style.backgroundColor = '#EEEEEE';
    }
    Element strong = new Element.tag('strong');
    Element br = new BRElement();
    strong.text = this.shortFormat();
    div
        ..append(strong)
        ..append(br);
    TableElement table;
    if (image != null) {
      table = new TableElement();
      TableRowElement tr = new TableRowElement();
      TableCellElement td1 = new TableCellElement();
      ImageElement img = new ImageElement(src: image);
      TableCellElement td2 = new TableCellElement();
      td1.append(img);
      td2.style.verticalAlign = 'top';
      td2.text = body;
      tr
          ..append(td1)
          ..append(td2);
      table.append(tr);
      div.append(table);
    } else {
      Text text = new Text(body);
      BRElement br = new BRElement();
      div
          ..append(text)
          ..append(br);
    }
    Element em = new Element.tag('em');
    em.text = 'This blog created by $signature';
    div.append(em);
    return div;
  }
  bool containText(String text) => body.contains(new RegExp(text));
}

ajax.html

  <button id="load_blog">読み込み開始</button>
  <button id="search_blog" disabled="disabled">ブログ内を検索</button>
  <input type="text" id="search_text" name="search_text" value="" />
  <div id="d0"></div>
  <button id="show_all_blog" disabled="disabled">エントリをすべて表示</button>
  <button id="view_random" disabled="disabled">エントリのランダム表示</button>
  <div id="d0"></div>