I am trying to get the <core-menu> working with Dart. It displays fine but the selectedIndex property is not updated.
The following code works fine with PolymerJS but in the Dart version the selectedIndex is not updated (<core-menu selectedIndex="{{selectedMenuIndex}}"...>)
I would expect the {{selectedMenuIndex}} to be available in the <core-animated-pages> tag but the {{selectedMenuIndex}} variable is empty. It does not get updated. The .dart file has the var declared as this:
#observable num selectedMenuIndex = 0;
This is the .html code:
<link rel="import" href="packages/polymer/polymer.html">
<link rel="import" href="packages/core_elements/core_drawer_panel.html">
<link rel="import" href="packages/core_elements/core_menu.html">
<link rel="import" href="packages/core_elements/core_selector.html">
<link rel="import" href="packages/core_elements/core_item.html">
<link rel="import" href="packages/core_elements/core_icon_button.html">
<link rel="import" href="packages/paper_elements/paper_icon_button.html">
<link rel="import" href="packages/core_elements/core_toolbar.html">
<link rel="import" href="packages/core_elements/core_header_panel.html">
<link rel="import" href="packages/paper_elements/core_animated_pages.html">
<polymer-element name="test-app">
<template>
<!-- [START html] -->
<core-drawer-panel id="drawerPanel">
<core-header-panel drawer>
<core-toolbar id="navheader'">
<span>Menu</span>
</core-toolbar>
<core-menu selected="0" selectedIndex="{{selectedMenuIndex}}" id="coreMenu" on-click="{{togglePanelButton}}">
<core-item icon="settings" label="One"></core-item>
<core-item icon="search" label="Two"></core-item>
</core-menu>
</core-header-panel>
<core-header-panel main>
<core-toolbar id="mainheader">
<paper-icon-button id="navicon" icon="menu" on-click="{{ togglePanelButton }}"></paper-icon-button>
<span flex>Title</span>
</core-toolbar>
<core-animated-pages selected="{{selectedMenuIndex}}" notap id="core_animated_pages" transitions="slide-from-right">
<section class="content-section">
Section 1
</section>
<section class="content-section">
Section 2
</section>
</core-animated-pages>
</core-header-panel>
</core-drawer-panel>
<!-- [END html]-->
</template>
<script type="application/dart" src="testapp.dart"></script>
</polymer-element>
Are you guys having problems with databing as well or is it me that does something wrong?
UPDATE: I have filed a bug report for it here:
https://code.google.com/p/dart/issues/detail?id=19794
I got an answer from the Dart Polymer group here:
https://code.google.com/p/dart/issues/detail?id=19794
Seems there is an issue with the 2-way binding with the core_elements.
I have a similar problem. When I tried to embed core-elements in a custom polymer element the core-element wouldn't load. I moved the core-element to the index.html file and it worked.
I see that there is a patch to address this. The patch suggests that when compiled to JS the code should work. I haven't had luck in JS.
Related
I am new to Dart and Polymer. I'm trying to create Tabs but they don't show correctly. Here is my code:
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="scaffolded-by" content="https://github.com/google/stagehand">
<title>Paper Tabs Events</title>
<link rel="stylesheet" href="styles.css">
<link rel="import" href="packages/polymer/polymer.html">
<link rel="import" href="packages/paper_elements/roboto.html">
<link rel="import" href="packages/core_elements/core_header_panel.html">
<link rel="import" href="packages/core_elements/core_toolbar.html">
<link rel="import" href="packages/core_elements/core_pages.html">
<link rel="import" href="packages/paper_elements/paper_tabs.html">
<link rel="import" href="packages/paper_elements/paper_icon_button.html">
</head>
<body unresolved>
<core-header-panel flex>
<core-toolbar class="medium-tall">
<paper-icon-button id="navicon" icon="dashboard"></paper-icon-button>
<span flex>Main Heading</span>
<paper-icon-button id="morebutton" icon="more-vert"></paper-icon-button>
<paper-tabs class="bottom fit" selected="1">
<paper-tab>IMPORT</paper-tab>
<paper-tab>DEFINE</paper-tab>
<paper-tab>DESIGN</paper-tab>
<paper-tab>DEVELOP</paper-tab>
<paper-tab>DEPLOY</paper-tab>
<paper-tab>EXPORT</paper-tab>
</paper-tabs>
</core-toolbar>
<core-pages>
<div><h1>Core Page</h1><p>This is content for core page.</p></div>
</core-pages>
</core-header-panel>
<script type="application/dart">export 'package:polymer/init.dart';</script>
</body>
Once they display correctly I then want to dynamically change the content under tabs on tab selection. But that is for later, first the tabs need to display correctly. Any help would be appreciated.
Here is the screenshot how it looks like.
https://www.dropbox.com/s/px2as8lor4a67ro/Screenshot%202015-04-23%2022.59.47.png?dl=0
The parent element of your core-header-panel needs a height (in this case body).
See https://www.polymer-project.org/0.5/docs/elements/core-header-panel.html for more info.
TLDR; You can add "fullbleed layout vertical" as attributes to your body.
I have a polymer element called main-app:
<link rel="import" href="../../packages/polymer/polymer.html">
<link rel="import" href="../../packages/paper_elements/paper_input.html">
<link rel="import" href="../../packages/paper_elements/paper_input.html">
<link rel="import" href="../../packages/paper_elements/paper_tabs.html">
<link rel="import" href="../../packages/paper_elements/paper_dialog.html">
<link rel="import" href="../../packages/paper_elements/paper_icon_button.html">
<link rel="import" href="../../packages/core_elements/core_toolbar.html">
<link rel="import" href="../../packages/core_elements/core_scaffold.html">
<link rel="import" href="../../packages/core_elements/core_header_panel.html">
<link rel="import" href="../../packages/core_elements/core_menu.html">
<link rel="import" href="../../packages/core_elements/core_item.html">
<link rel="import" href="../../packages/paper_elements/paper_input.html">
<link rel="import" href="../../packages/paper_elements/paper_button.html">
<link rel="import" href="../../packages/paper_elements/paper_dialog.html">
<link rel="import" href="../../packages/core_elements/core_scaffold.html">
<link rel="import" href="../../packages/core_elements/core_pages.html">
<polymer-element name="main-app" class="dark-primary-color">
<template>
<style type="text/css">
:host {
display: block;
}
</style>
<core-scaffold>
<core-header-panel id="menu-panel" navigation flex>
<core-toolbar id="navheader">
<span>Menu</span>
</core-toolbar>
<core-menu>
<core-item label="Home" on-click="{{homeClicked}}"></core-item>
<core-item label="About Us" on-click="{{aboutClicked}}"></core-item>
<core-item label="Contact Us" on-click="{{contactClicked}}"></core-item>
</core-menu>
</core-header-panel>
<span tool>{{title}}</span>
<paper-tabs class="main-menu bottom fit" selected="0">
<paper-tab on-click="{{homeClicked}}">Home</paper-tab>
<paper-tab on-click="{{aboutClicked}}">About Us</paper-tab>
<paper-tab on-click="{{contactClicked}}">Contact Us</paper-tab>
</paper-tabs>
<div class="content" forceNarrow>
<p>Lorem ipsum ...</p>
</div>
...
</core-scaffold>
</template>
<script type="application/dart" src="main-app.dart"></script>
</polymer-element>
main-app.dart:
import 'package:polymer/polymer.dart';
import 'util/util.dart';
import 'event/event.dart';
import 'dart:html';
import 'page/home-page.dart';
import 'page/about-page.dart';
import 'page/contact-page.dart';
#CustomTag('main-app')
class MainApp extends PolymerElement {
#observable String page = "home";
#observable String title = "Home";
MainApp.created() : super.created();
...
homeClicked(event, detail, target) {
CoreScaffold e = shadowRoot.querySelector('core-scaffold');
e.doSomething <<-- fails
...
}
...
}
This is the exception I'm getting:
Exception: 'package:falm/main-app.dart': malformed type: line 73 pos 5: type 'CoreScaffold' is not loaded
CoreScaffold e = shadowRoot.querySelector('core-scaffold');
^
type 'CoreScaffold' is not a subtype of type 'malformed' of 'e'.
To get rid of the exception, I now have to do:
homeClicked(event, detail, target) {
Element e = shadowRoot.querySelector('core-scaffold');
e.doSomething <<-- works
...
}
The code that is failing was working until a dart update yesterday morning (not sure from which version I updated as I reinstalled the SDK completely before doing a full pub upgrade, pub cache repair and pub download), PaperTabs is doing the same thing.
Does this mean I can no longer use CoreElement and PaperTabs classes in my dart code?
Update: here are the relevant bits and pieces from pubspec.lock:
core_elements:
description: core_elements
source: hosted
version: "0.6.0+4"
paper_elements:
description: paper_elements
source: hosted
version: "0.6.0+4"
polymer:
description: polymer
source: hosted
version: "0.15.5"
polymer_expressions:
description: polymer_expressions
source: hosted
version: "0.13.0+1"
web_components:
description: web_components
source: hosted
version: "0.10.1"
You need to import the libraries where the class is defined.
import 'package:core_elements/core_scaffold.dart';
import 'package:paper_elements/paper_tabs.dart';
checked/unchecked
When you run a Dart script from command line the default is production mode (unchecked mode). dart bin/somescript.dart, or checked mode when set explicitely like dart -c bin/somescript.dart.
When you launch a Dart script or web app from DartEditor default is checked mode. DartEditor allows to (de)activate Run in checked mode in Manage Launches (run configurations).
I assume there is a similar setting in Dart plugin for Eclipse (don't use it myself).
WebStorm allows to set it for command line apps in Run > Edit Configurations ... . For web apps you can create a new browser config and add --checked in the Command line options.
I assume it's similar in IntelliJ IDEA but I haven't used it myself yet.
See also https://stackoverflow.com/a/21658630/217408
I'm trying to do a single page application (SPA) using web components as in the linked example. But with Dart instead of javascript. I'd like to put the whole <core-scaffold> in a Polymer Element. The layout is working as expected, but when I get to the part "Simplifying the markup using a data model" I can't understand how to bind my dart model equivalent to the javascript model in the example. Should this attribute <template is="auto-binding"> be in the main template of the Polymer element, or where does that go? Any pointers from you experts?
Edit: OK, I'm adding some code to this question.
In darteditor i started a new project with the option using polymer library selected. In the created main-html-file all I did was remove the "counter"-attribute in <click-counter>. I added these dependencies paper_elements: 0.5.0, polymer: any I replaced everything in clickcounter.dart with:
import 'package:polymer/polymer.dart';
import 'dart:html';
#CustomTag('click-counter')
class ClickCounter extends PolymerElement {
#observable var route = 0;
#observable List<dynamic> pages = [
{'name': 'Single', 'hash': 'one'},
{'name': 'page', 'hash': 'two'},
{'name': 'app', 'hash': 'three'}
];
ClickCounter.created() : super.created() {
}
}
And I replaced everything in clickcounter.html with:
<link rel="import" href="packages/polymer/polymer.html">
<link rel="import" href="packages/core_elements/core_scaffold.html">
<link rel="import" href="packages/core_elements/core_header_panel.html">
<link rel="import" href="packages/core_elements/core_toolbar.html">
<link rel="import" href="packages/core_elements/core_menu.html">
<link rel="import" href="packages/core_elements/core_item.html">
<link rel="import" href="packages/core_elements/core_transition.html">
<link rel="import" href="packages/core_elements/core_animated_pages.html">
<link rel="import" href="packages/core_elements/core_animated_pages/transitions/core_transition_pages.html">
<link rel="import" href="packages/paper_elements/paper_item.html">
<polymer-element name="click-counter">
<template>
<style>
</style>
<core-scaffold>
<core-header-panel navigation flex mode="waterfall">
<core-toolbar>Application</core-toolbar>
<core-menu theme="core-light-theme" valueattr="hash" selected="{{route}}">
<template repeat="{{page in pages}}">
<paper-item icon="settings" label="{{page['name']}}" hash="{{page['hash']}}">
<a _href="#{{page['hash']}}"></a>
</paper-item>
</template>
</core-menu>
</core-header-panel>
<div tool>Title</div>
<core-animated-pages selected="{{route}}" transitions="slide-from-right">
<template repeat="{{page in pages}}">
<section hash="{{page['hash']}}" layout vertical center-center>
<div>{{page['name']}}</div>
</section>
</template>
</core-animated-pages>
</core-scaffold>
</template>
<script type="application/dart" src="clickcounter.dart"></script>
</polymer-element>
I run in Dartium, and see a fine layout with the three menu options. The main area has the word "single" at startup, as the first menu option is selected. When I click the second menu option I get this error:
Exception caught during observer callback: TypeError: Cannot read property 'classList' of undefined
at core-animated-pages.Polymer.applySelection (http://localhost:8081/spa_test.html:939:15)
at core-animated-pages.Polymer.selectedItemChanged (http://localhost:8081/spa_test.html:4389:14)
at core-animated-pages.g.invokeMethod (http://localhost:8081/packages/polymer/src/js/polymer/polymer.js:13:25932)
at core-animated-pages.g.notifyPropertyChanges (http://localhost:8081/packages/polymer/src/js/polymer/polymer.js:13:24037)
at Object.x.report_ (http://localhost:8081/packages/polymer/src/js/polymer/polymer.js:12:18274)
at Object.S.check_ (http://localhost:8081/packages/polymer/src/js/polymer/polymer.js:12:22612)
at c (http://localhost:8081/packages/polymer/src/js/polymer/polymer.js:12:12181) polymer.concat.js:4861
If you put everything in a Polymer element you use this Polymer element instead of <template is="auto-binding"> not in addition to. The model is the class of the Polymer element that contains <core-scaffold>.
If you add more code that shows what you try to accomplish it is easier to make concrete suggestions.
Update
I changed
#observable var route = 'one';
to get rid of the exception
and added
routeChanged(oldVal, newVal) {
print(newVal);
}
to see what values are assigned (prints 'one', 'two', 'three').
and also added
<link rel="import" href="packages/paper_elements/paper_item.html">
I like to use my custom Polymer Element named content-page in my main-html.
Therefore I created a div with the id="contentcontainer" which contains my content-page.
For some reason it crashes, just after clicking on Run and the Dart Editor says: .
When I delete the line <link rel="import" href="content-page.html"> in main.html, the program isnt crashing, but there seems to be a Problem with the content of my main().
I unfortunately have no specific question, because I dont know where the error might be or where to start. Does someone see some suspicious parts in my code?
Thanks for helping!
main.dart:
import 'dart:html';
void main() {
var newElement = new Element.tag('content-page');
querySelector('#contentcontainer').children.add(newElement);
}
main.html:
<!DOCTYPE html>
<head>
<meta charset="utf-8" />
<link rel="stylesheet" type="text/css" href="style.css">
<script type="application/dart" src="main.dart"></script>
<script src="packages/web_components/dart_support.js"></script>
<link rel="import" href="content-page.html">
</head>
<body>
<div id="contentcontainer">
<content-page id="contentpage"></content-page>
</div>
<script type="application/dart">export 'package:polymer/init.dart';</script>
</body>
</html>
content-page.dart:
import 'package:polymer/polymer.dart';
import 'dart:html';
#CustomTag('content-page')
class ContentPage extends PolymerElement {
ContentPage.created() : super.created();
}
content-page.html:
<link rel="import" href="../packages/polymer/polymer.html">
<polymer-element name="content-page" >
<template>
<div>
ContentPage-Content
</div>
</template>
<script type="application/dart" src="content-page.dart"></script>
</polymer-element>
I tried your code and it's ok. Have you added the transformers to your pubspec.yaml?
name: sample
description: A sample web application
dependencies:
browser: any
polymer: any
transformers:
- polymer
You should have a look at this question/answer: how to implement a main function in polymer apps how to use a custom main method in a Polymer project.
This line should contain your file containing your main method (see also the answer in the linked question):
<script type="application/dart">export 'package:polymer/init.dart';</script>
this line is then redundant
<script type="application/dart" src="main.dart"></script>
the transformer configuration also needs a list of entry pages if you don't use the latest Polymer version
transformers:
- polymer:
entry_points:
- web/index.html
I have created two Dart app using Polymer. The two tags created are: weather-tag and qotd-tag.
In weather-tag, I am getting weather information from a remote service and in qotd-tag I am getting qotd from local machine. Both running fine in Dart and also in compiled JS.
I am now integrating these two Dart "widget" into my own index.html.
The HTML snippet is like following:
<html lang="zh-CN">
<head>
<script src="/packages/shadow_dom/shadow_dom.debug.js"></script>
<script src="/packages/custom_element/custom-elements.debug.js"></script>
<script src="/packages/browser/interop.js"></script>
<meta charset="utf-8">
<script src="/getqotd.html_bootstrap.dart.js"></script>
<script src="/getweather.html_bootstrap.dart.js"></script>
</head>
<body id="home">
<polymer-element name="qotd-tag">
<template>...
</template>
</polymer-element>
<polymer-element name="weather-tag">
<template>...
</template>
</polymer-element>
<weather-tag></weather-tag>
<qotd-tag></qotd-tag>
</body>
</html>
The problem is it only shows the qotd-tag.
If I took out all qotd-tag related reference (js, polymer-element, the tag), weather-tag can be displayed correctly.
If I change the sequence of the two js file (weather.js comes first and then qotd.js), now it shows only the weather-tag.
I think there must be some conflict in the js declaration.
I can solve this issue by building a new tag with the two tags' functions but is there a way to have two or more polymer-element in one HTML file?
This is how you can import and use two elements in a Dart app:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="import" href="foo_element.html">
<link rel="import" href="bar_element.html">
<script type="application/dart">export 'package:polymer/init.dart';</script>
<script src="packages/browser/dart.js"></script>
</head>
<body>
<foo-element></foo-element>
<bar-element></bar-element>
</body>
</html>
For the full code, look at this gist:
https://gist.github.com/shailen/8055849