19 Replies Latest reply on Aug 7, 2018 11:51 AM by tokuredit

    How to make a scrollbar work in a dialog box.

    Ps-Design Level 1

      I have a dialog box containing a group with "16 radio button options". My goal is to pack it so it looks smaller. The best way I found it was by adding a scrollbar in the group of buttons, I searched and got a script but could not get it to work. Anyone have any ideas how to help me with this project? Any help is valid. Thank you...

       

      var w = new Window ("dialog", "scrollbar");
           w.orientation = "row";  
        w.alignChildren = "top";  // insert this line
           w.location = [600,180]  
          var radio_group = w.add ('panel', [0,0,160,190],);
          var sbar = w.add ("scrollbar", [5,0,20,190]);
           
           radio_group.alignChildren = "left";
        radio_group.add ("radiobutton",[5, 10, 100,   0], "Alça e Interior Azul"); 
        radio_group.add ("radiobutton",[5, 35, 100,  0], "Alça e Interior Vermelho"); 
           radio_group.add ("radiobutton",[5, 60, 100,   0], "Alça e Interior Preta");
           radio_group.add ("radiobutton",[5, 85, 100,  0], "Alça e Interior Roso"); 
           radio_group.add ("radiobutton",[5, 110, 100, 0], "Do Tipo Toda Branca");
           radio_group.add ("radiobutton",[5, 135, 100, 0], "Do Tipo Toda Preta");
           radio_group.add ("radiobutton",[5, 160, 100, 0], "Do Tipo Pratiada"); 
           radio_group.add ("radiobutton",[5, 185, 100, 0], "Do Tipo Caneca Mágica");
           radio_group.add ("radiobutton",[5, 210, 100, 0], "Interior Azul");
           radio_group.add ("radiobutton",[5, 235, 100, 0], "Interior Roso");
           radio_group.add ("radiobutton",[5, 255, 100, 0], "Interior Verde");
           radio_group.add ("radiobutton",[5, 285, 100, 0], "Interior Vermelho");
           radio_group.add ("radiobutton",[5, 310, 100, 0], "Interior Preto");
           radio_group.add ("radiobutton",[5, 335, 100, 0], "Modelo dia dos Pais");
           radio_group.add ("radiobutton",[5, 360, 100, 0], "Caneca de Aluminio");
        radio_group.add ("radiobutton",[5, 385, 100, 0], "Modelo Simples");
         
          
          var btnGroup = w.add("group");
          btnGroup.orientation = "column";  
          btnGroup.add ('button', {x:90, y:125, width:80, height:25}, 'Ok', {name:'ok'});
          btnGroup.add ('button', {x:240, y:125, width:80, height:25}, 'Cancel', {name:'cancel'});
        // set dialog defaults 
        radio_group.children[0].value = true;
      
      function selected_rbutton (rbuttons) {
        for (var i = 0; i < rbuttons.children.length; i++) {
        if (rbuttons.children[i].value == true) {
        return rbuttons.children[i].text; 
        }
        }
        }
           
        // Linkar com os Scrips.jsx
      w.show () 
      
        • 1. Re: How to make a scrollbar work in a dialog box.
          Chuck Uebele Adobe Community Professional & MVP

          Rather than use radio buttons, if you have that many, you should use a drop down list.

          • 2. Re: How to make a scrollbar work in a dialog box.
            Ps-Design Level 1

            I found this simple model of Drop dow list:

            The problem is that every drop-down list I encounter, the event executes before confirming with the OK button. It would be interesting to choose the option, click ok and then the event.Chuck Uebele How do I change?

            var w = new Window ("dialog", "dropdownlist" );
            w.orientation = "column";
            w.alignChildren = "top";  
            //w.add ("statictext", undefined, "Intens:");
            var lista = w.add ("dropdownlist", undefined, [
            "Alça e Interior Azul",
            "Alça e Interior Vermelho", "Alça e Interior Preta",
            "Alça e Interior Roso", "Do Tipo Toda Branca",
            "Do Tipo Pratiada", "Do Tipo Caneca Mágica",
            "Interior Azul", "Interior Roso", "Interior Verde",
            "Interior Vermelho", "Interior Preto", "Modelo dia dos Pais", 
            "Caneca de Aluminio", "Modelo Simples"
            ]);
            
            
            var btnGroup = w.add ("group");
            btnGroup.orientation = "row";
            
            
            lista.selection = 0;
            btnGroup.add ("button",{x:240, y:125, width:60, height:25}, 'Cancel', {name:'cancel'});
            btnGroup.add ("button",{x:90, y:125, width:60, height:25}, "OK");
            btnGroup.alignment = "right";
            
            
            lista.onChange = function(){  
                  switch(parseInt( lista.selection)){  
                    case 0:  
                        //code here  
                        alert("Alça e Interior Azul");  
                        break;  
                    case 1:  
                        //code here  
                        alert("Alça e Interior Vermelho"); 
                        break;  
                    case 2:  
                        //code here  
                        alert("Alça e Interior Preta");  
                        break;          
                    }      
                }  
            
            
            w.show ();
            
            • 3. Re: How to make a scrollbar work in a dialog box.
              Chuck Uebele Adobe Community Professional & MVP

              Don't put the code to do something in the onChange function for the dropdownlist. Add it to an onClick function for the Okay button.

              • 4. Re: How to make a scrollbar work in a dialog box.
                Chuck Uebele Adobe Community Professional & MVP
                var dlg = new Window('dialog','Dropdown Sample');
                var dropList = ["Alça e Interior Azul", "Alça e Interior Vermelho", "Alça e Interior Preta", 
                "Alça e Interior Roso", "Do Tipo Toda Branca", 
                "Do Tipo Pratiada", "Do Tipo Caneca Mágica", 
                "Interior Azul", "Interior Roso", "Interior Verde", 
                "Interior Vermelho", "Interior Preto", "Modelo dia dos Pais", 
                "Caneca de Aluminio", "Modelo Simples" ];
                
                dlg.dropDown = dlg.add('dropdownlist', undefined, dropList);
                dlg.ok = dlg.add('button', undefined, 'Okay');
                dlg.cancel = dlg.add('button', undefined, 'Cancel');
                
                dlg.ok.onClick = function(){
                    dlg.close()
                    switch(parseInt(dlg.dropDown.selection)){
                            case 0:   
                            //code here   
                            alert("Alça e Interior Azul");   
                            break;   
                        case 1:   
                            //code here   
                            alert("Alça e Interior Vermelho"); 
                            break;   
                        case 2:   
                            //code here   
                            alert("Alça e Interior Preta");   
                            break; 
                        }
                    }
                
                dlg.cancel.onClick = function(){dlg.close()}
                
                dlg.show()
                
                1 person found this helpful
                • 5. Re: How to make a scrollbar work in a dialog box.
                  Ps-Design Level 1

                  It looks great! Nice work Chuck Uebele To be perfect, it would be nice to have the first item on the list appear when the dialog box opens. Thank you.

                  In my script this is possible with this line:

                  lista.selection = 0;
                  
                  • 6. Re: How to make a scrollbar work in a dialog box.
                    Chuck Uebele Adobe Community Professional & MVP

                    Yes you can do that. I normally do that also.

                    • 7. Re: How to make a scrollbar work in a dialog box.
                      Jarda Bereza Level 4

                      I have same question, but I can't use dropdown because I already have many dropdowns.

                      I guess I should move panel position on scrollbar event or something similar.

                      • 8. Re: How to make a scrollbar work in a dialog box.
                        Chuck Uebele Adobe Community Professional & MVP

                        AFAIK, you can't add a scroll bar to the UI, unfortunately. That's why I'm using tabs now for mine:

                        • 9. Re: How to make a scrollbar work in a dialog box.
                          Jarda Bereza Level 4

                          I created scrollable panel and it works for me. Anyway it is not so good as native support would be.

                           

                          scrollable-element.gif

                          .

                           

                          app.bringToFront();
                          #target Photoshop
                          
                          
                          var windowResource = """dialog {  
                              orientation: 'column', 
                              alignChildren: ['fill', 'top'],  
                              preferredSize:[300, 230], 
                              text: 'Scroll panel example',  
                              margins:15, 
                              
                              scrollPanel: Panel { 
                                  orientation: 'row', 
                                  alignChildren: 'top', 
                                  margins:0, 
                                  spacing:0,
                                  text: '',
                                  
                                  innerScrollPanel: Panel{
                                      orientation: 'column', 
                                      alignChildren: 'left', 
                                      alignment: 'top',
                                      margins:0, 
                                      spacing:0,
                                      text: '',
                                      properties: {borderStyle:'none'}
                                  },
                                  
                                  panelScrollbar: Scrollbar { 
                                      alignment: 'fill',
                                      margins:0,
                                      spacing:0
                                  }
                              },
                              
                              bottomGroup: Group{ 
                                  cancelButton: Button { text: 'Cancel', properties:{name:'cancel'}, size: [120,24], alignment:['right', 'center'] }, 
                                  applyButton: Button { text: 'OK', properties:{name:'ok'}, size: [120,24], alignment:['right', 'center'] }, 
                                  orientation: 'row'
                              }
                          }"""
                          var win = new Window(windowResource);
                          
                          
                          var scrollPanel = win.scrollPanel;
                          var innerScrollPanel = scrollPanel.innerScrollPanel;
                          var scrollBar = scrollPanel.panelScrollbar;
                          
                          
                          scrollPanel.size=[300,400];
                          innerScrollPanel.preferredSize.width = 300-20;
                          
                          
                          scrollBar.preferredSize.width = 16;
                          scrollBar.onChanging = function (){
                              var outerPanel = this.parent;
                              var innerPanel = outerPanel.children[0];
                              
                              var innerWidth = innerPanel.bounds.width;
                              var innerHeight = innerPanel.bounds.height;
                              
                              var outerHeight = outerPanel.bounds.height;
                              
                              this.minvalue = 0;
                              this.maxvalue = innerHeight-outerHeight;
                              
                              this.stepdelta = Math.round(outerHeight / 10);
                              this.jumpdelta = Math.round(outerHeight / 5);
                              
                              var topOffset = -this.value;
                              innerPanel.bounds = {x:0, y:topOffset, width:innerWidth,height:innerHeight};
                          }
                          
                          
                          // Storing reference to elements
                          var dropdown = {};
                          var label = {};
                          var panel = {};
                          
                          
                          // Add some sample UI content
                          for(var i = 0; i < 15; i++){
                              panel[i] = win.scrollPanel.innerScrollPanel.add('panel',undefined,'',{justify:'left', borderStyle:'none'});
                              panel[i].orientation = 'row';
                              panel[i].alignment = 'fill';
                              label[i] = panel[i].add('statictext',undefined,"Test dropdown "+i+":");
                              dropdown[i] = panel[i].add('dropdownlist',undefined,["a","b"]);
                          }
                          
                          
                          win.bottomGroup.applyButton.onClick = function() {
                              win.close();
                          }
                          
                          
                          win.show();
                          
                          2 people found this helpful
                          • 10. Re: How to make a scrollbar work in a dialog box.
                            Chuck Uebele Adobe Community Professional & MVP

                            Nice! It would be good to have a native option.

                            • 11. Re: How to make a scrollbar work in a dialog box.
                              Jarda Bereza Level 4

                              Only "staticText" and "editText" has native scrollbar.

                               

                              They also has some properties as panels. I will try use is it as panel. But I don't think this will work properly :-D

                              • 12. Re: How to make a scrollbar work in a dialog box.
                                remydg

                                Is it possible to make the window resizeable ?

                                • 14. Re: How to make a scrollbar work in a dialog box.
                                  r-bin Level 5

                                  remydg

                                   

                                  Is it possible to make the window resizeable ?

                                  Try this

                                   

                                  var d = new Window("dialog", "Resizeable dialog", undefined, {resizeable: true, minimizeButton:true, maximizeButton: true, closeButton: true} );
                                  
                                  d.add("statictext", undefined, "SOME TEXT");
                                  
                                  d.minimumSize = [150,200]; 
                                  
                                  d.preferredSize = [300, 300]; // in CC2018 your can't downsize, in CS6 all ok
                                  
                                  d.show()
                                  
                                  
                                  • 15. Re: How to make a scrollbar work in a dialog box.
                                    remydg Level 1

                                    This window is not resizeable

                                    • 17. Re: How to make a scrollbar work in a dialog box.
                                      remydg Level 1

                                      Actually I am Trying to do the same window than the answer number nine of that page

                                      Re: How to make a scrollbar work in a dialog box.

                                      • 18. Re: How to make a scrollbar work in a dialog box.
                                        r-bin Level 5

                                        Try this code. Works in CC2018. In CS6 works better ..

                                        The dialog box can be resized using the mouse.

                                        It was checked on Windows

                                         

                                        var d = new Window("dialog", "Resizeable dialog", undefined, {resizeable: true, minimizeButton:true, maximizeButton: false, closeButton: true} );  
                                        
                                        var w = 900;
                                        var h = 500;
                                        
                                        d.orientation = "column";    
                                        d.margins = 0;
                                        d.spacing = 0;
                                        d.alignChildren = 'left';
                                        
                                        with (ver_grp = d.add("group"))
                                            {
                                            orientation = "row";    
                                            alignment = 'fill';  
                                            margins = 0;
                                            spacing = 0;
                                        
                                            with (main_grp = add("group"))
                                                {
                                                orientation = "column";    
                                                alignment = "left"; 
                                                alignChildren = ["fill", "center"];
                                                margins = 20;
                                                spacing = 20;
                                                preferredSize = [w,h]
                                            
                                                with (add("group"))
                                                    {
                                                    orientation = "column";    
                                        
                                                    add("edittext", undefined, "11111111111111111").alignment = "left";  
                                                    add("edittext", undefined, "22222222222222222");  
                                        
                                                    add("edittext", undefined, "33333333333333331");  
                                                    add("edittext", undefined, "44444444444444444");  
                                                    add("edittext", undefined, "55555555555555555");  
                                                    add("edittext", undefined, "66666666666666666");  
                                                    add("edittext", undefined, "77777777777777777");  
                                                    }
                                        
                                                with (add("group"))
                                                    {
                                                    orientation = "row";    
                                        
                                                    add("button", undefined, "Ok");  
                                                    add("button", undefined, "Button 1");  
                                                    add("button", undefined, "Button 2");  
                                                    add("button", undefined, "Button 3");  
                                                    add("button", undefined, "Button 4");  
                                                    add("button", undefined, "Button 5");  
                                                    }
                                                }
                                          
                                        
                                            s_ver = add("scrollbar", undefined, 0, 0, 500);  
                                            s_ver.preferredSize.width = 15;
                                            s_ver.stepdelta = 100;  
                                            s_ver.jumpdelta = 100;  
                                            }
                                        
                                        s_hor = d.add("scrollbar", undefined, 0, 0, 500);  
                                        s_hor.stepdelta = 100;  
                                        s_hor.jumpdelta = 100;  
                                        
                                        s_ver.onChanging = function ()
                                            {  
                                            main_grp.size=[w,h];
                                            main_grp.location[1] = -this.value;  
                                            d.layout.layout();
                                            }  
                                        
                                        s_hor.onChanging = function ()
                                            {  
                                            main_grp.size=[w,h];
                                            main_grp.location[0] = -this.value;  
                                            d.layout.layout();
                                            }  
                                        
                                        d.onShow = function()
                                            {
                                            d.onResizing();
                                            }
                                        
                                        d.onResizing = function()
                                            {
                                            ver_grp.size[0] = d.size[0] - 20;
                                            ver_grp.size[1] = d.size[1] - 20;
                                        
                                            main_grp.size = ver_grp.size;
                                        
                                            main_grp.location[0] = -s_hor.value;  
                                            main_grp.location[1] = -s_ver.value;  
                                        
                                            s_ver.size[1] = d.size[1] - 20;
                                            s_hor.size[0] = d.size[0] - 20;
                                        
                                            this.layout.resize();
                                        
                                            s_hor.value = 0
                                            s_ver.value = 0
                                            }
                                        
                                        
                                        ver_grp.size=[340,260];
                                        
                                        d.show()  
                                        
                                        1 person found this helpful
                                        • 19. Re: How to make a scrollbar work in a dialog box.
                                          tokuredit Level 1

                                          Very good, I have not seen anything like it anywhere. I've always been curious and willing to understand how to do these windows that use scroll bars. r-bin you are a very friendly and helpful person with everyone here. Thanks for the above script!