9 Replies Latest reply on Feb 2, 2011 5:36 AM by Joerg Stahlmann

    Scrollbar in a Dialog

    Joerg Stahlmann

      Hello,

      referred to the Adobe Toolscript PDF I tried to add an scrollbar to my dialog.

      I dont clearly understand how this works.

      In my snippet the scroll is added to the dialog but I cant manage to add content to it.

      Hopefully someone here can help me with that.

       

      // CREATE new Window (GERMAN)...
         var dlg = new Window('dialog', "Radiobutton Test with Scrollbar", [0, 0, 530, 150]);
         
         // add panel... 
         dlg.msgPnl = dlg.add('panel', [5,20,526,105], '');
           
          dlg.msgPnl.rbBtn1 = dlg.msgPnl.add('radiobutton', [5, 5, 100, 25], "Button1");
          dlg.msgPnl.rbBtn2 = dlg.msgPnl.add('radiobutton', [5, 30, 100, 50], "Button2");
          dlg.msgPnl.rbBtn3 = dlg.msgPnl.add('radiobutton', [5, 55, 100, 75], "Button3");
          dlg.msgPnl.rbBtn4 = dlg.msgPnl.add('radiobutton', [5, 80, 100, 100], "Button4");
          dlg.msgPnl.rbBtn5 = dlg.msgPnl.add('radiobutton', [5, 105, 100, 125], "Button5");
          dlg.msgPnl.rbBtn6 = dlg.msgPnl.add('radiobutton', [5, 130, 100, 150], "Button6");
          dlg.msgPnl.rbBtn7 = dlg.msgPnl.add('radiobutton', [5, 155, 100, 175], "Button7");
          dlg.msgPnl.rbBtn8 = dlg.msgPnl.add('radiobutton', [5, 180, 100, 185], "Button8");
          dlg.msgPnl.rbBtn9 = dlg.msgPnl.add('radiobutton', [5, 190, 100, 210], "Button9");
          dlg.msgPnl.rbBtn10 = dlg.msgPnl.add('radiobutton', [5, 215, 100, 235], "Button10");
          dlg.msgPnl.scrollbar = dlg.msgPnl.add('scrollbar',  [(dlg.msgPnl.bounds.width-20), 0,  (dlg.msgPnl.bounds.width), dlg.msgPnl.bounds.height]);
         // add ok button.
         dlg.okBtn = dlg.add('button', [426, 122, 526, 146], 'OK', {name:'ok'});   
          
          dlg.msgPnl.scrollbar.stepdelta = 40;
      
          dlg.msgPnl.scrollbar.minvalue = 0;
          dlg.msgPnl.scrollbar.maxvalue = dlg.msgPnl.bounds.height;
      
          dlg.msgPnl.scrollbar.scroll = function(scrollTo) {
              var pnl = this.parent;
              
              pnl.bounds.top = -scrollTo;
              pnl.bounds.bottom = -scrollTo + pnl._height;   
           }
          
           dlg.msgPnl.scrollbar.onChange = function() {
              var pnl = this.parent;
      
              pnl.scrollbar.scroll(pnl.scrollbar.value);
           }
          
         dlg.msgPnl.scrollbar.onChanging = function() {
              dlg.msgPnl.scrollbar.scroll(dlg.msgPnl.scrollbar.value);
          }
         // ONCLICK NO button...
         dlg.okBtn.onClick = function() {                                                                                                                                                                            
                  dlg.close(0);
         }
          
         dlg.center();
         dlg.show();
      
      

       

      Thx in advance!

        • 1. Re: Scrollbar in a Dialog
          Joerg Stahlmann Level 1

          please, does nobody know how to add a scrollbar to a dialog?

          • 2. Re: Scrollbar in a Dialog
            Michael L Hale Level 5

            Sorry you have not gotten any responses. And no I don't have an answer. It appears that scrollbars need manual layout and I use auto layout.

             

            For what it is worth, when I have more than 3 radiobuttons or checkboxes I use a dropdown or listbox. The multiselect property of either set to false mimics a group of radiobuttons. Set to true, a set of checkboxes.

            1 person found this helpful
            • 3. Re: Scrollbar in a Dialog
              Harbs. Level 6

              Scrollbars are very tricky to work with. You need to do a lot of the work to make elements appear like they are moving yourself.

               

              Check out two examples here:

              http://www.indiscripts.com/post/2010/06/claquos2-pie-chart-builder-for-indesign

               

              and here:

              http://www.indiscripts.com/post/2010/12/scriptui-challenge-jpeg-links-explorer

               

              Harbs

              1 person found this helpful
              • 4. Re: Scrollbar in a Dialog
                Joerg Stahlmann Level 1

                Thx a lot at both of you!

                I really thought I was kinda alone with this problem.

                I will check out the two examples the next days, hopefully I will find a solution!

                • 5. Re: Scrollbar in a Dialog
                  Michael L Hale Level 5

                  Harbs, both the scripts in the links you posted are binary. So they are not helpful for understanding how to code a scrollbar but the screenshots do show a good reason for using one.

                  • 6. Re: Scrollbar in a Dialog
                    Harbs. Level 6

                    Yeah. I know...

                     

                    Writing up a detailed explanation of its use would really be more helpful...

                     

                    Harbs

                    • 7. Re: Scrollbar in a Dialog
                      Marc Autret Level 5

                      Well, that's not the way I usually simulate scrolling, but let's experiment the canonical approach:

                       

                       

                      var N_TOT=25,          // total number of buttons
                           N_VIEW=5;          // number of visible buttons
                      
                      var dlg = new Window('dialog', "Scrollbar Test"),
                           panel = dlg.add('panel'),
                           gRadios = panel.add('group'),
                           sb = panel.add('scrollbar'),
                           bOK = dlg.add('button', undefined, "OK"),
                           rButtons = [];
                      
                      // UI Design
                      // ---
                      panel.orientation = 'row';
                      panel.margins = 0;
                      
                      gRadios.margins = 15;
                      gRadios.orientation = 'column';
                      gRadios.alignChildren = ['left','fill'];
                      
                      sb.alignment = ['right', 'fill'];
                      sb.preferredSize = [20,-1];
                      sb.value = sb.minvalue = 0;
                      sb.maxvalue = N_TOT>N_VIEW ? N_TOT-N_VIEW : 0;
                      sb.stepdelta = 20;
                      sb.enabled = !!sb.maxvalue;
                      
                      // Create radio buttons
                      // ---
                      var i;
                      for( i=0 ; i< N_TOT ; ++i )
                           {
                           rButtons[i] = gRadios.add('radiobutton', undefined, "Button"+(1+i));
                           if( N_VIEW==1+i )
                                { // snapshot
                                dlg.layout.layout(true);
                                panel.height = panel.size[1];
                                sb.height = sb.size[1];
                                dlg.height = dlg.size[1];
                                }
                           }
                      dlg.layout.layout(true);
                      
                      // Scrolling system
                      // ---
                      if( sb.enabled )
                           {
                           sb.offset = panel.size[1]-panel.height;
                      
                           panel.size = [panel.size[0], panel.height];
                           sb.size = [sb.size[0], sb.height];
                           dlg.size = [dlg.size[0], dlg.height];
                      
                           sb.onChanging = sb.onChange = function()
                                {
                                gRadios.bounds.top = -sb.value*sb.offset/sb.maxvalue;
                                };
                           }
                      
                      dlg.show();
                      
                      

                       

                       

                      Does it work?

                       

                      @+

                      Marc

                      • 8. Re: Scrollbar in a Dialog
                        Michael L Hale Level 5

                        Marc, thanks so much for you example code. I do have a question. Given the dynamic nature wouldn't it be better to do this...

                         

                        sb.stepdelta = N_VIEW;// clicking on up/down triangle scrolls one set of N_VIEW buttons
                        • 9. Re: Scrollbar in a Dialog
                          Joerg Stahlmann Level 1

                          Thx so much!

                          You guys are great!