This target gets you ready
to begin writing web apps in Dart.
Here you will download the Dart software,
and use Dart Editor to
create and run two small applications.
Download the Dart software bundle
Get Dart.
The Dart download includes Dart Editor,
which you’ll be using
throughout this tutorial.
The Dart tools
work in recent versions of
,
, or
.
What did you get?
Unzip the file.
The resulting directory,
your Dart installation directory,
contains the following:
Dart Editor is a powerful,
lightweight, open source editor.
With it you can create and edit files,
manage the files and directories for your project,
look up APIs, debug your code,
and control runtime conditions using named launches.
This is a special build of the Chromium web browser,
called Dartium, that has the Dart VM (virtual machine) embedded.
You can run your apps directly in this browser,
or use Dart Editor to do it for you,
thereby streamlining the build-test cycle.
The dart-sdk directory contains the Dart software development kit.
Here you will find Dart libraries, such as dart:core and dart:html,
that define APIs useful to all apps.
Within, the bin directory contains several useful command-line tools,
such as the Dart-to-JavaScript compiler,
and the command-line version of the Dart VM.
The samples directory contains the complete source code
for several Dart web applications.
You can experiment with
these examples in Dart Editor.
You might notice some other directories
in the Dart installation directory.
You can ignore them for now.
Start Dart Editor
Invoke Dart Editor by double-clicking its icon
in your Dart installation directory
.
Dart Editor displays its Welcome Page
in a tab in the Editor pane.
The following diagram highlights
the features you need to know about now.
- Send feedback button
- Allows you to share bugs and requests
directly with the Dart Editor team
as well as the larger Dart team.
- Search field
- Searches every file in your Files view for the entered text.
Results for text searches are displayed in a Search view.
Within that view,
double-click a file to see it in the Editor pane.
All occurrences of the search string in the Editor pane are highlighted.
- Run button
- Runs the application associated with the file
that is currently selected in the Files view.
- New application button
- Creates a directory and, within it,
the files for a new application.
Alternatively, you can use the
File > New Application menu item
or the Create a new application button
on the Welcome page.
- Editor pane
- Provides the basic editing functionality you’d expect,
plus features such as Dart code completion,
API browsing, and support for refactoring.
The first time you use Dart Editor,
it shows the Welcome Page in the Editor pane,
which provides quick access to Dart resources
and some nifty samples.
The Welcome Page is also available under the Tools menu.
- Files view
- Shows a hierarchical view of your Dart applications
and their associated files.
Double-click a file in the Files view to see its contents
in the Editor pane.
If you single-click a file in the Files view,
the file is selected,
but not necessarily displayed in the Editor pane.
You must double-click the file.
About Dart applications
At minimum, a Dart application has
- one Dart source file—a
file with the .dart suffix that contains Dart code
- one top-level main() function.
This is the entry point for your application.
main() is typically in a Dart source file whose basename is the app name.
There are two kinds of Dart applications:
command-line applications and web applications.
A command-line application is a standalone program
that you run in the Dart VM from the command-line.
Web applications are hosted on a web page and run in a browser
(either directly in a browser that supports Dart
or by compiling to JavaScript).
Command-line applications
Dart command-line applications
run standalone from the command-line,
independent of a web browser.
Command-line apps are often used
to provide server-side support to a web app,
but they can also be scripts.
The Dart VM runs Dart code directly without intermediate compilation.
Conveniently, you can run command-line apps
directly in Dart Editor with the click of the Run button
.
Alternatively,
use the Dart VM tool
in the dart-sdk/bin directory in your Dart installation directory.
Web applications
Dart web applications run inside of a browser page.
In addition to a .dart file,
a web app requires a .html file to host the app.
Often, a web app provides the client-side
user interface for a server.
You can run your Dart web app from Dart Editor
by clicking the Run button
.
By default, Dart Editor will invoke Dartium,
which has the Dart VM embedded in it,
and loads your .html file,
which in turn loads your app.
If you want to see your web app in a browser
that does not yet support Dart,
you can compile your Dart code to JavaScript
using the Dart-to-JavaScript compiler,
which is in the dart-sdk/bin directory in your Dart installation directory.
You then load the resulting .js file
into your browser of choice.
Dart Editor makes this easy with launches,
which you will learn about in the next target.
The rest of this target steps you through
creating and running first a command-line application
and then a web application.
Create a command-line app
In Dart Editor, click the New Application button
.
A dialog appears.
Follow these steps to create a command-line application:
-
Type helloworld in the Application Name text field.
By convention, application names are lowercase.
This name is used for the app’s directory
and the basename for the files it creates.
-
Type or browse to the directory where you want to save the files.
By default, Dart Editor creates a new directory named dart
in your home directory.
-
Select Generate sample content.
Dart Editor will generate sample code
appropriate for the type of application you are creating.
For a command-line application,
the sample code implements the standard ‘Hello World’ program.
-
Select Command-line application from the list.
-
Click Finish.
Dart Editor creates a directory called helloworld
that contains boilerplate files and directories for a
simple command-line app.
The main source file is named after the application and
is in a directory called bin.
The rest of the files and directories
are there for pub support;
they come into play if your application needs to use extra libraries.
You can ignore these files for now.
The main Dart source file for the app
contains the top-level main() function
and is named after the app itself.
In this case, helloworld.dart.
The file hierarchy is displayed in the Files view.
The contents of helloworld.dart is shown in the Editor pane.
You might recognize it as the canonical Hello World program.
This program prints
Hello, World! to the standard output stream
using the print() function,
which is provided by the dart:core library.
The functions and objects defined in the core library
are automatically available to all Dart applications.
Run a command-line app
Make sure either the helloworld directory or the helloworld.dart file
is selected in the Files view,
then click the Run button
.
Dart Editor opens a new panel,
called the Output view,
and displays the output of the helloworld app.
Create a web app
Now let’s create a web application.
As you did when creating a command-line application,
click the New Application button
.
This time you are creating a web app,
so select Web application from the list.
Dart Editor creates the directory and files needed
for a boilerplate web application.
As before, the directory is named after your application.
So is the Dart source file that contains the main() function.
In addition, Dart Editor creates an HTML file that hosts the app.
The main() function in the clickme app
contains Dart code
that puts text on the browser page
and registers an event handler—a function
that responds to user-generated events like a mouse click.
This code uses API defined in the Dart HTML library.
In the next target,
you will build a mini app from scratch,
creating the Dart source, the HTML source,
and the CSS source yourself.
Afterward, you can re-visit the code for clickme.
Run a web app in Dartium
To run clickme from Dart Editor,
make sure either the clickme directory or any of its files
is selected,
then click the Run button
.
Dart Editor invokes Dartium,
which loads the clickme app’s HTML file,
and thus, loads the app.
Here is the clickme app running in a frame.
Try it! Click the text.
You can run Dart web applications in other browsers
by compiling to JavaScript.
You will do this in the next target,
when you learn about runtime configurations called launches.
About the HTML, CSS and Dart triumvirate
Typically three files—an HTML file, a Dart file,
and a CSS file—together implement a Dart web application.
Each is written in a different language
and each is responsible for a different aspect of the program:
| Language |
Purpose |
| HTML |
Describes the content of the document (the page elements in the document and the structure) |
| CSS |
Governs the appearance of page elements |
| Dart |
Implements the interactivity and dynamic behavior of the program |
HTML is a language for describing web pages.
Using tags, HTML sets up the initial page structure,
puts elements on the page,
and embeds any scripts for page interactivity.
HTML sets up the initial document tree
and specifies element types, classes, and IDs,
which allow HTML, CSS, and Dart programs to refer to the same elements.
CSS, which stands for Cascading Style Sheets, describes the appearance
of the elements within a document.
CSS controls many aspects of formatting:
type face, font size, color, background color,
borders, margins, and alignment, to name a few.
Dart code is embedded into an HTML file as a script.
A Dart program can
respond to events such as mouse clicks,
manipulate the elements on a web page dynamically,
and can save information.
About main() and other top-level functions
Dart lets you define top-level functions,
that is, functions that are not encapsulated within a class or object.
All apps have at least one top-level function,
namely the main() function.
The two apps you’ve seen in this target have other top-level functions.
The Hello World example calls print(),
a top-level function defined in dart:core.
And the clickme app defines a top-level function called reverseText().
A function declaration
has two parts: a signature and a body.
The signature sets the function name,
the data type of its return value,
and the number and type of its input arguments.
The body is the code that defines the function’s behavior.
It usually appears between curly braces ({code}).
If the body is a single expression, then you
can skip the braces and use the => shorthand:
double milesToKM(double miles) => miles/0.62;
The milesToKM() function performs a simple arithmetic calculation
and returns the result.
This function takes a single argument.
Functions can take multiple arguments,
in which case the arguments are set apart by commas.
About file naming conventions
When creating an application with Dart Editor,
you are asked to provide an application name.
By convention, application names,
and thus, the related files and directories, are lowercase.
As you saw,
Dart Editor uses the application name for:
- the name of the app’s directory
- the basename of the main Dart file
(the Dart file that contains the main() function)
- the basename of the primary HTML file
- the basename of the primary CSS file
You should also follow these conventions
when creating applications outside of Dart Editor.
Other resources
-
Dart Editor,
an excerpt from
Dart Up and Running,
provides details about using Dart Editor.
The excerpt includes, for example,
how to set up run-time environments,
how to use power features such as autocompletion and refactoring,
and so on.
-
The Programmer's Guide
points you to docs, articles,
and other resources to help you as you create,
test, and deploy Dart code.