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.
Related
I like to use my custom Polymer Element named content-page in my main-html.
Therefore I created a div with the id="contentcontainer" which contains my content-page.
For some reason it crashes, just after clicking on Run and the Dart Editor says: .
When I delete the line <link rel="import" href="content-page.html"> in main.html, the program isnt crashing, but there seems to be a Problem with the content of my main().
I unfortunately have no specific question, because I dont know where the error might be or where to start. Does someone see some suspicious parts in my code?
Thanks for helping!
main.dart:
import 'dart:html';
void main() {
var newElement = new Element.tag('content-page');
querySelector('#contentcontainer').children.add(newElement);
}
main.html:
<!DOCTYPE html>
<head>
<meta charset="utf-8" />
<link rel="stylesheet" type="text/css" href="style.css">
<script type="application/dart" src="main.dart"></script>
<script src="packages/web_components/dart_support.js"></script>
<link rel="import" href="content-page.html">
</head>
<body>
<div id="contentcontainer">
<content-page id="contentpage"></content-page>
</div>
<script type="application/dart">export 'package:polymer/init.dart';</script>
</body>
</html>
content-page.dart:
import 'package:polymer/polymer.dart';
import 'dart:html';
#CustomTag('content-page')
class ContentPage extends PolymerElement {
ContentPage.created() : super.created();
}
content-page.html:
<link rel="import" href="../packages/polymer/polymer.html">
<polymer-element name="content-page" >
<template>
<div>
ContentPage-Content
</div>
</template>
<script type="application/dart" src="content-page.dart"></script>
</polymer-element>
I tried your code and it's ok. Have you added the transformers to your pubspec.yaml?
name: sample
description: A sample web application
dependencies:
browser: any
polymer: any
transformers:
- polymer
You should have a look at this question/answer: how to implement a main function in polymer apps how to use a custom main method in a Polymer project.
This line should contain your file containing your main method (see also the answer in the linked question):
<script type="application/dart">export 'package:polymer/init.dart';</script>
this line is then redundant
<script type="application/dart" src="main.dart"></script>
the transformer configuration also needs a list of entry pages if you don't use the latest Polymer version
transformers:
- polymer:
entry_points:
- web/index.html
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.
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
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
I made an application with dart / polymer / sockets, and i want to compile it in Javascript. But I don't know how to do. I tried to do "Generate Javascript", but it said "You do not have main entry point".
Should I compile manually each dart files ?
Does build.dart useful ?
Edit Added index.html from comments:
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<link rel="stylesheet" href="bootstrap.min.css" />
<link rel="import" href="console.html" />
<link rel="stylesheet" href="base.css" />
<link rel="stylesheet" href="css/main.css" />
<script src='packages/polymer/boot.js'></script>
<title>XXX</title>
</head>
<body>
<fei-console></fei-console>
<script type="application/dart">
main() { }
</script>
</body>
</html>
If it is complaining about a main entry point, I suspect it cannot find a main() function defined anywhere. In your index.html (or whatever the main html file is called), you presumably have a link to a Dart file. Does that file have a main() function defined?