Manual Layout of children of a Tabbed Panel in ScriptUI

Report · May 30, 2017

I'm writing a script in ExtendScript and need to have lots of checkboxes on a panel inside a tab, I was wondering if anyone had experienced an issue with trying to use manual layout with Tabbed panels in ScriptUI. I could split the panel into several groups but because I'm using some loops to iterate through the "Checkboxes panel" so I can generate new layers and tasks after the "GroupName.children.length" gives me the count, I rather keep it all in one panel (besides, all the work was already done).

Is there a way to align children of a tab panel manually?

By the way, the code in the pictures is just a test I've been using to determine why this doesn't work with my code (which is over 3,000 lines and would be confusing to post here).

Here's a panel with checkboxes (Manual Layout):

Here's a Tabbed panel with checkboxes (Manual Layout):

**notice the layout doesn't take.

Thanks for your time!

Report · May 31, 2017

I think that, for a palette, ScriptUI automatically calls the AutoLayoutManager when the palette is shown, and the AutoLayoutManager proceeds recursively through the palette tree. If a container bounds are specified, it takes those bounds, else it calculates them. And for a docable panel, if you dont call the autolayout and bounds are not specified, then the container is not drawn at all.

So, if you use <undefined> for the bounds of a container, it can't work. But for tabs boudnds are uneasy to know since they are not drawn the same way in all versions/platform...

If you can't know the bounds, you need to use the autolayout, and specify a custom layout object for a given container, so that the bounds are not defined upon creation, but later, when the layout is called.

Following the lines of the StaircaseLayout in the Scripting guide:

function MyLayout_layout(){
    var container = this.container;
    var children = container.children, N = children.length, n, child;
    var numColumns = container.numColumns;
    var numRows = N<2 ? N : 1+Math.floor((N-1)/numColumns);
    
    var width = container.margins[0] + numColumns*container.itemSize[0] + (numColumns-1)*container.xspacing + container.margins[2];
    var height = N===0 ? 0 : container.margins[1] + numRows*container.itemSize[1] + (numRows-1)*container.yspacing + container.margins[3];
    
    var x = container.margins[0];
    var y = container.margins[1];
    n=0;
    while(n<N){
        child = children;
        child.location = [x,y];
        child.size = container.itemSize;
        ++n;
        if (n%numRows===0){
            x += child.size[0] + container.xspacing;
            y = container.margins[1];
            }
        else{
            y += child.size[1] + container.yspacing;
            };
        };
    if (container.type==="panel"){
        // some pretty random fixes
        width += 4;
        height += 4;
        if (container.text) height += 7;
        };
    container.preferredSize = [width, height];
    };
function MyLayout_resize(){};
function MyLayout(container){
    
    if (typeof container.numColumns === 'undefined') container.numColumns = 2;
    if (typeof container.itemSize === 'undefined') container.itemSize = [100, 19];
    if (typeof container.xspacing === 'undefined') container.xspacing = 5;
    if (typeof container.yspacing === 'undefined') container.yspacing = 5;    
    
    this.container = container;
    };
MyLayout.prototype.layout = MyLayout_layout;
MyLayout.prototype.resize = MyLayout_resize;
function MakeaPanel(this_obj_) {
var pan = (this_obj_ instanceof Panel)
? this_obj_
: new Window('palette', 'MainWindow', undefined); // [449,210,831,576]
  var tpanel = pan.add ("tabbedpanel");
  var MainTab = tpanel.add ("tab", undefined, "Main"); 
  var OptionsTab = tpanel.add ("tab", undefined, "Options");
  var OT_Panel = OptionsTab.add ("panel", undefined, "");
  CheckBGroup = MainTab.add('panel', void 0, 'CheckBoxGroup', {borderStyle: "etched"});
  
  for (var i=0; i<17; i++)  CheckBGroup.add('checkbox').text = 'CheckBox ' +i;
  CheckBGroup.margins = 10;
  CheckBGroup.numColumns = 5;
  CheckBGroup.layout = new MyLayout(CheckBGroup);
  return pan
  }
var w = MakeaPanel(this);
w instanceof Window ? w.show() : w.layout.layout(true);

Note: apparently the layout.layout() function is supposed to define the 'preferredSize' of the container, which is then used by the AutoLayoutManager in the process of giving size to things. If you can figure out what the resize function is supposed to do, please post your findings, i'm interested...

Xavier

Report · May 31, 2017

Thanks a lot Xavier, I think your explanation will definitely solve my problem, I'll keep you posted regarding implementation and anything I can find out about the resize function, hopefully, I won't hit any other road blocks.

Thanks again for taking the time to help me out.

Adobe Community

Manual Layout of children of a Tabbed Panel in ScriptUI

1 Correct answer