Clever Geek Handbook

Custom DART Items (Vanilla DART No Polymer)

I came across custom DART elements, from dartlang.org, here and.

If I understood correctly, this is a special vanilla DART element, not related to custom Polymer tags.

I wrote the code below,

class CustomElement extends HtmlElement {
factory CustomElement() => new Element.tag('x-custom');

     CustomElement.created() : super.created() {
     print('CustomElement created!');
   }
}

void main() {
   document.registerElement('x-custom', CustomElement);
}

and got "CustomElement created!". printed to the console, which means the item has been created!

My question is what else? how can i use this customs element and what can i do with it, can i write an HTML template, if so how?

I read this but unfortunately couldn't do the same with DART.

any thoughts!

+3


source to share


2 answers


I wrote an ableto below which worked, feel like I made it a long way,

  • I could not use the tag
  • Not sure if the way I used the callback of the elements in custumElement is correct as I was forced to use .append for all elements and not sure if there is an easier way to do this.

my index.html file



    pick a color:<input type="color" name="colorname" id="colorname"> the color you  selected is: <output id="picked-color"></output> click it !

    <div id='my-element'></div>

my index.dart file:

import 'dart:html';

class CustomElement extends HtmlElement {

factory CustomElement() => new Element.tag('x-custom'); 
CustomElement.created() : super.created() {   }

Element launchElement(Element o1){  

o1.onClick.listen((e) => window.alert('the input color is: ${o1.text}'));
 print('CustomElement created!');

var output = new Element.html('<div></div>');
var statement = new Element.html('<div></div>');
var bind = new Element.html('<div></div>')
         ..text='this text will be dynamically replaced by what you are entering down';
var input = new InputElement()
           ..id ='input'
           ..type ='text'
           ..placeholder='enter data here';

input.onInput.listen((e) => bind.text=input.value);


var element = new Element.html('<span>content: </span>')
          ..style.color='red';
var button = new ButtonElement()
  ..id = 'awesome'
  ..classes.add('important')
  ..onClick.listen((e) => pop(input.value))  // "Hi There!!!")
  ..text = 'Click Me man!'
  ..style.color='orange';

      statement.innerHtml="<b>I'm an x-custom-with-markup!</b> ";
      output.node..add(statement)..add(bind)..add(input)..add(element)..add(button);

      return (output);  
}

var button1 = new ButtonElement()
            ..id = 'awesome2'
          ..text = 'External Click Me man!';

void pop(i){ window.alert("input is: $i");  }

}

void main() {
         document.registerElement('x-custom', CustomElement); 
         var xFoo = new Element.tag('x-custom');

         InputElement colorname = querySelector('#colorname');
         Element theColor = querySelector('#picked-color');
         xFoo = xFoo.launchElement(theColor);
         theColor.text = colorname.value;

         Element myDiv=querySelector('#my-element');   
         myDiv.children.add(xFoo);


         colorname.onInput.listen((Event e) {
         theColor.text = colorname.value;   
    });  
 }
0


source


It is also used by Polymer. Polymer is just a combination of custom elements, HTML imports, templates, polymers, polyfills, and some builders to plug in these components and offer a good API. If you want to reinvent the wheel, you can only go with CustomElement.

Change the main object to



void main() {
   document.registerElement('x-custom', CustomElement);
   var elem = new Element.tag('x-element');
   elem.appendText('x-element');
   document.body.append(elem);
   elem.onClick.listen((e) {
     print('clicked');
   });
}

and you can react to click events

+1


source






More articles:


All Articles