Adaptive layout for ScriptUI

[Nik Ska]

I'm making a fairly simple two-button interface in ExtendScript and I want to make it so that if the window is horizontal, two buttons will stack side by side and fill the whole window, and if the window is vertical – one would be on top of the other.

Right now I'm trying to use use .onResizing and .onResize functions for Window object:

w.onResizing = w.onResize = function () {

    this.layout.resize ();

}

But even though I define a function like this:

var drawBttns = function(){

    var g = w.add ('group');

    if(w.size[0] < w.size[1]){

        g.orientation = 'column'

    }

    else{

        g.orientation = "row"

    }

    g.alignment = ['right', 'top'];

    g.alignChildren = 'fill';

    g.add ('button {text: "b1"}');

    g.add ('button {text: "b2"}').onClick = function(){

        w.close() 

    }

}

It won't redraw on resize. Any ideas?

[UQg]

I think that to achieve this kind of behaviour, you'd have to put most of the style inside the onResizing function.

Something like this:

var w = new Window("dialog", "test", undefined, {resizeable: true});

w.g = w.add("group{alignment: ['fill', 'top'], alignChildren: ['fill', 'fill'],\
                            b1:Button{text:'b1'}, b2:Button{text:'b2'}}");
w.g.b2.onClick=function(){w.close();};
w.onResizing = function () {
    var eps = this.size[0]<this.size[1];
    if (eps !== this.eps){
        this.g.orientation = eps ? 'column' : 'row';
        this.layout.layout(true);
        this.eps = eps;
        };
    this.layout.resize();
    };
w.show();

(the 'eps' variable is there to remember the previous state of the window, so the layout is not done on every resizing step, but only when needed).

Xavier.