This is my polymer.dart class.
import 'package:polymer/polymer.dart';
/**
* A Polymer x-changer element.
*/
#CustomTag('x-changer')
class XChanger extends PolymerElement {
#published String prop;
propChanged() {
print("prop changed!");
}
/// Constructor used to create instance of XChanger.
XChanger.created() : super.created() {
}
}
This is my project structure:
example
chat_example
lib
web
lib
x-changer.dart
x-changer.html
test
When I add x-changer.dart & x-changer.html in my example folder it works. It is exactly the same code, am I missing something that is important for a polymer element library?
EDIT:
This is the library pubspec
name: some_elements
description: >
The polymer elements for ...
version: 0.0.1
author: Joris Hermans
#homepage: https://www.example.com
dependencies:
polymer: '>=0.15.4 <0.16.0'
dev_dependencies:
unittest: any
You need to add the polymer transformer in the library (without entry_points).
You shouldn't import like You shouldn't import like`
It should look more like
You shouldn't import like <link rel="import" href="packages/chat_example/force/force_client_element.html">
You might need one or more additional ../ prefixes, depending on where the importing file resides (this is never necessary in Dart package:xxx imports.
<link rel="import" href="../packages/chat_example/force/force_client_element.html">
See https://www.dartlang.org/polymer/app-directories.html for more details.
Related
I'm trying to make a Angular2 app (bootstrapped with angular-cli) work with Rails's ActionCable by integrating this lib on the frontend https://github.com/mwalsher/actioncable-js
I npm installed the lib,
added this to angular-cli-build.js
'actioncable-js/index.js',
and this in system-config.ts:
/** Map relative paths to URLs. */
const map: any = {
'moment': 'vendor/moment/moment.js',
'ng2-bootstrap': 'vendor/ng2-bootstrap',
'lodash': 'vendor/lodash',
'actioncable-js': 'vendor/actioncable-js'
};
/** User packages configuration. */
const packages: any = {
'ng2-bootstrap': {
format: 'cjs',
defaultExtension: 'js',
main: 'ng2-bootstrap.js'
},
'actioncable-js':{
main: 'index.js'
},
'moment':{
format: 'cjs'
},
'lodash':{
main: "lodash.js"
}
};
added this to my component:
import { ActionCable } from 'actioncable-js';
but the build errors with this message:
Cannot find module 'actioncable-js'.
anyone has any idea why?
My guess is typings are missing, but I'm not sure how to fix this.
Rails has since released an official actioncable package here:
https://www.npmjs.com/package/actioncable
No there is no problem with typings. What you are missing is how to use Javascript library in angular 2 typescript application. If you want to use JavaScript library in your TypeScript application, then you need to import the library import 'actioncable-js' and then you have to declare the variable. declare let ActionCable:any This tells typescript we have a global variable ActionCable present in our application. Now you can access it in your angular 2 component implementations and do whatever you want to do. You can read the discussion here.
angular-cli.build.js
vendorNpmFiles: ['actioncable-js/**/*.js']
systemjs.config.js
map:{ 'actioncable-js':'vendor/actioncable-js/dist/action_cable.js'}
package:{'actioncable-js': defaultExtension: 'js'} }
`
app.component.ts
import 'actioncable-js';
declare let ActionCable:any;
#Component({
....
})
export class AppComponent implements OnInit{
constructor(){}
ngOnInIt(){
//can access *ActionCable* object here
}
}
I have a Grails GSP page similar to this:
<!DOCTYPE html>
<html lang="en">
<head>
...
<script type="text/javascript">
var currency = ${Currency.getList() as JSON};
</script>
</head>
...
</html>
And a groovy file similar to this:
package enums
import java.util.List;
public final class Currency {
private static final List CURRENCIES = ['PHP','USD','HKD'];
static List getList(){
return CURRENCIES
}
}
Now it shows an error message:
groovy.lang.MissingMethodException
No signature of method: static java.util.Currency.getList() is
applicable for argument types: () values: [] Possible solutions:
getAt(java.lang.String), getClass(), split(groovy.lang.Closure),
notify(), wait()
How can I resolve this? The groovy file is placed in project/src directory, and is not allowed to move (if that helps).
According to the error message you are using a different Currency class from java.util package.
So try using your own class which is enums.Currency.getList() rather than java.util.Currencty.getList().
update:
Also import JSON class. According to your comments it seems my answer is not clear for you. So your code will be like this:
package enums
import java.util.List;
import grails.converters.JSON;
public final class Currency {
private static final List CURRENCIES = ['PHP','USD','HKD'];
static List getList(){
return CURRENCIES
}
}
Since you call the static groovy function from inside your HTML, I suspect you need to add the modifier "public" to your static method so:
public static List getList()
EDIT: Above is not the issue, but the exception complains about the class Currency from the java.util package, not from your own package "enums".
I am attempting to refactor some dart-polymer components to use the #HtmlImport annotation.
.dart
part of epimss_shared.components;
#CustomTag('associated-symptoms-form')
class AssociatedSymptomsForm extends PolymerElement {
AssociatedSymptomsForm.created() : super.created();
#override
void attached() {
super.attached();
}
}
.html
<polymer-element name='associated-symptoms-form'>
<template>
<div layout horizontal center>
<h1>Symptoms</h1>
</template>
<script type = 'application/dart' src='associated_symptoms_form.dart'></script>
</polymer-element>
library
The library epimss_shared.components; is part of the imported epimss.shared library.
#HtmlImport('../components/tooltip/tool_tip.html')
#HtmlImport('../components/misc/associated_symptoms_form.html')
library epimss_shared.components;
import 'dart:html' as dom;
import 'package:polymer/polymer.dart';
import 'package:epimss_shared/epimss_shared.dart';
import 'package:epimss_shared/epimss_shared_client.dart';
part '../components/tooltip/tool_tip.dart';
part '../components/misc/associated_symptoms_form.dart';
When I attempt to use the component, the application is not displayed with the following console error:
'package:epimss_shared/components/misc/associated_symptoms_form.dart': error: line 1 pos 6: url expected
part of epimss_shared.components;
^: package:epimss_shared/components/misc/associated_symptoms_form.dart
The peculiar thing is this - if I creat a new component with a different name with everything remaining the same (as done with the tooltip component shown in the library) there is no problem at all!
It seems that previous information of the component is cached and is being reused.
Any help is appreciated.
I'm playing around a bit with custom elements and custom attributes with Polymer.dart, but I can't find out what the line super.attached does.
<link rel="import" href="packages/polymer/polymer.html">
<polymer-element name="kp-volume">
<template>
<p>You turned the volume to {{volume}}.</p>
</template>
<script type="application/dart">
import 'package:polymer/polymer.dart';
import 'dart:html';
#CustomTag('kp-volume')
class KPVolume extends PolymerElement {
KPVolume.created() : super.created();
#published int volume = 0;
void attached() {
//where do I need this line for ?
super.attached();
volume = 5;
}
}
</script>
</polymer-element>
So I get that if I change the volume in the attached function, that then I can override HTML code like this <kp-volume volume="11"></kp-volume>. But there doesn't seem to be a difference in using super.attached or not. What does this line do ?
attached is a method in the super class PolymerElement which does the actual attaching of the element to the DOM.
If you override the method in a subclass the attached method of the super class is disable and therefore the element will never be attached.
By overriding a method you replace it's default implementation.
By calling super.attached() you invoke the default implementation in PolymerElement and reuse the default implementation in your replacement.
You can add your custom code before or after the super.attached() line so your custom code will be execute before and/or after the default attach logic.
Overriding attached and not calling super.attached(); will break your element. Maybe your example element is just too simple to notice.
Other lifecycle methods like ready, domReady don't need the call to the super implementation because the default implementation is an empty function.
(xxxChanged lifecyle methods are yet another kind, they don't exist in the super class at all).
I am trying to create custom element using the following:
import 'package:polymer/polymer.dart';
// Custom elements extend PolymerElement
#CustomTag('my-element')
class MyElement extends PolymerElement {
// custom functionality goes here
}
Dart Editor shows error 'Undefined name CustomTag
I am trying the example given at the URL below. All files are copied as listed at the URL below.
https://github.com/sethladd/dart-polymer-dart-examples/blob/master/web/custom_element_that_contains_other_tags/my_element.dart
Am I missing something in pubspec? pubspec is not listed at the above URL.