Post added GUI controls not drawing correctly

Question

This code works perfectly for what I'm trying to do, which is add a control element upon user clicking a button. My question is in two parts...1. If my source group that I am adding the new control to is the parent group (pal.grp), the control gets added perfectly and spaces itself out correctly. Which is the below FIG.2 code does. My issue is that I want add the control to a subgroup (pal.grp.grp1.grp2). Upon doing that, I click the add button numerous times and nothing shows, BUT as soon as I grab the corner of the window to resize it, BAM!, everything shows up and in the proper positions. So I am wondering if this is a UI drawing bug, or I'm just not getting the UI layout incorrectly recalculated? Any help appreciated.2. My second question is whether or not you can use a resource string for the add method instead of having to hard code the element properties. (panel.add("dropdownlist", [10,10,100,30], contents)). Ideally I would like to add three elements like in FIG.1.FIG.1"grp1: Group{orientation:'row', alignment:['fill','fill'], alignChildren:['fill','fill'],\          dd1: DropDownList{properties:["+list+"], alignment:['right','top']},\          ddB1: Button{text:'Batch', alignment:['right','top']},\}";FIG.2{          function sampleName(thisObj){                    function sampleName_buildUI(thisObj){                              var pal = (thisObj instanceof Panel) ? thisObj : new Window("palette", "PAL NAME", undefined, {resizeable:true});                              if (pal != null){                                        var res ="group {orientation:'column', alignment:['fill','top'], alignChildren:['fill','top'],\                                                  testBut1: Button{text:'Add'},\                                                  spacerOne: Panel{},\                                                  sourceDD: DropDownList{properties:{items:['item1', 'item2', 'item3', 'item4']}},\                                                  grp1: Group{orientation:'column', alignment:['fill','top'], alignChildren:['left','top'],\                                                            but1: Button{text:'sample1'},\                                                            but2: Button{text:'sample2'},\                                                            but3: Button{text:'sample3'},\                                                            grp2:Group{orientation:'column', alignment:['fill','top'], alignChildren:['left','top'],\                                                                      but4: Button{text:'sample4'},\                                                            },\                                                  },\                                        }";                                        pal.grp = pal.add(res);                                        //Default source DD selection                                        pal.grp.sourceDD.selection = 0;                                        //Add new DD onClick function                                        pal.grp.testBut1.onClick = function (){                                                  var list = new Array('item1', 'item2', 'item3', 'item4');                                                  addButtons(pal.grp, list);                                        }                                        pal.layout.layout(true);                                        pal.layout.resize();                                        pal.onResizing = pal.onResize = function () {this.layout.resize();}                              }                              return pal;                    }                    //          addButtons function                    function addButtons(panel, contents){                              try{                                        var newDD = panel[0] = panel.add("dropdownlist", [10,10,100,30], contents);///ARE RESOURCE STRINGS POSSIBLE FOR THIS ADD FUNCTION? (I need a dynamic size input)                                        newDD.selection = 0;                                        panel.layout.resize();                                        panel[0].show();                              }catch(err){alert("ERROR:
Something went wrong, please email torno@sydefxink.com with the info below:
--------------------------------------
OS: "+$.os+" ("+$.locale+")
AE: "+app.version+" ("+app.language+")

Error at line #"+err.line+"

"+err.toString());}                    }                    // Build/show the user interface                    var snPal = sampleName_buildUI(thisObj);                    if (snPal != null){                              if (snPal instanceof Window){                                        snPal.center();                                        snPal.show();                              }                    }          }          sampleName(this);}

David Torno · Accepted Answer

I figured out question 2 in a round about way, but it works, so i'm not complaining. Instead of trying to figure out a resource string style, I just added each element separately. This script only adds a dropdown, but my main script I needed a Group with a DropDownList and a Button together. Fig.A

To get the newly added dropdown to match the size of the main dropdown, I used the "bounds" window property to grab the dimensions then split the array for each coordinate. I then set alignments so the new elements would match the main source.

Fig.A

var dropdownListBounds = ddSize.bounds.toString().split(",");
var batchButBounds = omBSize.bounds.toString().split(",");
var newGrp = updatePanel[0] = updatePanel.add("group", [0,0,200,22], "");
newGrp.alignment = [ScriptUI.Alignment.RIGHT, ScriptUI.Alignment.TOP];
newGrp.alignChildren = [ScriptUI.Alignment.RIGHT, ScriptUI.Alignment.TOP];
var newDD = newGrp[0] = newGrp.add("dropdownlist", [dropdownListBounds[0], dropdownListBounds[1], dropdownListBounds[2], dropdownListBounds[3]], currentOMList);
newDD.selection = 0;
var newBatchBut = newGrp[0] = newGrp.add("button", [batchButBounds[0], batchButBounds[1], batchButBounds[2], batchButBounds[3]], "Batch");
updatePanel.layout.resize();
mainPanel.layout.layout(true);
updatePanel[0].show();

I updated this code to use my solution from above Fig.A. I also added a remove button as well.

{
          function sampleName(thisObj){
                    function sampleName_buildUI(thisObj){
                              var pal = (thisObj instanceof Panel) ? thisObj : new Window("palette", "PAL NAME", undefined, {resizeable:true});
                              if (pal != null){
                                        var res ="group {orientation:'column', alignment:['fill','top'], alignChildren:['fill','top'],\
                                                  testBut1: Button{text:'Add'},\
                                                  testBut2: Button{text:'Remove'},\
                                                  spacerOne: Panel{},\
                                                  sourceDD: DropDownList{properties:{items:['item1', 'item2', 'item3', 'item4']}},\
                                                  grp1: Group{orientation:'column', alignment:['fill','top'], alignChildren:['left','top'],\
                                                            but1: Button{text:'sample1'},\
                                                            but2: Button{text:'sample2'},\
                                                            but3: Button{text:'sample3'},\
                                                            grp2:Group{orientation:'column', alignment:['fill','top'], alignChildren:['left','top'],\
                                                                      but4: Button{text:'sample4'},\
                                                            },\
                                                  },\
                                        }";
                                        pal.grp = pal.add(res);
                                        //Default source DD selection
                                        pal.grp.sourceDD.selection = 0;
                                        //Add new DD onClick function
                                        pal.grp.testBut1.onClick = function (){
                                                  var list = new Array('item1', 'item2', 'item3', 'item4');
                                                  addButtons(pal, pal.grp.sourceDD, pal.grp.grp1.grp2, list);
                                        }
                                        pal.grp.testBut2.onClick = function (){
                                                  removeButtons(pal, pal.grp.grp1.grp2);
                                        }
                                        pal.layout.layout(true);
                                        pal.layout.resize();
                                        pal.onResizing = pal.onResize = function () {this.layout.resize();}
                              }
                              return pal;
                    }
                    //          addButtons function
                    function addButtons(mainPanel, ddSize, panel, contents){
                              var ddBounds = ddSize.bounds.toString().split(",");
                              var newDD = panel[0] = panel.add("dropdownlist", [ddBounds[0],ddBounds[1],ddBounds[2],ddBounds[3]], contents);
                              newDD.selection = 0;
                              newDD.alignment = [ScriptUI.Alignment.FILL, ScriptUI.Alignment.TOP];
                              mainPanel.layout.layout(true);
                              panel[0].show();
                    }
                    function removeButtons(mainPanel, updatePanel){
                              if(updatePanel.children.length > 1){
                                        updatePanel.remove(updatePanel.children[1])
                                        mainPanel.layout.layout(true);
                              }
                    }
                    // Build/show the user interface
                    var snPal = sampleName_buildUI(thisObj);
                    if (snPal != null){
                              if (snPal instanceof Window){
                                        snPal.center();
                                        snPal.show();
                              }
                    }
          }
          sampleName(this);
}

David Torno · Answer

Figured out question 1. I needed to use layout.layout(true) on the main parent panel. I added a third parameter the the addButtons(mainPanel, panel, contents) function for the main parent panel and changed panel.layout.resize() to mainPanel.layout.layout(true) and it's works now. So the new code is this...{ function sampleName(thisObj){ function sampleName_buildUI(thisObj){ var pal = (thisObj instanceof Panel) ? thisObj : new Window("palette", "PAL NAME", undefined, {resizeable:true}); if (pal != null){ var res ="group {orientation:'column', alignment:['fill','top'], alignChildren:['fill','top'],\ testBut1: Button{text:'Add'},\ spacerOne: Panel{},\ sourceDD: DropDownList{properties:{items:['item1', 'item2', 'item3', 'item4']}},\ grp1: Group{orientation:'column', alignment:['fill','top'], alignChildren:['left','top'],\ but1: Button{text:'sample1'},\ but2: Button{text:'sample2'},\ but3: Button{text:'sample3'},\ grp2:Group{orientation:'column', alignment:['fill','top'], alignChildren:['left','top'],\ but4: Button{text:'sample4'},\ },\ },\ }"; pal.grp = pal.add(res); //Default source DD selection pal.grp.sourceDD.selection = 0; //Add new DD onClick function pal.grp.testBut1.onClick = function (){ var list = new Array('item1', 'item2', 'item3', 'item4'); addButtons(pal, pal.grp.grp1.grp2, list); } pal.layout.layout(true); pal.layout.resize(); pal.onResizing = pal.onResize = function () {this.layout.resize();} } return pal; } // addButtons function function addButtons(mainPanel, panel, contents){ try{ var newDD = panel[0] = panel.add("dropdownlist", [10,10,100,30], contents);///ARE RESOURCE STRINGS POSSIBLE FOR THIS ADD FUNCTION? (I need a dynamic size input) newDD.selection = 0; mainPanel.layout.layout(true); panel[0].show(); }catch(err){alert("ERROR:
Something went wrong, please email "+email+" with the info below:
--------------------------------------
OS: "+$.os+" ("+$.locale+")
AE: "+app.version+" ("+app.language+")

Error at line #"+err.line+"

"+err.toString());} } // Build/show the user interface var snPal = sampleName_buildUI(thisObj); if (snPal != null){ if (snPal instanceof Window){ snPal.center(); snPal.show(); } } } sampleName(this);}

Sign up

To post, reply, or follow discussions, please sign in with your Adobe ID.

Sign in to Adobe Community

To post, reply, or follow discussions, please sign in with your Adobe ID.

Scanning file for viruses.

This file cannot be downloaded