Using CoreScaffold and CoreTabs classes now causes Exception - dart

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

Related

Error after compiling Polymer Dart to JS. (The "smoke" library has not been configured)

Аfter compiling Dart code (which use Dart Polymer) to JS. I get the following error:
Uncaught Exception: The "smoke" library has not been configured.
Make sure you import and configure one of the implementations
(package:smoke/mirrors.dart or package:smoke/static.dart).
Sometimes the message was:
No elements registered in a while, but still waiting on 1 element to be registered. Check that you have a class with an #CustomTag annotation for each of the following tags: 'app-element'
What's wrong here? Here is my code:
UPDATE: now code beyond is improved and work correctly after pub build. I change folder/file structure and update polymer to the latest version.
pubspec.yaml
name: app
dependencies:
browser: any
#do not forget update to latest version by running pub update
polymer: any
transformers:
- polymer:
entry_points:
- web/main.html
web/templates/ui-elements.html
<polymer-element name="app-globals"></polymer-element>
<polymer-element name="app-element">
<template>
<link rel="stylesheet" href="/main.css"/>
<content></content>
</template>
<script type="application/dart" src="ui-elements.dart"></script>
</polymer-element>
web/templates/ui-elements.dart
#CustomTag('app-globals')
class AppGlobals extends PolymerElement{
AppGlobals.created() : super.created();
}
#CustomTag('app-element')
class AppElement extends PolymerElement {
AppElement.created() : super.created();
}
web/main.html (dummy entry file)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
</head>
<body>
<app-element></app-element>
<script type="application/dart" src="main.dart"></script>
</body>
</html>
web/main.dart
import 'package:polymer/polymer.dart';
main() {
initPolymer();
}
#whenPolymerReady
void onReady() {
}
web/main.html (entry point) after pub build. Real mess after compiling. So many js files some of them takes size even more than 300kb.
<!DOCTYPE html><html lang="en"><head><script src="packages/web_components/webcomponents.min.js"></script><script src="packages/web_components/dart_support.js"></script>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
</head>
<body><div hidden=""><style shim-shadowdom="">
/*******************************
Flex Layout
*******************************/
html /deep/ [layout][horizontal], html /deep/ [layout][vertical] {
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
}
html /deep/ [layout][horizontal][inline], html /deep/ [layout][vertical][inline] {
display: -ms-inline-flexbox;
display: -webkit-inline-flex;
display: inline-flex;
}
......tons of other styles...........
</style>
<script src="packages/polymer/src/js/polymer/polymer.min.js"></script>
<script>
// TODO(sigmund): remove this script tag (dartbug.com/19650). This empty
// script tag is necessary to work around a bug in Chrome 36.
</script>
<!-- unminified for debugging:
<link rel="import" href="src/js/polymer/layout.html">
<script src="src/js/polymer/polymer.js"></script>
-->
<polymer-element name="app-globals"></polymer-element>
<!-- APP ELEMENT -->
<polymer-element name="app-element" class="bck-medusa w-100 h-100">
<template>
<link rel="stylesheet" href="../main.css">
<content></content>
</template>
</polymer-element>
</div>
<script src="main.html.polymer.bootstrap.dart.js" async=""></script>
</body></html>
You don't need initPolymer when you use #whenPolymerReady. The entire main() method is redundant in your example.
Did you register your entry page properly in the Polymer transformer configuration in pubspec.yaml?
Smoke needs a transformer but if you have the Polymer transformer configured properly the Smoke transformer is included.

Single page application (SPA) using web components with Dart not JS

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">

Adding Polymer Element results in crash

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

Polymer data binding does not work

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.

How to deploy a Dart Polymer app to Javascript using dart2js

I got a problem while deploying Dart code using Polymer to Javascript. I've created a polymer application with DartEditor and made a simple example. This example works in Dartium but when I try to build it as a Polymer App (in Javascript) and launch it, the app fails.
How am I supposed to convert a Dart Polymer app to Javascript ?
Here's the example code I made that fails :
example.html :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Example</title>
<link rel="import" href="example-polymer.html">
<script type="application/dart">export 'package:polymer/init.dart';</script>
<script src="packages/browser/dart.js"></script>
</head>
<body>
<div is="example-polymer"></div>
</body>
</html>
example-polymer.html
<polymer-element name="example-polymer" extends="div">
<template>
<div>
<input on-change="{{ change }}"/><br>
<span>Text : {{ text }}</span>
</div>
</template>
<script type="application/dart" src="example-polymer.dart"></script>
</polymer-element>
example-polymer.dart
import 'package:polymer/polymer.dart';
import 'dart:html';
#CustomTag('example-polymer')
class ExampleBolymer extends DivElement with Polymer, Observable {
#published String text = "" ;
ExampleBolymer.created() : super.created() {
}
void change(Event e, var detail , InputElement target) {
text = target.value;
}
}
add
transformers:
- polymer:
entry_points:
- web/example.html
to your pubspec.yaml
and call
pub build
Your files should be in the web directory of your package.

Resources