The web application has following code in app.dart
library app;
import 'dart:html';
var _loginClass;
void main() {
_loginClass = 'hide_login'; //set style to hide login web component by setting display:none
}
void showLogin(e) {
_loginClass = 'show_login';
print("span clicked");
}
void hideLogin(e) {
_loginClass = 'hide_login';
}
calling hideLogin(e) function from App.dart hides the web component. but calling it from web component does not work.
css is defined as follows:
.hide_login {
display: none;
}
.show_login {
display = block;
}
It's weird that you have "display: none;" and "display = block;". The second is not valid syntax.
If that's not the right answer, try adding:
import 'package:web_components/web_components.dart';
And then call dispatch(); after setting _loginClass.
It would probably be more dartish to use
<template instantiate="bool expression">
This makes showing and hiding a custom element like a login component incredibly easy
example:
login.html
<html>
<body>
<element name="x-login" constructor="LoginComponent" extends="div">
<template instantiate="if showLogin">
...
<button on-click="validateLogin()">Login</button>
</template>
</element>
</body>
</html>
LoginComponent.dart
import "package:web_ui/web_ui.dart";
class LoginComponent extends WebComponent {
bool showLogin = true;
bool validateLogin() {
...
showLogin = false;
}
}
Check out http://www.dartlang.org/articles/dart-web-components/ for further details
Related
Similar to javascript and the implementation of IronValidatorBehavior how do I do custom validation in Polymer Dart?
I can create a new custom-validator which implements IronValidatorBehavior e.g.
<dom-module id="form-input">
<template>
<style include='shared-styles iron-flex iron-flex-alignment'>
:host {
display: block;
padding: 1em;
}
</style>
<custom-validator id="validator" validator-name="jsonValidator" validator-type="json"></custom-validator>
<paper-textarea label="[[label]]" id="body" name="body" autofocus tabindex="0"
validator="jsonValidator" auto-validate error-message="This is not a valid format"></paper-textarea>
</template>
</dom-module>
The custom-validator is written as
library main_app.custom_validator;
import 'dart:html';
import 'package:polymer/polymer.dart';
import 'package:polymer_elements/iron_validator_behavior.dart' show IronValidatorBehavior;
#PolymerRegister('custom-validator')
class CustomValidator extends PolymerElement with IronValidatorBehavior{
CustomValidator.created() : super.created();
#reflectable
bool validate(e, [_]){
switch(validatorType) {
case 'json':
return textValidator(e);
}
return false;
}
bool textValidator(e){
return false;
}
}
okay, it was a typo, the above works if I change.
<custom-validator id="validator" validator-name="jsonValidator" validator-type="json"></custom-validator>
to
<custom-validator id="validator" validator-name="jsonValidator" validator-check="json"></custom-validator>
The property validatorType needs to be set to its default value of 'validator'. Instead added a new property validatorCheck, where I set the validation method name to be called.
library custom_validator;
import 'dart:mirrors' show reflect;
import 'package:polymer/polymer.dart';
import 'package:polymer_elements/iron_validator_behavior.dart' show IronValidatorBehavior;
import 'package:validator/validator.dart' show isJSON;
#PolymerRegister('custom-validator')
class CustomValidator extends PolymerElement with IronValidatorBehavior{
#property
String validatorCheck;
CustomValidator.created() : super.created();
#reflectable
bool validate(value, [_]){
if(validatorCheck.isNotEmpty) {
Symbol sym = new Symbol(validatorCheck);
return reflect(this).invoke(sym, [value]).reflectee;
}
return false;
}
bool json(String value, [_]){
if(value.isNotEmpty) {
return isJSON(value);
}
return true;
}
}
Hello I cant seem to find the correct way to remove a nested element using polymer 1.0
createMigrationTable.html
<dom-module id="custom-create-migration-table">
<template>
<style>
paper-button {
/**border: 1px solid #d81b60;*/
}
paper-material {
width: 98%;
margin: 5px auto;
}
br{
clear:both;
}
</style>
<paper-material elevation="2" id="page_2">
createTable:
<paper-button raised on-tap="addTable">
+ add new table
</paper-button>
<template is="dom-repeat" items="{{createTables}}">
{{item.name}}
<paper-input required label="Table Name" value="{{item.name}}"></paper-input>
<template is="dom-repeat" items="{{item.columns}}" as="column">
<custom-column-view column="{{column}}"></custom-column-view>
<a on-tap="removeColumn">remove</a>
<br/>
</template>
<paper-button raised on-tap="addColumn">
Add Column
</paper-button>
</template>
</paper-material>
</template>
</dom-module>
createMigrationTable.dart
#HtmlImport('createMigrationTable.html')
library dartabase.poly.createMigrationTable;
// Import the paper element from Polymer.
import 'package:polymer_elements/iron_pages.dart';
import 'package:polymer_elements/paper_material.dart';
import 'package:polymer_elements/paper_button.dart';
import 'package:polymer_elements/paper_input.dart';
//import "../poly/columnView.dart";
import "../poly/table.dart";
// Import the Polymer and Web Components scripts.
import 'package:polymer/polymer.dart';
import 'package:web_components/web_components.dart';
#PolymerRegister('custom-create-migration-table')
class CreateMigrationTable extends PolymerElement {
#property
List<Table> createTables = new List();
CreateMigrationTable.created() : super.created();
#reflectable
addTable(event, [_]) {
Table table = new Table(name:"defaultName",columns: [{
"name":"defaultName",
"type":["BINT",
"INT",
"VARCHAR"
],
"def":"",
"nil":true
}]);
/*Map table = {
"tableName":"defaultTableName",
"columns":[{
"name":"defaultName",
"type":"defaultType",
"default":"",
"notNull":true
}]
};*/
//createTables.add(table);
add('createTables', table);
}
#reflectable
transition(event, [_]) {
IronPages ip = Polymer.dom(this.root).querySelector("iron-pages");
ip.selectNext();
}
#reflectable
void addColumn(event, [_]) {
var model = new DomRepeatModel.fromEvent(event);
model.add("item.columns", {
"name":"defaultName",
"type":"",
"def":"",
"nil":true
});
}
#reflectable
void removeColumn(event, [_]) {
var model = new DomRepeatModel.fromEvent(event);
model.removeItem("item", model.item);
}
void ready() {
print("$runtimeType::ready()");
}
}
tabel.dart
import 'package:polymer/polymer.dart';
import 'package:web_components/web_components.dart';
class Table extends JsProxy {
#reflectable
String name;
#reflectable
List columns;
Table({this.name, this.columns});
}
what should be the correct way to remove the element.
first I tried to call remove from inside the custom-column-view. but that did not update the bindings
then I read that the parent elements should have the control over adding and removing elements.. so I moved it one level above.
I would have thought that I can do it like in the addColumn method but but inside removeColumn I only receive the column view item.
I also tried to use index-as but I dont know how to be able to access both indexes i and j inside the removeColumn functions.
A custom equals implementation might fix it (not sure)
class Table extends JsProxy {
#reflectable
final String name;
#reflectable
List columns;
Table({this.name, this.columns});
int get hasCode => name.hashCode;
int operator ==(Object other) => other is Table && other.name == name;
}
I read Polymer API developer guide, but unfortunately it has examples only for JavaScript developers. Some examples I try to port into Dart, but in this case I get fail. Please, go to https://www.polymer-project.org/0.5/docs/polymer/polymer.html#global (Section Supporting global variables). Here is a clip from the documentation:
elements.html
<polymer-element name="app-globals">
<script>
(function() {
var values = {};
Polymer({
ready: function() {
this.values = values;
for (var i = 0; i < this.attributes.length; ++i) {
var attr = this.attributes[i];
values[attr.nodeName] = attr.value;
}
}
});
})();
</script>
</polymer-element>
<polymer-element name="my-component">
<template>
<app-globals id="globals"></app-globals>
<div id="firstname">{{$.globals.values.firstName}}</div>
<div id="lastname">{{$.globals.values.lastName}}</div>
</template>
<script>
Polymer({
ready: function() {
console.log('Last name: ' + this.$.globals.values.lastName);
}
});
</script>
</polymer-element>
index.html
<app-globals id="globals" firstname="Addy" lastname="Osmani"></app-globals>
Questions:
How to implement this code in Dart?
Reading the code of different Q&A concerning Dart Polymer usage I come across with #observable annotation, toObserve() function and class CustomElement extends PolymerElement with Observable {..}. I know that they somehow related with data bindings, but I have no idea exactly how.
app_gobals.html
<link rel="import" href="packages/polymer/polymer.html">
<polymer-element name="app-globals">
<template>
<style>
:host {
display: none;
}
</style>
</template>
<script type="application/dart" src="app_globals.dart"></script>
</polymer-element>
app_gobals.dart
import 'package:polymer/polymer.dart';
import 'dart:async' show Timer;
#CustomTag('app-globals')
class AppGlobals extends PolymerElement {
static final ObservableMap _staticValues = toObservable({});
Map get values => _staticValues;
AppGlobals.created() : super.created();
ready() {
attributes.keys.forEach((k) {
values[k] = attributes[k];
});
// just to demonstrate that value changes are reflected
// in the view
new Timer.periodic(new Duration(seconds: 2),
(_) => values['periodic'] = new DateTime.now());
}
}
app_element.html (your my-component)
<link rel="import" href="packages/polymer/polymer.html">
<link rel="import" href="app_globals.html">
<polymer-element name="app-element">
<template>
<style>
:host {
display: block;
}
</style>
<app-globals id="globals"></app-globals>
<div>{{$["globals"].values["firstname"]}}</div>
<div>{{$["globals"].values["lastname"]}}</div>
<div>{{$["globals"].values["periodic"]}}</div>
</template>
<script type="application/dart" src="app_element.dart"></script>
</polymer-element>
app_element.dart
import 'package:polymer/polymer.dart';
#CustomTag('app-element')
class AppElement extends PolymerElement {
AppElement.created() : super.created();
ready() {
print('Last name: ${$["globals"].values["lastName"]}');
}
}
#observable indicates that Polymer should be notified when the value changes so it can update the view.
If you have a collection this is not enough because Polymer only gets notified when the field changes (another collection or null is assigned). toObservable(list|map) ensures that Polymer gets notified when elements in the collection are changed (removed/added/replaced).
PolymerElement includes Observable there fore there is nothing special to do on class level. When you extend a DOM element this looks a bit different see https://stackoverflow.com/a/20383102/217408.
Update
This are a lot of questions. I use static final ObservableMap _staticValues = toObservable({}); to ensure all values are stored in one place no matter how many <app-globals> elements your application contains. Statics are stored in the class not in the instance therefore it doesn't matter how many instances exist. #ComputedProperty(expression) var someField; watches expression for value changes and notifies Polymer to update bindings to someField. #observable is the simpler version but works only for fields. #published is like #observable but in addition allows bindings to the field from outside the element. #PublishedProperty() is the same as #published but this annotation form allows to pass arguments. #PublishedProperty(reflect: true) is like #published but in addition updates the actual DOM attribute to make the bound value available not only for other Polymer elements to bind to but also for CSS or other Frameworks which have no knowledge how to bind to Polymer fields.
I found another solution that works for me:
Just define a class for your globals. Use a factory constructor so that every representation of the class is the same instance. The class must extend Object with Observable:
globals.dart:
library globals;
import 'package:polymer/polymer.dart';
class Globals extends Object with Observable {
static Globals oneAndOnlyInstance;
#observable String text; // a "global" variable
#observable int integer; // another "global" variable
factory Globals() {
if (oneAndOnlyInstance==null) {
oneAndOnlyInstance=new Globals.init();
}
return oneAndOnlyInstance;
}
Globals.init();
}
Now you can use this class inside of all your custom elements. Only need to import globals.dart and create an object of it:
inside: main_app.dart:
import 'dart:html';
import 'package:polymer/polymer.dart';
import 'package:abundan/classes/globals.dart';
/// A Polymer `<main-app>` element.
#CustomTag('main-app')
class MainApp extends PolymerElement {
Globals globals=new Globals();
/// Constructor used to create instance of MainApp.
MainApp.created() : super.created();
attached() {
super.attached();
globals.text="HELLO!";
}
and inside of main_app.html:
{{globals.text}}
This works for me and it seems to be the easiest way to have something like globals with polymer custom elements.
The following code doesn't work. Maybe I do something wrong.. Please correct my code:
index.html:
<html>
<head>
<title>Page</title>
<link rel="import" href="msg_box.html">
</head>
<body>
<msg-box id="msg" caption="Caption 1"></msg-box>
<button id="btn">click me</button>
<script type="application/dart" src="index.dart"></script>
<script src="packages/browser/dart.js"></script>
</body>
</html>
import 'dart:html';
import 'package:polymer/polymer.dart';
import 'msg_box.dart';
void main() {
initPolymer();
ButtonElement btn = querySelector("#btn");
btn.onMouseEnter.listen((e) {
MsgBoxElement elm = querySelector("#msg");
window.alert(elm.caption); // SHOWS 'Caption 1'
elm.caption = "Caption 2"; // DON'T WORK!
window.alert(elm.caption); // SHOWS 'Caption 2', BUT PAGE SHOWS 'Caption 1'!!!
});`
}
msg_box.html
<polymer-element name="msg-box" attributes="caption">
<template>
<h4>{{caption}}</h4>
</template>
<script type="application/dart" src="msg_box.dart"></script>
</polymer-element>
import 'package:polymer/polymer.dart';
#CustomTag('msg-box')
class MsgBoxElement extends PolymerElement {
// fields
String _caption;
String get caption => _caption;
void set caption(String value) {
_caption = notifyPropertyChange(#caption, _caption, value);
}
MsgBoxElement.created() : super.created() {
}
}
This issue is critical for me. See also https://code.google.com/p/dart/issues/detail?id=14753&sort=-id&colspec=ID%20Type%20Status%20Priority%20Area%20Milestone%20Owner%20Summary
I believe the problem here is that there are pending change notifications not being processed because your code is not running in the dirty-checking zone. There are two things you can do to fix this:
call Observable.dirtyCheck() right after your update to caption; or,
run your code within the dirty-checking zone:
void main() {
var dirtyCheckingZone = initPolymer();
dirtyCheckingZone.run(() {
ButtonElement btn = querySelector("#btn");
btn.onMouseEnter.listen((e) {
MsgBoxElement elm = querySelector("#msg");
elm.caption = "Caption 2";
});
});
}
This zone makes sure that after any callback or listener is executed, we'll call Observable.dirtyCheck for you. This approach is slightly better than calling dirtyCheck explicitly because, when we compile for deployment, we switch from dirty-checking to explicit notifications. The zone returned by initPolymer is changed to reflect this.
A separate note: the MsgBoxElement above can be simplified if you use the #published annotation. This is meant to express that a property is both observable and exposed as an attribute of your element.
import 'package:polymer/polymer.dart';
#CustomTag('msg-box')
class MsgBoxElement extends PolymerElement {
#published String caption;
MsgBoxElement.created() : super.created();
}
Based on your information, it appears that the model is being updated, however the DOM isn't updating, most likely because an observable element isn't set. Try adding the following annotations to your msg_box dart code:
import 'package:polymer/polymer.dart';
#CustomTag('msg-box')
class MsgBoxElement extends PolymerElement {
// fields
#observable String _caption;
#reflectable String get caption => _caption;
#reflectable void set caption(String value) {
_caption = notifyPropertyChange(#caption, _caption, value);
}
MsgBoxElement.created() : super.created() {
}
}
See this Breaking change announcement on the dart mailing lists regarding the #reflectable attribute. Also see this discussion on setting up #observable getters
Using polymer in Dart I want to observe a value and bind a button to a function that changes it. The following sample code (test.dart) should clarify what I am trying to do
import 'dart:html';
import 'package:polymer/polymer.dart';
import 'package:observe/observe.dart';
import 'package:mdv/mdv.dart' as mdv;
class App extends Object with ObservableMixin {
int _counter = 0;
int get counter => _counter;
void set counter(int c) {
print("counter set to $c");
int oldValue = _counter;
_counter = notifyPropertyChange(const Symbol('counter'), _counter, c);
}
increment(var event) {
print("increment");
counter = counter + 1;
}
}
main() {
mdv.initialize();
var app = new App();
query("#tmpl1").model = app;
}
Used with this HTML
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
</head>
<body>
<template id="tmpl1" bind>
<button on-click="increment">{{counter}}</button>
</template>
<script type="application/dart" src="test.dart"></script>
<script src="packages/browser/dart.js"></script>
</body>
</html>
I would expect when the button is clicked that increment inside the App class is invoked, but nothing happens. I am sure I am overlooking something simple, as surely this must be possible.
Note to run the example code above you do not need to create a build.dart file as no custom-elements are being used.
I have just read the target10 polymer example and I am not sure if you are looking for the kind of solution I am going to post.
get Target 10:polymer example from https://github.com/dart-lang/dart-tutorials-samples/tree/master/web
Insert <button on-click="increment">{{counter}}</button> anywhere into one of the divs in xslambookform.html
Insert anywhere into xslambookform.dart
``
int _counter=0;
int get counter => _counter;
void set counter(int c) {
print("counter set to $c");
int oldValue = _counter;
_counter = notifyPropertyChange(const Symbol('counter'), _counter, c);
}
void increment(var e, var detail, Element target) {
print("increment");
counter = counter + 1;
}
Run slambook.html and press your button. See in console:
increment
counter set to 1
increment
counter set to 2
It turns out that what I tried to achieve is possible. To get it working you need to include the following in the HTML
<script src="packages/polymer/boot.js"></script>
then the following works
<polymer-element name="x-app">
<template>
<button on-click="increment">{{counter}}</button>
</template>
<script type="application/dart">
import 'package:polymer/polymer.dart';
#CustomTag('x-app')
class XApp extends PolymerElement with ObservableMixin {
#observable int counter = 0;
increment(event, detail, target) {
print("increment");
counter++;
Observable.dirtyCheck();
}
}
</script>
</polymer-element>
<x-app></x-app>
And best of all it works without the need for a build step (i.e. no more build.dart).