I wrote a snippet and not working with national characters.
The "A törzsszám"... text appear "törzsszám" with my loginstatus field.
Main html:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="hu" xml:lang="en">
<head>
<meta charset="utf-8">
....
Login.html
<polymer-element name="login-element" attributes="loginrow">
<template>
...
<div>
<input type="text" value="{{torzsszam}}">
...
<br>
<span>({{loginstatus}})</span>
</div>
</template>
<script type="application/dart" src="login.dart"></script>
</polymer-element>
..and the login.dart snippet:
#CustomTag('login-element')
class Login extends PolymerElement {
bool loginned = false;
#published String torzsszam = "";
#published String password = "";
#published String loginstatus = "-";
...
void log_in_click() {
loginstatus="LOGIN";
loginned = false;
if (torzsszam != "" ) {
if (torzsszam.length>8) {
loginstatus='A törzsszám legfeljebb 8 számjegyből áll!';
} else {
What can I do...
Ups,...
I tried some solutions:
1.solution: change the encoding properties in login.dart from utf-8 to ISO-8859-2
2.solution: I created another file (consts.dart)
class consts {
static String loginstatus_err8 = "A törzsszám legfeljebb 8 számjegyből áll!";
static String loginstatus_OK = "Belépve";
static String loginstatus_emptytorzsszam = "A törzsszámot ki kell tölteni";
}
I used this in login.dart, and it worked :) I'm happy.
...
loginstatus=consts.loginstatus_err8;
} else {
loginstatus=consts.loginstatus_OK;
...
A while ago I posted the code for a <safe-html> tag at HTML Tags Within Internationalized Strings In Polymer.dart (original form Bind content containing html tags)
Using this polymer element shows proper characters.
Your login.html would then look like:
<link rel="import" href="../packages/safe_html/safe_html.html">
<polymer-element name="login-element" attributes="loginrow">
<template>
...
<div>
<input type="text" value="{{torzsszam}}">
...
<br>
<span>(<safe-html model="{{loginstatus}}></safe-html>)</span>
</div>
</template>
<script type="application/dart" src="login.dart"></script>
</polymer-element>
Related
I'm trying to create a custom element with data binding.
Here is my custom element template:
<link rel="import" href="packages/paper_elements/paper_shadow.html">
<link rel="import" href="packages/polymer/polymer.html">
<polymer-element name="tweet-element">
<template>
<link rel="stylesheet" href="tweet_element.css">
<paper-shadow z="1">
<div id="header" horizontal layout>
<div id="user-image">
<img _src="{{profileImage}}">
</div>
<div id="user-details" flex>
<div horizontal layout>
<div id="name">{{name}}</div>
<div id="screen-name">(#{{screenName}})</div>
</div>
<div id="date-published">{{date}}</div>
</div>
</div>
<div id="content">
<div id="text">{{text}}</div>
</div>
</paper-shadow>
</template>
<script type="application/dart" src="twitter.dart"></script>
</polymer-element>
twitter.dart
import 'dart:html';
import 'package:polymer/polymer.dart';
import 'package:polymer_expressions/polymer_expressions.dart';
#CustomTag('tweet-element')
class TweetElement extends PolymerElement {
#Observable String profileImage;
#Observable String name;
#Observable String screenName;
#Observable String date;
#Observable String text;
TweetElement.created() : super.created();
factory TweetElement() => new Element.tag('tweet-element');
}
This is how I'm creating and adding the elements:
main.dart
import 'dart:html';
import 'package:polymer/polymer.dart';
import 'package:polymer_expressions/polymer_expressions.dart';
import 'twitter.dart';
void main() {
...
var mainContent = querySelector('#main-content');
var element;
for (var tweet in tweets) {
element = new TweetElement();
element
..profileImage = tweet.user.profileImage
..name = tweet.user.name
..screenName = tweet.user.screenName
..date = _parseDate(tweet.date)
..text = tweet.text;
mainContent.children.add(element);
}
}
The tweet-element elements and being added to the DOM, but the fields with data binding are blank:
There is no problem with the tweet objects, because I've tried setting the element fields with other Strings and it also didn't work.
If you have a custom main method in a Polymer.dart application, you need to take care of Polymer initialization yourself.
See how to implement a main function in polymer apps for more details.
I managed to solve the problem. I was using the #Observable tag instead of #observable (notice upper/lowercase letters).
Not able to reference dom elements.
Most of the test case works except for the last expectation in ClickSignInButton when I want to make sure I can evaluate error message div when form is submitted without any data.
expect(document.querySelector('qme-header').shadowRoot
.querySelector('#headerErrorDiv'), isNotNull); always fails and headerErrorDiv is null even though its there in the div.
Code:
import 'package:test/test.dart';
import 'package:polymer/polymer.dart';
import 'dart:html';
import 'dart:async';
main() {
initPolymer().then((zone) => zone.run(() {
return Polymer.onReady.then((_) {
group('Header Form Elements Are Available', () {
test(("CheckSignInFormItems"), () {
expect(querySelector('qme-header').shadowRoot
.querySelector('#emailField'), isNotNull);
expect(querySelector('qme-header').shadowRoot
.querySelector('#passwordField'), isNotNull);
expect(querySelector('qme-header').shadowRoot
.querySelector('#signInButton'), isNotNull);
});
test(("CheckRegisterForgotItems"), () {
expect(querySelector('qme-header').shadowRoot
.querySelector('#registerButton'), isNotNull);
expect(querySelector('qme-header').shadowRoot
.querySelector('#forgotButton'), isNotNull);
});
});
group('Header Form Click Sign In Button', () {
test(("ClickSignInButton"), () {
(querySelector('qme-header').shadowRoot
.querySelector('#emailField') as InputElement).value = "";
(querySelector('qme-header').shadowRoot
.querySelector('#passwordField') as InputElement).value =
"";
Timer.run(expectAsync(() {
(querySelector('qme-header').shadowRoot
.querySelector('#signInButton') as ButtonElement).click();
expect(document.querySelector('qme-header').shadowRoot
.querySelector('#headerErrorDiv'), isNotNull);
}));
});
});
});
}));
}
Hi Günter, Thank you for your time, I adjusted my code based on your comments and it should work, however I think I am messing up the way I am using polymer templates.
pubspec.yaml
environment:
sdk: '>=1.0.0 <2.0.0'
dependencies:
bootstrap: ^3.3.4
browser: '>=0.10.0 <0.11.0'
polymer: '>=0.16.0 <0.17.0'
test: '>=0.12.3'
transformers:
- polymer:
inline_stylesheets:
packages/bootstrap/css/bootstrap.css: false
packages/bootstrap/css/bootstrap-theme.css: false
entry_points:
- web/index.html
- test/qme_header_test.html
- test/pub_serve:
$include: test/**_test{.*,}.dart
header.html
<polymer-element name="qme-header">
<div class="container">
<div class="navbar-header"><a class="navbar-brand"
href="#"><span>QMe Application</span></a></div>
<template if="{{usingHeaderForm}}">
<div id="navbar" class="navbar-collapse collapse" >
<form on-submit="{{validateSignInForm}}"
class="navbar-form navbar-right">
<div class="form-group">
<input type="text" id="emailField"
value="{{qmeSignIn.userEmail}}" placeholder="Email"
class="form-control">
</div>
<div class="form-group">
<input type="password" id="passwordField"
value="{{qmeSignIn.userPassword}}"
placeholder="Password" class="form-control">
</div>
<button id="signInButton" type="submit"
class="btn btn-success btn-sm">Sign in</button>
<button id="registerButton" class="btn btn-
info btn-xs" type="button-small">Register</button>
<button id="forgotButton" class="btn btn-info
btn-xs" type="button-small">Forgot Password</button>
</form>
</div>
</template>
<template if="{{!usingHeaderForm}}">
<p>Hello login complete</p>
</template>
header.dart
library qme_header;
import 'package:polymer/polymer.dart';
import 'dart:html';
import 'package:qme/views/qme_error.dart';
#CustomTag('qme-header')
class QmeHeader extends PolymerElement {
#published QMeSignIn qmeSignIn;
#observable bool usingHeaderForm = true;
#observable QmeErrorHolder qmeErrorHolder;
QmeHeader.created() : super.created() {
qmeSignIn = new QMeSignIn();
qmeErrorHolder = QmeErrorHolder.instance;
}
toggleFormDisplay() {
usingHeaderForm = !usingHeaderForm;
}
performLogin() {
toggleFormDisplay();
}
bool validateSignInEmail() {
if (qmeSignIn.userEmail.length == 0) {
qmeErrorHolder.headerErrorMessage = "Valid user email
required";
return false;
}
qmeErrorHolder.headerErrorMessage = '';
return true;
}
bool validateSignInPassword() {
if (qmeSignIn.userPassword.length == 0) {
qmeErrorHolder.headerErrorMessage = "Valid user password
required";
return false;
}
qmeErrorHolder.headerErrorMessage = '';
return true;
}
validateSignInForm(Event event, Object detail, Node sender) {
event.preventDefault();
if (validateSignInEmail() && validateSignInPassword()) {
print("Submit");
performLogin();
qmeErrorHolder.headerError = false;
} else {
qmeErrorHolder.headerError = true;
}
}
}
class QMeSignIn extends Observable {
#observable String userEmail;
#observable String userPassword;
QMeSignIn([this.userEmail = "", this.userPassword = ""]);
}
error.html
<polymer-element name="qme-error">
<template>
<template if="{{qmeErrorHolder.headerError}}">
<div class="container">
<div id="headerErrorDiv" class="alert alert-danger"
role="alert">{{qmeErrorHolder.headerErrorMessage}}</div>
</div>
</template>
</template>
<script type="application/dart" src="qme_error.dart">
</script>
</polymer-element>
error.dart
library qme_error;
import 'package:polymer/polymer.dart';
#CustomTag('qme-error')
class QmeError extends PolymerElement {
#observable QmeErrorHolder qmeErrorHolder;
QmeError.created() : super.created() {
qmeErrorHolder = QmeErrorHolder.instance;
}
}
class QmeErrorHolder extends Observable {
#observable bool headerError;
#observable String headerErrorMessage;
static final QmeErrorHolder _instance = new
QmeErrorHolder._internal();
static QmeErrorHolder get instance => _instance;
QmeErrorHolder._internal();
}
headertest.html
<html>
<head>
<link rel="import"
href="../packages/polymer/polymer.html">
<link rel="import"
href="../packages/qme/views/qme_header.html" >
<link rel="import"
href="../packages/qme/views/qme_error.html" >
<link rel="stylesheet"
href="packages/bootstrap/css/bootstrap.css">
<link rel="stylesheet"
href="packages/bootstrap/css/bootstrap-theme.css">
<script type="application/dart"
src="qme_header_test.dart"></script>
<script data-pub-inline src="packages/test/dart.js">
</script>
</head>
<body>
<qme-header></qme-header>
<qme-error></qme-error>
</body>
</html>
headertest.dart
#whenPolymerReady
void runTests() {
group('Header Form Click Sign In Button', () {
test(("ClickSignInButton"), () {
(querySelector('qme-header::shadow #emailField ') as
InputElement).value ="";
(querySelector(
'qme-header::shadow #passwordField') as
InputElement).value = "";
(querySelector('qme-header::shadow #signInButton') as
ButtonElement)
.click();
expect(
document.querySelector('qme-error::shadow #headerErrorDiv'), isNotNull);
});
});
}
index.html
<html>
<head>
<link rel="stylesheet"
href="packages/bootstrap/css/bootstrap.css">
<link rel="stylesheet"
href="packages/bootstrap/css/bootstrap-theme.css">
<link rel="stylesheet" href="styles/main.css">
<link rel="import"
href="packages/qme/views/qme_header.html">
<link rel="import"
href="packages/qme/views/qme_error.html">
</head>
<body>
<qme-header></qme-header>
<qme-error></qme-error>
<script src="packages/bootstrap/jquery/jquery.js"></script>
<script src="packages/bootstrap/js/bootstrap.js"></script>
<script data-pub-inline src="packages/browser/dart.js">
</script>
<script type="application/dart">export
'package:polymer/init.dart';</script>
</body>
</html>
Running index.html in Dartium works, however header test fails with null for headerErrorDiv. I know I am messing up with Polymer template and having gobal error holder most likely, but it works when index.html runs in Dartium and fails test cases when headertest.html is run.
At first, I think you should add the #whenPolymerReady annotation to main() instead of your Polymer initialization code.
Instead of
expect(document.querySelector('qme-header').shadowRoot
.querySelector('#headerErrorDiv'), isNotNull);
you could use
expect(document.querySelector('qme-header::shadow #headerErrorDiv'), isNotNull);
I don't see a problem in your
cod. Can you please provide a complete example that allows to reproduce your problem (incl HTML and pubspec.yaml)
headerErrorDiv only exists if qmeErrorHolder.headerError is true
I think you should ensure the test files end with _test(.dart|.html) to be recognized by the testrunner pub run test
You need to change the Dart script tag to x-link-dart to make the test work with the testrunner (and back to <script> when you want to run it directly)
AFAIK If your test needs additional files like your component files you need to run pub serve test and pass the port to pub run test (see readme of the test package for more details)
I have built a Polymer.dart app that uses nested Polymer elements. The parent element takes an attribute and passes its value to the nested, child elment as an attribute. This works fine when "Run in Dartium" from within DartEditor, but the nested element fails to load after the app is "Pub Built" and "Run as JavaScript." There are no error messages during the build process, or any pointers of any other sort. I don't know how to debug this and the fact that it runs as expected without any warnings or errors in Dartium doesn't help.
The following is the code for the simplified version of my app that produces the same problem. my_view is the parent element and my_form is the nested element that is attached when my_view is loaded.
main.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Sample</title>
<link rel="import" href="my_view.html">
<script type="application/dart">export 'package:polymer/init.dart';</script>
<script src="packages/browser/dart.js"></script>
</head>
<body>
<h1>The view polymer element should appear below:</h1>
<my-view viewAttribute="My_Value"></my-view>
</body>
</html>
my_view.html
<polymer-element name="my-view" attributes="viewAttribute">
<link rel="import" href="my_form.html">
<template>
<div style="width: 100%;"><h1>The form should appear below:</h1></div>
<div id="form_div" style="width: 100%;"></div>
</template>
<script type="application/dart" src="my_view.dart"></script>
</polymer-element>
my_view.dart
import 'package:polymer/polymer.dart';
import 'dart:html';
#CustomTag('my-view')
class MyView extends PolymerElement {
#published String viewAttribute;
DivElement _formSlot;
MyView.created() : super.created() {
_formSlot = $['form_div'];
}
void viewAttributeChanged() {
_formSlot..append(new Element.tag('form', 'my-form')..setAttribute("formAttribute", viewAttribute));
}
}
my_form.html
<polymer-element name="my-form" extends="form" attributes="formAttribute">
<template>
<div style="width: 100%;">Attribute value: {{formAttribute}}</div>
<div style="width: 100%;">
<label for="nameInput">name:</label>
<input id="nameInput" type="text" value="{{nameValue}}" />
</div>
<div style="width: 100%;">
<div id="button_div">
<input type="submit" on-click="{{submitForm}}" value="send" />
</div>
</div>
</template>
<script type="application/dart" src="my_form.dart"></script>
</polymer-element>
my_form.dart
import 'package:polymer/polymer.dart';
import 'dart:async';
import 'dart:html';
import 'dart:convert';
#CustomTag('my-form')
class MyForm extends FormElement with Polymer, Observable {
#published String formAttribute;
#observable String nameValue;
HttpRequest _request;
MyForm.created() : super.created();
void submitForm(Event e, var detail, Node target) {
e.preventDefault();
_request = new HttpRequest();
_request.onReadyStateChange.listen(_onData);
_request.open('POST', 'http://my.server.com/contact_form');
_request.send(JSON.encode({'name': nameValue, 'attribute': formAttribute}));
}
_onData(_) {
if (_request.readyState == HttpRequest.DONE) {
switch (_request.status) {
case 200:
// Data was posted successfully
break;
case 0:
// Post failed
break;
}
}
}
}
Any help, hints, well wishes, prayers would be greatly appreciated! Thanks!
I guess this is a dart2js bug.
For answering this question Dynamically create polymer element I built an example.
This code (like you showed in your question) generates the correct markup but the form element didn't work properly. I didn't examine this behaviour further because I myself never needed to extend a DOM element.
You could also try not to extend the <FORM> element but create a new Polymer element and just embed the <FORM> element.
I'm having trouble binding a model to a table if I'm not using a custom element.
Custom element works fine, but when I try to bind the model manually without creating a custom component, no data is displayed. Any Ideas?
custom_table.html
<!DOCTYPE html>
<html>
<body>
<polymer-element name="custom-table" extends="div" apply-author-styles>
<template>
<table>
<tbody>
<tr template repeat="{{people}}">
<td>{{firstName}}</td>
<td>{{lastName}}</td>
</tr>
</tbody>
</table>
</template>
<script type="application/dart" src="custom_table.dart"></script>
</polymer-element>
</body>
</html>
custom_table.dart
import 'package:polymer/polymer.dart';
class Person {
String firstName;
String lastName;
Person(this.firstName, this.lastName);
}
#CustomTag('custom-table')
class CustomTable extends PolymerElement with ObservableMixin {
List people = [new Person('Bob', 'Smith'), new Person('Alice', 'Johnson')];
}
No custom element version:
polymer_test.html
<!DOCTYPE html>
<head>
<script src="packages/polymer/boot.js"></script>
</head>
<html>
<head>
<meta charset="utf-8">
<title>Polymer test</title>
<link rel="stylesheet" href="polymer_test.css">
</head>
<body>
<h1> Table test </h1>
<template id="tableTemplate" repeat>
<table>
<tbody>
<tr template repeat="{{ people }}">
<td>{{firstName}}</td>
<td>{{lastName}}</td>
<tr>
</tbody>
</table>
</template>
<script type="application/dart" src="polymer_test.dart"></script>
</body>
</html>
polymer_test.dart
import 'dart:html';
import 'package:polymer/polymer.dart';
import 'package:fancy_syntax/syntax.dart';
class Person {
String firstName;
String lastName;
Person(this.firstName, this.lastName);
}
class Message extends Object with ObservableMixin {
List<Person> people = toObservable([new Person('Bob', 'Smith'), new Person('Alice', 'Johnson')]);
}
main() {
var msgModel = new Message();
TemplateElement template = query('#tableTemplate');
template.bindingDelegate = new FancySyntax();
template.model = msgModel;
}
Does it help to add this to main?
void main() {
initPolymer([], () {
// put existing main code in here
});
}
polymer/boot.js should do this, but I think right now it isn't kicking in unless the page has at least one polymer-element (this is a bug).
alternatively, you could add a dummy <polymer-element> to the HTML. That will workaround the problem.
bind attribute was missing in my template definition. Instead, I wrongly used repeat.
It should be:
<template id="tableTemplate" bind>
Instead of:
<template id="tableTemplate" repeat>
Can you try
templateBind(query('#tableTemplate'))
..bindingDelegate = new FancySyntax()
..model = msgModel;
See http://api.dartlang.org/docs/releases/latest/template_binding.html#templateBind
For illustration reasons, I've created a class inheriting from WebComponent called FancyOption that changes to a background color specified by text in one child element upon clicking another child element.
import 'package:web_ui/web_ui.dart';
import 'dart:html';
class FancyOptionComponent extends WebComponent {
ButtonElement _button;
TextInputElement _textInput;
FancyOptionComponent() {
// obtain reference to button element
// obtain reference to text element
// failed attempt
//_button = this.query('.fancy-option-button');
// error: Bad state: host element has not been set. (no idea)
// make the background color of this web component the specified color
final changeColorFunc = (e) => this.style.backgroundColor = _textInput.value;
_button.onClick.listen(changeColorFunc);
}
}
FancyOption HTML:
<!DOCTYPE html>
<html>
<body>
<element name="x-fancy-option" constructor="FancyOptionComponent" extends="div">
<template>
<div>
<button class='fancy-option-button'>Click me!</button>
<input class='fancy-option-text' type='text'>
</div>
</template>
<script type="application/dart" src="fancyoption.dart"></script>
</element>
</body>
</html>
I have three of them on a page like this.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Sample app</title>
<link rel="stylesheet" href="myapp.css">
<link rel="components" href="fancyoption.html">
</head>
<body>
<h3>Type a color name into a fancy option textbox, push the button and
see what happens!</h3>
<div is="x-fancy-option" id="fancy-option1"></div>
<div is="x-fancy-option" id="fancy-option2"></div>
<div is="x-fancy-option" id="fancy-option3"></div>
<script type="application/dart" src="myapp.dart"></script>
<script src="packages/browser/dart.js"></script>
</body>
</html>
Just use getShadowRoot() and query against it:
import 'package:web_ui/web_ui.dart';
import 'dart:html';
class FancyOptionComponent extends WebComponent {
ButtonElement _button;
TextInputElement _textInput;
inserted() {
// obtain references
_button = getShadowRoot('x-fancy-option').query('.fancy-option-button');
_textInput = getShadowRoot('x-fancy-option').query('.fancy-option-text');
// make the background color of this web component the specified color
final changeColorFunc = (e) => this.style.backgroundColor = _textInput.value;
_button.onClick.listen(changeColorFunc);
}
}
Where x-fancy-option string is the name of the element.
Note: I changed your constructor to be inserted() method, which is a life cycle method.
I understand that _root is depracated. Answers recommending _root should use getShadowRoot() in place of _root.