8 Replies Latest reply on Sep 29, 2009 8:53 AM by Harbs.

    dynamically change a dialog with ScriptUI

    G. Singelmann Level 3

      Hello all,

       

      I would like to create a dialog that changes its options depending on what radio button is selected.

       

      I get it to work inasmuch as the groups in question can be hidden or disabled. This is a gist of my efforts so far:

       

       

       

      var suiDlg = new Window("dialog", "Job verarbeiten");

      var suiMain = suiDlg.add("group");

      suiMain.orientation = "column";


      var thePanel = suiMain.add("panel", undefined, "my choices");

      firstRB = thePanel.add("radiobutton", undefined, "first dropdown");

      firstRB.onClick = hideSecond;

      secondRB = thePanel.add("radiobutton", undefined, "second dropdown");

      secondRB.onClick = hideFirst;

      thirdRB = thePanel.add("radiobutton", undefined, "hide both");

      thirdRB.onClick = hideBoth;



      var thePanel1 = suiMain.add("panel", undefined, "dropdown1");

      var theDropdown1 = thePanel1.add("dropdownlist");

      var item = theDropdown1.add("item", "first choice" );

      var item = theDropdown1.add("item", "second choice" );


      var thePanel2 = suiMain.add("panel", undefined, "dropdown2");

      var theDropdown2 = thePanel2.add("dropdownlist");

      var item = theDropdown2.add("item", "third choice" );

      var item = theDropdown2.add("item", "fourth choice" );


      var theOKButton = suiMain.add("button", undefined, "OK");


      suiDlg.show();


      function hideFirst() {

           thePanel1.enabled = false;

           thePanel2.enabled = true;

      }

      function hideSecond() {

           thePanel1.enabled = true;

           thePanel2.enabled = false;

      }

      function hideBoth() {

           thePanel1.enabled = false;

           thePanel2.enabled = false;

      }

       

       

       

      Alternatively I could hide the dropdownlists by changing the functions to...

       

       

      function hideFirst() {

           thePanel1.visible = false;

           thePanel2.visible = true;

      }


       

      ...but this leaves a gap where previously the dropdown was shown.

       

      Two questions:

      1) My hopes were that I could redraw the dialog with

       

      function hideBoth() {

           thePanel1.visible = false;

           thePanel2.visible = false;

           suiDlg.layout.layout(recalculate);

      }

       

      thus removing the gap, but this does not seem to work. It throws a runtime error but no real explanation.

       

      2) Shouldn't it be possible to define a default setting by calling

      firstRB.notify();

      immediately before showing the window or afterwards?

      This would be a lot mor flexible than trying to figure out each control's setting when creating it.

       

      Thank you for any pointers you might give me

       

      Gerald

        • 1. Re: dynamically change a dialog with ScriptUI
          Harbs. Level 6

          If you want two elements to take the same place, use "stack" alignment 

          instead of "column" or "row". You then hide one or the other...

           

          Harbs

          • 2. Re: dynamically change a dialog with ScriptUI
            G. Singelmann Level 3

            harbs, thank you.

            Yes I found that example in the Toolguide.

             

            But it is not what I want.

             

            My dialog has two dropdowns that can both be visible under each other or both be invisible or either one alone.

            I.e. I have four choices that either take two dropdowns, or only one, or none at all.

             

            I can hide the dropdowns accordingly but I so far fail to resize the dialog. Gaps can be so ugly...

             

            Enclosed my latest research-script. You'll understand the problem better when you give it a go.

             

            Thank you again

            Gerald

            • 3. Re: dynamically change a dialog with ScriptUI
              Bob Stucky Adobe Employee

              To get Window.layout.layout() to work, you need to pass it a true value, e.g. myWindow.layout.layout( true );


              Without having looked at your source other than the first post, there's a difference between visible/not visible, and there/not there. Just because it's not visible doesn't mean it's not there. The layout manager won't adjust the layout based on visibility settings.

               

              Bob

              • 4. Re: dynamically change a dialog with ScriptUI
                G. Singelmann Level 3

                >there's a difference between visible/not visible, and there/not there.

                 

                I was afraid of that.

                 

                In other words if I want the dialog to resize I need to make the dropdown be "not there". Do you know how I would go about with this? Is this a viable option at all? It seems rather a hassle to remove a dropdown only to try to re-insert it later, when the user changes its mind.

                 

                Or is there an easy/reasonable way?

                 

                Thank you

                Gerald

                • 5. Re: dynamically change a dialog with ScriptUI
                  Harbs. Level 6

                  If you separate the adding of your elements into functions, it 

                  shouldn't be too hard to add and remove them on the fly. In my quick 

                  test, it didn't work, but I didn't try to remove all the elements 

                  before calling the layout manager. It'll probably take some playing 

                  with until you get it right...

                   

                  I've never personally tried to do this kind of re-arranging of 

                  existing dialogs, so if you're successful, let us know!

                   

                  Harbs

                  • 6. Re: dynamically change a dialog with ScriptUI
                    Bob Stucky Adobe Employee

                    I have done a number of dialogs that dynamically change themselves using layout.layout( true ).

                     

                    I have found it useful when you need to add new widgets (like adding criteria in the find dialog in Bridge, for example).

                     

                    I'll play with it a bit and let you know what I find.

                     

                    Bob

                    • 7. Re: dynamically change a dialog with ScriptUI
                      Bob Stucky Adobe Employee

                      Here's an example of how to do it:

                       

                      go = function() {
                          var w = new Window("dialog", "Wow");
                          w.group = w.add( "group" );
                          w.group.orientation = "column";
                          w.addList = new Array();
                          w.addBtn = w.add( "button", undefined, "Add" );
                          w.addBtn.onClick = function() {
                              this.window.addList.push( w.group.add( "statictext", undefined, "How now brown cow" ) );
                              this.window.layout.layout( true );
                          }
                          w.removeBtn = w.add( "button", undefined, "Remove" );
                          w.removeBtn.onClick = function() {
                              if ( this.window.addList.length > 0 ) {
                                  $.writeln( "removing" );
                                  this.window.group.remove( this.window.addList.pop() );
                                  this.window.layout.layout( true );
                              }
                          }

                       

                          w.closeBtn = w.add( "button", undefined, "Close" );
                          w.closeBtn.onClick = function() {
                              this.window.close();
                          }
                          w.show();
                      }

                       

                      go();

                       

                      Note the behavior of the group in terms of size and spacing. When you start, there's space above and below the group, the group's height is essentially zero. Once you add to the group, if you remove everything, the group will not shrink past the size necessary to contain one element. My guess is that's a bug.

                       

                      All containers (group, panel, window) have the add and remove methods. The reason for the group was to force all of the "adds" to be above the buttons. An "add" call will add to the bottom of the container.

                       

                      Regards

                       

                      Bob

                      • 8. Re: dynamically change a dialog with ScriptUI
                        Harbs. Level 6

                        Hi Bob,

                         

                        Thanks for the sample. Cool stuff!

                         

                        If I ever need to do this, your sample will save me some fiddling 

                        time...

                         

                        Harbs