Dart: connecting HTML handlers to Dart source code

Issue

I am experimenting with my first Dart web app and am trying to understand what a portion of some sample code is doing. I downloaded the Dart-Eclipse plugin and then created a new Dart Project. It created a project with a sample dart, HTML and CSS file in it. I then modified the HTML file to look like this:

<!DOCTYPE html>

<html>
    <head>
        <meta charset="utf-8">
        <title>My App</title>
        <link rel="stylesheet" href="myapp.css">
    </head>
    <body>
        <h2>Push the button!</h2>

        <div id="sample_container_id">
            <input type="button" id="alertBtn" value="Push Me!" />
        </div>

        <script type="application/dart" src="myapp.dart"></script>
    </body>
</html>

When the user presses alertBtn I want the following code to run:

import 'dart:js';

void main() {
    context.callMethod('alert', ['Hello from Dart!']);  
}

In other words, the user presses the button, and an alertbox pops up on their screen.

Two questions:

What is the <script/> tag in the HTML doing? It’s src="myapp.dart attribute references a Dart source file directly…I was under the impression that most browsers don’t support Dart and so it needs to be cross-compiled (via dart2js or pub build) to JavaScript first?
How do I connect the HTML with the Dart file? In other words, how do I wire the alertBtn with an onclick handler such that the Dart code runs when the user clicks it?

Solution

1) This script tag is for browsers that support Dart (currently only Dartium) other browsers ignore it.

2) I haven’t used it without polymer elments, but if you put your HTML inside a <template> tag you can use declarative binding like

<input type="button" id="alertBtn" value="Push Me!" on-click="{{showAlert}}"/>

dart-polymer-dart-examples contains several examples how to do this.

You can also use

document.querySelector('#alertButton').onClick.listen(
    (e) => window.alert('Hello from Dart!'));

Answered By – Günter Zöchbauer

Answer Checked By – Marie Seifert (FlutterFixes Admin)

Issue

Solution

Leave a Reply Cancel reply