Indesign script update window?

Question

Edit: I am also open to other suggestions on what I could do.

How can I update my window with the onChange event? My solution works, but I need the groups to collapse when not visible.

w.DD.onChange = function() {
    switch (this.selection.text){
        case 'Headline':
                if(w.visiblegroup)
                w.visiblegroup.visible = false;
                w.visiblegroup = w.texted;
                w.texted.visible = true;
            break;
    }
}

I have tried to use w.show, w.update(with documentation, still not sure what .update actually does) after adding the elements in the case itself. But I can't figure this out.

w.DD.onChange = function() {
    switch (this.selection.text){
        case 'Headline':
                w.add('checkbox', undefined, 'User-Color');
                //w.show();
                w.update();
            break;
    }
}

Does anyone have a clue how this might work?

Answer 1

To collapse the groups and window you will need to use the layout() method of your window. This will load the LayoutManager that controls the automatic layout behavior for a window or container. The LayoutManager has a method called layout() too, this method invokes the automatic layout behaviour and invoked automatically the first time the window is displayed. Thereafter, the script must invoke it explicitly like so:

window.layout().layout();

An example of how to use the layout manager by Gerald Singelmann:

function main() { 
    var win = new Window("dialog"); 

    var maingroup = win.add("panel"); 
    maingroup.orientation = "column"; 
    add_group( maingroup ); 

    var show_btn = win.add("button", undefined, "show"); 
    show_btn.onClick = function() { 
        var txt = ""; 
        for (var n = 0; n < maingroup.children.length; n++) { 
            txt += maingroup.children[n].edit.text + "\n"; 
        } 
        alert("Da steht: \n" + txt ); 
    } 

    win.show(); 

    function add_group( maingroup ) { 
        var group = maingroup.add( "group" ); 
        group.edit = group.add("edittext", [undefined, undefined, 200, 20], maingroup.children.length ); 
        group.plus = group.add("button", undefined, "+"); 
        group.plus.onClick = add_btn; 
        group.minus = group.add("button", undefined, "-"); 
        group.minus.onClick = minus_btn; 
        group.index = maingroup.children.length - 1; 
        win.layout.layout( true ); 
        return group; 
    } 
    function add_btn ( e ) { 
        add_group( maingroup ); 
    } 
    function minus_btn ( e ) { 
        var ix = this.parent.index; 
        maingroup.remove( maingroup.children[ix] ); 
        win.layout.layout( true ); 
    } 
} 

source

Answer 2

I generally avoid using LayoutManager and do all teh maths by myself which I trust better but that's my humble opinion…

var w = new Window("dialog");
w.preferredSize = [200,200];
w.DD = w.add( 'dropdownlist', undefined, ["A","B"] );
w.DD.selection = 0;
w.DD.alignment = ["fill","top"];

//Setting a stacked group to items overlay
w.gp = w.add('group');
w.gp.orientation = 'stack';
w.gp.alignment = ["fill","top"];
w.gp.alignChildren = ["fill","top"];
w.gp.p1 = w.gp.add('panel',undefined, "A");
w.gp.p2 = w.gp.add('panel',undefined, "B");

//dummy text to show "collapsing"
w.st = w.add('statictext',undefined, "Collapse ?");

w.DD.onChange = function() {
    w.gp.p1.visible = w.DD.selection==0;
    w.gp.p2.visible = !w.gp.p1.visible;
    w.gp.p2.size.height =100;
    w.gp.size.height = w.gp.p1.visible? 50 : 100;
    w.st.location.y = w.gp.location.y+w.gp.size.height+10;
}

w.onShow = function() {
    w.gp.p2.visible=false;
    w.gp.size.height = w.gp.p1.size.height = 50;
    w.st.location.y = w.gp.location.y+w.gp.size.height+10;
}

w.show();

Loic