Adaptive layout for ScriptUI

Question

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 · Answer

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.

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