2

so my Polymer.Dart project is running fine in Chromium (running on Dart code) but when I pub upgrade and pub build the sampler-scaffold keeps working but paper-button, paper-dialog, paper-progress... elements are just not showing up!

My HTML file looks like this

    <link href='http://fonts.googleapis.com/css?family=Droid+Serif|Open+Sans:400,700' rel='stylesheet' type='text/css'>


    <link rel="import" href="packages/paper_elements/paper_button.html">
    <link rel="import" href="packages/paper_elements/paper_dialog_transition.html">
    <link rel="import" href="packages/paper_elements/paper_dialog.html">

    <link rel="stylesheet" href="css/reset.css"> <!-- CSS reset -->
    <link rel="stylesheet" href="css/style.css"> <!-- Resource style -->

    ...

    <paper-button id="infoUPC" class="cd-read-more" raised>Read more</paper-button>
     ...
    <script src="education.dart" type="application/dart"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
    <script src="js/main.js"></script> <!-- Resource jQuery -->
    <script src="js/modernizr.js"></script> <!-- Modernizr -->

education.dart

import 'package:polymer/polymer.dart';
import 'dart:html';
import 'package:paper_elements/paper_dialog.dart';

main() {
  initPolymer().run(() {
    Polymer.onReady.then((_) {

      querySelector('#infoFHV').onClick.listen(
              (_) => toggleDialog('fhv'));
      querySelector('#infoUPC').onClick.listen(
              (_) => toggleDialog('upc'));

      querySelector('#infoTU').onClick.listen(
              (_) => toggleDialog('tu'));
    });
  });
}

toggleDialog(language) =>
(querySelector('paper-dialog[edu=$language]') as PaperDialog)
.toggle();

pubspec.yaml

name: polydart_resume
version: 0.0.1
author: Shady
description: Test app
dependencies:
  core_elements: '>=0.3.2 <0.5.0'
  custom_element_apigen: ">= 0.1.1 <0.2.0"
  polymer: ">=0.14.0 <0.16.0"
  web_components: ">=0.9.0 <0.10.0"
  paper_elements: ">=0.5.0 <0.6.0"
transformers:
- polymer:
    entry_points:
    - web/index.html

pub build does not give me any warnings or errors on these files, but I'm surely missing something right?

Shady
  • 794
  • 2
  • 8
  • 23
  • Do you load the page from the build output directory (file URI) or using a web server? Have you tried loading the page from Chrome/Firefox/IE/... using the same URL you used in Dartium, which normally loads from `pub serve` when launched from DartEditor. – Günter Zöchbauer Oct 30 '14 at 10:03
  • Okay now I used pub serve and it's showing the buttons and progress-bars BUT it seems the scripts are not loaded correctly (on-click don't trigger, progress bars don't animate.) – Shady Oct 30 '14 at 10:17
  • Does the Chrome DevTools console show any error output? – Günter Zöchbauer Oct 30 '14 at 10:26
  • Have you tried if it works when you remove the JavaScript script tags? – Günter Zöchbauer Oct 30 '14 at 10:27
  • No errors in the chrome console and I tried removing the JS scripts but still the same (there is another page where I only use a single dart script and no JS at all, which doesn't work either...). Is the Dart code right (see above)? – Shady Oct 30 '14 at 10:34
  • Looks fine so far. Can you please try to move the dart script tag to the bottom of the `` tag (last element inside body). – Günter Zöchbauer Oct 30 '14 at 10:44
  • @GünterZöchbauer Did that and removed JS scripts from it, nothing changes =( Is it possible that the sampler-scaffold and my custom element 'my-drawer' is somehow infering? I uploaded the code of the files on Git Gist https://gist.github.com/SH4DY/2253903fccac54771b9e – Shady Oct 30 '14 at 11:59

2 Answers2

1

You have two entry pages index.html and languages.html. Only languages.html calls your custom main() but only index.html is in your pubspec.yaml transformer configuration.

index.html will invoke the default main() method provided by Polymer but not your custom main() because of this script tag

<script type="application/dart">export 'package:polymer/init.dart';</script>

languages.html has the correct script tag

<script type="application/dart" src="languages.dart"></script>

but this doesn't work as expected because languages.html is not listed in your Polymer transformer entry_points configuration

transformers:
- polymer:
    entry_points:
#    - web/index.html
    - web/languages.html

From the comments:

Q: Do you load languages.html from a link in drawer.html (<core-item label="Languages" url="chapters/languages.html"></core-item>)? – Günter Zöchbauer 25 mins ago

A: Yessir thats exactly what I'm doing.

This isn't how one usually develops applications in Dart. You can, but Dart is for SPA (http://en.wikipedia.org/wiki/Single-page_application).

If you load another page from a Dart application this is like launching an entirly different application. Each page (app) loaded this way needs all parts of a Polymer application to work.

Usually in Dart you have only one entry page (entry_point) and when you want to change what is shown to the user (a new view) you replace the content in the current page instead of loading another one (this is for example where Polymer elements are handy for, you just remove one element (view) and add another one).

Dart also has a rather large boilerplate code size which has to be loaded each time you load another page which is rather inefficient.

Günter Zöchbauer
  • 623,577
  • 216
  • 2,003
  • 1,567
  • But I need to initialize polymer somewhere, right? When I remove the index.html from entry points, the page does not load at all. Can I set the listeners somewhere else than in a custom main? – Shady Oct 30 '14 at 13:38
  • Which of these two pages do you actually launch? If you launch `languages.html` it doesn't matter whether `index.html` exists or whether it is listed in `entry_points` or not. – Günter Zöchbauer Oct 30 '14 at 13:40
  • I launch index.html because the sampler-scaffold is embedded in it. The scaffold loads all the other pages in a card (but I'm not sure where and how he does it). Btw: Is the bootstrap script dart.js not needed anymore? I just saw it in this tutorial https://www.dartlang.org/docs/tutorials/connect-dart-html/#summary – Shady Oct 30 '14 at 13:47
  • Do you load `languages.html` from a link in `drawer.html` (` `)? – Günter Zöchbauer Oct 30 '14 at 13:49
  • Yessir thats exactly what I'm doing. Is that not the way I should do it? – Shady Oct 30 '14 at 14:11
  • I see, I was expecting that. Can you recommend me some sample code where I can see some best practice replacing views? Thanks a lot for being so patient Günter! – Shady Oct 30 '14 at 14:25
  • 1
    Hmm, best practices is difficult. You can for example use this package https://pub.dartlang.org/packages/bwu_polymer_routing or you can use ` – Günter Zöchbauer Oct 30 '14 at 14:29
1

Because my problem was not really code related but more fundamental, I found a sample project on www.polymer-project.org where one can see a recommended routing method. I find the introduction docs on polymer don't cover this topic good enough...

Shady
  • 794
  • 2
  • 8
  • 23