Dart Web Toolkit

Project Sponsors

What is the DWT?

DWT is a port of GWT written in pure Dart language. You can create a new enterprise level web application fairly quickly with the DWT. DWT has a rich set of widgets, panels and utility classes compatible with GWT, so migration from an existing Java web applications to the Dart will be faster and easier. You can use your existing GWT themes in the DWT.

The DWT in action?

You can look at the Dart Web Toolkit Showcase, to see the DWT in actions. For details about what’s inside and the principles on which it is built (and libraries), see the official web site.

API Documentation

Before move deeper you may wish to look at the API Documentation.

What under the bonnet?

DWT is a set of libraries:

• Activity library helps organise navigation applications with activities;
• Animation library provides animation support for variety of the DWT components;
• Core library contains a small number of core classes;
• Data library contains classes for working with the data;
• Editor library helps editing bean-like objects;
• Event library sharing both browser and non-browser events, adapters and event handlers;

• Gry i automaty. Kasyno Aviatrix: Kasyno lub zakład hazardowy, który oferuje gry i zakłady o tematyce lotniczej.

  Http library helps to build HTTP requests;
• I18n library helps with the internalisation, text alignment and direction;
• Layout library knows how laying out a container elements and its children;
• Place library contains classes for working with the bookmark location in the web application;
• Resource library helps to provide access to resources at runtime;
• Role library allows ARIA Accessibility attributes to be added to widgets so that they can be identified by assistive technology;
• Scheduler library provides low-level task scheduling primitives;
• Text library helps organise rendering objects into plain-text form;
• UI library is user-interface objects;
• Util library is a small set of utility classes;

The current version (0.3) has a rich set of components:

Widgets:

• Button, PushButton and ToggleButton;
• CheckBox and RadioButton;
• Composite;
• NumberBox, DoubleBox and IntegerBox;
• FileUpload;
• Hidden;
• Hyperlink;
• Image;
• InlineHtml, InlineImage and InlineLabel;
• Label;
• List;
• MenuBox and MenuItem;
• TextBox, PasswordTextBoxe and TextArea;
• SimpleCheckBox and SimpleRadioButton;
• Tree;

Panels:

• AbsolutePanel;
• CaptionPanel;
• DeckPanel;
• StackPanel and DecoratedStackPanel;
• DecoratorPanel;
• DockPanel;
• DecoratedTabBar and DecoratedTabPanel;
• DisclosurePanel;
• FlexTable;
• FlowPanel;
• FocusPanel;
• Frame;
• Grid;
• HorizontalPanel and VerticalPanel;
• HtmlPanel;
• ScrolledPanel;
• SimplePanel;
• TabBar and TabPanel;

Layout based panels:

• DockLayoutPanel;
• LayoutPanel;
• SplitLayoutPanel;
• StackLayoutPanel;
• TabLayoutPanel;

Popups:

• PopupPanel;
• DialogBox;

Animation library helps to organise animation slide, fade or popup effects. Developers can use existing or create new components on them owns.

How to create a brand new web application on the DWT?

Note: If you are just beginning to study the Dart language please read the tutorial first. You need to have latest version of the DartEditor with the Dart SDK installed on your computer.

• Create a new web application hello_world.
• Open pubspec.yaml and add the Dart Web Toolkit into Dependencies:

dependencies:
  dart_web_toolkit: ">=0.3.0"

• Save pubspec.yaml and the DartEditor automatically runs pub install, which recursively installs the Dart libraries from the packages in the dependencies list.
• Open hello_world.html file from the web folder and add a link reference to the Dart Web Toolkit clean theme.

<link rel="stylesheet" 
    href="packages/dart_web_toolkit/resource/clean/clean.css">

• Open hello_world.dart and modify it as follows:

library dwt_hello_world;

import 'package:dart_web_toolkit/ui.dart' as ui;

void main() {
    ui.Label label = new ui.Label("Hello, World!");
    ui.RootLayoutPanel.get().add(label);
}

• Check how the application works in Dartium.
• Check how the application works in JavaScript within FireFox or IE.

Congratulations you have just created your first application on the DWT!

What's next?

• Continue to develop components are not included in current release;
• UI Binder;
• Theme Roller to create and modify themes;
• Cell;
• Charts;
• Mobile;

Fork the DWT

If you'd like to contribute back to the core, you can fork this repository and send a pull request to me, when it is ready.

If you are new to Git or GitHub, please read this guide first.

License

Copyright (c) 2012-2013 Sergey Akopkokhyants Licensed under the Apache 2.0 License.

Credits

This makes use of a lot of ideas from the GWT source code, so big thanks to the Google GWT team!