Debugging a Dart application

The clear button on the editor is a bit dangerous as it may wipe out some vital notes. We will provide the user with a simple Are you sure? prompt so that they have a chance to back out of the operation.

You are probably thinking that we could use the Dart equivalent of window.confirm to carry it out. We certainly could, but to demonstrate the ability to call JavaScript, we will use the non-Dart version to display a prompt to the user.

Open main.dart and add the following import to the top of the file:

import 'dart:js';

In the Dart Analysis tab directly below the Dart code editor window, you will see a warning that we have an unused import. This can be a useful tip once a project has grown and code has been moved around into separate packages and classes. Import lists can soon acquire clutter.

To call the JavaScript confirm dialog, we use the context object from dart:js in the button click event handler. The context object is a reference to JavaScript's global object:

void clearEditor(MouseEvent event) {
  var result = context.callMethod('confirm',
      ['Are you sure you want to clear the text?']);
  if (result == true) {
    theEditor.text = "";
    saveDocument();
  }
}

The callMethod method can be used to call any JavaScript function available in the scope of the page—not just built in objects. In this case, the first parameter is the name of the function we wish to call and the second parameter is the list of arguments for that method.

Our text editor foundation is looking complete at this point, but there is one important element that is missing from the main.dart file—code comments.

Dart uses the following familiar commenting syntax:

In mentioning an identifier, place square brackets around the name. For example:

/// Returns double of [a] input.
int doubleANumber(int a){
    //Assumes parameter valid.
     return a * 2;
}

Take a short time to comment each function with the above style. Use a sentence format and punctuation.