5 Replies Latest reply: May 9, 2013 3:26 AM by AMULI RSS

    function defined in compositionReady

    AMULI Community Member
    AMULI May 2, 2013 1:07 PM

      Hi all,

       

      Coming from AS3, there is clear evidence that I do not understand scopes in Javascript.

       

      I wanted to factorize code in a function defined in document.compositionReady :

       

      function labelSections( eMOver)

      {

        var elem, evt = eMOver ? eMOver : event;

        if (evt.srcElement)  elem = evt.srcElement;

        else if (evt.target) elem = evt.target;

        return elem.getAttribute("ID").substr(18,4); // full ID : Stage_sections__8_contact

      };

       

      The function is called in different mouseover event handlers attached to elements inside symbol sections. For example _8_contact.mouseover :

       

      // update  symbol sections

      sym.stop( labelSections( e));

      // update the stage

      sym.getParentSymbol().stop("contact");

       

      How to make the function accessible inside the symbol ? Thanks.

       

      Gil

      • 837 Views
      • Tags:
        • 1. Re: function defined in compositionReady
          elainefinnell Employee Hosts
          elainefinnell May 2, 2013 2:32 PM (in response to AMULI)

          Hi, Gil-


          If you take a look at the full code mode in the code panel, you can see what's going on.  The Stage is a symbol by itself, which means that it lies parallel to the other symbols. The symbol definitions are not held within the Stage.  There are a couple of things you can do:

           

          • Define the function in Stage scope and then access them this way: sym.getParentSymbol().functionName()... in which case you will want to pass in sym as the object you're working on
          • Define the function outside the Stage symbol but within the Edge composition closure.
          • Define the function in Stage scope and attach it to a variable to the Stage, then you can just retrieve the variable and have access to the function.

           

          Hope that helps clarify things a bit.

           

          -Elaine

          • 2. Re: function defined in compositionReady
            AMULI Community Member
            AMULI May 3, 2013 4:34 AM (in response to elainefinnell)

            Hi Elaine,

             

            Thank you for your precision. The first solution is accessible to my current understanding of JavaScript

             

            Yesterday, I started reading JavaScript Enlightenment. I am eager to reach the Closures chapter, as I miss this fundamental concept. But concretely, I'm wondering where to define "outside the Stage symbol but within the Edge composition closure", as in the Code panel everything starts by selecting a symbol (be it the Stage) in the left column. Could you give me a hint ? Thanks.

             

            Regarding the third solution : "attach it to a variable to the Stage". I understand, in document.compositionReady, use a sym.getComposition().getStage().getVariable() statement. Then later a sym.getComposition().getStage().getVariable(). Correct ?

             

            Gil

             

            PS : having the opportunity to dialog with a staff member, let me report some of the difficulties I encounter studying the Edge API page in that thread : http://forums.adobe.com/thread/1204480

            • 3. Re: function defined in compositionReady
              elainefinnell Employee Hosts
              elainefinnell May 3, 2013 2:56 PM (in response to AMULI)

              Hi, Gil-

               

              codepanel.pngelementslibrary.png

              Here's a simple sample that I think will explain what's going on.  As you can see in my project, I have two symbols defined (Library Panel), mySym and secondSym.  I also have instances of these symbols on the Stage, which is defined as mySymInstance and secondSymInstance.  I have click handlers set for both of these instances.

               

              In the code panel, you can see that the click handlers live within the Stage, and the symbols live at the same level as the Stage, as all symbols live at the same level within the composition closure.  Remember that the Stage is another symbol, and the composition closure is not exposed except in full code mode or by editing the edgeActions.js file directly.  The last thing to note here is that as you well know, symbols are a one-to-many relationship, which means that you can have a lot of instances of the same symbol on the stage, and each can have a different action associated with it.

               

              Hope this clarifies things a little more.

               

              -Elaine

              • 4. Re: function defined in compositionReady
                AMULI Community Member
                AMULI May 4, 2013 1:02 AM (in response to elainefinnell)

                Thank you Elaine. I begin to understand the different scopes behind closures.

                 

                Gil

                • 5. Re: function defined in compositionReady
                  AMULI Community Member
                  AMULI May 9, 2013 3:26 AM (in response to elainefinnell)

                  https://www.box.com/s/dnizm64dusezq5kpbkuyHi,

                   

                  I am back after studying Cody Lindley's book. I tried this exercise. Two symbols menuA and menuB, instanciated respectively as menuA_1 and menuB_1. A menuA symbol nests four text elements itemA1 to itemA4. A menuB symbol nests three text elements itemB1 to itemB3. Text is black and should change color on rollover.

                   

                  1) Brute force solution : each of the seven text elements has

                   

                  - a mouseover handler : $(e.target).css('color', 'rgba(187,6,117,1.00)');

                  - a mouseout handler : $(e.target).css('color', 'rgba(0,0,0,1.00)');

                   

                  Files here : https://www.box.com/s/w26hugoxom97o8x91rrk

                   

                  2) In order to factorize to the symbol level, menuA was selected in the code panel, and the following function written before the code defining the event handlers

                   

                  function changeColorA( targetElem, colorValue)

                  {

                    $(targetElem).css('color', colorValue);

                  }

                   

                  then all the event handlers were modified

                   

                  - mouseover handler : changeColorA( e.target, 'rgba(187,6,117,1.00)');

                  - mouseout handler : changeColorA( e.target, 'rgba(0,0,0,1.00)');

                   

                  Similar function changeColorB defined in menuB. This works ok.

                   

                  Files here : https://www.box.com/s/l3mb4n4l9je4hsts7h8j

                   

                  3) Now wanting to factorize at the stage level, Stage was selected in the code panel, and this

                  single changeColor function written

                   

                  function changeColor( targetSym, targetElem, colorValue)

                  {

                    targetSym.$(targetElem).css('color', colorValue);

                  }

                   

                  then all the event handlers, in each of the two symbols, were modified

                   

                  - mouseover handler : sym.getParentSymbol().changeColor( sym, e.target, 'rgba(187,6,117,1.00)');

                  - mouseout handler : sym.getParentSymbol().changeColor( sym, e.target, 'rgba(0,0,0,1.00)');

                   

                  Files here : https://www.box.com/s/dnizm64dusezq5kpbkuy

                   

                  It doesn’t work. I suspect not passing the targetSym parameter correctly. May be the function needs a getSymbol( <instanceName>), but from inside the symbol I cannot pass an instance name ?

                   

                  Could anyone show me what I miss ? Thank you.

                   

                  Gil