marycampione/name_badge_element.dart

## name_badge_element.dart
library piratebadge;

import 'dart:html';
import 'dart:math';
import 'package:polymer/polymer.dart';

@CustomTag('name-badge')
class NameBadge extends PolymerElement with ObservableMixin {
  @observable String badgename = 'Bob';
  @observable bool female = true;
  @observable bool male = false;

  NameBadge() {
    bindProperty(this, const Symbol('female'), () {
        if (female) {
          male = false;
        }
        notifyProperty(this, const Symbol('name'));
      });
    bindProperty(this, const Symbol('male'), () {
        if (male) {
          female = false;
        }
        notifyProperty(this, const Symbol('name'));
      });
  }

  void pirateName(Event event, var detail, Node target) {
    if (female) {
      badgename = new PirateName.female().name;
    } else {
      badgename = new PirateName.male().name;
    }
  }
}

//library models;
class PirateName {

  Random indexGenerator = new Random();

  String _pirateName;

  String get name => _pirateName;
         set name(String value) => _pirateName = value;

  String toString() => name;

  static const List titles = const [ 'Captn', 'Mate', 'Sailor'];
  static const List maleNames = const [ 'Jack', 'Jonas', 'Billy'];
  static const List femaleNames = const [ 'Jane', 'Sue', 'Maria'];

  PirateName.male() {
    String title = titles[indexGenerator.nextInt(titles.length)];
    String firstName = maleNames[indexGenerator.nextInt(maleNames.length)];
    _pirateName = '$title $firstName';
  }

  PirateName.female() {
    String title = titles[indexGenerator.nextInt(titles.length)];
    String firstName = femaleNames[indexGenerator.nextInt(femaleNames.length)];
    _pirateName = '$title $firstName';
  }

}

// list, random?, string interpolation, cascade, fat arrow, optional parameters
// named constructors.
// getters
// possible cascades: where. foreach, tostring

## name_badge_element.html
<polymer-element name="name-badge">
  <template>
    <style>
    .entry {
      padding-bottom: 20pt;
    }
    .outer {
      border: 2px solid brown;
      border-radius: 1em;
      background: red;
      font-size: 20pt;
      width: 12em;
      height: 7em;
      text-align: center;
    }
    .boilerplate {
      color: white;
      font-family: sans-serif;
      padding: 0.5em;
    }
    .name {
      color: black;
      background: white;
      font-family: "Marker Felt", cursive;
      font-size: 45pt;
      padding-top: 0.5em;
      padding-bottom: 0.3em;
    }
    </style>
    <div class="entry">
      <label for="newName">Enter New Name:</label>
      <input type="text" id="newName" value="{{badgename}}">
      <button on-click="pirateName">Generate pirate name</button>
      <input name="maleOrFemale" type="radio" value="male" checked={{male}}>Male
      <input name="maleOrFemale" type="radio" value="female" checked={{female}}>Female
    </div>
    <div class="outer">
      <div class="boilerplate">
        Hi! My name is
      </div>
      <div class="name">
        {{badgename}}
      </div>
    </div>
  </template>
  <script type="application/dart" src="name_badge_element.dart"></script>
</polymer-element>


## namebadge_app.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;
}

## namebadge_app.html
<!DOCTYPE html>

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

    <link rel="import" href="name_badge_element.html">
    <script src="packages/polymer/boot.js"></script>
  </head>
  <body>
    <h1>NameBadge</h1>

    <name-badge></name-badge>

  </body>
</html>
	library piratebadge;

	import 'dart:html';
	import 'dart:math';
	import 'package:polymer/polymer.dart';

	@CustomTag('name-badge')
	class NameBadge extends PolymerElement with ObservableMixin {
	@observable String badgename = 'Bob';
	@observable bool female = true;
	@observable bool male = false;

	NameBadge() {
	bindProperty(this, const Symbol('female'), () {
	if (female) {
	male = false;
	}
	notifyProperty(this, const Symbol('name'));
	});
	bindProperty(this, const Symbol('male'), () {
	if (male) {
	female = false;
	}
	notifyProperty(this, const Symbol('name'));
	});
	}

	void pirateName(Event event, var detail, Node target) {
	if (female) {
	badgename = new PirateName.female().name;
	} else {
	badgename = new PirateName.male().name;
	}
	}
	}

	//library models;
	class PirateName {

	Random indexGenerator = new Random();

	String _pirateName;

	String get name => _pirateName;
	set name(String value) => _pirateName = value;

	String toString() => name;

	static const List titles = const [ 'Captn', 'Mate', 'Sailor'];
	static const List maleNames = const [ 'Jack', 'Jonas', 'Billy'];
	static const List femaleNames = const [ 'Jane', 'Sue', 'Maria'];

	PirateName.male() {
	String title = titles[indexGenerator.nextInt(titles.length)];
	String firstName = maleNames[indexGenerator.nextInt(maleNames.length)];
	_pirateName = '$title $firstName';
	}

	PirateName.female() {
	String title = titles[indexGenerator.nextInt(titles.length)];
	String firstName = femaleNames[indexGenerator.nextInt(femaleNames.length)];
	_pirateName = '$title $firstName';
	}

	}

	// list, random?, string interpolation, cascade, fat arrow, optional parameters
	// named constructors.
	// getters
	// possible cascades: where. foreach, tostring
	<polymer-element name="name-badge">
	<template>
	<style>
	.entry {
	padding-bottom: 20pt;
	}
	.outer {
	border: 2px solid brown;
	border-radius: 1em;
	background: red;
	font-size: 20pt;
	width: 12em;
	height: 7em;
	text-align: center;
	}
	.boilerplate {
	color: white;
	font-family: sans-serif;
	padding: 0.5em;
	}
	.name {
	color: black;
	background: white;
	font-family: "Marker Felt", cursive;
	font-size: 45pt;
	padding-top: 0.5em;
	padding-bottom: 0.3em;
	}
	</style>
	<div class="entry">
	<label for="newName">Enter New Name:</label>
	<input type="text" id="newName" value="{{badgename}}">
	<button on-click="pirateName">Generate pirate name</button>
	<input name="maleOrFemale" type="radio" value="male" checked={{male}}>Male
	<input name="maleOrFemale" type="radio" value="female" checked={{female}}>Female
	</div>
	<div class="outer">
	<div class="boilerplate">
	Hi! My name is
	</div>
	<div class="name">
	{{badgename}}
	</div>
	</div>
	</template>
	<script type="application/dart" src="name_badge_element.dart"></script>
	</polymer-element>
	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;
	}
	<!DOCTYPE html>

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

	<link rel="import" href="name_badge_element.html">
	<script src="packages/polymer/boot.js"></script>
	</head>
	<body>
	<h1>NameBadge</h1>

	<name-badge></name-badge>

	</body>
	</html>