curt curt - 2 months ago 8x
Dart Question

Polymer Iron Flex Mixin's Don't Work, But Classes Do

I got Polymer iron-flex-layout to work in my AngularDart component using classes. Since it generates a deprecation warning, I thought would try the recomended alternative: mixin's. They don't work.

Currently, I have this import in my artist_component.dart:

import 'package:polymer_elements/iron_flex_layout.dart';

I have also tried adding this to my index.html

<link rel="import" href="packages/polymer_elements/iron_flex_layout.html">

This differs from the example given in the documentation which uses bower. In my artist_component.html I have:

<style is="custom-style">
.container {
.flexchild {
.flexchild-2 {
<section class="container">
<section class="flexchild gutter">

I've tried putting the import in index.html and in my main css file along with the styling without affect. Given that classes work you would think mixim's would too.


I kept digging and I found an answer. I also found out that the method has been deprecated. My pubspec defines these versions:

polymer: ^1.0.0-rc.17
polymer_elements: ^1.0.0-rc.8

I'm pretty sure the solution was to add this line of code to my index.html:

<link rel="import" href="packages/polymer/polymer.html">

The reason I'm not positive that this is the only requirement is that I've been changing a lot things to get it to work. This is my complete index.html:

<!DOCTYPE html>
<title>Jazz Cat</title>
  window.Polymer = window.Polymer || {};
  window.Polymer.dom = 'shadow';

<!-- For testing using pub serve directly use: -->
<base href="/">
<!-- For testing in WebStorm use: -->
<!-- <base href="/dart/web/"> -->

<link rel="import" href="packages/polymer/polymer.html">
<link rel="import" href="packages/polymer_elements/iron_flex_layout.html">
<link href="master.css" rel="stylesheet" type="text/css" />
<style is="custom-style">
  .container {
  .element-index {
  .element-body {
  .element-main {
  .element-sidebar {
<script defer src="main.dart" type="application/dart"></script>
<script defer src="packages/browser/dart.js"></script>

Now that I got to work, I'll move my styling to a separate file. This is one of the files where I use the mixin classes:

<section class="container">
<section class="element-index">
  <paper-listbox class="scroll-list" (click)="onScroll()">
    <paper-item class="item-height" *ngFor="let artist of artists" [class.selected]="artist == selectedArtist" (click)="onSelect(artist)">
      {{artist.first_name}} {{artist.last_name}}
<paper-button (click)="gotoDetail()">Detail</paper-button>
<!--<paper-icon-button icon="refresh" (click)="gotoDetail()"></paper-icon-button>-->
  <!--<button (click)="gotoDetail()">View Details</button>-->
<section class="element-body">
<div *ngIf="selectedArtist != null">
  <h2>{{selectedArtist.first_name}} {{selectedArtist.last_name}}</h2>
  <!--<section class="layout horizontal">-->
  <section class="container">
    <section class="element-main">
      <!--<dl class="justified">
        <dt>Instrument:</dt><dd>{{ selectedArtist.primary_instrument }} </dd>
        <dt>Other:</dt><dd>{{ selectedArtist.other_instruments }}</dd>
        <dt>Birth:</dt><dd>{{ selectedArtist.birth_year }}</dd>
        <dt>Death:</dt><dd>{{ selectedArtist.death_year }}</dd>
      <p>{{ selectedArtist.notes }}</p>
      <table class="index">
        <tr *ngFor="let credit of artist_credits" >
          <td class="tableDate">{{ credit.recording_date | date:'d MMM yyyy' }}</td>
          <td>{{ credit.title }}</td>
          <td>{{ credit.first_name }} {{ credit.last_name}}</td>
    <section class="element-sidebar">
      <dl class="narrow-list">
        <dt>Instrument</dt><dd>{{ selectedArtist.primary_instrument }} </dd>
        <dt>Other</dt><dd>{{ selectedArtist.other_instruments }}</dd>
        <dt>Birth</dt><dd>{{ selectedArtist.birth_year }}</dd>
        <dt>Death</dt><dd>{{ selectedArtist.death_year }}</dd>

Based on the answer to this question, a new method has been created for polymer 1.1 and this one has been deprecated.