Polymer.dart でも Material Design

2014.07.02

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

Material design with "Polymer.dart"

先日、弊社の諏訪から投稿のあった「 Material Design 」ですが、Dart でも core_elements, paper_elements として Pub がリリースされていたので試してみました。

Dart Editor の入手

Dart Editor はコチラからダウンロードします。

material-design-with-polymer-dart-01

エディタだけでなく SDK や専用ブラウザ「 Dartium ( DartVM を内蔵した Chromium )」が同梱されているので、これひとつで Dart プログラミングが始められます。

Polymer プロジェクトの作成

File メニューから「 New Project... 」を選択、「 Sample content 」は「 Sample web application using the polymer library 」としてプロジェクトを作成します。

material-design-with-polymer-dart-04

Pubspec の設定

Dart には Ruby の Gem のようなパッケージ管理機能「 Pub 」が用意されています。同じく、Gemfile に相当するファイルが「 pubspec.yaml 」であり、このファイルにパッケージ「 core_elements 」および「 paper_elements 」の記述を追加することで自動的にそれらがインストールされる仕組みになっています。

material-design-with-polymer-dart-06

HTML の実装

既存の HTML を下記内容で上書きします。

material_design_example.html
<!DOCTYPE html>

<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Material Design Example</title>

    <script src="packages/web_components/platform.js"></script>
    <script src="packages/web_components/dart_support.js"></script>

    <link rel="import" href="packages/core_elements/core_toolbar.html">
    <link rel="import" href="packages/core_elements/core_header_panel.html">
    <link rel="import" href="packages/core_elements/core_icons.html">
    <link rel="import" href="packages/paper_elements/paper_icon_button.html">
    <link rel="import" href="packages/paper_elements/paper_tabs.html">
    <link rel="import" href="packages/paper_elements/paper_tabs.html">
    <link rel="import" href="packages/paper_elements/paper_icon_button.html">
    <link rel="import" href="packages/paper_elements/paper_checkbox.html">
    <link rel="import" href="packages/paper_elements/paper_toggle_button.html">
    <link rel="import" href="packages/paper_elements/paper_radio_group.html">
    <link rel="import" href="packages/paper_elements/paper_fab.html">
    <link rel="import" href="packages/paper_elements/paper_slider.html">
    <link rel="import" href="packages/paper_elements/paper_progress.html">
    <link rel="import" href="packages/paper_elements/paper_input.html">

    <script type="application/dart" src="material_design_example.dart"></script>
    <script src="packages/browser/dart.js"></script>

    <style type="text/css">
      body {
        font-family: sans-serif;
      }
      core-header-panel {
        background: white;
        height: 100%;
        width: 100%;
      }
      core-toolbar {
        background-color: #00BFFF;
        color: #FFF;
        fill: #FFF;
      }
      p {
        margin: 10px;
        padding: 10px 10px;
      }
    </style>
  </head>
  <body fullbleed unresolved>
    <core-header-panel>
      <core-toolbar class="medium-tall">
        <paper-icon-button id="navicon" icon="arrow-back"></paper-icon-button>
        <span flex>Title</span>
        <paper-icon-button id="searchbutton" icon="menu"></paper-icon-button>
        <paper-tabs class="bottom fit">
          <paper-tab>ONE</paper-tab>
          <paper-tab>TWO</paper-tab>
        </paper-tabs>
      </core-toolbar>
      <p><paper-button label="flat button">Button</paper-button></p>
      <p><paper-button label="raised button" raisedButton>Button</paper-button></p>
      <p><paper-checkbox></paper-checkbox></p>
      <p><paper-checkbox checked></paper-checkbox></p>
      <p><paper-toggle-button></paper-toggle-button></p>
      <p>
        <paper-radio-group selected="small">
          <paper-radio-button name="small" label="Small"></paper-radio-button>
          <paper-radio-button name="medium" label="Medium"></paper-radio-button>
          <paper-radio-button name="large" label="Large"></paper-radio-button>
        </paper-radio-group>
      </p>
      <p><paper-fab icon="favorite"></paper-fab></p>
      <p><paper-slider min="10" max="200" value="110"></paper-slider></p>
      <p><paper-progress id="progress" value="10"></paper-progress></p>
      <p><paper-input label="Your Name"></paper-input></p>
    </core-header-panel>
  </body>
</html>

Dart の実装

下記 Dart ファイルを新規作成します。

material_design_example.dart
export 'package:polymer/init.dart';

import 'dart:async';
import 'dart:html';

void main() {
  HtmlElement progress = document.querySelector('#progress');
  int value = 0;
  new Timer.periodic(new Duration(milliseconds: 10), (Timer timer) {
    if (100 < value) {
      value = 0;
    }
    progress.attributes['value'] = value.toString();
    value += 1;
  });
}

Dart ファイルでは単純にプログレスバーを動かす処理をしているだけですね。

今回使われるファイルは「 material_design_example.html 」と「 material_design_example.dart 」の二点のみです。他のサンプルファイルについては削除して構いません。

アプリケーションの実行

ファイルツリーで「 material_design_example.html 」を選択し、右クリックで開いたコンテキストメニューから「 Run in Dartium 」で実行します。

material-design-with-polymer-dart-07

Dartium が起動し、Material Design のコンポーネントが表示されれば成功です!

まとめ

通常の Web 版との違いは個々のコンポーネントへのパスが異なる点と Web Components を Dart でサポートする為のスクリプトをロードしている程度でしょうか。 Dart Editor だけで気軽に試せるのは良いですね。(^_^)

サンプルについて

今回のサンプルプロジェクトは GitHub にて公開しています。

git clone git@github.com:inage-toru/material_design_example.git

クローン後、Dart Editor の File メニューから「 Open Existing Folder... 」で当該フォルダを開くと自動的に Pub のインストールが始まるので、それが終わり次第すぐ実行できます。