I have some print statements in a Dart UI app. Depending on the UI selection strings are printed to the console. Everything used to work as expected with with Dart with Eclipse plugin. Now I cannot see any print output to the console in my dart-polymer app.
Any possible help is appreciated.
EDIT 1
.dart
import 'dart:html';
import 'package:paper_elements/paper_input.dart';
import 'package:polymer/polymer.dart';
/// A Polymer `<main-app>` element.
#CustomTag('main-app')
class MainApp extends PolymerElement {
#observable String reversed = '';
/// Constructor used to create instance of MainApp.
MainApp.created() : super.created();
void reverseText(Event event, Object object, PaperInput target) {
reversed = target.value.split('').reversed.join('');
print(reversed); // NOTHING IS SHOWN IN ANY CONSOLE
}
.html
<!-- import polymer-element's definition -->
<link rel="import" href="../../packages/polymer/polymer.html">
<link rel="import" href="../../packages/paper_elements/paper_input.html">
<polymer-element name="main-app">
<template>
<style>
:host {
display: block;
}
</style>
<paper-input label="Type something..." on-keyup="{{reverseText}}"></paper-input>
<p>
Reversed: {{ reversed }}
</p>
</template>
<script type="application/dart" src="main_app.dart"></script>
</polymer-element>
The print statement in main_app.dart DOES NOT PRINT TO ANY VISIBLE CONSOLE.
Ensure you have the IntelliJ debug plugin installed in Dartium.
I had the same problem. Simply running the app (as in Dart Editor) does not seem to be enough. In WebStorm, the print() statements appear in Console as expected only when I run the app in debug-mode (Ctrl-d).
Related
After doing a Pub Get and Pub Upgrade my custom-PolymerElements don't work anymore. It seems to me that the
<script type="application/dart" src="view.dart"></script>
is interpreted incorrectly. In my index.html_bootstrap.dart it is listed as: import 'dialog%5Cview.dart' as smoke_1; The "%5C" ( \ ) should be a slash ( / ) anyway and I'm pretty sure that it shouldn't be escaped. I tried it with the dart stable (1.8.5) and dev (1.9.0) versions for 64bit Windows.
I already tried to revert my package to their previous version but since I hadn't constraint them in my pubspec file I have no way to determine which versions worked before my changes. In another dart polymer project I'm working on I use the same setup (extended polymer elements) and it still works . The equivalent position in the index.html_bootstrap.dart reads: import 'dialog/view.dart' as smoke_1;
(edit) some (shortened) code:
/web/dialog/error/view.html
<link rel="import" href="packages/polymer/polymer.html">
<link rel="import" href="packages/paper_elements/paper_dialog.html">
<link rel="import" href="packages/core_elements/core_animated_pages.html">
<polymer-element name="error-view">
<template>
<style>
paper-dialog {
margin-top: 20px;
height: 400px;
width: 600px; }
</style>
<paper-dialog id="extendedNode" heading="{{dialogtitle}}" vertical autoCloseDisabled=true transition="paper-transition-center" opened=true>
<content>
<core-animated-pages selected="{{page}}" valueattr="id" transitions="hero-transition cross-fade">
<section id="0">
<p cross-fade>A system error occured while connecting with the server.</p>
<br>
<p cross-fade>Error message: {{dialogtext}}</p>
</section>
</core-animated-pages>
</content>
</paper-dialog>
</template>
<script type="application/dart" src="view.dart"></script>
</polymer-element>
/web/dialog/error/view.dart
import 'package:polymer/polymer.dart';
import '../view.dart'; // <- the base class 'DialogView'
#CustomTag('error-view')
class ErrorView extends DialogView{
ErrorView.created() : super.created(){
componentName = 'error-view';
this.dialogtitle = 'System Error';
}
}
/web/dialog/view.dart
import 'package:polymer/polymer.dart';
import 'dart:html';
import 'package:intl/intl.dart';
import '../locale/de.dart' as de;
class DialogView extends PolymerElement {
#observable int page;
//there are a lot of helper functions and variables in here
}
I use many pairs of those components extending the base component (which has no view.html but only a view.dart that allows me to hold and manipulate different dialogs within one List. This worked perfectly fine until I did the Pub Get / Upgrade and was not solved by repairing the cache. A project using a similar structure still works fine.
This resolves it for now:
pubspec.yaml
code_transformers: '<= 0.2.5'
I have the following simple .dart and .html files
.dart
//import 'dart:html';
import 'package:polymer/polymer.dart';
/// A Polymer `<main-app>` element.
#CustomTag('main-app')
class MainApp extends PolymerElement {
#observable DateTime today = new DateTime.now();
#observable String aDate = '';
/// Constructor used to create instance of MainApp.
MainApp.created() : super.created();
void onChangeFired() {
print(aDate);
}
}
.html
<!-- import polymer-element's definition -->
<link rel="import" href="../../packages/polymer/polymer.html">
<link rel="import" href="../../packages/paper_elements/paper_input.html">
<polymer-element name="main-app">
<template>
<style>
:host {
display: block;
}
</style>
<input type='date' value='{{aDate}}'
on-change='{{onChangeFired}}' id='time' class='margin-lb5px'>
</template>
<script type="application/dart" src="main_app.dart"></script>
</polymer-element>
Running the app in Dartium displays the calendar dropdown. However, each time I select a date, the application crasshes (exits) after printing the selected date with the following
2005-02-08 (:1)
<debug target crashed>
Nothing else is displyed in the console.
I created a new new polymer-app using Stagehand with the same result. Nothing else is there in the application.
This problem is present in the last two Dart Dev updates - I am currently using Dart 1.9.0-dev.9.1 (rev 44018) with the same result.
I am using the Dart eclipse plugin on Windows 8.1
Thanks
This is an issue in the Chrome version Dartium is built on.
Hopefully with Dart 1.15 we get the updated Dartium where this issue should be fixed.
I basically want to create a <core-tooltip> tag, not in HTML, but in dart.
So i tried:
CoreTooltip tooltip = new CoreTooltip();
CoreTooltip tooltip = document.createElement("core-tooltip"):
CoreTooltip tooltip = new Element.tag("core-tooltip"):
got always the same Exception
Uncaught Error: type 'HtmlElement' is not a subtype of type 'CoreTooltip'
Why does that just not work?
You shouldn't use this method
document.createElement("core-tooltip"):
the other two are fine though.
I assume the element creation fails because the code is in a custom main and is executed before Polymer is done with initialization.
See how to implement a main function in polymer apps for more details.
If you execute the code inside a Polymer elements (for example attached() method after super.attached()) or in an event handler like on-click this will work.
Another possibility is, that you app is missing an HTML import that imports <core-tooltip>. Without an import this can't work either.
I tried it with this code and it worked for me
app_element.dart
import 'dart:html' as dom;
import 'package:polymer/polymer.dart';
import 'package:core_elements/core_tooltip.dart';
#CustomTag('app-element')
class AppElement extends PolymerElement {
AppElement.created() : super.created() { }
#PublishedProperty(reflect: true) bool isValidationError;
void attached() {
super.attached();
CoreTooltip tt = new CoreTooltip();
print(tt);
}
}
app_element.html
<link rel="import" href="../../packages/polymer/polymer.html">
<link rel="import" href="../../packages/core_elements/core_tooltip.html">
<polymer-element name="app-element">
<template>
</template>
<script type="application/dart" src="app_element.dart"></script>
</polymer-element>
I have been trying to extend the paper-item element from the paper_elements package. I do things as I have done when extending my own elements, but that fails.
<link rel="import" href="../../packages/polymer/polymer.html">
<link rel="import" href="../../packages/paper_elements/paper_item.html">
<polymer-element name="x-item" extends="paper-item">
...
</polymer-element>
#CustomTag('x-item')
class XItem extends PaperItem {
XItem.created() : super.created();
}
I get no error message, and no Polymer Element is initialised, with a blank part of the page where ever I've put a Polymer element.
I try using the same method I've used to extend a builtin HTML element like button or div. That also fails.
<link rel="import" href="../../packages/polymer/polymer.html">
<link rel="import" href="../../packages/paper_elements/paper_item.html">
<polymer-element name="x-item" extends="paper-item">
...
</polymer-element>
#CustomTag('x-item')
class XItem extends PaperItem with Polymer, Observable {
XItem.created() : super.created() {
super.polymerCreated();
}
}
And I get
Breaking on exception: NotSupportedError: Registration failed for type 'x-item'. The tag name specified in 'extends' is a custom element name. Use inheritance instead.
If I remove the extends part of the polymer template definition, again I get nothing. Where the Polymer elements in the page have been placed, there is nothing but blankness.
The previous error still happens if I import the actual JS version polymer-item.html via
<link rel="import" href="../../packages/paper_elements/src/paper-item/paper-item.html">
though I still have to extend PaperItem with Polymer and Observable, using the super.polymerCreated(); to generate that error.
I know that the Polymer Dart Team did some trickery to get the underlying paper-elements, which are written in JS, to work almost like they are Polymer Dart elements. I guess this is what's causing the problems. My question is how do I overcome this, so I can extend a paper-element in Dart?
UPDATE - A bug has been submitted https://code.google.com/p/dart/issues/detail?id=20388
I tried it and it also didn't work for me.
I'm pretty sure this is a bug/missing feature with the Dart wrapper for the Polymer.js elements used in paper-elements/core-elements.
You haven't added the HTML of your element.
Does your extending elements template contain a <shadow></shadow> element?
<polymer-element name="x-item" extends="paper-item">
<template>
<shadow></shadow>
</template>
</polymer-element>
I was fiddling with the "new" instructions for polymer dart 0.10.0-pre.10 only to realize I had package 0.9.5 installed (on an updated Dart Editor). And could only get code to run using main() => dostuff(); Adding component1 as per instructions just broke whatever worked.
I set pubspec.yaml polymer dependency to >= 0.9.9 and it auto pub gets the version 0.10.0-pre.10. Then I made changes as suggested and moved dostuff() to a custom element class (extends PolymerElement) and put #initMethod above it. It does not run.
And as I got it to run before I was unable to find a way to bind new items from a JSON file (which I successfuly got through http) to the polymer element.
mylist.dart
import 'package:polymer/polymer.dart';
import 'dart:html';
#CustomTag('my-list')
class MyListElement extends PolymerElement {
#observable List mylist = ['one', 'two', 'three'];
#initMethod
static dostuff() {
print("initMethod");
// get json and pass to mylist
}
}
mylist.html
<polymer-element name="my-list">
<template>
<ul>
<template repeat="{{item in mylist}}">
<li>{{item}}</li>
</template>
</ul>
</template>
<script type="application/dart;component=1" src="mylist.dart"></script>
</polymer-element>
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Sample app</title>
<link rel="import" href="packages/polymer/polymer.html">
<link rel="import" href="mylist.html">
<script src="packages/browser/dart.js"></script>
</head>
<body>
<h1>MyList</h1>
<div id="container1">
<json-list id="my-list1"></json-list>
</div>
</body>
</html>
This code (especially #initMethod) inside the element doesn't make sense.
#CustomTag('my-list') does this already. You need #initMethod() only when you want a method executed like main() that is outside of an Polymer element.
You can put this code inside the constructor of MyListElement or better inside polymerCreated before the super call.
import 'package:polymer/polymer.dart';
import 'dart:html';
#CustomTag('my-list')
class MyListElement extends PolymerElement {
#observable List mylist = ['one', 'two', 'three'];
#override
polymerCreated() {
print("initMethod");
// get json and pass to mylist
super.polymerCreated();
}
}
You didn't get Polymer 0.10.0-pre.10 because it is a pre-release which is indicated by the - after the patch version (not by pre).
Pub by default ignores pre-releases. You have to enforce them by a version constraint like '>=0.10.0-'