Monthly Archives: October 2011

Dart is the new JavaScript (hopes Google)

Google published a draft specification of a new programming language Dart. The intention is that Dart replaces JavaScript on the long run making it a lot easier to program web clients. It is currently at a very early version — v0.0.3.

Optional Typing

Undoubtedly, JavaScript’s prototypal typing isn’t too popular, especially among programmers coming from the Java platform. Dart is offering a good alternative and a clear and concise class definition style:

class MyClass {
  // put the class definition here
}

But this is not breaking the dynamic typing the seasoned JavaScript programmers have come to love. Instead Dart offers an interesting middle way called optional typing. This means the developer may choose between writing static typed code and dynamic typed or even combine both at the same time.

var birthYear = 1452;
int birthYear = 1452;

Both declarations above are valid.

Closer to Java than JavaScript

The new language goes way beyond JavaScript borrowing many language constructs from Java. It supports interfaces, single-class inheritance, constructors or static factories. Here is what the early preview spec says:

Dart is a class-based, single-inheritance, pure object-oriented programming language. Dart is optionally typed and supports reifi ed generics and interfaces.

So it yields considerable power, but  also brings in the possibility of cleaner code on the client side web development.

How Would it Run?

Google claims Dart will eventually run on all modern browsers using a native interpretor (likely to be build into Chrome) or a JavaScript translator. For the moment only Chrome, Safari and Firefox are supported.

The code can be embedded into web pages just as js code can be:

<script type="application/dart">
      main() {
        Element element = document.getElementById('message');
        element.innerHTML = 'Hello from Dart';
      }
</script>

And yes, it has the main() method!

Example

This is a more extensive code example, depicting the Dart syntax:

main() {
  Shape shape = new Rectangle.withSizes(10, 5);
  num area = shape.computeArea();
  print('We calculated the shape area to be ${area} units.');

  Polygon poly = new Square.createLargeSquare();
  area = poly.computeArea();
  print('We calculated the area of the polygon with ${poly.lines} lines to be ${area} units.');
}

interface Shape {
  num computeArea();
}

class Polygon implements Shape {

  // numeric field (private because it starts with _)
  num _lines;

  // constructor
  Polygon(num lines) {
    this._lines = lines;
  }

  // abstract method
  abstract num computeArea();

  // getter
  num get lines() {
    return _lines;
  }

}

class Rectangle extends Polygon {
  num _width = 1;
  num _height = 1;

  // constructor with defaults
  Rectangle() : super(2), _width = 2, _height = 1;

  // named constructor
  Rectangle.withSizes(width, height) : this() {
    this._width = width;
    this._height = height;
  }

  num computeArea() {
    return this._width * this._height;
  }

}

class Square extends Rectangle {
  // empty constructor (just calling super)
  Square(num size) : super.withSizes(size, size);

  // static factory
  factory Square.createLargeSquare() {
    return new Square(999999999);
  }
}

The output will be:

We calculated the shape area to be 50 units.
We calculated the area of the polygon with 2 lines to be 999999998000000000 units.

You can test the code yourself in an online environment at try.dartlang.org.

Dart’s APIs

Dart has 2 APIs (they call them libraries): Core and DOM.

  • Core Library contains interfaces to support common data structures and operations.
  • DOM Library contains interfaces to the HTML5 DOM, loosely based on the proposed HTML5 standard as specified by the W3C/WHATWG. These interfaces will evolve in parallel with the HTML5 standards.

The Core is documented here http://www.dartlang.org/docs/api/index.html.

Using the new NSPopover (since Mac OS X 7)

NSPopover in action

NSPopover in action

NSPopover is the animated balloon-like component that shows the downloaded files in Safari 5.1. This was added in Mac OS X Lion. If you ever wondered how to add it to your code, it’s extremely simple.

How it works

The principle is that the popover links a NSView with a certain position in the window. The NSView contains the stuff the user will see in the popover while the position is what the popover will point to. This is a NSView itself, usually a NSButton (like in our example). So we’ve got 2 NSiews: the popover view and the trigger view. Looking at the image on the right, the popover view contains the application icon and the You may put anything here text. The trigger view is the round button called Popover.

How it’s made

First let’s create the main window containing the Popover button. It would be nice to have an on/off button. When the button is pressed, the popover should appear whereas the button is depressed, the popover would, not surprisingly, disappear. Then, completely separate from the main window, we’ll add a NSView and put the image and text inside it. Finally we can add the popover. To do that, in the xib editor we search for NSPopover. An object named Popover and View Controller will come up. We need to drag it into the objects list in the xib.

Popover XIB

Popover XIB

The popover is already connected with the controller, so we only need to connect the controller’s view property with our view. That’s the actual trick, this is how the popover knows to display the custom view when it’s shown.

Connection popover controller with view

Connecting popover controller with view

And finally we are left with implementing the button action. This may look like this:


- (IBAction)togglePopover:(id)sender
{
    if (self.buttonIsPressed) {
        [self.popover showRelativeToRect:[popoverTriggerButton bounds]
                                  ofView:popoverTriggerButton
                           preferredEdge:NSMaxYEdge];
    } else {
        [self.popover close];
    }
}

To determine is the button is pressed or not, look for the button’s value.

- (BOOL)buttonIsPressed
{
    return self.popoverTriggerButton.intValue == 1;
}

Detach the popover to a window

This is a pretty cool effect. Users can drag the popover and this would create a nice transition to a window. For this, a method needs to be implemented in the popover’s delegate (NSPopoverDelegate):

- (NSWindow *)detachableWindowForPopover:(NSPopover *)popover
{
    return self.popoverWindow;
}

The window can have different contents than the popover. Actually it must contain other components and if we wanted to show the same things as the popover we’d need to copy those from the popover. In our example, we changed the label text slightly.

Popover-Window Transition

Popover-Window Transition

Sources

To help you getting started with NSPopover, you can download the complete source code for the example application described in this post:

PopoverExample.xlsx (change extension from xlsx to zip after download, wordpress restrictions).