CODEWITHSUNDEEP
dartdart-polymer
JesterXL
JesterXL

Reputation: 308

How do I use custom Dart libraries in Polymer?

I've created my library like so:

// web/com/jessewarden/workoutlogger/workoutloggerlib.dart
library workoutloggerlib;

import 'dart:async';
import 'dart:html';
import 'package:polymer/polymer.dart';

part "types/WorkoutTypes.dart";

part "vo/Exercise.dart";
part "vo/Set.dart";
part "vo/Workout.dart";

part "views/SetView.dart";
part "views/SetView.html";

My SetView.dart:

part of workoutloggerlib;

@CustomTag('set-view')
class SetView extends PolymerElement
{

    @published
    Set set;

    SetView.created() : super.created();
}

And it's associated HTML:

<polymer-element name="set-vew" attributes="count">
  <template>
    <div>
        <h3>{{set.name}}</h3>
        <span class="label label-primary">Goal</span>
        <div class="input-group">
            <span class="input-group-addon">Reps</span>
            <input type="text" class="form-control disabled" value={{set.goalReps}}>
        </div>
        <div class="input-group">
            <span class="input-group-addon">Weight</span>
            <input type="text" class="form-control" value="{{set.goalWeight}}">
            <span class="input-group-addon">lbs</span>
        </div>
    </div>
  </template>
  <script type="application/dart" src="SetView.dart"></script>
</polymer-element>

However, while she compiles, upon running I get:

'http://somelocalserver/WorkoutLogger/web/com/jessewarden/workoutlogger/views/SetView.dart': error: line 1 pos 6: url expected
part of workoutloggerlib;
     ^: http://somelocalserver/WorkoutLogger/web/com/jessewarden/workoutlogger/views/SetView.dart
Internal error: 'http://somelocalserver/WorkoutLogger/web/com/jessewarden/workoutlogger/views/SetView.dart': error: line 1 pos 6: url expected
part of workoutloggerlib;
     ^
Internal error: 'http://somelocalserver/WorkoutLogger/web/com/jessewarden/workoutlogger/views/SetView.dart': error: line 1 pos 6: url expected
part of workoutloggerlib;
     ^

If I manually import classes for each and every file, abandoning my library, it works fine. Obviously this isn't desired as the code isn't manageable that way, has tighter dependencies, and is harder to refactor.

Upvotes: 2

Views: 622

Answers (1)

G&#252;nter Z&#246;chbauer
G&#252;nter Z&#246;chbauer

Reputation: 657058

I'm not sure if this is still valid but I read that it is good practice to make each component it's own library (library is not package - you can have as many libraries in a package). I do it always an I never had a problem with it. You may take a look at to see some examples

Worth mentioning is, that we have to use a separate package where we symlink the example pages to.

It's currently not possible to build pages in examples directory (only web) and it is not possible to have pages in web and elements in lib (within the same package) because the necessary polymer transformer settings conflict). Either you have elements in web too or you have elements in lib and pages in their own packages in web and import the package with the elements in lib.

You have a typo - may be just in the code you pasted - but anyway

<!-- should be name="set-view" -->
<polymer-element name="set-vew" attributes="count">

Upvotes: 1

Related Questions