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>
Related
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.
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 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 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>