I have quite enjoyed playing with Material Design concepts of late. Interestingly, the solutions that I wound up with, both in Dart and JavaScript, rely on Core Elements instead of the material design based Paper Elements.
Rather than try to cram Paper into my very pretty Core/Material design in
<x-pizza>, I start a completely new project. In this case, I am going to try to use the Paper elements directly in a Dart application rather than pulling them into another Polymer.dart element.I start this “paper” application with a
pubspec.yaml of:name: paper dependencies: polymer: any paper_elements: any transformers: - polymerI had originally thought to skip the
polymer dependency, but without it, pub serve will complain:$ pub serve Error in pubspec for package "paper" loaded from pubspec.yaml: "transformers.polymer" refers to a package that's not a dependencyAnd if I try to remove the transformer, Dartium complains:
Exception: Missing initialization of polymer elements. Please check that the list of entry points in your pubspec.yaml is correct. If you are using pub-serve, you may need to restart it.So, even though I am not creating my own Polymer elements, I need Polymer listed as a dependency. I also have to initialize the page in the same manner—the
index.html file looks like:<!DOCTYPE html>
<html>
<head>
<title>Play Paper</title>
<!-- Load platform polyfills -->
<script src="packages/web_components/platform.js"></script>
<script src="packages/web_components/dart_support.js"></script>
<!-- Load component(s) -->
<link rel="import"
href="packages/paper_elements/paper_dialog.html">
<link rel="import"
href="packages/paper_elements/paper_button.html">
<!-- Start Polymer -->
<script type="application/dart">
export 'package:polymer/init.dart';
</script>
</head>
<body>
<h1>Play Paper</h1>
<!-- ... -->
</body>
</html>
That is the same setup that I use with any Polymer code—the same way to load the JavaScript polyfills (and associated Dart support), the same way to import the elements (Paper in this case) and the same way to start the Polymer.dart system.As the elements being imported suggest, I am going to try a simple Paper dialog in Dart, so I add the following custom HTML (copied from the JavaScript documentation):
<paper-dialog heading="Title for dialog" opened="true">
<p>Lorem ipsum ....</p>
<p>Id qui scripta ...</p>
<paper-button label="More Info..." dismissive></paper-button>
<paper-button label="Decline" affirmative></paper-button>
<paper-button label="Accept" affirmative autofocus></paper-button>
</paper-dialog>opened attribute on <paper-dialog>. This would normally be accomplished via the toggle() method on <paper-dialog> elements, but I am simply hoping to verify that Paper works tonight. I will worry about additional interaction another night.After starting the
pub serve test web server, I find:
That was easy! But it certainly could look better—especially when I compare it to everything else in Material design. To get somewhat better results, I follow along with the Material Typography guide, and switch to the Roboto font:
<head>
<title>Play Paper</title>
<link href='http://fonts.googleapis.com/css?family=Roboto' rel='stylesheet' type='text/css'>
<style>
html { font-family: 'Roboto', sans-serif; }
paper-button[autofocus] {
color: #4285f4;
}
paper-button:hover {
color: #2a56c6;
}
paper-button::shadow #ripple {
color: #2a56c6;
}
</style>
<!-- Load platform polyfills -->
<!-- ... -->
</head>
So Paper in Dart turns out to be blessedly easy—at least getting started with it. I may add some interaction or play with some additional elements tomorrow. Or, if that turns out to be too easy (because Polymer.dart works too darn well), then I may move on to other topics.
Day #158
No comments:
Post a Comment