Skip to main content
F
fusepilot
Known Participant
May 3, 2013
Answered

ScriptUI Layout

  • May 3, 2013
  • 1 reply
  • 7659 views

I'm looking for a dynamic way to having two children of a group (one dyamically sized and one explicitly sized) fill up the parenting group's allotted space. Like this:

[[         edittext          ][button]]

Where the edittext has an alignment of 'fill'. And the button has a preferredSize of [20, 20];

The way ScriptUI currently treats this is as follows:

[[edittext][button][                 ]]

It ignores the 'fill' property of the edittext alignment and fills up the alotted space with nothing instead of the edittext.

The way I made the UI for my Rift script was by explicitly setting the character count on the edittext elements so that they filled the gap.

http://cdn.aescripts.com/media/catalog/product/cache/1/image/800x600/040ec09b1e35df139433887a97daa66f/r/i/rift_interface.png

But this all falls apart when I open this up in older versions where the sizing of individual elements is completely different.

So specifically, how would you make something like the "Shift" panel be able to dynamically resize while keeping the buttons sizes fixed at [20,20]?

Thanks.

This topic has been closed for replies.
Correct answer Paul Tuersley

I'm doing it slightly differently here but this seems to work ok:

res =

"Group { alignment:['fill','fill'], orientation:'column',\

  grp1: Group { alignment:['fill','top'], \

    editText: EditText {alignment: ['fill','center']} \

    btn: Button { preferredSize: [20, 20], alignment:['right','center']}, \

  }, \

  buttons: Group {\

    okBtn: Button { text:'OK', properties:{name:'ok'}}, \

  }, \

}";

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

win.spacing = 0;

win.margins = 0;

win.preferredSize = [200,0];

win.grp = win.add(res);

win.onResizing = win.onResize = function () { this.layout.resize(); };

win.center();

win.show();

1 reply

P
Paul Tuersley
Inspiring
May 3, 2013

Is the button 'right' aligned? And the shift panel (and any parent groups) set to 'fill'?

It doesn't sound like the button is resizing so you probably don't need to set maximumSize.

And you have a line like:

pal.onResizing = pal.onResize = function () { this.layout.resize(); };

This can be tricky stuff to get right. It might help if you could post the relevant bit of UI code.

Paul

F
fusepilotAuthor
Known Participant
May 3, 2013

Thanks Paul,

Here's the code I'm testing this out with:

res = "dialog { margins: 0, spacing: 0,\
    grp: Group { alignment: 'fill', spacing: 0, margins: 0,\
      editText: EditText {alignment: 'fill'} \
      btn: Button { preferredSize: [20, 20], alignment: 'right'}, \
    }, \
    grp: Group { preferredSize: [200, ''], spacing: 0, margins: 0,\
      editText: EditText {alignment: 'fill'} \
      btn: Button { preferredSize: [20, 20], alignment: 'right'}, \
    }, \
    buttons: Group {\
      okBtn: Button { text:'OK', properties:{name:'ok'}}, \
    }, \
}";

win = new Window(res)
win.center();
win.show()
P
Paul TuersleyCorrect answer
Inspiring
May 4, 2013

I'm doing it slightly differently here but this seems to work ok:

res =

"Group { alignment:['fill','fill'], orientation:'column',\

  grp1: Group { alignment:['fill','top'], \

    editText: EditText {alignment: ['fill','center']} \

    btn: Button { preferredSize: [20, 20], alignment:['right','center']}, \

  }, \

  buttons: Group {\

    okBtn: Button { text:'OK', properties:{name:'ok'}}, \

  }, \

}";

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

win.spacing = 0;

win.margins = 0;

win.preferredSize = [200,0];

win.grp = win.add(res);

win.onResizing = win.onResize = function () { this.layout.resize(); };

win.center();

win.show();

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