UI layout question

[Simma]

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.

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

[Paul Tuersley]

Try this:

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: 'row', \
			alignment: ['fill', 'fill'], \
			alignChildren: ['left', 'top'], \
			test2: Group { \
				orientation: 'column', \
				test: Group { \
					orientation: 'row', \
					test1: EditText {size: ['100', '25']}, \
					test2: EditText {size: ['100', '25']}, \
				} \
				test2: Group { \
					orientation: 'row', \
					alignment: ['left', 'top'], \
					test3: Checkbox {text: 'test'}, \
					test4: Checkbox {text: 'test'}, \
				} \
			} \
			test3: Group { \
				orientation: 'row', \
				alignment: ['left', '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

[Simma]

Thanks Paul, that worked perfectly . Not sure what you did though, I guess it's kind of nesting groups, since you have the main grops orientation set to row.

[Paul Tuersley]

Yeah, the main group is a row containing two items, the first being a group with all the stuff on the left, and the second group containing just the render button. Actually the group for the render button isn't needed, you could just have the render button without it being inside a group.

Paul