Setting ACE Content from Dart

‹prev | My Chain | next›

Up tonight, some more behavior driven development of the Dart version of the ICE Code Editor. The ICE Code Editor is the thing that I have kids use while coding in 3D Game Programming for Kids, so it's got to be right. While adding new features to the original JavaScript version of ICE, it seemed like things were starting to slip: bugs, documentation, browser support—all the things Dart excels at. So why not convert to Dart?

I need to be able to set the content of the actual code editor (ICE has a code editor and preview layer for visualizations). I have js-interop working with ACE code editor to create a running instance of ACE. Hopefully I can continue to use that instance to do things like setting the content.

This is useful when the editor gets embedded on webpages. It is also necessary when switching between projects. In the JavaScript version, I had to use silly setter and getter methods (setContent() / getContent()). In Dart, I can make them real gettters and setters.

I start with a test to verify that I can set the content. The test will exercise both the setter and getter on the editor:

    test("can set the content", () {
      var it = new Editor('ice');
      it.content = 'asdf';
      expect(it.content, equals('asdf'));
    });

When I first run the test, I get a failure because I have not added the necessary code to ICE:

FAIL: content can set the content
  Caught Class 'Editor' has no instance setter 'content='.
  
  NoSuchMethodError : method not found: 'content='
  Receiver: Instance of 'Editor'
  Arguments: ["asdf"] 

I can make the test pass fairly easily:

class Editor {
  // ...
  String _content;
  set content(String data) {
    _content = data;
  }

  get content => _content;
}

Heck, I could have defined a regular instance variable and gotten the default instance variable setter and getter methods. In either case, I am not doing what I want—setting and getting the the ACE content. So, with a passing test, I go about changing the implementation:

class Editor {
  var ace;

  Editor(el, {this.edit_only:false, this.autoupdate:true, this.title}) {
    ace = js.context.ace.edit(el);
  }

  set content(String data) {
    ace.setContent(data);
  }
  // ...
}

When I run the tests again, I get a failure:

FAIL: content can set the content
  Caught NoSuchMethodError : method not found: 'setContent'
  Receiver: Instance of 'Proxy'
  Arguments: ["asdf"]

At first, the reference to Proxy makes me think that I need to do more js-interop setup than I had been doing. Eventually, I realize that this is not the case. I should be able to call JavaScript methods on JavaScript objects from Dart—as long as the methods are actually defined in JavaScript.

I had simply gotten the method name wrong. So I switch to the correct setValue():

import 'dart:html';
import 'package:js/js.dart' as js;

class Editor {
  bool edit_only, autoupdate;
  String title;
  var _ace;

  Editor(el, {this.edit_only:false, this.autoupdate:true, this.title}) {
    _ace = js.context.ace.edit(el);
  }

  set content(String data) {
    _ace.setValue(data, -1);
  }

  String get content => _ace.getValue();
}

With that, I now have four passing tests:

unittest-suite-wait-for-done
PASS: defaults defaults to auto-update the preview
PASS: defaults defaults to disable edit-only mode
PASS: defaults starts an ACE instance
PASS: content can set the content

All 4 tests passed. 

The last thing that I do is try it out in the browser, so I update the example page to set some initial test content:

import 'package:ice_code_editor/editor.dart' as ICE;

main() {
  var ice = new ICE.Editor('ace');
  ice.content = '''
main() {
  print("Dart rocks");
}''';

}

Then, when I reload the page, I see:



I love having the test around to ensure that things continue to work, but there is something exciting about actually seeing it. This will serve as a stopping point for tonight. Up tomorrow: the preview element.



Day #739