I have some files and I want them in one library. But it just doesnt work or throws Exceptions.
Let's say I have these files.
Lib.dart, 1.dart, 2.dart, 3.dart and for each of them also an html file, which defines the polymer element.
// Lib.dart
library testLib;
import 'dart:html';
part '1.dart';
part '2.dart';
part '3.dart';
/* ... Code ... */
and
// 1.dart 2.dart and 3.dart
part of testLib;
/* ... Code ... */
It didnt work and i got the message:
'http://localhost:8080/1.dart': error: line 7 pos 6: url expected
part of testLib;
^: http://localhost:8080/1.dart
So I saw this answer: Dart editor: expected url
and I changed my 1.html, 2.html and 3.html to:
// 1.html, 2.html and 3.html
/* ... */
<script type="application/dart" src="Lib.dart"></script>
But now i get this Exception:
Breaking on exception: Already registered (Polymer) prototype for element my-Lib
I dont know why it does not work or what I did wrong there.
I wonder why your part of is on line 7. Do you have a library statement or imports or other code above par of? You can only have comments before part of.
As far as I know currently there is still the limitation that you should have one library for one polymer element.
Related
I was trying to migrate one library from polymer.js to polymer.dart and I found this line:
Platform.flush()
And I was wondering what is the equivalent in dart.
this line appears on line 32 in next library:
https://github.com/Polymer/designer/blob/master/elements/design-state/design-state.html
There isn't and you shouldn't need it in Polymer.dart but you might for interop with Polymer.js.
A workaround is to use JS-interop:
import 'dart:js' as js show context;
...
js.context['Platform'].callMethod('flush')
When you call async(...) or asyncTimer(...) of your Polymer element Platform.flush() is called from Polymer.dart code.
I'm starting to get into Dart but I'm having trouble with compiling it.
I have 2 files:
Main.dart
TurtleDart.dart
Main.dart houses my void main() and imports TurtleDart.dart. At this point, TurtleDart.dart only houses an empty class with a constructor.
When compiling Main.dart it all goes fine... I think (I'm getting a 400 line JS file), however when compiling TurtleDart.dart, I get the following error:
TurtleDart.dart:
Error: Could not find 'main'.
Error: Compilation failed.
I know why the error comes forth, but I don't want to implement void main() into this file, because I want to use this as a class file.
My logic is that I want to call Main.dart to initialize a new TurtleDart instance, which handles everything else.
How can I manage this?
I'm using PHPStorm 7.1.3 with the Dart plugin.
dart2js will compile all needed libraries and files automatically. Generating your "main"-file will create the javascript code with all required files. So no need to compile each file separately.
How can import and use any third party javascript libraries in dart..? I want to use snapsvg in my dart application to render svg. But not sure how to add dependencies to add and import it.
I added js: any to my pubspec.yaml and imported packages/browser/interop.js into my html. Where do I place downloaded snapsvg.js and import it to my dart source file to use it.
I am trying to use following javascript code using snapsvg framework from dart.
s = Snap(800, 600);
s.rect(0, 0, 100, 100).attr({
fill: 'white',
stroke: 'black'
});
I tried this code from in dart:
import 'package:js/js.dart' as js;
void main() {
var s = js.context.Snap(800, 600);
s.rect(0, 0, 100, 100);
}
This works fine in dartium, but when I Run as Javascript after build, I got javascript error "method zm not found in object"
I believe this is not right way and I should use be using callMethod on proxy. So I changed code like this
import 'dart:js' show context, JsObject;
void main() {
var snap = context['Snap'];
snap.callMethod('rect', 0,0,100,100);
}
This is not working in Dartium as itself. I would appreciate if someone can provide example of how to call constructor Snap(800, 600) from dart and also rect and attr methods in my example code.
You add them to the HTML file using <script> tags.
You can call JavaScript functions from Dart using dart-js-interop.
There are many examples here on Stackoverflow under this tag - just click on the tag below your question.
When you provide a more concrete example it is easier to help.
You can call into JavaScript with the built-in dart:js library. Please try to avoid using /package/ js, which is what you install by adding js: any to your pubspec. The js package is likely to cause the dart2js output to be bloated and we're probably going to deprecate it at some point.
You can reference JavaScript files like you would in any HTML page, via script tags. You don't actually import them into Dart source, you use dart:js to access JavaScript via its top-level context property.
I was attempting to follow the code found here:
component_created_in_code_test.html
component_created_in_code.dart
However, when I get the dependencies and run the code in dartium, I get the following error. This error occurs when calling the create() method of ComponentItem (in the .dart code):
Breaking on exception: Class 'SayHello' has no instance method 'created_autogenerated'.
I rewrote them ever so slightly below (code is identical except main has been moved to be dart code rather than inlined):
<!-- component_created_in_code_test.html -->
<!doctype html>
<!--
Copyright (c) 2013, 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">
<script src="packages/web_ui/testing/testing.js"></script>
</head>
<body>
<element name="say-hello">
<template>Hello {{name}}!</template>
<script type='application/dart' src="component_created_in_code.dart">
</script>
</element>
<say-hello name="component create in html"></say-hello>
</body>
</html>
and the following dart code,
//component_created_in_code.dart
library component_created_in_code;
import 'dart:async';
import 'dart:html';
import 'package:web_ui/web_ui.dart';
class SayHello extends WebComponent {
String name;
}
void main() {
Timer.run(() {
var hello = new SayHello()
..host = new DivElement()
..name = 'component created in code';
// "hello" is the DOM node.
// "hello.xtag" is your SayHello object.
// We are working on making these be the same object.
// If the component uses data-binding, we need to make sure the
// "lifecycle" methods get called. We are working to make this be
// automatic too.
var lifecycleCaller = new ComponentItem(hello)..create();
document.body.nodes.add(hello.host);
lifecycleCaller.insert();
window.postMessage('done', '*');
});
}
It would appear that this dart-lang example has a problem. Am I missing something or is the code just borked?
After getting this question answered, I packaged up the working solution to the problem.
component_created_in_code
Simply pull from git, and then import into dartEditor. Then 'pub install' and 'reanalyze source' (never hurts) from the editor, then right click "Run in Dartium" on "web/component_created_in_code.html".
It sounds like you need to run the Web UI compiler first. Either run packages/web_ui/dwc.dart on your HTML file, or write a build.dart along these lines:
import 'dart:io';
import 'package:web_ui/component_build.dart';
void main() {
build(new Options().arguments, ['web/component_created_in_code_test.html']);
}
I tested the same with build 0.5.13_r23552 editor & SDK and run into the same problem when running in Dartium. If I do the dart2js (Run as Javascript/Generate javascript) however, it works.
However, be aware of the following (based on my experience):
Try to change to the SDK version that it has been tested and verified with.
It seems the tests are updated to run with 0.5.15; while the SDK delivered with the editor on the dartlang site is only 0.5.13. Maybe clone the bleeding edge version to make it work?
Dart is constantly evolved. Always do pub update on your project after updating to the newest editor, if you are using dependencies and not a specific library version.
Add the build.dart to your project to make sure that code is generated on changes (See bottom of this page: Build.dart setup)
I have a library, 'foo', which consists of a part, 'bar', and imports the dart:io library. The library and the part are declared as follows, in 'foo.dart':
// in foo.dart
library foo;
import 'dart:io';
part "bar.dart"; // resolves
class Foo {
Bar bar = new Bar(); // resolves
HttpServer server = new HttpServer(); // resolves
}
'foo.dart' and 'bar.dart' are located in the same directory.
'bar.dart' refers back to library foo, like so:
// in bar.dart
part of foo; // does not resolve
class Bar {
Foo foo = new Foo(); // does not resolve
HttpServer server = new HttpServer // does not resolve
}
But in Dart Editor, I see a warning in 'bar.dart', saying 'Cannot resolve foo'. Accordingly, any imports (such as 'dart:io') I declare in foo.dart are not available to bar.dart, nor are any of my foo.dart definitions, and since bar.dart is a part of foo, it is not permitted to import any further libraries or declare any further parts.
I would like to organize my code in such a way that:
* any imports I bring into foo.dart to be available to bar.dart (and other source parts)
* library definitions made in one library source part are available to other library source parts.
* (obviously) library definitions made in bar.dart are available to foo.dart (this already works as expected)
Can someone please help me understand how to accomplish these?
I think this is just a bug in the Editor. Have you tried running your program? It should work.
The Editor still gets stuck warnings sometimes, and closing the file or closing the Editor for really stuck ones, usually clears it up. I'll see if I find the bug report so you can star it or maybe add a log file if it keeps happening to you.