16 Replies Latest reply on Sep 3, 2012 2:11 PM by Dan Rodney

    [JS] Hide Extra Space in Dynamic Script UI

    Dan Rodney Adobe Community Professional

      When hiding/showing sections, I'm getting extra space that I don't want. I haven't been able to figure out how to remove the extra space.

       

      There's another post at http://forums.adobe.com/message/3708111 from which I adapted the simple example below. When the section you toggle on/off is hidden, you'll see there is extra space between the first and second static text. There should be less space (as seen between the second and third static text). Any ideas of how to avoid the extra space?

       

      Thanks in advance.

      Dan

       

      var NULL_SIZE = [0,0],
           MAX_SIZE = [1000,1000];
      
      var u,
           w = new Window('dialog', 'test'),
           p = w.add('panel'),
           s1 = p.add('statictext', u, "This is a static text"),
           // collapsible group
           g = p.add('group'),
           e = g.add('edittext', u, "Edit your text..."),
           r = g.add('checkbox', u, "Blablablabla"),
           // ---
           s2 = p.add('statictext', u, "This is more static text"),
           s3 = p.add('statictext', u, "This is another static text"),
           b = w.add('button', u, 'Toggle');
      
      g.orientation = 'column';
      
      // Initial state : hidden
      // ---
      g.visible = false;
      g.maximumSize = NULL_SIZE;
      
      // Toggles container's visibility
      // ---
      b.onClick = function()
      {
           g.maximumSize = (g.visible ^=1) ? MAX_SIZE : NULL_SIZE;
           w.layout.layout(true);
      };
      
      w.show();
      
      
        • 1. Re: [JS] Hide Extra Space in Dynamic Script UI
          CarlosCanto Adobe Community Professional & MVP

          put s1, g, and s2 in a group and change its spacing to half of the current spacing when g is hidden, restore spacing when g is visible.

           

          var NULL_SIZE = [0,0],
               MAX_SIZE = [1000,1000];
          
          var u,
               w = new Window('dialog', 'test'),
               p = w.add('panel'),
                     g1 = p.add('group'); 
               s1 = g1.add('statictext', u, "This is a static text"),
               // collapsible group
               g = g1.add('group'),
               e = g.add('edittext', u, "Edit your text..."),
               r = g.add('checkbox', u, "Blablablabla"),
               // ---
               s2 = g1.add('statictext', u, "This is more static text"),
               s3 = p.add('statictext', u, "This is another static text"),
               b = w.add('button', u, 'Toggle');
          
          g.orientation = 'column';
          g1.orientation = 'column';
          g1.spacing = p.spacing/2;
          
          // Initial state : hidden
          // ---
          g.visible = false;
          g.maximumSize = NULL_SIZE;
          
          // Toggles container's visibility
          // ---
          b.onClick = function()
          {
               g.maximumSize = (g.visible ^=1) ? MAX_SIZE : NULL_SIZE;
                     g1.spacing = g.visible ? p.spacing : p.spacing/2;
                    // alert(g1.spacing);
               w.layout.layout(true);
          };
          
          w.show();
          
          • 2. Re: [JS] Hide Extra Space in Dynamic Script UI
            Dan Rodney Adobe Community Professional

            Sorry it took a while for me to test this. Your idea works on that simple example, but not on a slightly more complex interface which I have to deal with. In the example below, there are some edittexts which have additional space between them when subgroup2 is hidden. When subgroup2 is displayed again the spacing looks as it should. But when hidden, there is extra space. Any thoughts? Thanks in advance.

             

             

            var NULL_SIZE = [0,0],
                MAX_SIZE = [1000,1000];
            
            var  w = new Window('dialog', 'test'),
                 p = w.add('panel'),
                 g1 = p.add('group'),
                     subgroup1 = g1.add('group'),
                        s1 = subgroup1.add('statictext', undefined, "This is s1"),
                        e1 = subgroup1.add('edittext', undefined, "Edit your text..."),
                     // collapsible group
                     subgroup2 = g1.add('group'),
                         s2 = subgroup2.add('statictext', undefined, "This is s2"),
                         e2 = subgroup2.add('edittext', undefined, "Edit your e2 text..."),
                         c2 = subgroup2.add('checkbox', undefined, "c2 checkbox"),
                     // end of ollapsible group
                     subgroup3 = g1.add('group'),
                         s3 = subgroup3.add('statictext', undefined, "This is s3"),
                         e3 = subgroup3.add('edittext', undefined, "Edit your text..."),
                 s4 = p.add('statictext', undefined, "This is s4"),
                 b = w.add('button', undefined, 'Toggle');
            
            p.alignChildren = ['left', 'middle'];
            g1.alignChildren = ['left', 'middle'];
            subgroup2.alignChildren = ['left', 'middle'];
            
            
            g1.orientation = 'column';
            subgroup2.orientation = 'row';
            
            
            p.spacing = 5;
            g1.spacing = p.spacing/2;
            subgroup2.spacing = 5;
            
            // Initial state : hidden
            // ---
            subgroup2.visible = false;
            subgroup2.maximumSize = NULL_SIZE;
            
            // Toggles container's visibility
            // ---
            b.onClick = function()
            {
                 subgroup2.maximumSize = (subgroup2.visible ^=1) ? MAX_SIZE : NULL_SIZE;
                       g1.spacing = subgroup2.visible ? p.spacing : p.spacing/2;
                       //alert(g1.spacing);
                 w.layout.layout(true);
            };
            
            w.show();
            
            
            • 3. Re: [JS] Hide Extra Space in Dynamic Script UI
              CarlosCanto Adobe Community Professional & MVP

              that difference would be due to the height difference between the subgroups and the last static text.

               

              to fix, add an extra e4 and hide it

               

              subgroup4 = p.add('group'),
                   s4 = subgroup4.add('statictext', undefined, "This is s4"),
                   e4 = subgroup4.add('edittext', undefined, "Edit your text..."),
                   b = w.add('button', undefined, 'Toggle');
              
               e4.visible = false;
              

               

               

              //subgroup2.spacing = 5; // you don't need this, unless you really want it
              
              • 4. Re: [JS] Hide Extra Space in Dynamic Script UI
                Dan Rodney Adobe Community Professional

                That's still not fixing the extra space issue. I know the statictexts are moving in this example which I haven't bothered to fix (it was just another example I thought would be easy to start with). But there's more space between the edittexts. It's really that space that I'm try to avoid.

                • 5. Re: [JS] Hide Extra Space in Dynamic Script UI
                  CarlosCanto Adobe Community Professional & MVP

                  can you post a screen shot, showing the extra space. Add some markings, showing how you want it.

                  • 7. Re: [JS] Hide Extra Space in Dynamic Script UI
                    CarlosCanto Adobe Community Professional & MVP

                    this is what I get with the corrections I posted above, on Windoze

                     

                    hidgroup1.png

                    hidgroup2.png

                    1 person found this helpful
                    • 8. Re: [JS] Hide Extra Space in Dynamic Script UI
                      Dan Rodney Adobe Community Professional

                      Looks like the Mac is different for this type of spacing.

                      • 9. Re: [JS] Hide Extra Space in Dynamic Script UI
                        CarlosCanto Adobe Community Professional & MVP

                        I thought you were trying to fix the spacing for the last s4, this is what I get with your original code, I have no corrections here

                         

                        hidgroup1mac.png

                        hidgroup2mac.png

                        • 10. Re: [JS] Hide Extra Space in Dynamic Script UI
                          Dan Rodney Adobe Community Professional

                          Thanks for the effort Carlos. Your solution seems like it works on Windows, but I was hoping for a cross-platform solution. Oh the joys of ScriptUI

                          • 11. Re: [JS] Hide Extra Space in Dynamic Script UI
                            CarlosCanto Adobe Community Professional & MVP

                            you're welcome, this IS supposed to be cross-platform...Adobe style.

                            • 12. Re: [JS] Hide Extra Space in Dynamic Script UI
                              Dan Rodney Adobe Community Professional

                              "Adobe Style"... I like that, but I keep hearing it like "Gangnam Style" http://www.youtube.com/watch?v=9bZkp7q19f0&feature=related

                              • 13. Re: [JS] Hide Extra Space in Dynamic Script UI
                                CarlosCanto Adobe Community Professional & MVP

                                92 mil views? never heard of it, I must have been living under a rock, hahaha...I like it

                                • 14. Re: [JS] Hide Extra Space in Dynamic Script UI
                                  Harbs. Level 6

                                  You can try setting the spacing to 0 and spacing the elements by adding groups between them. That way you have more control over the spacing and you should be able to get the elements spaced the way you want.

                                   

                                  Harbs

                                  • 15. Re: [JS] Hide Extra Space in Dynamic Script UI
                                    Marc Autret Level 4

                                    Hi Dan,

                                     

                                    Maybe you should reset g1's spacing to zero and work instead with the subgroups' margins:

                                     

                                    // [...]
                                    
                                    p.spacing = 10;
                                    g1.spacing = 0; // no spacing
                                    
                                    var GP_MARGINS = [0,4,0,4]; // left, top, right, bottom
                                    
                                    subgroup1.margins = GP_MARGINS;
                                    subgroup2.margins = GP_MARGINS;
                                    subgroup3.margins = GP_MARGINS;
                                    
                                    // Initial state : hidden
                                    // ---
                                    subgroup2.visible = false;
                                    subgroup2.maximumSize = NULL_SIZE;
                                    
                                    // Toggles container's visibility
                                    // ---
                                    b.onClick = function()
                                    {
                                         subgroup2.maximumSize = (subgroup2.visible ^=1) ? MAX_SIZE : NULL_SIZE;
                                         w.layout.layout(true);
                                    };
                                    
                                    w.show();
                                    

                                     

                                    @+

                                    Marc

                                    • 16. Re: [JS] Hide Extra Space in Dynamic Script UI
                                      Dan Rodney Adobe Community Professional

                                      @Carlos You've been spending time here   But yes, that video is a recent and huge viral hit.

                                       

                                      @Marc That works on both Mac and PC! Brilliant. I must have tried so many combinations of things (no margins, no spacing, etc) but I must have never tried no spacing AND some margins. Thank you sooo much! I can't tell you how much I appreciate the help.