21 Replies Latest reply on Oct 30, 2014 1:22 AM by Zoze

    How to make the code more simpler for dynamic data?

    Zoze Level 1

      Hi everyone!

       

      I have a JSON file with over 200 records.

       

      I want every record to be active button with unique actions.

       

      The code is the below:

       

      $.getJSON("content.json",

                function(data){

                          for(var i=0; i<200; i++){

                              var s = sym.getSymbol("base").createChildSymbol("template", "conts");

                              s.getSymbolElement();

                                  s.element.attr('id', 'symbol'+i);

                                  s.$("imageholder").css({"background-image":"url('"+data[i]. image+"')" });

                                  s.$("imageholder").data('myIndex', i);

                                  s.$("imageholder").data('title',data[i].name);

                                

      s.$("imageholder").click("click", function(e){                                                          

                             if ($(this).data("myIndex") == 0){

               WB = 10;

               sym.$("#symbol0").show();

                                  sym.$("#symbol1").hide();

                                  sym.$("#symbol2").hide();

                                  sym.$("#symbol3").hide();

                                  sym.getComposition().getStage().getSymbol('placer').$("holder").css({"background-image":" url("+$(this).data('Large')+")"});

                                  sym.getComposition().getStage().getSymbol('placer').$("holdertxt").html($(this).data('tit le'));

       

       

                                  if ( WB == 10) {

                                  sym.getSymbol("#symbol0").$("rect").animate({opacity:1},700);

                                                                };

                                                              }

                              else if ($(this).data("myIndex") == 1) {

                                WB = 11;

                                     sym.$("#symbol0").hide();

                                     sym.$("#symbol1").show();

                                      sym.getComposition().getStage().getSymbol('placer').$("holder").css({"background-image":" url("+$(this).data('Large')+")"});

                                      sym.getComposition().getStage().getSymbol('placer').$("holdertxt").html($(this).data('tit le'));

                                     if ( WB == 11) {

                                     sym.getSymbol("#symbol1").$("rect").animate({opacity:1},700);

                                                                };

                                                                                       }

                                                                  });

      s.$("imageholder").mouseout ("mouseout",function(e){

      if ($(this).data("myindex") == 0 && WB != 10) {

        sym.getSymbol("#symbol0").playReverse("selectend");

       

       

                                                                                 }

      else if ($(this).data("myindex") == 1 && WB != 11) {

        sym.getSymbol("#symbol1").playReverse("selectend");

      }

       

       

                                                                                       }

                                                                  });

      s.$("imageholder").mouseout ("mouseout",function(e){

      if ($(this).data("myindex") == 0 && WB != 10) {

        sym.getSymbol("#symbol0").play("selectstart");

       

       

                                                                                 }

      else if ($(this).data("myindex") == 1 && WB != 11) {

        sym.getSymbol("#symbol1").play("selectstart");

      }

                                                                  });                                                      

       

       

                          }

       

       

       

       

      });

       

       

       

      How is possible to place an each command or something else in order not to write for each Index and for each function the actions?

       

      Now I am writing for every function of (mouseover, click, mouseout) the actions that every record of the JSON should make.

       

      Can someone help me?

        • 1. Re: How to make the code more simpler for dynamic data?
          dharmk Adobe Employee

          Based on your code above, I have made the following assumptions:

           

          1. You have shown the code for two values of i (0 and 1), and want similar code for the rest
          2. Two mouseout handlers in the code above is a typo, one of them is supposed to be a mouseover (based on the description at the bottom). In the solution I am going to propose, I am assuming the first one was supposed to be a mouseover handler
          3. WB is a global variable, and the values range from 10, 11, 12 ... 10 + n - 1. Please double check the code once though, I think there is a logical problem with the closure you are creating around WB in the mouseout handlers. I cannot identify the intent so the proposed solution will be based on your code above.

           

          Another bug in the code is in the way you are attaching the handlers:

           

          s.$("imageholder").click("click", function(e) {}) should be changed to: s.$("imageholder").on("click", function(e) {})


          and similarly the other handlers.


          You can use the following to simplify your code:


          $.getJSON("content.json", function (data) {

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

                    var s = sym.getSymbol("base").createChildSymbol("template", "conts");

                    var e = s.getSymbolElement();

                    e.attr('id', 'symbol' + i);

                    s.$("imageholder").css({ "background-image": "url('" + data[i].image + "')" });

                    s.$("imageholder").data('myIndex', i);

                    s.$("imageholder").data('title', data[i].name);

                   

                    s.$("imageholder").on("click", function (e) {

                         WB = 10 + i;

                         sym.$("#symbol0").show();

                         sym.$("#symbol1").hide();

                         sym.$("#symbol2").hide();

                         sym.$("#symbol3").hide();

                         sym.getComposition().getStage().getSymbol('placer').$("holder").css({ "background-image": " url(" + $(this).data('Large') + ")" });

                         sym.getComposition().getStage().getSymbol('placer').$("holdertxt").html($(this).data('title'));

                         sym.getSymbol("#symbol0").$("rect").animate({ opacity: 1 }, 700);

                    });

           

           

              

                    s.$("imageholder").on("mouseover", function (e) {                                

                         //Looks like a logical bug, please double check.. I don't know how you are controlling WB from outside

                          if(WB != 10 + i) {

                              sym.getSymbol("#symbol0").playReverse("selectend");

                          }

                   });


                    s.$("imageholder").on("mouseout", function (e) {

                         //Looks like a logical bug, please double check.. I don't know how you are controlling WB from outside

                         if (WB != 10 + i) {

                              sym.getSymbol("#symbol0").play("selectstart");       

                         }

                    });

               }

          });


          Another option would be to setup your event handlers in the symbol definition. The benefit is that all the instances would automatically inherit the behavior. You just need to figure out how to parameterize the code. For eg, In your case you can attach the following click handler in the symbol itself on the imageholder element:


          var i = sym.$("imageholder").data('myIndex');  //You will be setting the data on the instance while creating the instance. Rest of the code can use this as a param

          WB = 10 + i; //Assuming WB to be available, change the logic accordingly

          sym.$("#symbol0").show();

          sym.$("#symbol1").hide();

          sym.$("#symbol2").hide();

          sym.$("#symbol3").hide();

          sym.getComposition().getStage().getSymbol('placer').$("holder").css({ "background-image": " url(" + $(this).data('Large') + ")" });

          sym.getComposition().getStage().getSymbol('placer').$("holdertxt").html($(this).data('title'));

          sym.getSymbol("#symbol0").$("rect").animate({ opacity: 1 }, 700);


          The code may not work as it is, but I hope it helps you make progress and you are able to achieve what you wanted. Let us know if you are having any other issues.

           

          -Dharmendra

          • 2. Re: How to make the code more simpler for dynamic data?
            Zoze Level 1

            Dharmendra thank you for the response.

             

             

            On the link I have the working non simple code Dropbox - not-simple.zip

             

            As you mention, about setting up the event handlers on symbol definition, I tried but with no success.

             

            I don't know how to make the event to recognize that every "myindex" is unique and have different behavior.

             

            I tried with action click:

             

            sym.$(".producttypeC").hide(); // ok for hiding all the class elements

                 

              sym.$((this)+i).show();  // in order to show only the one that I've clicked

             

              sym.getSymbol("#producttype"+i).playReverse("selectend");  // the one that clicked to start Playing In reverse the timeline

             

              WB = i++;  // in order to know which one is clicked

             

            // if it is the one that  I clicked then hide the element of the same dynamic symbol and change the color of another element of the another dynamic symbol that have been created.

              if ( WB == i) {

              sym.getSymbol("#producttype"+i).$("arrowselect").hide();};

               sym.hovergkri();

               sym.getSymbol("#producttype"+(i++)).$("hover").css({

              backgroundColor:"#f4c22d"});

             

             

            Dropbox - not-simple.zip

             

             

             

            Zoze

            • 3. Re: How to make the code more simpler for dynamic data?
              Zoze Level 1

              I tried to put the json data in an array and the try to retrieve them, but with no success.

               

              Could someone help me?

               

              var imageSymbolArray  = [];

              function traceSelected (symbolInTheArray){

              alert("You clicked a menuItem with the id of: "+symbolInTheArray.getVariable("id"));

              }

               

               

              $.getJSON("menu.json",

                function(data){

                $.each(data, function(q){

                imageSymbolArray .push(data[q]);

                });

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

                    var menu = sym.getSymbol("Menu").createChildSymbol("menuthumbs", "contentthumbs");

                     var ant = menu.getSymbolElement();

                       ant.css({

                       "background-size":"contain","float":"left"//,"cursor":"pointer"

                       });

               

               

              menu.setVariable("id", i);

              imageSymbolArray.push(menu);

              }

              $.each(imageSymbolArray, function( count, symbolInTheArray ){

              var menuthumbs = $(symbolInTheArray);

              var menuElement = $(symbolInTheArray.getSymbolElement());

              menuElement.bind ("click",function(){traceSelected(symbolInTheArray);});

              menuElement.bind ("mouseover",function(){menuElement.animate({opacity: 0.2, left:"-=25px"});});

              menuElement.bind ("mouseout",function(){menuElement.animate({opacity: 1, left:"+=25px"});});

              }

              );

              });

              • 4. Re: How to make the code more simpler for dynamic data?
                dharmk Adobe Employee

                Sorry, could not get the time to look into it today. I should be able to take a look at your sample tomorrow evening. I will post my updates soon after that.

                 

                -Dharmendra

                • 5. Re: How to make the code more simpler for dynamic data?
                  Zoze Level 1

                  OK Dharmendra.

                   

                  Don't worry. I am waiting and meanwhile I am trying to make the code working.

                   

                   

                  Thank you!

                  • 6. Re: How to make the code more simpler for dynamic data?
                    dharmk Adobe Employee

                    In my last post I missed one point. We need to take care of the context when moving code from one place to another. For eg, In your code you are processing the json in compositionReady, and sym in compositionReady refers to the stage instance. If we are calling any API directly on sym and we are moving that code to any other symbol definition, we need to make sure that we get the stage reference correctly before calling the API.

                     

                    For eg, the following line in your compositionReady: 

                    sym.hovergrey();


                    will change to following when we move the code to any other symbol defn:

                    var stage = sym.getComposition().getStage();

                    stage.hovergrey();

                     

                    Similarly, the right context needs to be set for all the calls on the newly created instance. Just check where are your creating the instance, when we query it, we will need to query under the right context.

                     

                    I downloaded your sample and there were some errors in the console, some of them looked like copy-paste errors. For eg, accessing the wrong product type for incorrect values of i. I first tried to fix that, since simplification was not possible without it. I've attached an archive which contains two folders - not-simple-1 (contains your code with some fixes on product types), and simple-1, which contains the simplified code. I think you should be able to get rid of WB also, but I didn't try that as I don't understand the requirement correctly.

                     

                    The code may not work as expected without some changes, as I do not understand the logic completely. However, what is more important is the process of simplification which we have described here. Let us know if you are facing any other difficulties.

                     

                    Updated files are shared @ Dropbox - simplified.zip

                     

                    -Dharmendra

                    1 person found this helpful
                    • 7. Re: How to make the code more simpler for dynamic data?
                      Zoze Level 1

                      I'll check it now to see.

                       

                      I placed the WB in order to get now when the specific element was clicked. And if it was clicked to change the color to yellow.

                       

                      I was trying various Technics until now but with no result.

                       

                      I'll give you my feedback.

                       

                      THANK YOU FOR YOUR TIME!

                      • 8. Re: How to make the code more simpler for dynamic data?
                        dharmk Adobe Employee

                        Ah ... I did some (copy-paste) mistakes in the last version. I tried to port the code again, and I've shared a new simplified version @ Dropbox - simplified.zip . I compared the behavior with the non-simplied one and it seems to be similar. You can take a look at it.

                         

                        -Dharmendra

                        • 9. Re: How to make the code more simpler for dynamic data?
                          Zoze Level 1

                          OK,

                           

                          I have questions

                           

                          At stage CompositionReady, you wrote

                           

                          var info = getProductTypeAndClass(i);

                            ant.attr("id", info.type + i);

                            ant.addClass(info.clazz);

                           

                          Could you explain it to me?

                          I don't understand why info.type and info.clazz is without "".

                          More the getProductTypeAndClass(i)? From where is going to get them and how is recognize them, since I am not seeing any .addclass or .attr with those names.

                           

                          At the click event the

                          $(".producttypeautoC").show(800);

                            $(".producttypesemiC").hide(800);

                           

                          still exists, which made me to wonder where these names came from?

                           

                          Sorry, if my questions/wonders seems to you silly.

                           

                          Moreover,

                           

                          Since I'd like to avoid the comparison if with the values like 0,1,2...... e.g. 20 , how is this possible I tried to do it like below with again no success.

                           

                          $.getJSON("menu.json",

                            function(data){

                              for(var i=0; i<2; i++){

                                var menu = sym.getSymbol("Menu").createChildSymbol("menuthumbs", "contentthumbs");

                                   var menuel = menu.getSymbolElement();

                                   menuel.css({"background-size":"contain","float":"left"});

                                    var ant = menuel.attr("id","producttype"+i);

                                    var finalID = ant;

                                    var objectId;

                                    var currentEdgeObj = menu[objectId];

                            currentEdgeObj.playAll();

                           

                                 // ant.addClass("producttypeC");

                                 // data[i].uniqueEdgeId = ant;

                                

                          data[i].edgeObject = menu;

                                

                          // menu.$("titleholder").html(data[i].title);

                                   menu.$("arrowselect").data("myindex",i);

                           

                              /*     menuel.$("imageholder").css({

                                    "background-image":"url("+data[i].image+")"

                                   }); */

                           

                          $(menuel).on("click"), function (e) {

                          if (menu[i] == finalID){

                          objectId = i;

                          }

                          if (currentlySelected != objectId){

                            sym.getComposition().getStage().$("rect").hide(); //added an rectangle to see if it works BUT ...................

                            }

                          }

                           

                           

                          }

                          });

                           

                           

                          How I could make it to understand that the  thumbnail I am going to click has the right value and start doing the function?

                          • 10. Re: How to make the code more simpler for dynamic data?
                            Zoze Level 1

                            Ohh, now I've seen the new updated link.

                             

                            Anyhow, I tried to do a new composition for testing purpose in order to avoid the if comporison with the "myindex" e.g myindex ==0.

                             

                            I believe with $.each i'll do it.

                             

                            $.getJSON("menu.json")

                              .success (

                              function (data) {

                             

                              $.each(data, function (index, item){

                             

                             

                              var menu = sym.createChildSymbol("menuthumbs", "Stage");

                              menu.setVariable("id", index);

                              var ant = menu.getSymbolElement();

                              ant.css({

                              "background-size": "contain",

                              "float": "left" //,"cursor":"pointer"

                              });

                              menu.$("titleholder").html(item.title);

                              //menu.$("arrowselect").data("myindex", i);

                              menu.$("imageholder").data('Large', item.image);

                              menu.$("imageholder").css({ // menu.$("arrowselect").data("title",data[i].title);

                              "background-image": "url(" + item.image + ")"

                              });

                             

                             

                             

                              menu.$("imageholder").bind('click', function onClick (e) {

                            sym.getComposition().getStage().$('holder').css({"background-image": "url("+$(this).data('Large')+")"});

                              });

                            });

                              });

                             

                            It seems to be functioned.

                             

                            Now I'll try to place it on the previous.

                             

                             

                            Thank you for all Dharmendra!

                            I am appreciating very very much!

                            • 11. Re: How to make the code more simpler for dynamic data?
                              Zoze Level 1

                              Hi Dharmendra,

                               

                              Could you explain me the code:

                               

                              var info = getProductTypeAndClass(i);

                                ant.attr("id", info.type + i);

                                ant.addClass(info.clazz);

                               

                               

                              on the above example?

                              • 12. Re: How to make the code more simpler for dynamic data?
                                dharmk Adobe Employee

                                Sorry for such a late reply on this. In your original code there were two properties (type and class) which was depended on the index of the item from the JSON. I just tried to abstract that out in a function called getProductTypeAndClass, which takes i as a parameter and returns an object in the following form:

                                 

                                {

                                  type: "producttype",

                                  clazz: "producttypeC"

                                  }

                                 

                                To better understand this, you can try the following in a console:

                                 

                                var o =  {  type: "producttype",  clazz: "producttypeC"  };

                                console.log(o.type);

                                console.log(o.clazz);

                                 

                                Its just an object with two properties (type and clazz, you could have chosen any other name for the properties) and the corresponding values. Thus the following code

                                 

                                var info = getProductTypeAndClass(i); 

                                ant.attr("id", info.type + i);

                                ant.addClass(info.clazz);

                                 

                                First gets an object with the information about the type and class for a particular value of i and store that into and object info and then uses info.type and info.clazz to access those values.

                                 

                                Hope this helps. I will travelling again for sometime and should be able to look into the forums after a couple of days.

                                 

                                -Dharmendra

                                • 13. Re: How to make the code more simpler for dynamic data?
                                  Zoze Level 1

                                  Hello Dharmendra,

                                   

                                  thank you for the explanation.

                                   

                                  Do you know why at the 2014.1 version the data from JSON doesn't load ?

                                   

                                  It is showing only the last record of the JSON.

                                  • 14. Re: How to make the code more simpler for dynamic data?
                                    dharmk Adobe Employee

                                    Sorry for the late reply on this. I have just started looking into it, looks like the JSON loading is not the problem. The problem is with the relative positioning of divs inside stage. I am looking into the issue, I will post my updates soon.

                                     

                                    -Dharmendra

                                    • 15. Re: How to make the code more simpler for dynamic data?
                                      dharmk Adobe Employee

                                      We have fixed the issue and it will be part of our next update. As a workaround right now, you can add a position: relative css style to the dynamically created elements. In your case, you need to add the code highlighted in bold below:

                                       

                                      var menu = sym.getSymbol("Menu").createChildSymbol("menuthumbs", "contentthumbs");

                                      menu.getSymbolElement().css("position", "relative");

                                       

                                      -Dharmendra

                                      • 16. Re: How to make the code more simpler for dynamic data?
                                        Zoze Level 1

                                        Oh excellent!

                                         

                                        Thank you Dharmendra and all the TEAM.

                                         

                                        I wish you all the best!

                                        • 17. Re: How to make the code more simpler for dynamic data?
                                          Zoze Level 1

                                          Hi Dharmendra,


                                          At the simplified code I am not seeing somewhere how the id producttypeauto and producttypesemi  are getting these attributes, include the class producttypeautoC and producttypesemiC.

                                           

                                          For just producttype is getting from that code:

                                           

                                          var info = getProductTypeAndClass(i);

                                          ant.attr("id", info.type + i);

                                          ant.addClass(info.clazz);

                                           

                                           

                                          but the others from where?

                                           



                                          • 18. Re: How to make the code more simpler for dynamic data?
                                            dharmk Adobe Employee

                                            You can check the implementation of the function getProductTypeAndClass. I have pasted it here for your reference. This was based on your original code which you shared earlier.

                                             

                                            function getProductTypeAndClass(i) {

                                              if (i >= 0 && i < 2) return {

                                              type: "producttype",

                                              clazz: "producttypeC"

                                              };

                                              if (i >= 2 && i < 5) return {

                                              type: "producttypeauto",

                                              clazz: "producttypeautoC"

                                              };

                                              if (i >= 5 && i < 8) return {

                                              type: "producttypesemi",

                                              clazz: "producttypesemiC"

                                              };

                                              }

                                            • 19. Re: How to make the code more simpler for dynamic data?
                                              Zoze Level 1

                                              Thank you again!!

                                               

                                              This function I haven't seen it inside the the code.

                                               

                                              Thank you Dharmendra!

                                              • 20. Re: How to make the code more simpler for dynamic data?
                                                dharmk Adobe Employee

                                                Just click on window-> code then click on the full code button. You should be able to see this at the top. Let me know if you are still having some issues.

                                                • 21. Re: How to make the code more simpler for dynamic data?
                                                  Zoze Level 1

                                                  Yes, I've seen it!

                                                   

                                                  Is it better if the code is in there than at creationComplete?