financecoding

Dart classify markup example

financecoding — Thu, 09 Feb 2012 08:27:29 +0000

I was looking for a simple way to create some markup dynamically of syntax highlighted dart code, in dart! A big thanks to Bob Nystrom from the Dart team for suggesting the simplest solution. Use classify from dartdoc.

A live example of this can be found here along with the source code.

Example of how to use dartdoc/classify.dart
dartdoc is used for generating static HTML for the api.dartlang.org site. This example shows how importing dartdoc/classify.dart one could generate syntax highlighted dart code at runtime.

Patching
Currently you need to modify the import statement to reference the location of classify.dart.

#import('../../dart_bleeding/dart/utils/dartdoc/classify.dart', prefix:"classify");

Building
Build with minfrog for best results. At the moment dart editor does not seem happy with me on importing dartdoc/classify.dart. So compiling with minfrog worked best.

minfrog --compile-only --out=ClassifyExample.dart.js ClassifyExample.dart

Using classify
This is the easiest part! Create a SourceFile and add pass it along to classifySource which will return a properly formatted string of span elements that has class attributes set. From that point you can add a css style to the span elements.

    String code = "main() { print('hello world'); }";
    classify.SourceFile sf = new classify.SourceFile("sf.dart", code);
    String c = classify.classifySource(sf);

   main() 
   { print
   ('hello world'
   ); }

Example css style

/* Syntax highlighting. */
/* Note: these correspond to the constants in classify.dart. */
.e { color: hsl(  0, 100%, 70%); } /* Error */
.c { color: hsl(220,  20%, 65%); } /* Comment */
.i { color: hsl(220,  20%, 20%); } /* Identifier */
.k { color: hsl(220, 100%, 50%); } /* Keyword */
.p { color: hsl(220,  20%, 50%); } /* Punctuation */
.o { color: hsl(220,  40%, 50%); } /* Operator */
.s { color: hsl( 40,  90%, 40%); } /* String */
.n { color: hsl( 30,  70%, 50%); } /* Number */
.t { color: hsl(180,  40%, 40%); } /* Type Name */
.r { color: hsl(200, 100%, 50%); } /* Special Identifier */
.a { color: hsl(220, 100%, 45%); } /* Arrow */

/* Interpolated expressions within strings. */
.si {
  background: hsl(40, 100%, 90%);
}

.s.si { background: hsl(40, 80%, 95%); }
.i.si { color: hsl(40, 30%, 30%); }
.p.si { color: hsl(40, 60%, 40%); }

Dart: Quick 0-60 with DartEditor and Dartium on MacOSX.

financecoding — Mon, 30 Jan 2012 05:55:02 +0000

Quick 0-60 with DartEditor and Dartium on MacOSX. The DartEditor now comes with the ability to launch Dartium directly. The key to getting that to work is to have Chromium folder located in the dart-sdk. Below is a simple script to bootstrap your MacOSX from the latest builds. Note, if you move the directory around you’ll need to adjust the runDartEditor.sh script. ~~DartEditor expects an absolute path for the -debug flag. By the time Dartium hits the dart-sdk, his route will be obsolete.~~
Now support for choosing frogc or dartc is available in the GUI options.

git clone git://gist.github.com/1702746.git DartEditor
cd DartEditor
chmod +x get_and_unpack.sh 
./get_and_unpack.sh && cd dart && ./runDartEditor.sh

https://gist.github.com/1702746

Dart: A short introduction to dart.

financecoding — Sun, 29 Jan 2012 19:16:35 +0000

On 1/28/2012 I was fortunate to give an introduction to dart at a GTUGsf Mobile HTML5 Codelab event. Conrad Wade did a spectacular job of arranging the event and promoting the DartSF meetup group. I truly enjoy the GTUGsf events!

Dart: Updated Dartium builds with breakpoint support for Linux and Mac

financecoding — Thu, 26 Jan 2012 07:15:32 +0000

As Seth Ladd has commented on google plus, Dartium now has breakpoint support. Big win in such an early stage of the project. Providing Release builds for Mac and Linux below. While I was trying breakpoints out, one thing noticed was to getting scripts to show up properly in inspector you need to hit an extra refresh on the page. My public is can be found on pgp.mit.edu.

wget http://dl.dropbox.com/u/33138127/dartium_macosx/Chromium.app.tar.gz
wget http://dl.dropbox.com/u/33138127/dartium_macosx/Chromium.app.tar.gz.sig
wget http://dl.dropbox.com/u/33138127/dartium_macosx/Chromium.app.tar.gz.md5
wget http://dl.dropbox.com/u/33138127/dartium_macosx/README.txt
gpg --verify Chromium.app.tar.gz.sig Chromium.app.tar.gz
md5sum -c Chromium.app.tar.gz.md5

wget http://gsdview.appspot.com/dart-editor-archive-continuous/latest/DartBuild-linux.gtk.x86.zip
wget http://dl.dropbox.com/u/33138127/dartium/dartium-linux-32bit-Release.tar.gz
wget http://dl.dropbox.com/u/33138127/dartium/dartium-linux-32bit-Release.tar.gz.sig
wget http://dl.dropbox.com/u/33138127/dartium/dartium-linux-32bit-Release.tar.gz.md5
wget http://dl.dropbox.com/u/33138127/dartium/README.txt
gpg --verify dartium-linux-32bit-Release.tar.gz.sig dartium-linux-32bit-Release.tar.gz
md5sum -c dartium-linux-32bit-Release.tar.gz.md5

Dart: Example of WebGL on Dart

financecoding — Tue, 24 Jan 2012 07:52:51 +0000

My hacking attempts with webgl on dart has made me revert to using ‘dart:dom’. While I really enjoy ‘dart:html’, one might not be able to use some of the more important webgl methods. The reason would be the missing constructors on Float32Array, an issue has been filed. For now the following sample with code could help guide those excited to play with webgl on dart. Thank you Learning WebGL for the sample code work with.

Dart: fillstyle on cavnas

financecoding — Mon, 23 Jan 2012 05:32:40 +0000

To be able to draw on canvas in Dart you need two things. A canvas element defined and a canvas rendering context to draw on. In this example we use a CanvasRenderingContext2D to fillstyle a set of rectangles with rgb colors of size x and y. Modified for Dart, mozilla developer example can be done the following way. Check a live example here.


  
    CanvasFillstyleExample

  draw() {
    var ctx = document.query('canvas').getContext('2d');
    for (var i=0;i<6;i++){
      for (var j=0;j<6;j++){
        ctx.fillStyle = 'rgb(' + (255-42.5*i).floor().toString() + ',' + 
                         (255-42.5*j).floor().toString() + ',0)';
        ctx.fillRect(j*25,i*25,25,25);
      }
    }
  }

Dart: CSS3 Slider Carousel

financecoding — Sat, 21 Jan 2012 08:44:34 +0000

The slider carousel by html5rocks now comes with an example in dart. I may have loaded to many images into the single page, might take a few seconds to load. The source code can be found on github. Dart provides a simpler way to deal with client side programming, cleaner syntax and simple access to the DOM. Go Dart!

Dart: Updated Dartium builds for Linux and Mac

financecoding — Sat, 21 Jan 2012 06:05:33 +0000

Following the similar posts as before, you can get the latest Dartium builds for Mac OSX and 32bit Linux here. My public is can be found on pgp.mit.edu. Please contact me if you have any issues, only providing these until Dartium hits the prime time. Keep in mind that nothing is guaranteed to work at this point… but some stuff does.

wget http://dl.dropbox.com/u/33138127/dartium_macosx/Chromium.app.tar.gz
wget http://dl.dropbox.com/u/33138127/dartium_macosx/Chromium.app.tar.gz.sig
wget http://dl.dropbox.com/u/33138127/dartium_macosx/Chromium.app.tar.gz.md5
wget http://dl.dropbox.com/u/33138127/dartium_macosx/README.txt
gpg --verify Chromium.app.tar.gz.sig Chromium.app.tar.gz
md5sum -c Chromium.app.tar.gz.md5

wget http://gsdview.appspot.com/dart-editor-archive-continuous/latest/DartBuild-linux.gtk.x86.zip
wget http://dl.dropbox.com/u/33138127/dartium/dartium-linux-32bit-Release.tar.gz
wget http://dl.dropbox.com/u/33138127/dartium/dartium-linux-32bit-Release.tar.gz.sig
wget http://dl.dropbox.com/u/33138127/dartium/dartium-linux-32bit-Release.tar.gz.md5
wget http://dl.dropbox.com/u/33138127/dartium/README.txt
gpg --verify dartium-linux-32bit-Release.tar.gz.sig dartium-linux-32bit-Release.tar.gz
md5sum -c dartium-linux-32bit-Release.tar.gz.md5

Dart: Web terminal sample

financecoding — Thu, 19 Jan 2012 06:08:54 +0000

I’ve always been impressed by the css/html5/javascript web terminals that show off the filesystem API. Now Dart has a sample web terminal with minimal implementation.

Simply add your command implementations to the Terminal.dart by adding commands to the CMDS list and providing functions to the matching switch statement.

With in the next day or so the dart-web-terminal should include an example with filesystem API in dart.

Dart: dart:builtin

financecoding — Wed, 18 Jan 2012 07:49:27 +0000

dart:builtin are the runtime libraries available to the DartVM. They provide some of the more system level API you would expect such as streams I/O, filesystem I/O, basic TCP socket I/O, platform information, native process invocation. Most of these class implementations do call “native”, which from the point of view of the DartVM means invoking native VM code. “native” tells the VM to look up in a list for the entry that maps to the following argument after “native”.

While Dart is still Alpha these builtin may not be written in stone, so try not to depend on them too much. They can and do provide you with some neat access to native functionality you would commonly need when written shell/system applications.

By including #import(‘dart:builtin’); you can view the builtin dart files from DartEditor. Currently the DartEditor might show warnings when including this module but runtime should not be affected. The truth of the matter is, if you explicitly include ‘dart:builtin’ or not, it is still available to you from implicit inclusion in the DartVM.

The following should give an idea of what built in objects are accessible and how they may be used. The examples should not be considered best practices, just an idea of how you could use them and that they exist. The code is taken from a sample that can be found on Github

Directory

    Directory d;
    if (l.length >= 2) {
      d = new Directory(l[1]);
    } else {
      d = new Directory(".");
    }
    d.dirHandler = (var dir) {
      print("${dir}");
    };
    d.fileHandler = (var file) {
      print("${file}");
    };
    d.list(true);

File

    File f = new File(l[0]);
    if (!f.existsSync()) {
      print("Error: file does not exist");
      return;
    }
    RandomAccessFile r = f.openSync(FileMode.READ);
    int length = r.lengthSync();
    List buffer = new List(length);
    int readLength = r.readListSync(buffer, 0, length);
    r.close();
    String s = new String.fromCharCodes(buffer);
    print(s);

ChunkedInputStream

    ChunkedInputStream chunkedInputStream = new ChunkedInputStream(f.openInputStream(), 16);
    List c = chunkedInputStream.read();
    while(c!=null) {
      StringBuffer sb = new StringBuffer();
      c.forEach((int b) {
        sb.add("0x");
        if (b.toRadixString(16).length == 1) {
          sb.add("0");
        }
        sb.add(b.toRadixString(16));
        sb.add(" ");
      });
      print(sb.toString());
      c = chunkedInputStream.read();
    }

InputStream
OutputStream

    File src = new File(arg[1]);
    File dest = new File(arg[2]);
    var srcStream = src.openInputStream();
    var destStream = dest.openOutputStream();
    destStream.write(srcStream.read());
    srcStream.close();
    destStream.close();

StringInputStream
DynamicListInputStream
ListInputStream
ListOutputStream

Platform

 Platform p = new Platform();
 print('{"operatingSystem":${p.operatingSystem()},"numberOfProcessors":${p.numberOfProcessors()},"pathSeparator":${p.pathSeparator()}}');

Process

    Process ps = new Process.start('ps', []);
    StringBuffer messages = new StringBuffer();
    ps.exitHandler = (int status) {
      ps.close();
      print(messages.toString());
    };
    ps.stdout.dataHandler = () => _readAll(ps.stdout, messages);
    ps.stderr.dataHandler = () => _readAll(ps.stderr, messages);

ServerSocket

    // initialize the server
    serverSocket = new ServerSocket(host, 0, 5);
    if (serverSocket == null) {
      throw "can't get server socket";
    }
    serverSocket.connectionHandler = onConnect;
    print("accepting connections on ${host}:${serverSocket.port}");

Socket

    sendSocket = new Socket(host, serverSocket.port);
    if (sendSocket == null) {
      throw "can't get send socket";
    }
    // send first 4 bytes immediately
    for (int i = 0; i < 4; i++) {
      sendByte();
    }
    // send next 4 bytes slowly
    new Timer.repeating((Timer t) {
      sendByte();
      if (bytesSent == bytesTotal) {
        sendSocket.close();
        t.cancel();
        print("finished sending");
      }
    }, 500);

SocketInputStream
SocketOutputStream

Timer

    if (l.length >= 2) {
      try {
        milliSeconds = (Math.parseInt(l[1]).abs()*milliSeconds);
      } catch (BadNumberFormatException ex) {}
    }
    timer = new Timer((var t) {
      print("\nTime elapsed on Timer");
    }, milliSeconds);