chrisbu/polymerclicker1.css

## polymerclicker1.css
body {
  background-color: #F8F8F8;
  font-family: 'Open Sans', sans-serif;
  font-size: 14px;
  font-weight: normal;
  line-height: 1.2em;
  margin: 15px;
}

h1, p {
  color: #333;
}

#sample_container_id {
  width: 100%;
  height: 400px;
  position: relative;
  border: 1px solid #ccc;
  background-color: #fff;
}

#click_counter {
  font-size: 24pt;
  text-align: center;
  margin-top: 140px;
}

#click_counter button {
  font-size: 24pt;
  margin-bottom: 20px;
}

## polymerclicker1.dart
import 'dart:html';

void main() {
  query("#counter_template").model = 5;
}

## polymerclicker1.html
<!DOCTYPE html>

<html>
  <head>
    <meta charset="utf-8">
    <title>Sample app</title>
    <link rel="stylesheet" href="polymerclicker1.css">

    <!-- import the click-counter -->
    <link rel="import" href="xclickcounter.html">
  </head>
  <body>
    <h1>Polymerclicker1</h1>

    <p>Hello world from Dart!</p>

    <div id="sample_container_id">
      <template id="counter_template" bind>
        <my-clickcounter id="click_counter" count="{{}}"></my-clickcounter>
      </template>
    </div>

    <script type="application/dart" src="polymerclicker1.dart"></script>
    <script src="packages/polymer/boot.js"></script>
  </body>
</html>

## xclickcounter.dart
import 'package:polymer/polymer.dart';

@CustomTag("my-clickcounter")
class CounterComponent extends PolymerElement
                        with ObservableMixin {
  @observable
  int count = 0;

  void increment() {
    count++;
  }
}

## xclickcounter.html
<!DOCTYPE html>

<html>
  <body>
    <polymer-element name="my-clickcounter" attributes="count">
      <template>
        <div>
          <button on-click="increment">Click me</button><br />
          <span>(click count: {{ count }})</span>
        </div>
      </template>
      <script type="application/dart" src="xclickcounter.dart"></script>
    </polymer-element>
  </body>
</html>
	body {
	background-color: #F8F8F8;
	font-family: 'Open Sans', sans-serif;
	font-size: 14px;
	font-weight: normal;
	line-height: 1.2em;
	margin: 15px;
	}

	h1, p {
	color: #333;
	}

	#sample_container_id {
	width: 100%;
	height: 400px;
	position: relative;
	border: 1px solid #ccc;
	background-color: #fff;
	}

	#click_counter {
	font-size: 24pt;
	text-align: center;
	margin-top: 140px;
	}

	#click_counter button {
	font-size: 24pt;
	margin-bottom: 20px;
	}
	import 'dart:html';

	void main() {
	query("#counter_template").model = 5;
	}
	<!DOCTYPE html>

	<html>
	<head>
	<meta charset="utf-8">
	<title>Sample app</title>
	<link rel="stylesheet" href="polymerclicker1.css">

	<!-- import the click-counter -->
	<link rel="import" href="xclickcounter.html">
	</head>
	<body>
	<h1>Polymerclicker1</h1>

	<p>Hello world from Dart!</p>

	<div id="sample_container_id">
	<template id="counter_template" bind>
	<my-clickcounter id="click_counter" count="{{}}"></my-clickcounter>
	</template>
	</div>

	<script type="application/dart" src="polymerclicker1.dart"></script>
	<script src="packages/polymer/boot.js"></script>
	</body>
	</html>
	import 'package:polymer/polymer.dart';

	@CustomTag("my-clickcounter")
	class CounterComponent extends PolymerElement
	with ObservableMixin {
	@observable
	int count = 0;

	void increment() {
	count++;
	}
	}