Skip to main content
J
Joerg_Stahlmann
Known Participant
January 24, 2011
Answered

Scrollbar in a Dialog

  • January 24, 2011
  • 2 replies
  • 2358 views

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!
This topic has been closed for replies.
Correct answer Marc Autret
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 = 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
2 replies
Marc Autret
Marc AutretCorrect answer
Legend
January 31, 2011
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 = 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
M
Michael_L_Hale
Inspiring
January 31, 2011
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
J
Joerg_StahlmannAuthor
Known Participant
January 28, 2011
please, does nobody know how to add a scrollbar to a dialog? 
M
Michael_L_Hale
Inspiring
January 28, 2011
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.

        
                                                

        

    


            

                                        

            
                        

                                                                                                            
            






        

                    

    
    





    


                                        

                                                        

            
        
    






                                    
Terms & ConditionsAccessibility statement

            
        



        
            
    
        
    
        



        
        
        


        


        
        
        
        
                                                        

                            
    

                    

  

    

      
        
      
    

    

      
        Using the community
      
      
        Terms of use
      
      
        Privacy
      
      
        Cookie preferences
      
      
        Do not sell or share my personal information
      
      
        ad choicesAdChoices