Sunday, October 16, 2011

Exploring Dart: Libraries – organizing your code.


Exploring Dart: Libraries – organizing your code.


One of the first things I like to find out about a new language is how to organize my code.
Dart provides three keywords for code organizing:
#library
eg:
#library("myLibrary");
#import
eg:
#import("myOtherLibrary.dart");
#import("blah/myOtherLibrary.dart");
#import("../myOtherLibrary.dart");
#import("http://dartwatch.com/myOtherLibrary.dart");
#import("myOtherLibrary.dart", prefix:"lib1");
#import("blah/myOtherLibrary.dart", prefix:"lib2");
etc...
#source
eg:
#source("mySource.dart");
etc...
The keyword #library defines a library.  This library can be located anywhere accessible by a uri.
The keyword #import makes other libraries available to the current code.  (note, the http:// format only currently works for client side code).
The keyword #source includes source files in the current library.
Working example
It’s probably best to show this by example.
Consider the following set of 4 files shown in Figure 1:

Figure 1
A library “dataModel” has been defined in file “dataModelLibrary.dart”.  This is defined by the #library(“dataModel”); statement.
The code that makes up the library has been organized into three source files: orderModel.dart, productModel.dart and customerModel.dart
This is defined by the various #source(“…”); statements.
We could have alternatively defined our library as per Figure 2 below:

Figure 2
The two are equivalent for users of the library.
The file shopExample.dart defines it’s own library “shopExample”.
It makes use of the dataModel library and creates a Customer() object, printing the customer name.

To see these libraries in action, you can create the following files
<!-- shopExample.dart -->
<html>
  <head>
    <title>shopExample</title>
  </head>
  <body>
    <h1>shopExample</h1>

    <script type="application/dart" src="shopExample.dart" />
  </body>
</html>

//shopExample.dart
#library('shopExample');

#import('dart:dom');
#import("http://dartwatch.com/example/data/dataModelLibrary.dart");

class shopExample {

  shopExample() {
  }

  void run() {
    Customer customer = new Customer("Chris");
    write("Hello " + customer.name);
  }

  void write(String message) {
     // the DOM library defines a global "window" variable
    HTMLDocument doc = window.document;
    HTMLParagraphElement p = doc.createElement('p');
    p.innerText = message;
    doc.body.appendChild(p);
  }
}

void main() {
  new shopExample().run();
}
And put them in the same folder.  The shopExample code is essentially the “Hello World” code created by the “New Application” wizard in the dart editor.
Assuming that you have a build environment set up, you can point the htmlconverter.py utility at it (described on google code, but it converts an html file and a set of dart files into a single html + embedded javascript file for running in the browser (google chrome at the moment)).
my command line reads (from ~/dart/shopExample folder):
python ../../dart-devel/dart/client/tools/htmlconverter.py ./shopExample.html -o out/
This puts a file called shopExample-js.html into the ./out folder.
Open that in google chrome, and you should see a “Hello Chris” message.
What has happened is that in converting the dart to javascript, the files in the url referencing dataModelLibrary.dart and other referenced source files have been downloaded and incorporated into the final output shopExample-js.html file.

There are a couple of inconsistencies at present, which are detailed on this post on the dartLang google group, but it’s still very early days with the language and tools and it’s likely that this area is very much still in flux.

No comments:

Post a Comment