Responsive UI

[Michal__d]

Hello.
I have not been able to solve this problem for two weeks. I want to make script with responsive UI. I created the script what works exacly as i want when is launched as ScriptUI Panel, but when i try launch it from File -> Scripts -> Run Script File... i got an error. 
I want to make panel with buttons that will adjust to the size of the window.
Here is my code:

(function (thisObj) {
    function build_UI(thisObj) {
        var myPanel = (thisObj instanceof Panel) ? (thisObj) : (new Window("palette", "Responsive UI", undefined, { resizeable: true }));
        myPanel.alignChildren = ["left", "top"];
        myPanel.margins = 2;
        myPanel.spacing = 2;
        buttons = ["Button One", "Button Two", "Button Three", "Button Four", "Button Five", "Button Six", "Button Seven", "Button Eight", "Button Nine", "Settings"];
        myPanel.alignChildren = ["fill", "fill"];
        myPanel.orientation = "stack";
        groupOne = myPanel.add("group", undefined, "groupOne");
        groupOne.alignChildren = ["fill", "fill"];
        groupOne.orientation = (myPanel.size.width > myPanel.size.height) ? "row" : "column";
        groupOne.margins = 0;
        groupOne.spacing = 2;
        groupTwo = myPanel.add("group", undefined, "groupTwo");
        groupTwo.alignChildren = ["fill", "fill"];
        groupTwo.orientation = (myPanel.size.width > myPanel.size.height) ? "row" : "column";
        groupTwo.margins = 0;
        groupTwo.spacing = 2;
        var btnGroupOne = new Array();
        for (var i = 0, buttonsLength = buttons.length; i < buttonsLength; i++) {
            btnGroupOne = groupOne.add("button", undefined, buttons.toString());
        }
        var btnGroupTwo = new Array();
        for (var j = 0, buttonsLength = buttons.length; j < buttonsLength; j++) {
            btnGroupTwo = groupTwo.add("button", undefined, buttons.toString() + " iconButton");
        }
        if (myPanel instanceof Window) {
            myPanel.center();
            myPanel.show();
        }
        else {
            myPanel.layout.layout(true);
            myPanel.layout.resize();
            myPanel.onResizing = myPanel.onResize = function () {
                groupOne.orientation = myPanel.size.width > myPanel.size.height ? "row" : "column";
                groupTwo.orientation = myPanel.size.width > myPanel.size.height ? "row" : "column";
                if (myPanel.size.width > 250 && myPanel.size.width < myPanel.size.height) {
                    groupTwo.visible = true;
                    groupOne.visible = false;
                } else {
                    groupOne.visible = true;
                    groupTwo.visible = false;
                }
                myPanel.layout.resize();
            }
        }
    }
    build_UI(thisObj);
})(this);

Every time i got an error "myPanel.size is undefined", when i set window size as [50,50,500,500] i got an empty window.

What i am doing wrong that my script doesn't work as a "normal" pallete window?

Is it possible to create that interface which will work as a ScriptUI Panel and palette window, or i need to make two separate scripts?
How to make button (group of buttons) whitch will adjust size to the width and height of the window?

Did anyone has any idea?

I will be very grateful.
Michal

[Tomas Sinkunas · Accepted solution]

All you have to do is move myPanel.onResizing method outside the else statement. Here's a version that works.

(function(thisObj) {
    function build_UI(thisObj) {
        var myPanel = (thisObj instanceof Panel) ? (thisObj) : (new Window("palette", "Responsive UI", undefined, {
            resizeable: true
        }));
        myPanel.alignChildren = ["left", "top"];
        myPanel.margins = 2;
        myPanel.spacing = 2;
        buttons = ["Button One", "Button Two", "Button Three", "Button Four", "Button Five", "Button Six", "Button Seven", "Button Eight", "Button Nine", "Settings"];
        myPanel.alignChildren = ["fill", "fill"];
        myPanel.orientation = "stack";
        groupOne = myPanel.add("group");
        groupOne.alignChildren = ["fill", "fill"];
        groupOne.margins = 0;
        groupOne.spacing = 2;
        groupTwo = myPanel.add("group");
        groupTwo.alignChildren = ["fill", "fill"];
        groupTwo.margins = 0;
        groupTwo.spacing = 2;
        var btnGroupOne = new Array();
        for (var i = 0, buttonsLength = buttons.length; i < buttonsLength; i++) {
            btnGroupOne = groupOne.add("button", undefined, buttons.toString());
        }
        var btnGroupTwo = new Array();
        for (var j = 0, buttonsLength = buttons.length; j < buttonsLength; j++) {
            btnGroupTwo = groupTwo.add("button", undefined, buttons.toString() + " iconButton");
        }
        myPanel.onResizing = myPanel.onResize = function() {
            groupOne.orientation = (myPanel.size.width > myPanel.size.height) ? "row" : "column";
            groupTwo.orientation = (myPanel.size.width > myPanel.size.height) ? "row" : "column";
            if (myPanel.size.width > 250 && myPanel.size.width < myPanel.size.height) {
                groupTwo.visible = true;
                groupOne.visible = false;
            } else {
                groupOne.visible = true;
                groupTwo.visible = false;
            }
            myPanel.layout.resize();
        };
        if (myPanel instanceof Window) {
            myPanel.center();
            myPanel.show();
        } else {
            myPanel.layout.layout(true);
            myPanel.layout.resize();
        }
    }
    build_UI(thisObj);
})(this);

[Michal__d]

Thank you Tomas!!!

[Tomas Sinkunas]

Actually, is there a reason you have 2 identical groups in the UI? Is this so you could switch between row/column, based on the UI size? If so, you don't have to do that - there's a better way.

I took your original code and stripped it down to a bare minimum to demonstrate how the same group can change orientation based on container size. Check it out.

(function(thisObj) {
    function build_UI(thisObj) {
        var myPanel = (thisObj instanceof Panel) ? thisObj : new Window("palette", "Responsive UI", undefined, {
            resizeable: true
        });
        myPanel.alignChildren = ["fill", "fill"];
        myPanel.margins = 2;
        myPanel.spacing = 2;
        var buttons = ["Button One", "Button Two", "Button Three", "Button Four", "Button Five", "Button Six", "Button Seven", "Button Eight", "Button Nine", "Settings"];
        for (var i = 0, buttonsLength = buttons.length; i < buttonsLength; i++) {
            myPanel.add("button", undefined, buttons);
        }
        myPanel.onResizing = myPanel.onResize = function() {
            this.orientation = (this.size.width > this.size.height) ? "row" : "column";
            this.layout.resize();
        };
        if (myPanel instanceof Window) {
            myPanel.center();
            myPanel.show();
        } else {
            myPanel.layout.layout(true);
            myPanel.layout.resize();
        }
    }
    build_UI(thisObj);
})(this);

[Michal__d]

Yes, I had the idea to make two groups, because in first group was normal buttons and in second one iconButtons (png), and when window will be enough big I wanted to replace first group to the second one. In first version was 3 groups but i messed up something and decided to make only 2 and simplify the project. (After that I moved onResizing to else statement, because only there worked as UI Panel, i don't know why)
Also i tried to resize images in UI, but this doesn't work as i expected