(http://rikulo.org/projects/ui has been developed by Potix Corporation; the code is on GitHub https://github.com/rikulo/ui/.)

This is a Dart-based framework using an MVC architecture for web and native mobile applications using HTML5. Already in its 0.6.7 release (June 2013), and also integrating the DQuery and Bootjack projects, it is probably the most elaborate Dart UI framework available today. The apps built with Rikulo not only run in a modern web browser without any plugin, but can also be built as native mobile applications accessing the device's resources transparently through a Cordova (Phonegap) integration called Rikulo Gap. Rikulo Gap runs these resources cross-platform (and offline if needed) in iOS, Android, Blackberry, Windows Phone, and others. It has been ported from Cordova to Dart and is a library for accessing the phone's resources; it can be used with any UI framework. Rikulo brings the programming philosophy of Dart to the UI by using a structured UI model. Creating and updating complex layouts can be cumbersome, and this is where Rikulo shines by providing a layout model allowing flexible and precise control. It is based on positioning UI elements using coordinates in relation to their parent, so there is no need to interact with the DOM directly. This means that the UI components are created and embedded in what is called a view; so a mix of HTML and Dart code isn't going to work. But if you want to take control over the layout and need more of HTML's and CSS's capabilities, it is still possible because a view also supports HTML markup. Rikulo further defines a UXL markup language for defining UI in XML, which compiles the user interface specified in XML into Dart code. Because Rikulo UI starts from a different model, it cannot be integrated easily with the Dart web components. The Rikulo site showcases its framework at http://rikulo.org/examples/; among the examples are a scrollable list and grid view.

To start using it, create a web project rikulo1, add rikulo_ui: any to its pubspec.yaml file, and install the package. Then import the following Dart files, depending on your requirements, to start using its features:

import 'package:rikulo_ui/effect.dart';
import 'package:rikulo_ui/event.dart';
import 'package:rikulo_ui/gesture.dart';
import 'package:rikulo_ui/layout.dart';
import 'package:rikulo_ui/message.dart';
import 'package:rikulo_ui/model.dart';
import 'package:rikulo_ui/view.dart';

Not all of these files are always needed; the basis is view.dart because it contains many UI elements. The website has a tutorial and a very elaborate documentation at http://docs.rikulo.org/ui/latest/Getting_Started/. Here, we will indicate the most important concepts and then get on to build our banking screen with Rikulo. The basic building block is the view, which draws something in a rectangular area on the screen and can interact with the user; it is an instance of the class View or one of its subclasses. Similar to the DOM tree of element nodes, in Rikulo, a tree of views is constructed from what is often named rootView, which is added to the document of the web page. Every view contains the List<View> children, so we can have new views with children attached to them through the addChild method. These children are positioned in the parent view by specifying their layout type, orientation, and left and top coordinates relative to the parent view. Every view can handle events, and all Rikulo UI controls, such as button, textbox, checkbox, radiobutton, and scrollview are subclasses of View.

Because we specify everything through code, the cascading notation is used abundantly. In the project rikulo1, we made a simple screen to illustrate these basic techniques:

A basic screen with Rikulo

The main() method in rikulo1.dart contains the code to construct this:

  var root = new View()
    ..layout.type = "linear"      // specify layout and CSS
    ..layout.orient = "vertical"  // horizontal is default
    ..style.cssText = "font-size: 14px; text-align: center"  
    ..addChild(new TextView("Credit card number: "))
    ..addChild(new TextBox())
    ..addChild(new TextView("Verified: "))
    ..addChild(new CheckBox())
    ..addToDocument();        //make it available to the browser


  var hello = new Button("Support our work!")
    ..on.click.listen((event) {   // attach click handler      (1)
      (event.target as Button).text = "Thanks!!";
      event.target.requestLayout();  // redraw screen          (2)
  });
   root.addChild(hello);        // attach to root view 

The Click event handler is registered in line (1) using a mixture of old and new Dart syntax. Whenever a change occurs to the screen, the method requestLayout() must be called, as in line (2), to show this. Every Rikulo web page must include the following link to some basic CSS settings:

    <link rel="stylesheet" type="text/css"
          href="packages/rikulo_ui/css/default/view.css" />

Besides, it adds the following meta tag, if the app is to be run on mobile devices to ensure responsive design (it is ignored in desktop browsers):

    <meta name="viewport" content="width=device-width, initial-  scale=1.0, maximum-scale=1.0, user-scalable=no" />

Let's now rewrite our bank terminal screen in Rikulo; this results in:

The bank terminal screen with Rikulo

Adding this code to rikulo_bank.dart results in a functional screen, and although some layout code must be added, the code is remarkably readable:

BankAccount bac;
TextBox number, amount;
TextView owner, balance;
Button btn_deposit, btn_interest;

void main() {
  final View rootView = new View();
  rootView.style.cssText = "border: 1px solid #553; background-	color: lime";
  number = new TextBox();
  owner = new TextView();
  owner.profile.width = "100";
  balance = new TextView();
  amount = new TextBox();
  btn_deposit = new Button("Deposit - Withdrawal");
  btn_deposit.profile.width = "150";
  btn_interest = new Button("Interest");
  number.on.change.listen((event) {
    readData();
    event.target.requestLayout();
  });

  btn_deposit.on.click.listen((event) {
    deposit(event);
    event.target.requestLayout();
  });

  btn_interest.on.click.listen((event) {
    interest(event);
    event.target.requestLayout();
  });

  rootView
    ..layout.text = "type: linear; orient: vertical"
    ..addChild(new TextView("BANK APP"))
    ..addChild(new TextView("Credit card number: "))
    ..addChild(number)
    ..addChild(new TextView("Owner: "))
    ..addChild(owner)
    ..addChild(new TextView("Balance: "))
    ..addChild(balance)
    ..addChild(new TextView("Amount: "))
    ..addChild(amount)
    ..addChild(btn_deposit)
    ..addChild(btn_interest)
    ..addToDocument();
}

<Template name="Credit Card">
  <Panel layout="type:linear; orient: vertical; spacing: 8"
    profile="location: center center; width: 180; height: 145">
    Number:  <TextBox id="ccNumber" value="$rememberMe" />
    Owner:   <TextBox id="owner"/>
    <Button text="Verify"/>
  </Panel>
</Template>

<TextBox value="${customer.firstName}, ${customer.lastName}"/>

<Button text="Verify" on.click="verify"/>