Manual Layout of children of a Tabbed Panel in ScriptUI

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