Home/ Questions/Q 8982741
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-15T20:39:21+00:00

I am new to dart. I trying to build the web-ui example on Seth

  • 0

I am new to dart.

I trying to build the web-ui example on Seth Ladd’s blog. I have created a new application.

My html looks like this:

<!DOCTYPE html>
<html> 

  <head> 
    <meta charset="utf-8"> 
    <title>Proefje</title> 
    <link rel="stylesheet" href="Proefje.css"> 
  </head> 

  <body> 

    <h1>Hello MDV</h1> 
    <p>MDV is {{superlative}}</p> 
    <button id="change-it" on-click="changeIt()">Change</button> 

    <script type="application/dart" src="Proefje.dart"></script> 
    <script src="https://dart.googlecode.com/svn/branches/bleeding_edge/dart/client/dart.js"></script> 
  </body> 
</html>

And the dart code like this:

import 'dart:math';
import 'dart:html'; 
import 'package:web_ui/web_ui.dart'; // not sure about this line

String superlative; 
List<String> alternatives = const ['wicked cool', 'sweet', 'fantastic']; 
Random random; 

main() { 
  superlative = 'awesome'; 
  random = new Random(); 
  query('#change-it').text = 'Do Change'; 
} 

changeIt() => superlative = alternatives[random.nextInt(alternatives.length)];

And my pubspec.yaml

name:  Proefje
description:  A sample application 

dependencies:   
  web_ui: any

When I run the app I see the query function changing the text in the button, but the MDV is {{superlative}} is left as is.

Any ideas?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    You need to compile your html as described in the Setup section of Seth Ladd’s blog.

    If you’re new to Dart Web Components, you might want to read my Your First Web Component with Dart post, or the Dart Web Components article. Just like Dart Web Components, for MDV to work you need to get the web_components package, which contains the dwc compiler. The compiler is what converts the MVC and WC code into vanilla Dart and HTML.

    Basically you can add a build.dart in your root directory with somthing like :

    import 'package:web_ui/component_build.dart';
import 'dart:io';

void main() {
  build(new Options().arguments, ['web/App.html']);
}

    (see Tools for Web UI )

    • 0