A reader of Patterns in Polymer sent me a question over the weekend asking how to create a simple Polymer.dart application in the Dart Editor. The answer is… I have no idea.
I'm sure the Dart Editor is all kinds of wonderful. Various screencasts and animated GIFs would seem to bear this out. But the fact of the matter is that I have tried on several occasions to use IDEs—going once for as long as 3 months—without success. For better or worse (hint: for better), I am and always will be an Emacs user.
But knowing how to create Polymer applications in the Dart Editor seems like a reasonable thing to know how to do, so…
I start the lovely Editor and select File → New Application. I will call this “hello_you” in an attempt to recreate some of the very simple
<hello-you>Polymers that I have previously done in the One True Editor™. I choose the location for the application, leave “Generate sample content” checked and choose “Web application (using the polymer library)” as the content type:
The result is a familiar Polymer application:
I note that the Polymer definition and backing Dart class are both included in the
webdirectory by the generator. I have been placing them in
lib/elementswhen doing this by hand.
I also note that
pubspec.yamlfor this generated application includes the Polymer transformer:
name: hello_you description: A sample Polymer application dependencies: polymer: any transformers: - polymer: entry_points: web/hello_you.htmlWithout making any changes to the default generated application, I click the run button to start the default application launch:
With that, I am greeted with the sample application running in Dartium:
Interestingly, my reader indicated a problem here. Specifically, right-clicking on the generated HTML would start an empty Dartium. If I do the same with the application HTML,
hello_you.html, then it still works. But, if I right-click and run the Polymer HTML (
clickcounter.html), then I get a blank Dartium window. So perhaps that is the trouble. Regardless, clicking the Run button avoids this entirely, so that seems the best recommendation.
After that, I create my
lib/elements/hello-you.htmland backing Dart class and rename
web/hello_you.htmlto my preferred
And, when I click the run button, Dart Editor seems to have figured out that I renamed the
webfile because now the launched Dartium is pointing to the newly renamed
index.htmland, more importantly, it is running my simple
<hello-you>Polymer instead of the click counter generated Polymer:
So, in the end, I have to admit that it was pretty easy to get both the same Polymer and my custom Polymer up and running in the Dart Editor. Don't get me wrong, I deleted all of the code in the editor at least twice because of dumb (i.e. non-Emacs) key-bindings, but
Ctrl-Zreverted the change easily enough. There is no way that anyone is ever going to catch me coding regularly in this thing, but as IDEs go, the Dart Editor seems to have some nice things to offer.