passing parameter/input data to custom elements in DART

Question

I created a custom element, and want to send data / parameters to it:

my element code is:

   class SaveBtn extends HtmlElement  {
   static final tag = 'save-button';
   factory SaveBtn()=>new Element.tag(tag); 

  SaveBtn.created() : super.created() {
  //  Create a Shadow Root
  var shadow = this.createShadowRoot();
 // Create a standard element and set it's attributes.
 var btn = new ButtonElement();
 ...
 btn.text= this.getAttribute('data-name');


 shadow.nodes.add(btn);

    Element launchElement(){ 
     return (shadow); 
    }

  }  
 }

The below code in the html file worked perfectly:

<save-button data-name='save orders'></save-button>

but what if I want to use the below code, what shall I adjust in my custom element code?

new SaveBtn('save orders')

Hasan A Yousef · Answer 1 · 2014-10-12T17:47:54.647

This is another solution that worked with me before reading the posted answers, I liked @Gunter answer and will adapt it.

class SaveBtn extends HtmlElement  {
  static final tag = 'save-button';
  factory SaveBtn()=>new Element.tag(tag);

  var shadow, btn;

  SaveBtn.created() : super.created() {
    shadow = this.createShadowRoot();

    btn = new ButtonElement()
        ..text="save"
        ..style.height= '20px'  
        ..style.borderBottom='1px solid #D1DBE9'; 

    btn.text = this.getAttribute('data-name');

    shadow.nodes..add(label)..add(btn);
  } 

  Element launchElement(name){ 
    btn.text= name;
    return (shadow); 
  }
}

and called the element as:

var btn=new SaveBtn()..launchElement('click me');

score 0 · Answer 2 · answered Oct 12 '14 at 12:38

You can simply add a new constructor for this that sets the data-name attribute too:

class SaveBtn {
  // ...
  factory SaveBtn(String label) {
    var btn = new Element.tag(tag);
    btn.setAttribute('data-name', label); // Set properties/call methods here
    return btn;
  }
  // ...
}

score 0 · Accepted Answer · edited Oct 14 '14 at 07:00

0

name is an optional argument. When you pass a value it is used for the text attribute of the button.
I pass it just to a field (name) in the elements class and set it to the the button in attached.
When you use data-xxx attributes you can use the dataset getter.
I also changed the other code a bit. I think attached is a better place to access attributes because then the element is already upgraded properly.

class SaveBtn extends HtmlElement {
  static final tag = 'save-button';

  factory SaveBtn([String name]) => (new Element.tag(tag) as SaveBtn)..name = name;

  ButtonElement innerButton;
  ShadowRoot shadow;

  SaveBtn.created() : super.created() {
    //  Create a Shadow Root
    var shadow = this.createShadowRoot();
    // Create a standard element and set it's attributes.
    innerButton = new ButtonElement();
    shadow.nodes.add(innerButton);
  }

  String name;

  @override
  void attached() {
    super.attached();
    innerButton.text = name != null ? name : this.dataset['name'];
  }
}

SaveBtn({String name, String width}) => (new Element.tag(tag) as SaveBtn)
    ..name = name
    ..style.width=width;

Below a solution proved to work.

factory SaveBtn() => new Element.tag(tag)
  String name, width;

  @override
  void attached() {
    super.attached();
    innerButton.text = name != null ? name : this.dataset['name']
    ..style.width=width;
  }

call the item as:

var btn = new SaveBtn()..name='save'..width='100%';

edited Oct 14 '14 at 07:00

Hasan A Yousef

22,789
24
132
203

answered Oct 12 '14 at 12:45

Günter Zöchbauer

623,577
216
2,003
1,567

what if I want to pass more than one optional parameter,I tried factory SaveBtn({String name, var width}) => (new Element.tag(tag) as SaveBtn)..name = name..StyleWidth=width; but got the error: There is no such setter 'StyleWidth' in 'SaveBtn' – Hasan A Yousef Oct 12 '14 at 15:53
Either you add a field `StyleWidth` to the `SaveBtn` class like `name` and set the value in `attached()` or you try like shown in my updated answer (not tested). – Günter Zöchbauer Oct 12 '14 at 15:56
{ } did not work for multi optional itms, [ ] worked, but the width had not been changed – Hasan A Yousef Oct 12 '14 at 16:44
What is `{}` and `[]`. Is there something missing?. Could be an CSS issue. Can you try to apply this style setting using CSS instead of code. Maybe you need to add `display = 'block'` to make `width` work. – Günter Zöchbauer Oct 12 '14 at 16:54
SaveBtn({String name, String width}) gave error, telling 0 parameters required, but SaveBtn([String name, String width]) did not give any error, I gave initial width value in the style, but had not been changed, even with display = 'block' nothing changed – Hasan A Yousef Oct 12 '14 at 17:02
If you use `{}` you have to add the name (`{}` means named optional arguments) like `new SaveBtn(name: 'somename', width: '45px');`. You should try with plain CSS and when it is working add it to the code. I'm not that fluent with CSS neither. – Günter Zöchbauer Oct 12 '14 at 17:06
I tried it using the launchElement function in my approch (the other solution I provided, and it worked! var btn=new SaveBtn()..launchElement(60,'click me'); – Hasan A Yousef Oct 12 '14 at 17:50

passing parameter/input data to custom elements in DART

3 Answers3

Linked