Results 1 to 5 of 5

Thread: object ids in symbols

  1. #1
    Sencha User
    Join Date
    May 2013
    Posts
    11

    Default object ids in symbols

    Hi,

    Apparently object IDs are lost when an object is wrapped in a symbol. I was planning to replace a text string in a symbol via javascript in properties->timeline->actions->start ... getElementById();

    Is there another way to do that?

    Thanks!
    -Paul

  2. #2
    Sencha User
    Join Date
    Apr 2012
    Posts
    304

    Default

    Hi pfenerty,

    To access symbols you should use controller.getSymbolInstanceById . While the symbol ID's are autogenerated to make sure that no symbol instances have the same ID, autocomplete in Animator's code editor will list all of them.

    Please take a look at the Animator API, that allows you to find and access objects, symbols and scenes:

    http://docs.sencha.com/animator/1.5/#!/api

    Also in Animator's code editor, take a look at the snippets related to symbols.

  3. #3
    Sencha User
    Join Date
    May 2013
    Posts
    11

    Default

    Hey thanks, but that much i got from the docs.

    I am hoping to get at objects inside a symbol, so that i can replace those objects with other objects.

    Specifically, i am trying to replace a string of text inside a symbol.

    If i
    1. insert a text object on the stage (Text Tool)
    2. set the text Content
    3. give the text object an ID
    4. convert the text object to a symbol
    The ID goes away. Here is what's in index.html before conversion to symbol:

    Code:
    <div id="pxDGyts1j-myTextObjectID"><span>myTextObjectContent</span></div>
    With controller.getElementById('myTextObjectID'), i can grab the text and replace it. myTextObjectID is the ID i gave the text.

    But here is what's inside index.html after conversion to symbol:

    Code:
    <div id="pxDGyts1j-an-obj-184" class="an-symbol-LvfcQNrU an-symbol-container-Jhxm2g an-symbol-container">
    <div id="pxDGyts1j-an-obj-185" class="an-symbol-iZ629hFw"><span>myTextObjectContent</span></div>

    Now if i request, using snippets:

    Code:
    var symbol_instance = controller.getSymbolByInstanceId('LvfcQNrU');
    alert("SYMBOL_INST: " +symbol_instance);
    I get back [object Object]and don't know what to do with that ... how to get in.

    But if i request:

    Code:
    var sym_el = controller.getElementById('an-obj-184');
    alert("SYM_EL: " +sym_el);
    I get back an HTMLDivElement, and can find the text. It's here:

    Code:
     for (var i=0; i < sym_el.childNodes.length; i++)  {
    
        //  there is another DIV layer ahead of SPAN
        var this_node = sym_el.childNodes[i];
    
        if (this_node.nodeType != 3 && this_node.nodeName == "DIV")  {
    
           //  got the DIV, get the SPAN
           for (var j=0; j < this_node.childNodes.length; j++)  {
    
              var target_node = this_node.childNodes[j]; 
           
              if (  target_node.nodeType != 3 && target_node.nodeName == "SPAN")  {
                 alert("SPAN: "   + target_node.innerHTML );
             }
          }   
       }
    }
    So i can get what i want, either by (1) knowing how to get text from inside a symbol (this is what i don't know how to do) using the built-in getSymbolByInstanceId

    Code:
    var symbol_instance = controller.getSymbolByInstanceId('LvfcQNrU');
    Or else by (2) finding out the ID that works with getElementById

    Code:
    var sym_el = controller.getElementById('an-obj-184');
    ... because the ID i chose (myTextObjectID) got replaced with an-obj-184, and the only way i know how to find that is by searching index.html.

    I'd be happy either way, i just need dynamic text messaging inside a symbol.

    Thanks again,
    -Paul

  4. #4
    Sencha User
    Join Date
    May 2013
    Posts
    11

    Default

    OK, looks like you can add another ID to the symbol instance, and get to the text from there:

    Code:
    <div id="pxDGyts1j-myNewSymbolInstanceID" class="an-symbol-YXDRymGn an-symbol-container-Q5FA29 an-symbol-container">
    <div id="pxDGyts1j-an-obj-187" class="an-symbol-Vn1vbxAS"><span>myTextObjectContent</span></div>
    </div>
    This is great news ... now i've got dynamic text messaging in symbols.

    Thanks again. Sencha Animator is very impressive.

    Thanks to the tremendous flexibility that comes from arranging objects, timelines, scenes, and symbols, i have always been able to overcome roadblocks and keep this project moving forward.

    Good stuff.

  5. #5
    Sencha User
    Join Date
    May 2013
    Posts
    11

    Default

    As long as i've got the conch, i'd just like to say that having a pointer to the symbol is better than having no pointer at all, but much better to have pointers to all the objects inside the symbol, which become lost at symbol creation time.

    For example, if you had a symbol with text AND three rectangles of different colors, red white & blue, then after you found the symbol in the DOM by searching for the symbol ID, would the first rectangle in that branch of the tree always be the red one?

    Or if you discovered which one came first in browser x, would that also be true for browsers y & z ?

    Thanks again.

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •