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.
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
polymer_elements
polymer_ui_elements
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">
Related
I installed #mdi/font using
npm i #mdi/font
But how can i import it to my vue3 Project?
vite return warning:
[vite] dependency #mdi/font declares non-existent entry file D:\xxxx\node_modules\#mdi\font\index.js.
What should I do so that i can use mdi icons like this way
<span class="mdi mdi-account-heart" aria-hidden="true"></span>
if you dont want to pack the font to your project,just add cdn link to your index.html in public folder like this:
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/#mdi/font#latest/css/materialdesignicons.min.css">
I am at: https://elements.polymer-project.org/elements/paper-dialog-behavior?active=Polymer.PaperDialogBehavior
and decided to create a dialog by doing something like:
<dom-module id="sample-dialog">
<template>
<paper-dialog-impl>
<h2>{{title}}</h2>
<div>
<content></content>
</div>
<div class="buttons">
<paper-button dialog-dismiss on-tap="cancel">Cancel</paper-button>
<paper-button dialog-confirm on-tap="submit">Accept</paper-button>
</div>
</paper-dialog-impl>
</template>
</dom-module>
it renders to the screen, but has no styles. I read: paper-dialog-shared-styles.html provide styles for a header, content area, and an action area for buttons but i don't know how to implement it. I was trying to use a link tag but that wasn't working. Specifically I tried inside the template: <link rel="import" href="polymer_elements/src/paper-dialog-behavior/paper-dialog-shared-styles.html" />
In my dart file, i imported these too, thinking it woudl be resolved.
import 'package:polymer_elements/paper_button.dart';
import 'package:polymer_elements/paper_dialog_behavior.dart';
Edit: Right now, I have the class Implementation extending Polymer Element, which makes sense. I just wasnt sure if it needed to extend something else as well.
Edit 2: Updated this to be a standard paper-dialog instead, except now it wont render the item at all, even after updating the import in the dart backend.
After updating it to a paper dialog, there is a property that needs to be applied to the paper-dialog for it to be visible or not. that is the opened attribute.
Adding that to the inner paper-dialog makes it visible.
So, therefore, passing it down to the paper dialog by way of an outer opened, will make it toggle open/closed.
//in the sample-dialog dart
#property bool opened = false;
in the markup:
<paper-dialog opened$="{{opened}}" ...>
then now i can say either:
<sample-dialog></sample-dialog>
<sample-dialog opened></sample-dialog>
After doing a Pub Get and Pub Upgrade my custom-PolymerElements don't work anymore. It seems to me that the
<script type="application/dart" src="view.dart"></script>
is interpreted incorrectly. In my index.html_bootstrap.dart it is listed as: import 'dialog%5Cview.dart' as smoke_1; The "%5C" ( \ ) should be a slash ( / ) anyway and I'm pretty sure that it shouldn't be escaped. I tried it with the dart stable (1.8.5) and dev (1.9.0) versions for 64bit Windows.
I already tried to revert my package to their previous version but since I hadn't constraint them in my pubspec file I have no way to determine which versions worked before my changes. In another dart polymer project I'm working on I use the same setup (extended polymer elements) and it still works . The equivalent position in the index.html_bootstrap.dart reads: import 'dialog/view.dart' as smoke_1;
(edit) some (shortened) code:
/web/dialog/error/view.html
<link rel="import" href="packages/polymer/polymer.html">
<link rel="import" href="packages/paper_elements/paper_dialog.html">
<link rel="import" href="packages/core_elements/core_animated_pages.html">
<polymer-element name="error-view">
<template>
<style>
paper-dialog {
margin-top: 20px;
height: 400px;
width: 600px; }
</style>
<paper-dialog id="extendedNode" heading="{{dialogtitle}}" vertical autoCloseDisabled=true transition="paper-transition-center" opened=true>
<content>
<core-animated-pages selected="{{page}}" valueattr="id" transitions="hero-transition cross-fade">
<section id="0">
<p cross-fade>A system error occured while connecting with the server.</p>
<br>
<p cross-fade>Error message: {{dialogtext}}</p>
</section>
</core-animated-pages>
</content>
</paper-dialog>
</template>
<script type="application/dart" src="view.dart"></script>
</polymer-element>
/web/dialog/error/view.dart
import 'package:polymer/polymer.dart';
import '../view.dart'; // <- the base class 'DialogView'
#CustomTag('error-view')
class ErrorView extends DialogView{
ErrorView.created() : super.created(){
componentName = 'error-view';
this.dialogtitle = 'System Error';
}
}
/web/dialog/view.dart
import 'package:polymer/polymer.dart';
import 'dart:html';
import 'package:intl/intl.dart';
import '../locale/de.dart' as de;
class DialogView extends PolymerElement {
#observable int page;
//there are a lot of helper functions and variables in here
}
I use many pairs of those components extending the base component (which has no view.html but only a view.dart that allows me to hold and manipulate different dialogs within one List. This worked perfectly fine until I did the Pub Get / Upgrade and was not solved by repairing the cache. A project using a similar structure still works fine.
This resolves it for now:
pubspec.yaml
code_transformers: '<= 0.2.5'
I'm trying to bind an object from an Angular controlled element to a Polymer element in Dart.
The object to bind:
class Person {
String name;
String surname;
Person(this.name, this.surname);
}
The polymer element template:
<link rel="import" href="packages/polymer/polymer.html">
<polymer-element name="person-element">
<template>
<style>
.label {font-weight: bold;}
</style>
<p>
<span class="label">Name: </span>{{person.name}}
<span class="label">Surname: </span>{{person.surname}}
</p>
</template>
<script type="application/dart" src="person_element.dart"></script>
</polymer-element>
The polymer element code:
import 'package:polymer/polymer.dart';
import 'person.dart';
#CustomTag('person-element')
class PersonElement extends PolymerElement {
#published Person person;
PersonElement.created() : super.created();
}
In Angular I've created a controller and a module:
#Controller(
selector: '[person-container]',
publishAs: 'ctrl')
class PersonController {
List<Person> persons = [new Person('John','Smith'), new Person('Mario','Rossi')];
}
class PersonModule extends Module {
PersonModule() {
bind(PersonController);
}
}
The first solution tried is using the angular_node_bind package:
<div person-container ng-cloak>
<h2>Person elements</h2>
<div ng-repeat="person in ctrl.persons">
<div>{{person.name}}</div>
<person-element person="[[person]]"></person-element>
</div>
</div>
When I run the application in Dartium I get this error:
Exception: type 'String' is not a subtype of type 'Person' of 'value'. (http://localhost:8080/person_element.dart:6)
I've also tried to modify the attribute instantiation in the html code in this way:
<person-element person=[[person]]></person-element>
But I get the same exception.
The angular_node_bind package supports the object binding?
The second solution is using the new binding features of Angular 0.14.0 and binding the polymer element in this way:
With this solution I don't get any exception, the element is visualized but the fields are empty and the person instance null.
The complete example is here: https://github.com/fedy2/dart-angular-polymer-object-data-binding
The new version of AngularDart (0.14.0) has a support for Polymer-Dart binding (http://blog.angulardart.org).
At the moment there can be some problems with different versions:
Pub get failed, [1] Resolving dependencies... Incompatible version constraints on code_transformers
You can find examples at
https://github.com/angular/angular.dart/pull/1461/files
https://github.com/angular/angular.dart/tree/master/example/web
https://github.com/angular/angular.dart/blob/master/example/web/paper.html
https://github.com/angular/angular.dart/blob/master/example/web/paper.dart
https://github.com/angular/angular.dart/blob/master/example/web/paper_radio_group.html
https://github.com/angular/angular.dart/blob/master/example/web/paper_radio_group.dart
also have a look at the same files in the sept15-prg branch.
the new syntax seems to be like
<person-element bind-person="person"></person-element>
It is possible that the released Angular version doesn't yet support some things used by this examples.
Update: problem with bleeding edge editor not being compatible with the version of serialization/polymer on pub. Need to install versions from SVN.
Repeating over a list appears to have been broken to me.
https://github.com/sethladd/dart-polymer-dart-examples/blob/master/web/bind_and_repeat_over_list_of_primitives/
This is the simplest example I could find and I get the same error:
Internal error: 'package:serialization/src/serialization_helpers.dart': Error: line 212 pos 7: unresolved implicit call to super constructor 'LinkedHashMap()'
class IdentityMap extends LinkedHashMap {
^
Probably this update from #dartlang 10 Sep 2013 :-
'New Dart release with search improvements in Editor, and more.
SDK changes include:
HashMap and LinkedHashmap cannot be extended anymore......'
Looks as though Polymer needs updating for this.
You can modify the code slightly and make it work.
Change the index.html file to look like this:
<!DOCTYPE html>
<html>
<head>
<title>index</title>
<script src="packages/polymer/boot.js"></script>
</head>
<body>
<ul>
<template id="tmpl" bind>
<template repeat="{{}}">
<li>{{}}</li>
</template>
</template>
</ul>
<script type="application/dart" src="index.dart"></script>
</body>
</html>
And your index.dart should look like this (it is unchanged):
import 'dart:html';
main() {
List fruits = ['apples', 'oranges', 'pears'];
query('#tmpl').model = fruits;
}
You bind to a template that contains the template where the repeat is registered. the {{}} in repeat="{{}}"refers to the bound value. The {{}} in the <li>{{}}</li> refers to each item in the list.
Hope this helps.