butlermatt/clickcounter.dart

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

import 'package:polymer/polymer.dart';

/**
 * A Polymer click counter element.
 */
@CustomTag('click-counter')
class ClickCounter extends PolymerElement {
  @observable String name = '';
  @observable String Address = '';
  @observable String notes = '';
  @observable String test = '';

  num _test = 0;

  testChanged() {
    _test = num.parse(test);
  }

  ClickCounter.created() : super.created() {
  }

  void save(Event e, var detail, Node node) {
    e.preventDefault();

    var form = e.target as FormElement;
    var data = this.toJson();

    HttpRequest.postFormData(form.action, data).then((req) {
      print(req.statusText);
    });
  }

  Map toJson() {
    return {
      'Address' : Address,
      'name' : name,
      'notes' : notes,
      'test' : '$_test'
      };
  }

}

## clickcounter.html
<polymer-element name="click-counter" attributes="count">
  <template>
    <style>
      div {
        font-size: 24pt;
        text-align: center;
        margin-top: 140px;
      }
      button {
        font-size: 24pt;
        margin-bottom: 20px;
      }
    </style>
     <div>
      <form action="my/api/save" on-submit="{{save}}">
        <label>Name: <input type="text" id="name" value="{{name}}" ></label><br>
        <label>Address: <input type="text" id="address" value="{{address}}"></label><br>
        <label>Notes: <textarea id="notes" value="{{notes}}"></textarea></label><br>
        <input type="submit" value="Save!">
      </form>
    </div>
  </template>
  <script type="application/dart" src="clickcounter.dart"></script>
</polymer-element>

## pdfexample.html
<!DOCTYPE html>

<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Sample app</title>
    <link rel="stylesheet" href="pfdexample.css">

    <!-- import the click-counter -->
    <link rel="import" href="clickcounter.html">
    <script type="application/dart">export 'package:polymer/init.dart';</script>
    <script src="packages/browser/dart.js"></script>
  </head>
  <body>
  <div>
    <click-counter></click-counter>
  </div>

  </body>
</html>
	import 'dart:html';

	import 'package:polymer/polymer.dart';

	/**
	* A Polymer click counter element.
	*/
	@CustomTag('click-counter')
	class ClickCounter extends PolymerElement {
	@observable String name = '';
	@observable String Address = '';
	@observable String notes = '';
	@observable String test = '';

	num _test = 0;

	testChanged() {
	_test = num.parse(test);
	}

	ClickCounter.created() : super.created() {
	}

	void save(Event e, var detail, Node node) {
	e.preventDefault();

	var form = e.target as FormElement;
	var data = this.toJson();

	HttpRequest.postFormData(form.action, data).then((req) {
	print(req.statusText);
	});
	}

	Map toJson() {
	return {
	'Address' : Address,
	'name' : name,
	'notes' : notes,
	'test' : '$_test'
	};
	}

	}
	<polymer-element name="click-counter" attributes="count">
	<template>
	<style>
	div {
	font-size: 24pt;
	text-align: center;
	margin-top: 140px;
	}
	button {
	font-size: 24pt;
	margin-bottom: 20px;
	}
	</style>
	<div>
	<form action="my/api/save" on-submit="{{save}}">
	<label>Name: <input type="text" id="name" value="{{name}}" ></label><br>
	<label>Address: <input type="text" id="address" value="{{address}}"></label><br>
	<label>Notes: <textarea id="notes" value="{{notes}}"></textarea></label><br>
	<input type="submit" value="Save!">
	</form>
	</div>
	</template>
	<script type="application/dart" src="clickcounter.dart"></script>
	</polymer-element>
	<!DOCTYPE html>

	<html>
	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Sample app</title>
	<link rel="stylesheet" href="pfdexample.css">

	<!-- import the click-counter -->
	<link rel="import" href="clickcounter.html">
	<script type="application/dart">export 'package:polymer/init.dart';</script>
	<script src="packages/browser/dart.js"></script>
	</head>
	<body>
	<div>
	<click-counter></click-counter>
	</div>

	</body>
	</html>