Dart - ダイナミックなデータ(HttpRequest, onProgress event, progress bar)

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章(ダイナミックなデータ)、自分で考えてみよう(p.571)をDartで考えてみる。

その他参考書籍

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

自分で考えてみよう(p.571)

コード

ajax.dart

import 'dart:html';

void main() {
  run.onClick.listen((MouseEvent event) {
    div.innerHtml = '';
    div.append(new ProgressElement());
    HttpRequest.request(url).then(processRequest).catchError(handleError);
  });
  clear.onClick.listen((MouseEvent event) => div.innerHtml = '');
}

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);
  } catch (e) {
    div.text = '$e';
  }
}

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

ButtonElement run = querySelector('#run_dart');
ButtonElement clear = querySelector('#clear');
DivElement div = querySelector('#d0');
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 = [];
  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);
  }
  static void showBlog([int n]) {
    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;
    }
  }
  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;
  }
}