UI layout question
Posted: May 30th, 2011, 4:02 pm
Trying to put together a simple UI, but it's givinig me problems.
I want the "Render" button to be in the same line as the first objects, but alligned to the right instead of the left. See attached images.
If I add the render button to a separate group, it shows up below everything else, which isn't how I would like it. Notice that the render button is a bit bigger, so ideally it would be in the middle of the first and the second row.
Any ideas for this?
* As you see, the bottom image (correct one) is a sketch only version.
I want the "Render" button to be in the same line as the first objects, but alligned to the right instead of the left. See attached images.
If I add the render button to a separate group, it shows up below everything else, which isn't how I would like it. Notice that the render button is a bit bigger, so ideally it would be in the middle of the first and the second row.
Any ideas for this?
* As you see, the bottom image (correct one) is a sketch only version.
Code: Select all
var myPalette = buildUI(this);
if(myPalette != null && myPalette instanceof Window) {
myPalette.show();
}
function buildUI (thisObject) {
if(thisObject instanceof Panel) {
var myPalette = thisObject;
}else{
var myPalette = new Window ("palette", "test", undefined, {resizeable:true});
}
if(myPalette != null) {
var res =
"Group { \
orientation: 'column', \
alignment: ['fill', 'fill'], \
alignChildren: ['left', 'top'], \
test: Group { \
orientation: 'row', \
test1: EditText {size: ['100', '25']}, \
test2: EditText {size: ['100', '25']}, \
} \
test2: Group { \
orientation: 'row', \
test3: Checkbox {text: 'test'}, \
test4: Checkbox {text: 'test'}, \
} \
test3: Group { \
orientation: 'row', \
alignment: ['right', 'top'], \
renderButton: Button {text: 'Render', size: ['100', '50']}, \
} \
} \
}";
myPalette.grp = myPalette.add(res);
myPalette.layout.layout(true);
myPalette.layout.resize()
myPalette.resizing = myPalette.onResize = function () {this.layout.resize()};
}//if(myPalette != null) {
return myPalette;
} //buildUI
. Not sure what you did though, I guess it's kind of nesting groups, since you have the main grops orientation set to row.