Skip to main content
F
fusepilot
Known Participant
May 3, 2013
解決済み

ScriptUI Layout

  • May 3, 2013
  • 返信数 1.
  • 7688 ビュー

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.

このトピックへの返信は締め切られました。
解決に役立った回答 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

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
fusepilot作成者
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 Tuersley解決！
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();

契約条件Accessibility statement
Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices