I've been following this tutorial for Dart:
https://www.dartlang.org/docs/tutorials/polymer-intro/
And as a quick test run I'm trying to set up a very basic thing - a page with a label and two inputs.
I'm trying to define this page as a Polymer Element and loda it, and this isn't working. Here's the code...
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>GXMMaps</title>
<link rel="import" href="signin.html">
<script type="application/dart">
import 'package:polymer/init.dart';
</script>
<script src="packages/browser/dart.js"></script>
</head>
<body>
<signin></signin>
</body>
</html>
signin.html
<!-- Basic sign in form...-->
<!DOCTYPE html>
<polymer-element name="signin">
<template>
<style>
@host {
:scope {
background-color: LemonChiffon;
text-align: center;
display: inline-block;
border: solid 1px;
padding: 10px 10px 10px 10px;
}
}
</style>
<div>GXM Maps</div>
<div>
<div>
<input id="username">Username</>
</div>
<div>
<input id="password">Password</>"
</div>
</div>
</template>
<script
type="application/dart"
src="signin.dart">
</script>
</polymer-element>
signin.dart
import 'dart:html';
import 'dart:async';
import 'package:polymer/polymer.dart';
@CustomTag('signin')
class signin extends PolymerElement {
signin.created() : super.created();
// we'll do username and password submission here...
}
If I put a header in index.html that appears just fine, and if I examine the page I can see a element, but it's empty.
EDIT ::
I followed a comment above, and changed
<script type="application/dart">
import 'package:polymer/init.dart';
to
<script type="application/dart">
export'package:polymer/init.dart';
Now when I run i get the following error:
Uncaught Error: InvalidCharacterError: Internal Dartium Exception
Stack Trace:
#0 _Utils._register (file:///E:/b/build/slave/dartium-win-full-stable/build/src/dart/tools/dom/src/native_DOMImplementation.dart:461)
#1 _Utils.register (file:///E:/b/build/slave/dartium-win-full-stable/build/src/dart/tools/dom/src/native_DOMImplementation.dart:457)
#2 HtmlDocument.register (file:///E:/b/build/slave/dartium-win-full-stable/build/src/build/Release/obj/global_intermediate/blink/bindings/dart/dart/html/HtmlDocument.dart:222)
#3 PolymerDeclaration.registerType (package:polymer/src/declaration.dart:239:22)
#4 PolymerDeclaration.register (package:polymer/src/declaration.dart:164:17)
#5 PolymerDeclaration._register (package:polymer/src/declaration.dart:114:13)
#6 PolymerDeclaration.registerWhenReady (package:polymer/src/declaration.dart:109:14)
#7 _notifyType (package:polymer/src/declaration.dart:477:49)
#8 Polymer.register (package:polymer/src/instance.dart:62:16)
#9 _loadLibrary (package:polymer/src/loader.dart:181:25)
#10 _loadLibraries (package:polymer/src/loader.dart:89:19)
#11 _initPolymerOptimized (package:polymer/src/loader.dart:54:17)
#12 _rootRun (dart:async/zone.dart:688)
#13 _ZoneDelegate.run (dart:async/zone.dart:417)
#14 _CustomizedZone.run (dart:async/zone.dart:627)
#15 initPolymer (package:polymer/src/loader.dart:37:33)
#16 main (package:polymer/init.dart:23:22)
Exception: InvalidCharacterError: Internal Dartium Exception
undefined (undefined:0:0)
Ok. Should have taken a closer look at your code. The name of you element is not correct. It has to contain at least one dash. Changing it to signin-element will make it work.
In your signin.html this line:
<polymer-element name="signin-element">
in signin.dart:
@CustomTag('signin-element')
and finally in your index.html:
<signin-element></signin-element>
You should also check your html in signin.html. Those </> and </>" after your inputs don't belong there.
I don't know whether or not you are using the Dart Editor, but it is pretty useful and marks each of these issues with a (helpful) warning.