CODEWITHSUNDEEP
dartdart-html
IAmYourFaja
IAmYourFaja

Reputation: 56944

Dart: connecting HTML handlers to Dart source code

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:

  1. 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?
  2. 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?

Upvotes: 2

Views: 458

Answers (1)

G&#252;nter Z&#246;chbauer
G&#252;nter Z&#246;chbauer

Reputation: 658007

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

Upvotes: 1

Related Questions