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
Related
What imports and script tags are required to make an client app using Polymer.dart work properly?
<!DOCTYPE html>
<head>
<script src="packages/web_components/webcomponents-lite.min.js"></script>
<script src="packages/browser/dart.js"></script>
</head>
<body unresolved>
<my-element></my-element>
<script type="application/dart" src="index.dart"></script>
</body>
</html>
The webcomponents-lite.min.js script adds the Polymer polyfills.
The dart.js is necessary for every Dart browser application to run in browsers without Dart VM.
The index.dart contains your custom main(); and imports <my-element> using #HtmlImports(...)
where index.dart contains
import 'package:polymer/polymer.dart';
import 'my_element.dart';
/// Silence analyzer [MyElement]
main() async {
await initPolymer();
}
Without a custom main
import elements using <link rel="import" ...> (discouraged)
<!DOCTYPE html>
<head>
<script src="packages/web_components/webcomponents-lite.min.js"></script>
<link rel="import" href="my_element.html">
</head>
<body unresolved>
<my-element></my-element>
<script type="application/dart">export 'package:polymer/init.dart';</script>
<script src="packages/browser/dart.js"></script>
</body>
</html>
or using #HtmlImport(...) for importing elements
<!DOCTYPE html>
<head>
<script src="packages/web_components/webcomponents-lite.min.js"></script>
</head>
<body unresolved>
<my-element></my-element>
<script type="application/dart">
export 'package:polymer/init.dart';
import 'my_element.dart';
</script>
<script src="packages/browser/dart.js"></script>
</body>
</html>
Hint:
Without an explicit script tag for main it's more difficult to register the entry-point for the reflectable transformer. Some name for a generated file can be used instead but I don't know yet what this files name is.
Аfter compiling Dart code (which use Dart Polymer) to JS. I get the following error:
Uncaught Exception: The "smoke" library has not been configured.
Make sure you import and configure one of the implementations
(package:smoke/mirrors.dart or package:smoke/static.dart).
Sometimes the message was:
No elements registered in a while, but still waiting on 1 element to be registered. Check that you have a class with an #CustomTag annotation for each of the following tags: 'app-element'
What's wrong here? Here is my code:
UPDATE: now code beyond is improved and work correctly after pub build. I change folder/file structure and update polymer to the latest version.
pubspec.yaml
name: app
dependencies:
browser: any
#do not forget update to latest version by running pub update
polymer: any
transformers:
- polymer:
entry_points:
- web/main.html
web/templates/ui-elements.html
<polymer-element name="app-globals"></polymer-element>
<polymer-element name="app-element">
<template>
<link rel="stylesheet" href="/main.css"/>
<content></content>
</template>
<script type="application/dart" src="ui-elements.dart"></script>
</polymer-element>
web/templates/ui-elements.dart
#CustomTag('app-globals')
class AppGlobals extends PolymerElement{
AppGlobals.created() : super.created();
}
#CustomTag('app-element')
class AppElement extends PolymerElement {
AppElement.created() : super.created();
}
web/main.html (dummy entry file)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
</head>
<body>
<app-element></app-element>
<script type="application/dart" src="main.dart"></script>
</body>
</html>
web/main.dart
import 'package:polymer/polymer.dart';
main() {
initPolymer();
}
#whenPolymerReady
void onReady() {
}
web/main.html (entry point) after pub build. Real mess after compiling. So many js files some of them takes size even more than 300kb.
<!DOCTYPE html><html lang="en"><head><script src="packages/web_components/webcomponents.min.js"></script><script src="packages/web_components/dart_support.js"></script>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
</head>
<body><div hidden=""><style shim-shadowdom="">
/*******************************
Flex Layout
*******************************/
html /deep/ [layout][horizontal], html /deep/ [layout][vertical] {
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
}
html /deep/ [layout][horizontal][inline], html /deep/ [layout][vertical][inline] {
display: -ms-inline-flexbox;
display: -webkit-inline-flex;
display: inline-flex;
}
......tons of other styles...........
</style>
<script src="packages/polymer/src/js/polymer/polymer.min.js"></script>
<script>
// TODO(sigmund): remove this script tag (dartbug.com/19650). This empty
// script tag is necessary to work around a bug in Chrome 36.
</script>
<!-- unminified for debugging:
<link rel="import" href="src/js/polymer/layout.html">
<script src="src/js/polymer/polymer.js"></script>
-->
<polymer-element name="app-globals"></polymer-element>
<!-- APP ELEMENT -->
<polymer-element name="app-element" class="bck-medusa w-100 h-100">
<template>
<link rel="stylesheet" href="../main.css">
<content></content>
</template>
</polymer-element>
</div>
<script src="main.html.polymer.bootstrap.dart.js" async=""></script>
</body></html>
You don't need initPolymer when you use #whenPolymerReady. The entire main() method is redundant in your example.
Did you register your entry page properly in the Polymer transformer configuration in pubspec.yaml?
Smoke needs a transformer but if you have the Polymer transformer configured properly the Smoke transformer is included.
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 got a problem while deploying Dart code using Polymer to Javascript. I've created a polymer application with DartEditor and made a simple example. This example works in Dartium but when I try to build it as a Polymer App (in Javascript) and launch it, the app fails.
How am I supposed to convert a Dart Polymer app to Javascript ?
Here's the example code I made that fails :
example.html :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Example</title>
<link rel="import" href="example-polymer.html">
<script type="application/dart">export 'package:polymer/init.dart';</script>
<script src="packages/browser/dart.js"></script>
</head>
<body>
<div is="example-polymer"></div>
</body>
</html>
example-polymer.html
<polymer-element name="example-polymer" extends="div">
<template>
<div>
<input on-change="{{ change }}"/><br>
<span>Text : {{ text }}</span>
</div>
</template>
<script type="application/dart" src="example-polymer.dart"></script>
</polymer-element>
example-polymer.dart
import 'package:polymer/polymer.dart';
import 'dart:html';
#CustomTag('example-polymer')
class ExampleBolymer extends DivElement with Polymer, Observable {
#published String text = "" ;
ExampleBolymer.created() : super.created() {
}
void change(Event e, var detail , InputElement target) {
text = target.value;
}
}
add
transformers:
- polymer:
entry_points:
- web/example.html
to your pubspec.yaml
and call
pub build
Your files should be in the web directory of your package.
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