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.
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.
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 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've defined a custom element, chat-view and have it displaying on a page:
<!DOCTYPE html>
<html>
<head>
<title>index</title>
<script src="packages/polymer/boot.js"></script>
<link rel="import" href="chat_view.html">
</head>
<body>
<chat-view id="chat">
</chat-view>
<script type="application/dart" src="index.dart"></script>
</body>
</html>
I then query for the chat-view:
final ChatView chatView = query("#chat");
The previous line causes the following exception:
Exception: type 'UnknownElement' is not a subtype of type 'ChatView' of 'chatView'.
Is there a way to query for my custom element in such a way that I get an object of ChatView, instead of UnknownElement?
After some digging, I found that the custom element instance is accessed through the UnknownElement's xtag property.
final ChatView chatView = query("#chat").xtag;