CODEWITHSUNDEEP
dartdart-webui
Phlox Midas
Phlox Midas

Reputation: 4349

Why doesn't this Web-UI code work?

I created a new web app with web-ui. All packages seemed to have installed correctly. I ran the generated "click-counter" example but it didn't appear. I went to the Web-UI article and pasted this code:

<!DOCTYPE html>
<!--
Copyright (c) 2012, the Dart project authors.  Please see the AUTHORS file
for details. All rights reserved. Use of this source code is governed by a
BSD-style license that can be found in the LICENSE file.
-->
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

</head>
<body>
  <element name="x-click-counter" constructor="CounterComponent" extends="div">
    <template>
      <button on-click="increment()">Click me</button>
      <span>(click count: {{count}})</span>
    </template>
    <script type="application/dart">
      import 'package:web_ui/web_ui.dart';

      class CounterComponent extends WebComponent {
        int count = 0;
        void increment() { count++; }
      }
    </script>
  </element>
  <div class="well">
    <div is="x-click-counter" count="{{myNumber}}"></div>
    <div is="x-click-counter" count="{{5}}"></div>
  </div>
  <script type="application/dart">
    int myNumber = 12;
    main(){}
  </script>
</body>
</html>

But that didn't work either. Is there something wrong with the code? Is it is outdated? Is there some dependency I'm failing to consider?

Upvotes: 1

Views: 183

Answers (1)

Shailen Tuli
Shailen Tuli

Reputation: 14171

The code works fine for me.

Are you running build.dart first? You cannot directly run this script and have it work. You should have a top level build.dart file that looks something like this (I am assuming that the file lives in the web/ directory and is called click_counter.html):

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

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

When you run this file, an out/ directory will be auto-generated for you. Right click the click_counter.html file in the out/ directory, and run it. It should work.

You can read more about the compilation process at http://www.dartlang.org/articles/web-ui/tools.html.

Upvotes: 1

Related Questions