Skip to main content
R
Romain_B_
Participant
December 11, 2012
Answered

Script UI dynamic resizing

  • December 11, 2012
  • 1 reply
  • 5211 views

Hi,

I've written a dialog where the user can choose beetwen one of two global options, or several standard options. When one of the 2 global options are selected, the other standard options are hidden.

When the standard option panel is hidden, the dialog box stays at the same size and it just makes an empty space. I tried to dynamicaly resize the dialog with the line "myWindow.layout.layout(true);", wich works, but then I'm loosing the orientation and the alignment values of the subpanels.

I'd like to know if there is any way with the layout() method not to update the whole hierarchy.

Here is my code, you can take it and reuse it for yourself.

To check the negative effects you can uncomment the 2 lines : // myWindow.layout.layout(true);

But then you should replace the orientation values "stack" by "row", and the alignment values "fill" by "left".

Thanks,

Romain

myWindow = new Window("dialog", "Option screen");

   

        var myPanelGlobal = myWindow.add("panel", undefined, "Global options", {borderStyle: "sunken"});

        myPanelGlobal.orientation = "column";

        myPanelGlobal.alignment = "top";

       

          

            var myGroupABC = myPanelGlobal.add("panel");

            myGroupABC.preferredSize = [260,-1];

            myGroupABC.orientation = "stack";

            myGroupABC.alignement = "fill";

                var myGroup1ABC = myGroupABC.add("group");

                myGroup1ABC.orientation = "row";

                myGroup1ABC.alignment = "left";

                    myGroup1ABC.add("staticText", undefined, "Project 1");

                var myGroup2ABC = myGroupABC.add("group");

                myGroup2ABC.orientation = "row";

                myGroup2ABC.alignment = "right";

                    var checkboxABC = myGroup2ABC.add("checkbox");

                    checkboxABC.value = false;

                   

            var myGroupXYZ = myPanelGlobal.add("panel");

            myGroupXYZ.preferredSize = [260,-1];

            myGroupXYZ.orientation = "stack";

            myGroupXYZ.alignement = "fill";

                var myGroup1XYZ = myGroupXYZ.add("group");

                myGroup1XYZ.orientation = "row";

                myGroup1XYZ.alignment = "left";

                    myGroup1XYZ.add("staticText", undefined, "Project 2");

                var myGroup2XYZ = myGroupXYZ.add("group");

                myGroup2XYZ.orientation = "row";

                myGroup2XYZ.alignment = "right";

                    var checkboxXYZ = myGroup2XYZ.add("checkbox");

                    checkboxXYZ.value = false;

           

        var myPanelStandard = myWindow.add("panel", undefined, "Standard options", {borderStyle: "sunken"});

        myPanelStandard.orientation = "column";

        myPanelStandard.alignment = "top";

            var myGroupA = myPanelStandard.add("panel");

            myGroupA.preferredSize = [260,-1];

            myGroupA.orientation = "column";

            myGroupA.alignment = "top";

                var mySubgroupA1 = myGroupA.add("group");

                mySubgroupA1.orientation = "row";

                mySubgroupA1.alignment = "left";

                    mySubgroupA1.add("staticText", undefined, "Option 1");

                var mySubgroupA2 = myGroupA.add("group");

                mySubgroupA2.orientation = "stack";

                mySubgroupA2.alignment = "fill";

                    var radioA1 = mySubgroupA2.add("radiobutton", undefined, "Yes");

                    radioA1.alignment = "left";

                    var radioA2 = mySubgroupA2.add("radiobutton", undefined, "No");

                    radioA2.alignment = "right";

                    radioA1.value = true;

                       

            var myGroupB = myPanelStandard.add("panel");

            myGroupB.preferredSize = [260,-1];

            myGroupB.orientation = "column";

            myGroupB.alignment = "top";

                var mySubgroupB1 = myGroupB.add("group");

                mySubgroupB1.orientation = "row";

                mySubgroupB1.alignment = "left";

                    mySubgroupB1.add("staticText", undefined, "Option 2");

                var mySubgroupB2 = myGroupB.add("group");

                mySubgroupB2.orientation = "stack";

                mySubgroupB2.alignment = "fill";

                    var radioB1 = mySubgroupB2.add("radiobutton", undefined, "Yes");

                    radioB1.alignment = "left";

                    var radioB2 = mySubgroupB2.add("radiobutton", undefined, "No");

                    radioB2.alignment = "right";

                    radioB1.value = true;

                   

            var myGroupC = myPanelStandard.add("panel");

            myGroupC.preferredSize = [260,-1];

            myGroupC.orientation = "column";

            myGroupC.alignment = "top";

                var mySubgroupC1 = myGroupC.add("group");

                mySubgroupC1.orientation = "row";

                mySubgroupC1.alignment = "left";

                    mySubgroupC1.add("staticText", undefined, "Options 3");

                var mySubgroupC2 = myGroupC.add("group");

                mySubgroupC2.orientation = "stack";

                mySubgroupC2.alignment = "fill";

                    var radioC1 = mySubgroupC2.add("radiobutton", undefined, "Yes");

                    radioC1.alignment = "left";

                    var radioC2 = mySubgroupC2.add("radiobutton", undefined, "No");

                    radioC2.alignment = "right";

                    radioC1.value = true;

        var myButtonGroup = myWindow.add("group");

        myButtonGroup.orientation = "row";

        myButtonGroup.alignment = "top";

            myButtonGroup.add ("button", undefined, "OK");

            myButtonGroup.add ("button", undefined, "Cancel");

    checkboxABC.onClick = function()

    {

        if (checkboxABC.value == true) {

            myGroupXYZ.visible = false;

            checkboxXYZ.value = false;

            myPanelStandard.visible = false;

        } else {

            myGroupXYZ.visible = true;

            myPanelStandard.visible = true;

        }

        if (myPanelStandard.visible == true) {

            myPanelStandard.maximumSize = [10000,10000];

        } else {

            myPanelStandard.maximumSize = [0,0];

        }

        // myWindow.layout.layout(true);

    };

    checkboxXYZ.onClick = function()

    {

        if (checkboxXYZ.value == true) {

            myGroupABC.visible = false;

            checkboxABC.value = false;

            myPanelStandard.visible = false;

        } else {

            myGroupABC.visible = true;

            myPanelStandard.visible = true;

        }

        if (myPanelStandard.visible == true) {

            myPanelStandard.maximumSize = [10000,10000];

        } else {

            myPanelStandard.maximumSize = [0,0];

        }

        // myWindow.layout.layout(true);

    };

    var myResultOptions = myWindow.show();

This topic has been closed for replies.
Correct answer Marc Autret

Hi Romain,

The problem is that preferredSize is a 'volatile' property of the ScriptUI widgets, it is lost on the first layout. So I think you need to play with minimumSize instead. Also, the 'stack' orientation may create vairous layout issues. By chance, it doesn't seem you really need it in your UI.

Here is an approach that could help you:

var PN_SETTINGS = {borderStyle: "sunken"},
    PN_MINSIZE = [260,0],
    PN_SPACING = 12,
    PN_GLOB_NB = 3,
    PN_STD_NB = 4,
    NULL_SIZE = [0,0],
    MAX_SIZE = [1000,1000];
var u,
    w = new Window('dialog', "Option screen"),
    onCheckboxClick = function()
        {
        var v = this.value,
            idx = this.parent.parent.properties.idx,
            i = pGlobal.children.length,
            g;
        while( i-- )
            {
            g = pGlobal.children;
            g.visible = v ? (idx===g.properties.idx) : true;
            g.maximumSize = g.visible ? MAX_SIZE : NULL_SIZE;
            pStandard.visible = !v;
            pStandard.maximumSize = v ? NULL_SIZE : MAX_SIZE;
            }
        this.window.layout.layout(1);
        },
    pGlobal = (function(p,i)
        {
        with( p )
            {
            orientation = 'column';
            alignment = 'top';
            spacing = 0; // IMPORTANT
            }
        for( i=1 ; i <= PN_GLOB_NB ; ++i )
        with( p.add('group',u,{idx:i}).add('panel') )
            {
            // Emulate vertical spacing
            parent.margins = [0,PN_SPACING,0,0];
            minimumSize = PN_MINSIZE;
            orientation = 'row';
            alignment = ['fill','top'];
            with( add('statictext') )
                {
                text = "Project "+i;
                alignment = ['left','center'];
                }
            with( add('checkbox') )
                {
                value = false;
                alignment = ['right','center'];
                }
            children[1].onClick = onCheckboxClick;
            }
        return p;
        })(w.add('panel', u, "Global", PN_SETTINGS)),
    pStandard = (function(p,i)
        {
        with( p )
            {
            orientation = 'column';
            alignment = 'top';
            spacing = PN_SPACING;
            }
        for( i=1 ; i <= PN_STD_NB ; ++i )
        with( p.add('panel') )
            {
            minimumSize = PN_MINSIZE;
            orientation = 'column';
            alignment = ['fill','top'];
            with( add('group') )
                {
                orientation = 'row';
                alignment = ['fill','top'];
                alignChildren = ['right', 'center'];
                add('statictext', u, "Option "+i).alignment = ['left','center'];
                add('radiobutton', u, "Yes").value = true;
                add('radiobutton', u, "No").value = false;
                }
            }
        return p;
        })(w.add('panel', u, "Standard", PN_SETTINGS)),
    gButtons = (function(g)
        {
        with( g )
            {
            orientation = 'row';
            alignment = 'top';
            add('button', u, "OK");
            add('button', u, "Cancel");
            }
        })(w.add('group'));
w.show();

@+

Marc

1 reply

Marc Autret
Marc AutretCorrect answer
Legend
December 12, 2012

Hi Romain,

The problem is that preferredSize is a 'volatile' property of the ScriptUI widgets, it is lost on the first layout. So I think you need to play with minimumSize instead. Also, the 'stack' orientation may create vairous layout issues. By chance, it doesn't seem you really need it in your UI.

Here is an approach that could help you:

var PN_SETTINGS = {borderStyle: "sunken"},
    PN_MINSIZE = [260,0],
    PN_SPACING = 12,
    PN_GLOB_NB = 3,
    PN_STD_NB = 4,
    NULL_SIZE = [0,0],
    MAX_SIZE = [1000,1000];
var u,
    w = new Window('dialog', "Option screen"),
    onCheckboxClick = function()
        {
        var v = this.value,
            idx = this.parent.parent.properties.idx,
            i = pGlobal.children.length,
            g;
        while( i-- )
            {
            g = pGlobal.children;
            g.visible = v ? (idx===g.properties.idx) : true;
            g.maximumSize = g.visible ? MAX_SIZE : NULL_SIZE;
            pStandard.visible = !v;
            pStandard.maximumSize = v ? NULL_SIZE : MAX_SIZE;
            }
        this.window.layout.layout(1);
        },
    pGlobal = (function(p,i)
        {
        with( p )
            {
            orientation = 'column';
            alignment = 'top';
            spacing = 0; // IMPORTANT
            }
        for( i=1 ; i <= PN_GLOB_NB ; ++i )
        with( p.add('group',u,{idx:i}).add('panel') )
            {
            // Emulate vertical spacing
            parent.margins = [0,PN_SPACING,0,0];
            minimumSize = PN_MINSIZE;
            orientation = 'row';
            alignment = ['fill','top'];
            with( add('statictext') )
                {
                text = "Project "+i;
                alignment = ['left','center'];
                }
            with( add('checkbox') )
                {
                value = false;
                alignment = ['right','center'];
                }
            children[1].onClick = onCheckboxClick;
            }
        return p;
        })(w.add('panel', u, "Global", PN_SETTINGS)),
    pStandard = (function(p,i)
        {
        with( p )
            {
            orientation = 'column';
            alignment = 'top';
            spacing = PN_SPACING;
            }
        for( i=1 ; i <= PN_STD_NB ; ++i )
        with( p.add('panel') )
            {
            minimumSize = PN_MINSIZE;
            orientation = 'column';
            alignment = ['fill','top'];
            with( add('group') )
                {
                orientation = 'row';
                alignment = ['fill','top'];
                alignChildren = ['right', 'center'];
                add('statictext', u, "Option "+i).alignment = ['left','center'];
                add('radiobutton', u, "Yes").value = true;
                add('radiobutton', u, "No").value = false;
                }
            }
        return p;
        })(w.add('panel', u, "Standard", PN_SETTINGS)),
    gButtons = (function(g)
        {
        with( g )
            {
            orientation = 'row';
            alignment = 'top';
            add('button', u, "OK");
            add('button', u, "Cancel");
            }
        })(w.add('group'));
w.show();

@+

Marc

A
Anonymous
December 13, 2012

Hi Marc.

Thanks for your answer, it works better that I thought it was possible to do. Actually your solution is not only helping me but also teaching me, as I never had examples in live code of ternary conditons or anonymous functions, and my code is far from being that concise. I'm rewriting some parts to adapt it and I'll take inspiration from it for my next productions.

Bye

Romain

Terms & ConditionsAccessibility statement
Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices