Skip to main content
trigo99
trigo99
Participant
February 12, 2017
Answered

Dynamically adding and serialising library items in HTML5 canvas and CreateJS

  • February 12, 2017
  • 1 reply
  • 1791 views

I'd like to serialise (automate) creation of user interface by constructing series of buttons  and placing them on a HTML5 canvas. I have JSON file that I read in and construct an array of properties menuItems[], as such:

menuitem[0].title = "Option 1"

menuitem[0].path = "Path 1"

menuitem[1].title = "Option 2"

menuitem[1].path = "Path 2"

menuitem[2].title = "Option 3"

menuitem[2].path = "Path 3"

...

So far, the code I have working looks something like this: _Btn01, _Btn02, _Btn03 are instances of BtnMain button objects added on timeline from library (i.e., not added dynamically)

function BuildUI()

{

root._Btn00._Label.text = menuItems[0].title;

root._Btn01._Label.text = menuItems[1].title;

root._Btn02._Label.text = menuItems[2].title;

...

root._Btn00.id = 0;

root._Btn01.id = 1;

root._Btn02.id = 2;

...

root._Btn00.addEventListener("click", fl_OptHandler.bind(this));

root._Btn01.addEventListener("click", fl_OptHandler.bind(this));

root._Btn02.addEventListener("click", fl_OptHandler.bind(this));

...

}

function fl_OptHandler(e) {

  HandleProductOpen(menuItems[e.target.id].path);

}

As I mentioned, the above setup works nicely. However, as it stands, I have to manually count the number of UI items in JSON file and add that many object instances onto the timeline, and assign properties to them one by one. So, I'd like to (obviously) automate this even further, by implementing dynamic object creation based on the length of the JSON UI definition file, something like this:

var _Btns = [];

function createMenu() {

for(var i=0; i<menuItems.length; i++)

{

var button = new lib.BtnMain();

button.id = i;

button.addEventListener("click", fl_OptHandler.bind(root));

_Btns.push(button);

root.addChild(_Btns);

}

}

function fl_OptHandler(e) {

  HandleProductOpen(menuItems[e.target.id].path);

}

The createMenu() function goes through and creates the buttons, but the button.id parameter seems not to be assigned properly, and as a result, I am getting an unreferenced object error in fl_OptHandler function. Any idea what am I doing wrong? More generally, how do you serialise and instantiate dynamic object creation? I was hoping that _Btn[0] would be the same (equivalent) as _Btn00 in the first part of the code (that is working), but that doesn't seem to be the case. Any insight is appreciated!

    This topic has been closed for replies.
    Correct answer ClayUUID

    I did some testing and it appears that buttons instantiated from the library are just movieclips, and need a little help to be buttons. In your creation function, try adding this line:

    new cjs.ButtonHelper(_button, 0, 1, 2, new lib._BtnInvisible(), 3);

    1 reply

    C
    ClayUUID
    Legend
    February 12, 2017

    First, try sticking a console.log(button) in your creation loop and a console.log(e.target) in your event handler to verify they're both referencing the same object.

    Second, "serialize" does not mean what you think it means. Serialization is the conversion of an internal data structure to a string for storage or transmission.

    Serialization - Wikipedia

    trigo99
    trigo99Author
    Participant
    February 12, 2017

    Hi! thanks for responding and correcting me - I sometimes tend to assume things

    Ok - aside from the code above that is working, I added the following code to dynamically add an extra button, starting with a simple, single button instance: (createMenu2() is called in the "success" block of the JSON call)

    var _button;

    function createMenu2()

    {

      _button = new lib._BtnInvisible();

      _button.x = 300;

      _button.y = 300;

      _button.id = 0;

      _button.addEventListener("click", fl_OptHandler.bind(root));

      root.addChildAt(_button,0);

      console.log("createMenu2(): " + _button);

    }

    and the handler fn:

    function fl_OptHandler(e) {

      console.log("fl_OptHandler: " + e.target);

      HandleProductOpen(menuItems[e.target.id].path);

    }

    Button shows up fine, although not appearing as when I add it on the timeline: The button is actually designed transparent, I use it as a hit area over some other UI elements. When added dynamically, the button is completely white (which is the color of the hit area graphic I use in the button) and rolling over it doeas not change cursor into pointing hand, as is the case with the timeline-added button. Clicking on it, I get:

    createMenu2(): [MovieClip (name=null)]

    fl_OptHandler: [Shape (name=null)]

    Uncaught TypeError: Cannot read property 'path' of undefined (on the  HandleProductOpen(menuItems[e.target.id].path); line of the handler function.)

    It looks like there is a disconnect between what's creating in the createMenu2() and what handler thinks the target object is. _BtnInvisible is a library object of Button type (not Movieclip). So - is there a way to somehow "cast" the Button type on _button? Or, am I doing something wrong when declaring my _button variable?

    C
    ClayUUIDCorrect answer
    Legend
    February 14, 2017

    I did some testing and it appears that buttons instantiated from the library are just movieclips, and need a little help to be buttons. In your creation function, try adding this line:

    new cjs.ButtonHelper(_button, 0, 1, 2, new lib._BtnInvisible(), 3);

    Terms & ConditionsAccessibility statement
    Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices