I was wondering if this is the best way to import html dependancies in polymer-dart.
I want to use my-other-element inside my-element this way:
my-element.dart:
#HtmlImport('my-element.html')
library mypackage.my_element;
import 'package:polymer/polymer.dart';
import 'package:web_components/web_components.dart' show HtmlImport;
// HERE I import the dart file
import 'my-other-element.dart'
#PolymerRegister('my-element')
class MyElement extends PolymerElement {
MyElement.created() : super.created();
}
my-element.html:
<!DOCTYPE html>
//HERE I import the element html
<link rel="import" href="my-other-element.html">
<dom-module id="my-element">
<template>
<my-other-element></my-other-element>
</template>
<script type="application/dart" src="my-element.dart"></script>
</dom-module>
Using #HtmlImport(...) and then only import using Darts import ...; directive is the recommended way.
Also:
Using - (dash) in Dart file names is discouraged. Prefer _ (underline)
You also don't need
<script type="application/dart" src="my-element.dart"></script>
in your <dom-module> if you import like suggested above.
Related
I'm using polymer style-modules to implement theming. To do this I have packaged all the styles in a dom-module, like this:
<dom-module id='my-theme'>
<template>
<style>
:root {
--primary-text-color: yellow;
... more styles ..
}
...
paper-button.important {
--paper-button-color: red;
... more styles ..
}
</style>
</template>
</dom-module>
Also made a .dart package to be imported in index.dart:
#HtmlImport("my-style.html")
library my_style.lib;
import 'package:web_components/web_components.dart' show HtmlImport;
Then in the index.html I will use it this way :
<link type='import' href='packages/my-style.html'>
<style is='custom-style' include='my-theme'></style>
Everything is working (don't care possible typos in the example above) even though I had to import the module with an html import and not in the usual dart way with a package import to make it work.
The Question is : this is working with a fixed theme. Is there a way to switch theme dynamically ? i.e. doings something like :
<style is='custom-style' include='[[selectedTheme]]'></style>
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).
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 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 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-'