Dart components not working - why is my set up wrong?

1
votes

So I get some Dart projects working correctly. But when I try to use the web-ui nothing works. I import what I'm suppose to, what is wrong?

So here is the code (it is an example took from git).

project.html :

<!DOCTYPE html>

<html>
  <head>
    <meta charset="utf-8">
    <title>Shout This!</title>
    <link rel="stylesheet" href="project.css">
  </head>
  <body>
    <h1>Shout This!</h1>

      <input type="text" bind-value="shoutThis" placeholder="Shout This!">

      <div>      Length: {{ shoutThis.length }} </div>
      <div>     Shouted: {{ shoutThis.toUpperCase() }} </div>
      <div>   Substring: {{ (shoutThis.length >= 6) ?
                         shoutThis.substring(1, 5) :
                         shoutThis.substring(0, 0) }} </div>
      <div> Palindromic: {{ palindrome() }} </div>

    <script type="application/dart" src="project.dart"></script>
    <script src="packages/browser/dart.js"></script>
  </body>
  </html>

project.dart :

  import 'dart:html';
  import 'package:web_ui/web_ui.dart';
  import 'package:web_ui/watcher.dart' as watchers;


  String shoutThis='';

  void main() {
    window.alert('test');
  }

  String palindrome() {
    var buffer = new StringBuffer(shoutThis);
    for (int i = shoutThis.length - 1; i >= 0; i--) {
      buffer.write(shoutThis[i]);
    }
    return buffer.toString();
  }

When I launch the project, I got my test message showing up but web ui doesn't work, I got this : {{ shoutThis.length }} showing textually.

1
dartdart-webuidart-editor
Did you build? These things are still something that you can't find in browsers, so you need to build or use the extension: dartlang.org/articles/web-ui/tools.html – Kai Sellgren

1 Answers

0
votes

Click (to run) the html file inside of 'out' directory not the source file you are editing. Remember that you build/launch file you have selected at the time.

Ensure you have created your build.dart file beforehand as well.