How do I create buttons at runtime in Enyo?

Question

I need a app to display buttons that are created at runtime. The reason is that I will be getting information from a service to see how many buttons I need.

Currently the program runs but no buttons are displayed.

I'm trying to use a toolbar and set the control property in the create function. The program runs OK but my toolbar has no buttons? Is there a way to do this?

code:

// Trying to create buttons at run time
name: "MyApps.MainApp",
kind: enyo.VFlexBox,
components: [
        {kind: "PageHeader", content: "Template"},
        {kind: "Toolbar", name: "tabsted"},
        {name: "feedUrl", kind: "Input", flex: 1},
        {kind: "HtmlContent", name: "comments", content: "hello world <br> and another lin"},
        {name:"curValue", content:("Sample Text \r\n and more")},
        {kind: "Button", caption: "Action", onclick: "btnClick"},
],

// this gets called first ha
create: function()
{
    this.inherited(arguments);

    this.$.tabsted.components= [
            {caption: "a"},
            {caption: "b"},
            {caption: "c"}
    ];

    this.LoadCommments();
    },

    LoadCommments: function()
    {
        this.$.comments.content="fred";   
    },

    // called when button is clicked
    btnClick: function() 
    {
        this.$.curValue.setContent("Put some text here");  // handle the button click
    }
};

Pre101 · Accepted Answer · 2012-01-03T22:50:58.550

2

You'll want to take a look at the API documentation for Enyo.Component. Specifically, the section on creating components dynamically. Try the following change to your code:

    this.$.tabsted.createComponents([
        {caption: "a"},
        {caption: "b"},
        {caption: "c"}
    ], {owner: this});

Also, in the LoadComments function you'll want to call 'setContents' instead of trying to directly update the value of contents.

edited Jan 03 '12 at 22:50

answered Jan 02 '12 at 05:41

Pre101

2,370
16
23

Hi,I cold not fine the api documentaion for enyo component, I went to https://developer.palm.com/content/api/index.html, could you give me the link, – Ted pottel Jan 03 '12 at 18:14
Try this link: https://developer.palm.com/content/api/reference/enyo/enyo-api-reference.html#enyo.Component However, the docs in my SDK installation directory are more fleshed out regarding dynamic creation. – Pre101 Jan 03 '12 at 21:37
I just edited this answer to include setting the owner object properly. As evidenced by your other question I had left this out. – Pre101 Jan 03 '12 at 22:51

How do I create buttons at runtime in Enyo?

1 Answers1