CODEWITHSUNDEEP
dartdart-polymer
maugch
maugch

Reputation: 1318

App inside an html element

I'm trying to find a clean way to use twice a SVG element I've created. I want to learn using all technologies related to dart so I'm experimenting with Polymer. I've created a custom element where I then load another custom element twice.

This is the index.html

  <link rel="import" href="da-imageTool.html">
  </head>
  <body>  
    <da-imageTool ></da-imageTool> 
    <script type="application/dart">export 'package:polymer/init.dart';</script>
    <script src="packages/browser/dart.js"></script>
    <script src="packages/browser/interop.js"></script>
  </body>

da-imageTool.html

  <polymer-element name="da-imageTool">
   <template>
    <div class="images" id="mainDiv"></div>
    <div class="images" id="secondDiv"></div>    
   </template>
   <script src="da-imageTool.dart" type="application/dart"></script>
  </polymer-element>

da-imageTool.dart

@CustomTag('da-imageTool')
class ImageTool extends PolymerElement{


  DivElement div1;
  DivElement div2;

  ImageEditor ime;
  //ImageEditor ime2;
  //ImageEditor _selectedEditor;

  ImageTool.created(): super.created(){
    int a = 1;
  }
 }

int a = 1 is just a line where I set a breakpoint to find out why all this does not work. I don't understand why but the element isn't created. Here is the error I get:

Exception: The null object does not have a getter '_observe@0x29474386'.
NoSuchMethodError : method not found: '_observe@0x29474386'
Receiver: null
Arguments: []
  HtmlElement&Polymer.observeProperties (package:polymer/src/instance.dart:514:34)
  HtmlElement&Polymer.prepareElement (package:polymer/src/instance.dart:153:22)
  HtmlElement&Polymer.polymerCreated (package:polymer/src/instance.dart:139:21)
  PolymerElement.PolymerElement.created (package:polymer/src/instance.dart:1088:19)
  ImageTool.ImageTool.created (http://localhost:3030/FigureSVG/web/da-imageTool.dart:17:24)

Upvotes: 0

Views: 132

Answers (2)

maugch
maugch

Reputation: 1318

I did several tests and right now my code is dead simple. The correction that made it working are:

  • Move the script tags

  • Rename the custom element all lowercase.

I remember having read about the compulsory hypen, but I've not seen anything about lowercase :( A warning might have been useful.

Upvotes: 1

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

Reputation: 657416

The script tags go into the head with Polymer
not sure about the interop.js script.

<head>
  <link rel="import" href="da-imageTool.html">
  <script type="application/dart">export 'package:polymer/init.dart';</script>
  <script src="packages/browser/dart.js"></script>
</head>

<body>  
  <da-imageTool ></da-imageTool> 
  <script src="packages/browser/interop.js"></script>
</body>

Upvotes: 1

Related Questions