Getting Started with the Dart Editor (and Dart Mode)

‹prev | My Chain | next›

While my Dart-enabled browser continues to download and build (seriously, do I really need 4.5G of "LayoutTests" to do that?), I think it wise to skip ahead and try alternate means of running actual Dart code.

That means downloading the latest, stable (for now) version of the "Dart Editor":

➜  Downloads  wget http://gsdview.appspot.com/dart-editor-archive-integration/latest/DartBuild-linux.gtk.x86_64.zip

Bah! I hate ZIP files. I never know if they contain a single directory with everything in it or a bunch of files and sub-directories that are going to get mixed up with my current working directory. No doubt there is a tar tzf equivalent, but I know I will never remember it. So I create a temporary directory into which I can extract the ZIP file:

➜  ~  cd ~/tmp
➜  tmp  mkdir dart-editor
➜  tmp  cd !$
➜  tmp  cd dart-editor
➜  dart-editor  unzip ~/Downloads/DartBuild-linux.gtk.x86_64.zip
...

It turns out that there is a single directory, dart, in the ZIP which contains:

➜  dart-editor  ls -1 dart
about_files
about.html
configuration
DartEditor
DartEditor.ini
features
icon.xpm
libraries
plugins
samples
workspace

I normally install local code like this in my $HOME/local directory (rather than risk a sudo install). That directory seems a reasonable place for this:

➜  dart-editor  mv dart ~/local 
➜  dart-editor  cd ~/local/bin 
➜  bin  ln -s ../dart/DartEditor

The ~/local/bin directory path is already in my $PATH, so, by sym-linking the editor in there, I can run DartEditor from anywhere (including Gnome Do):

➜  ~  DartEditor

When I do that, I get a lovely splash screen:

Followed by a very IDE looking editor:

Which contains some simple getting started instructions:

Following those instructions, I would like to experiment with simple iterators:

Quite nicely, that creates a new iterator.dart file and an iterator.html file that will load the Javascript compiled version of that Dart code. The generated Dart is a pretty decent start. It simply appends "Hello World!" to the "status" element in the calling web page:

Since I desire to try a simple iterator, I modify the code slightly:

#import('dart:html');

class iterator {

  iterator() {
    document.query('#status').innerHTML = '';
  }

  void run() {
    [0,1,2,3,4,5,6,7,8,9].forEach((i) {
      write("Hello World #" + i + "!<br/>");
    });
  }

  void write(String message) {
    // the HTML library defines a global "document" variable
    document.query('#status').innerHTML += message;
  }
}

void main() {
  new iterator().run();
}

In there, I blank out the "status" <div> in the iterator() constructor. Then, in run() I iterate through a list of integer elements (I will have to explore ranges another day) with the forEach() method. There seem to be a number of different ways to express an anonymous function in Dart. Here, I use the argument list followed by curly braces. Last up, I change write() to append to the "status" <div>.

When I try to run that code with the "Run in Browser" button, however, I am greeted by:

So I manually compile the dart into Javascript by selecting "Generate Optimized Javascript..." from the "Tools" menu and supplying the output path as: /home/cstrom/dart/iterator/iterator.dart.app.js. That seems to work (at least it didn't error out).

Checking it out in my browser, I see:

Yay!

In the end, I am going to use Emacs to edit Dart code just like I use Emacs to edit everything else. Happily, there is an Emacs wonk or two at Google, meaning that there is already a dart-mode major Emacs mode. It is not in elpa yet, so I have to install it the old-fashioned way:

➜  ~  cd ~/.emacs.d 
➜  .emacs.d git:(24) ✗ 
➜  .emacs.d git:(24) ✗ wget http://dart-mode.googlecode.com/git/dart-mode.el
...
2011-12-29 22:35:48 (169 KB/s) - `dart-mode.el' saved [15705]

Then, in my dot emacs file, I require and auto-load dart-mode:

(require 'dart-mode)
(add-to-list 'auto-mode-alist '("\\.dart\\'" . dart-mode))

With that, I have beautiful Dart code (well, not hideously ugly) in a beautiful editor:

That is a good stopping point for tonight. Hopefully tomorrow "Dartium" will have finished compiling.

Day #249