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
web directory by the generator. I have been placing them in lib/elements when doing this by hand. I also note that
pubspec.yaml for 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.html
Without 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.html and backing Dart class and rename web/hello_you.html to my preferred web/index.html:
And, when I click the run button, Dart Editor seems to have figured out that I renamed the
web file because now the launched Dartium is pointing to the newly renamed index.html and, 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-Z reverted 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.Day #1,029
The problem your reader was having, I think, is that they were trying to use clickcounter.html as the entry point. I still have this problem when I forget and click run while the elements html file window has the focus. It will try and run the file you have in focus, and this often happens when I'm clicking on the run button at the top of the IDE. While this doesn't always happen, it does often enough I make sure the entry point has the focus before I click run. This is an inherited functionality from Eclipse, since that's what the Dart Editor is. If you click on the down arrow by the run button, you will get a list of run profiles. You can even edit these profiles and set it up directly/explicitly rather than relying on the Dart Editor figuring out which file to use as the entry point. Like anything it will give you enough rope to hang yourself with if you're not careful, though the Dart Editor is better than most.
ReplyDeleteThen people, like yourself, have their own favourite editors. My second love is Emacs, but I'm not an expert in using it like you. I never got into using Vim other than as a standard text editor on the command line, for config files on a server or my desktop machine.
This is a great intro to Polymer with Dart! Thank you! I've tried using the CLI as well but many more challenges not knowing Dart as well as JavaScript. Any tips on creating Dart Applications with VIM and CLI tooling?
ReplyDeleteWow, do I have just the thing for you! The Dart version of http://patternsinpolymer.com/ should be pretty ideal :)
DeleteYou really walked into that one!
But seriously, most of my research notes for that book are available on this blog. I had some previous experience with Dart and Polymer, so this may be the closest that I come to a getting started guide: http://japhr.blogspot.com/2013/11/converting-javascript-polymer-to-dart.html.
There are also posts on application layout, testing, and developing (e.g. using Grunt) on this blog. Then again, I do my best to distill those ideas into best practices in http://patternsinpolymer.com/ (none of which use the Dart Editor) so that may be something to check out too :D
Yes I did. :) Awesome! Thanks Chris. I'll get the book ASAP. I wasn't aware the book covered that based on the title. Lucky for me though
Delete