I am working through the dart todo sample application. I haven't changed any code but I see lots of squiggles in the editor.
<polymer-element name="simple-router">
<script type="application/dart;component=1"
src="simple_router.dart"></script>
</polymer-element>
The error I'm seeing reads.
Wrong script type, expected
type="application/dart".
I don't understand what this means. When I strip off the ;component=1. It really breaks the application.
This is code that was valid in Polymer about ">= 0.10.5 <0.11.0" but there were several changes.
;component=1 Should be remove from all script tags.
The imports and script tags in the entry page should look like
<html>
<head>
<title>core-ajax-dart</title>
<!-- when the project uses polymer -->
<!-- <script src="packages/web_components/platform.js"></script>
not necessary anymore with Polymer >= 0.14.0 -->
<script src="packages/web_components/dart_support.js"></script>
<!-- import individual polymer elements -->
<link rel='import' href='packages/core_elements/core_ajax_dart.html'>
</head>
<body>
<core-ajax-dart
url="http://gdata.youtube.com/feeds/api/videos/"
params='{"alt":"json", "q":"chrome"}'
handleAs="json"
auto></core-ajax-dart>
<!-- if you have a custom script file that contains a main() method -->
<script type="application/dart" src="core_ajax_dart.dart"></script>
<!-- else if you don't have a custom script file with a main() method
<script type="application/dart">export 'package:polymer/init.dart';</script>
</body>
</html>
see here how to implement a custom main method.
how to implement a main function in polymer apps
Related
I am using Dart SDK 1.5.3 | polymer 0.11.0+5 | Windows x64. When I create a created a polymer application using the template 'Sample web application using the polymer library (mobile friendly) option' and run the application it works as expected with the counter incrementing when the button is clicked.
Assuming the page with the
<script type="application/dart">
export 'package:polymer/init.dart';
</script>
is index.html, attempting to refactor the application by removing the following lines from index.html
<click-counter count="5"></click-counter>
<link rel="import" href="clickcounter.html">
results in the following error:
Exception: NoSuchMethodError: method not found: 'whenPolymerReady'
Receiver: Instance of 'JsFunction'
Arguments: [Closure: () => dynamic] (package:polymer/src/loader.dart:115)
Breaking on exception: NoSuchMethodError: method not found: 'whenPolymerReady'
I have used the mechanism all the time in creating any polymer app, but has never seen such exception although I have seen documentation on the web involving Dart https://www.google.com.jm/url?sa=t&rct=j&q=&esrc=s&source=web&cd=1&cad=rja&uact=8&ved=0CBwQFjAA&url=http%3A%2F%2Fcode.google.com%2Fp%2Fdart%2Fissues%2Fdetail%3Fid%3D19161&ei=MZq8U_nlK42KyASBkYHgCw&usg=AFQjCNHOc6MD-mhzPbDOmg8Hp5NeqVufqQ&bvm=bv.70138588,d.aWw
The documentation suggested that this problem had resolved but it certainly is present in the current polymer I am using.
Each of your components (each file containing a <polymer-element> tag) must import polymer.html.
Make sure your clickcounter.html contains the line:
<link rel="import" href="packages/polymer/polymer.html" />
at the top. (It was breaking change in 0.11).
I'm clueless about these things, but for me I seemed to solve it by moving the following code:
<!-- after the Polymer elements imports -->
<script type="application/dart">export 'package:polymer/init.dart';</script>
<script async src="packages/browser/dart.js"></script>
from the end of the <head>er, to just before the </body>.
Only my index.html now contains these lines. Lastly I also moved my custom element import above core-elements/paper-elements imports.
My dummy application created from the polymer template starts fine, but once I move the clickcounter to another directory, I start getting this error (I have updated references accordingly). My new folder structure is the following:
/lib
/src
/test
clickcounter.dart
clickcounter.html
/web
polytest.html
This is how the modified line looks:
<link rel="import" href="../lib/src/test/clickcounter.html">
I think I found the solution.
The clickcounter.html |imports link rel="import" href="packages/polymer/polymer.html|". In the entry-point file, there is no such import. When a component is imported into the entry-point, it seems that the polymer.html condition is satisfied. In the absence of a component the import has to placed directly in the file.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Sample app</title>
<!-- <script src="packages/web_components/platform.js"></script>
not necessary anymore with Polymer > 0.14.0 -->
<script src="packages/web_components/dart_support.js"></script>
<link rel="import" href="packages/polymer/polymer.html">
<script type="application/dart">export 'package:polymer/init.dart';</script>
<script src="packages/browser/dart.js"></script>
<link rel="stylesheet" href="epimss_material_design.css">
</head>
<body>
<h1>Epimss material design</h1>
<p>Hello world from Dart!</p>
<div id="sample_container_id">
</div>
</body>
</html>
After that everything worked fine.
The same problem actually resurfaced in Dart SDK 1.6.0-dev.1.2 and was similarly solved. Still, I cannot say if its a bug or not. It simply works by adding this import. I suppose if a legitimate component is used that imports would allow the removal of the same import from the entry-point file. One of Dart or Dart-polymer expert might be able to explain what actually is happening. Looking forward to the in-depth explanation since this is the first time I have observed this issue.
I just ran into the same issue.
Are you sure your polymer imports are underneath your javascript imports?
<!-- <script src="packages/web_components/platform.js"></script>
not necessary anymore with Polymer 0.14.0 -->
<script src="packages/web_components/dart_support.js"></script>
<!-- import the click-counter -->
<link rel="import" href="clickcounter.html">
instead of:
<!-- import the click-counter -->
<link rel="import" href="clickcounter.html">
<script src="packages/web_components/platform.js"></script>
<script src="packages/web_components/dart_support.js"></script>
I'm not in that development, but it seems like your problem is API or dependencies used in application.
I think your transformer settings is missing the entry page
transformers:
- polymer:
entry_points:
- example/index.html
Otherwise look closely at the output if there is any other warning or error that points to the root causel
I've just had exactly the same issue. It looked like the code stopped working without any change performed by me.
Root cause of the issue was, that there appeared a new version of polymer package.
So you should probably play with dependencies in your pubspec.yaml. I just explicitly changed the version of Polymer to some older one.
The Dart editor currently supports only one dart polymer (/file) new project generation option. And this option sets up 4 files in the /web subdir without a main(), and arriving at a main requires some boiler-plate changes that were not totally obvious to me.
I was helped on the Dart Forum for this somewhat "howto" question by Guenter Zoeckbauer, so I want to share the results of those minimal changes to this nice minimal project, that has provided me with exactly the starting point need to re-base my outdated code and file structure on.
It seems to me it provides good starting point reference for re-building apps that have gotten out of date with all the rapid and IMPORTANT changes that have been made in the last few months.
Here are the 6 files as they must be modified (the app name is: app_with_main):
1 app_with_main.css NO CHANGE
2 clickcounter.dart NO CHANGE
3 clickcounter.html NO CHANGE
4 index.html:
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Sample app</title>
<!-- <script src="packages/web_components/platform.js"></script>
not necessary anymore with Polymer >= 0.14.0 -->
<script src="packages/web_components/dart_support.js"></script>
<link rel="import" href="clickcounter.html">
<!-- ORIGINAL SCRIPT
<script type="application/dart">export 'package:polymer/init.dart';</script>
<script src="packages/browser/dart.js"></script>
-->
<link rel="stylesheet" href="app_with_main.css">
</head>
<body>
<h1>App with main</h1>
<p>Hello world from Dart!</p>
<div id="sample_container_id">
<click-counter count="5"></click-counter>
</div>
<script type="application/dart">export 'init.dart';</script>
</body>
</html>
#5 . init.dart (new)
import "package:polymer/polymer.dart";
main() {
print("always before polymer initialization is complete");
initPolymer().run(() {
print('''Code here will be called almost immediately and cannot rely
on the polymer elements being instantiated.''');
Polymer.onReady.then((_) {
print('''at this point the onReady callback has been returned and thus the polymer
initialization process will be complete''');
});
});
6 The project yaml file must be modified to set the entry_point to index.html thus:
name: app_with_main
description: A sample Polymer application
dependencies:
polymer: ">=0.11.0-dev.2 <0.12.0"
transformers:
- polymer:
entry_points: web/index.html
And that should do it, you should be off and running with a code structure that can grow with your project for a long time....
Thanks again to Dart Super Hero Guenter Zoecchbauer!
For reference and comparison I think it is useful to also consider the skeleton Polymer Dart app that gets generated by the Chrome Dev Editor. It includes a Dart main().
Below I've posted index.html, and main.dart from the web folder of a freshly generated Polymer Dart Paper elements project (as of 2014-10-10).
Note that these reference a sample_app custom element which gets generated into the lib folder, but pasting that below as well would be too long.
1. Index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HelloDartWebPaper</title>
<link rel="stylesheet" href="styles.css">
<script src="packages/web_components/platform.js"></script>
<script src="packages/web_components/dart_support.js"></script>
<link rel="import" href="packages/HelloDartWebPaper/sample_app.html">
</head>
<body unresolved>
<sample-app></sample-app>
<script src="main.dart" type="application/dart"></script>
<script src="packages/browser/dart.js"></script>
</body>
</html>
2. main.dart
import 'package:polymer/polymer.dart';
import 'package:paper_elements/paper_toast.dart';
import 'package:HelloDartWebPaper/sample_app.dart';
void main() {
// Init polymer.
initPolymer();
// Register Polymer components (ones that are actually used in the app).
registerWidgetsWithPolymer();
}
#initMethod
void postPolymerBoot() {
print('Polymer init complete.');
}
void registerWidgetsWithPolymer() {
upgradePaperToast();
Polymer.register('sample-app', SampleApp);
}
styles.css
omitted - not relevant
sample_app component in lib.
I'm trying to find a clean way to use twice a SVG element I've created. I want to learn using all technologies related to dart so I'm experimenting with Polymer. I've created a custom element where I then load another custom element twice.
This is the index.html
<link rel="import" href="da-imageTool.html">
</head>
<body>
<da-imageTool ></da-imageTool>
<script type="application/dart">export 'package:polymer/init.dart';</script>
<script src="packages/browser/dart.js"></script>
<script src="packages/browser/interop.js"></script>
</body>
da-imageTool.html
<polymer-element name="da-imageTool">
<template>
<div class="images" id="mainDiv"></div>
<div class="images" id="secondDiv"></div>
</template>
<script src="da-imageTool.dart" type="application/dart"></script>
</polymer-element>
da-imageTool.dart
#CustomTag('da-imageTool')
class ImageTool extends PolymerElement{
DivElement div1;
DivElement div2;
ImageEditor ime;
//ImageEditor ime2;
//ImageEditor _selectedEditor;
ImageTool.created(): super.created(){
int a = 1;
}
}
int a = 1 is just a line where I set a breakpoint to find out why all this does not work.
I don't understand why but the element isn't created. Here is the error I get:
Exception: The null object does not have a getter '_observe#0x29474386'.
NoSuchMethodError : method not found: '_observe#0x29474386'
Receiver: null
Arguments: []
HtmlElement&Polymer.observeProperties (package:polymer/src/instance.dart:514:34)
HtmlElement&Polymer.prepareElement (package:polymer/src/instance.dart:153:22)
HtmlElement&Polymer.polymerCreated (package:polymer/src/instance.dart:139:21)
PolymerElement.PolymerElement.created (package:polymer/src/instance.dart:1088:19)
ImageTool.ImageTool.created (http://localhost:3030/FigureSVG/web/da-imageTool.dart:17:24)
The script tags go into the head with Polymer
not sure about the interop.js script.
<head>
<link rel="import" href="da-imageTool.html">
<script type="application/dart">export 'package:polymer/init.dart';</script>
<script src="packages/browser/dart.js"></script>
</head>
<body>
<da-imageTool ></da-imageTool>
<script src="packages/browser/interop.js"></script>
</body>
I did several tests and right now my code is dead simple. The correction that made it working are:
Move the script tags
Rename the custom element all lowercase.
I remember having read about the compulsory hypen, but I've not seen anything about lowercase :( A warning might have been useful.
I have created two Dart app using Polymer. The two tags created are: weather-tag and qotd-tag.
In weather-tag, I am getting weather information from a remote service and in qotd-tag I am getting qotd from local machine. Both running fine in Dart and also in compiled JS.
I am now integrating these two Dart "widget" into my own index.html.
The HTML snippet is like following:
<html lang="zh-CN">
<head>
<script src="/packages/shadow_dom/shadow_dom.debug.js"></script>
<script src="/packages/custom_element/custom-elements.debug.js"></script>
<script src="/packages/browser/interop.js"></script>
<meta charset="utf-8">
<script src="/getqotd.html_bootstrap.dart.js"></script>
<script src="/getweather.html_bootstrap.dart.js"></script>
</head>
<body id="home">
<polymer-element name="qotd-tag">
<template>...
</template>
</polymer-element>
<polymer-element name="weather-tag">
<template>...
</template>
</polymer-element>
<weather-tag></weather-tag>
<qotd-tag></qotd-tag>
</body>
</html>
The problem is it only shows the qotd-tag.
If I took out all qotd-tag related reference (js, polymer-element, the tag), weather-tag can be displayed correctly.
If I change the sequence of the two js file (weather.js comes first and then qotd.js), now it shows only the weather-tag.
I think there must be some conflict in the js declaration.
I can solve this issue by building a new tag with the two tags' functions but is there a way to have two or more polymer-element in one HTML file?
This is how you can import and use two elements in a Dart app:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="import" href="foo_element.html">
<link rel="import" href="bar_element.html">
<script type="application/dart">export 'package:polymer/init.dart';</script>
<script src="packages/browser/dart.js"></script>
</head>
<body>
<foo-element></foo-element>
<bar-element></bar-element>
</body>
</html>
For the full code, look at this gist:
https://gist.github.com/shailen/8055849
Through my journey of dart, I stumbled upon a "blocker" in terms of loading a component.
While having my component defined as followed:
<!DOCTYPE html>
<element name="x-foo" constructor="FooComponent" extends="button">
<template>
<button type="button" class="btn {{classes}}"> {{text}} </button>
</template>
<script type="application/dart">
import 'package:web_ui/web_ui.dart';
String classes = '';
String text = '';
class FooComponent extends WebComponent {
}
</script>
</element>
and referencing the component as followed:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>example</title>
<link rel="stylesheet" href="assets/css/bootstrap.min.css">
<!-- '../web/foo.html' or '../web/out/foo.html.dart' -->
<link rel="components" href='foo.html'>
</head>
<body>
<h1>example</h1>
<p>Hello world from Dart!</p>
<x-foo></x-foo>
<script type="application/dart">void main() { }</script>
<script type="text/javascript" src="dart.js"></script>
</body>
</html>
and my build script not creating a html file (output folder: foo.html.dart), I'm not sure to which file I have to reference.
The manual is also not declarative enough to solve my issue:
http://www.dartlang.org/articles/dart-web-components/spec.html#loading-components
Referencing to either the definition of the component (foo.html) or it's generated output (foo.html.dart) is not working. I've also double checked the paths of both files through inspection, which just downloaded both files with chromium.
My concluding question:
Is this reference (link element href) pointing to an internal intelligence or to a "physical" available file at runtime? And if secondly, which one (generated (html/dart) or source)?
To avoid misunderstandings, I've added a list of my repo:
foo
packages
examples
assets
dart.js
example.html
web
out
foo.html.dart
foo.html
build.dart
Component file (foo.html) is missing the <html><body>...</body></html> tags:
<!DOCTYPE html>
<html>
<body>
<element name="x-foo" constructor="FooComponent" extends="button">
...
</element>
</html>
</body>
Both files (examples.html and foo.html) must be in the same base directory:
web
examples.html
foo.html
...
Then, examples.html need be used as argument inside build.dart:
build(new Options().arguments, ['web/example.html']);
And, finally, foo.html (that is, web/foo.html) must be the one to be linked:
<link rel="components" href='foo.html'>
The way you have it in your main HTML file is correct. You reference foo.html because the referencing HTML document needs to be compiled with dwc. dwc will take the main HTML file and compile it and all the the components it includes. The component are completely compiled to Dart and they .html files won't be used anymore.
If you're trying to edit example.html to include your component, you'll need to compile example.html, and not foo.html. You'll still generate foo.html.dart, but also example.html.dart and a bootstrap script to load everything up.