Dart: connecting HTML handlers to Dart source code

Question

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?

It might make more sense to download the IDE and start with that, as the default is then to run your work in a browser that supports Dart directly, you seem to be trying to run dart natively in a browser that does not support it. Also your first dart app seems to be running JS - that's not really dart. And your questions are essentially covered in the tutorials - have you done them? But for 1) yes, you need to cross compile it first before it'll run in a browser that does not support dart, 2) see tutorials. — Paul Collingwood
– Paul Collingwood, Commented Dec 22, 2013 at 15:34
Thanks @PaulCollingwood (+1) - so to confirm what I think you're telling me: (1) ordinarily I would cross-compile Dart source into JS, and then link to the JS in a <script/> tag? And (2) That there is no way to connect the HTML and the JS produced from cross-compiling my Dart code (with the alertbox in it)? Thanks again! — IAmYourFaja
– IAmYourFaja, Commented Dec 22, 2013 at 15:37
Well, yeah, at that point it's "just" more .js and you can treat it like you would anything else. for 2) I don't really understand your question - but I'd do it with an on-click as described here: dartlang.org/docs/dart-up-and-running/contents/ch02.html — Paul Collingwood
– Paul Collingwood, Commented Dec 22, 2013 at 15:42
@TicketMonster You don't cross-compile and then link or do something else. You develop in Dart, when you finished you cross-compile and you're done. You usually don't do anything other with generate JS than deploying. Development is done entirely in Dart. You can import JS libraries and do JS interop. But if the source of libraries is available in Dart you import the Dart libraries not any convertes JS. — Günter Zöchbauer
– Günter Zöchbauer, Commented Dec 22, 2013 at 15:49

Günter Zöchbauer · Accepted Answer · 2013-12-22 15:49:54Z

1

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!'));

edited Dec 22, 2013 at 15:49

answered Dec 22, 2013 at 15:44

Günter Zöchbauer

661k235 gold badges2.1k silver badges1.6k bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

IAmYourFaja Over a year ago

Thanks @zoechi (+1) - What if I wanted to move the window.alert(...) code out of the lambda/closure and into its own function/method? How could I define the alertbox popup in one function, and then call that function from querySelector('#alertBtn').onClick.listen(...)? Thanks again!

Günter Zöchbauer Over a year ago

The declarative example does just that. In the code example you call the method in the lambda listen((e) => showAlert(e));

Collectives™ on Stack Overflow

Dart: connecting HTML handlers to Dart source code

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related