MEL: UI problems - columnLayout and rowLayout padding

Become a member of the CGSociety

Connect, Share, and Learn with our Large Growing CG Art Community. It's Free!

THREAD CLOSED
 
Thread Tools Search this Thread Display Modes
Old 01 January 2013   #1
MEL: UI problems - columnLayout and rowLayout padding

http://img801.imageshack.us/img801/...ddingissues.jpg
The picture is scaled up 400%
The UI parts that I want are the black thumbnail -like squares labeled 1 to 5, and their attached labels of grey color. All other colors in this creenshots comes from backgroundColor -flags on the rowLayout and columnLayouts that I've added for error checking purposes.

The problem is that I can't get rid of this padding!
The child objects does not have any border -flags - so it's not them that's causing the problems (1 to 5 are made up of the same code). To confirm this I isolated the thumbnail-like objects in a completely new UI window, took a print screen and looked at it in Photoshop: no added padding around the child objects.

So what's happening here is that all my columnLayouts are adding a 1px thick padding on the inside of themselves. And all my rowLayouts does the same. The rowLayouts also add a 2px horizontal padding between their child elements.

My immediate question to all this is: Is this normal Maya behavior? Does these UI commands add this padding by default?

Code is here below:
	frameLayout
		-label "TEST"
		;

		rowLayout
			-backgroundColor 0.7 0.7 0.7
			-numberOfColumns 2;

			columnLayout
				-backgroundColor 0.0 0.0 1.0;

				// Square ONE
				
				iconTextButton
					-backgroundColor 0.5 0.8 0.5
					-command ("")
					-height 15
					-style "textOnly"
					-width 128
					myLabel1;

			setParent ..; // columnLayout

			columnLayout
				-backgroundColor 1.0 0.0 0.0;
			
				rowLayout
					-backgroundColor 0.5 1.0 0.5
					-numberOfColumns 2;
				
					// Square TWO
						
					// Square THREE

				setParent ..; // rowLayout
			
				rowLayout
					-backgroundColor 1.0 1.0 1.0
					-numberOfColumns 2;
								
					iconTextButton
						-backgroundColor 0.5 0.8 0.5
						-command ("")
						-height 12
						-style "textOnly"
						-width 64						
						myLabel2;	
						
					iconTextButton
						-backgroundColor 0.5 0.8 0.5
						-command ("")
						-height 12
						-style "textOnly"
						-width 64						
						myLabel3;		

				setParent ..; // rowLayout
				
				rowLayout
					-backgroundColor 1.0 1.0 0.0					
					-numberOfColumns 2;
				
					// SQUARE FOUR
					
					// SQUARE FIVE
				
				setParent ..; // rowLayout
			
				rowLayout
					-backgroundColor 0.0 1.0 1.0
					-numberOfColumns 2;
								
					iconTextButton
						-backgroundColor 0.5 0.8 0.5
						-command ("")
						-height 12
						-style "textOnly"
						-width 64						
						myLabel4;	
						
					iconTextButton
						-backgroundColor 0.5 0.8 0.5
						-command ("")
						-height 12
						-style "textOnly"
						-width 64						
						myLabel5;		

				setParent ..; // rowLayout
					
			setParent ..; // columnLayout

		setParent ..; // rowLayout

	setParent ..; // frameLayout


I've experiemented with different flags, such as setting -enableBackground to false, or -rowSpacing to 0, none of it has helped. And hardcoding the dimensions of the elements only pushes the child objects outside of view.
__________________
Nightshade UV Editor (script for Maya) - Extends Maya's default UV Texture Editor with additional tools.

Last edited by DeadlyNightshade : 01 January 2013 at 12:08 AM.
 
Old 01 January 2013   #2
That's pretty much to be expected, from my experience.

That's part of the reason I basically never use rowLayouts.
I only use columnLayouts when I need a collection of elements I need to refer to by a common relative (their shared parentlayout) and when the appearance is of minor concern.

For serious UI formatting, I almost always resort to the formLayout. It offers a level of control unlike any other layout and the results are always dependable.

Here's your layout, but reconfigured to use a formLayout:

if(`window -ex MyTestWindow`)
	deleteUI MyTestWindow;

$window = `window MyTestWindow`;

	frameLayout 
		-l "Frame"
		MyFrameLayout;
		
	// create master Layout
	$form = `formLayout
		-w (2 + 128 + 2 + 63 + 1 + 63 + 2)
		-h (2 + 128 + 2)
		-bgc .6 0 0
		MyFormLayout`;
	
	// create elements
	$bigBtn = `iconTextButton
		-bgc .1 .2 .5
		-w 128
		-h 128
		-label "BIG"
		-st "textOnly"
		MyBigButton`;
	
	$smBtn1 = `iconTextButton
		-bgc .1 .5 .2
		-w 63
		-h 63
		-label "Small 1"
		-st "textOnly"
		MySmallButton1`;
	
	$smBtn2 = `iconTextButton
		-bgc .1 .5 .2
		-w 63
		-h 63
		-label "Small 2"
		-st "textOnly"
		MySmallButton2`;
		
	$smBtn3 = `iconTextButton
		-bgc .1 .5 .2
		-w 63
		-h 63
		-label "Small 3"
		-st "textOnly"
		MySmallButton3`;
		
	$smBtn4 = `iconTextButton
		-bgc .1 .5 .2
		-w 63
		-h 63
		-label "Small 4"
		-st "textOnly"
		MySmallButton4`;
		
	// now format the master formlayout
	formLayout -e
	// big button
	-af $bigBtn 	"left"	2
	-af $bigBtn		"top"		2
	// small button top left
	-af $smBtn1		"top"		2
	-ac $smBtn1		"left"	2		$bigBtn
	// small button top right
	-af $smBtn2		"top"		2
	-ac $smBtn2		"left"	1		$smBtn1
	-af $smBtn2		"right"	2
	// small button bottom left
	-ac $smBtn3		"left"	2		$bigBtn
	-ac $smBtn3		"top"		1		$smBtn1
	// small button bottom right
	-ac $smBtn4		"left"	1		$smBtn3
	-ac $smBtn4		"top"		1		$smBtn2
	-af $smBtn4		"right"	2
	$form;
	
showWindow $window;

(tab spacing in the above code may look weird, but that's due to my particular choice of font in my IDE)

I've defined the width and height of the formLayout above in a manner that makes it easier to see and understand the padding and element-sizes I want to define.
 
Old 01 January 2013   #3
Ah I see - makes sense.
I almost entirely used formLayouts when I made my UV Editor, but now when I started working on a new tool I decided to try something new. I tried a gridLayout first but it seems like you can't have rows of variable height there - or I missed something.

Thanks for your reply.
__________________
Nightshade UV Editor (script for Maya) - Extends Maya's default UV Texture Editor with additional tools.
 
Old 01 January 2013   #4
No you didnt miss anything. gridLayout cells are all same dimensions.

Just stick to formLayouts for the overall formatting and use columnLayouts or rowLayouts only as children of that for subgrouping if you really need to or you dont care about the fine details (like margins, padding, distance between elements and their alignment).
 
Old 01 January 2013   #5
Alright!
Thanks for the insight!
__________________
Nightshade UV Editor (script for Maya) - Extends Maya's default UV Texture Editor with additional tools.
 
Old 01 January 2013   #6
Sorry to hijack the thread, but I wanted to say thanks as well. I've been having the same problem with a UI I've been working on and it was driving me insane. Also, I didn't realize you could do something like this:

-height (2 + 2 + 2)

So thanks for that too. Is there any specific reason for doing something like this though? Just wondering.
 
Old 01 January 2013   #7
Originally Posted by Question: -height (2 + 2 + 2)

So thanks for that too. Is there any specific reason for doing something like this though? Just wondering.


Originally Posted by Answer: I've defined the width and height of the formLayout above in a manner that makes it easier to see and understand the padding and element-sizes I want to define.



I basically could have done the following:

int $layoutPadding = 2;
int $bigButtonMargin = 2;
int $bigButtonSize = 128;
int $smallButtonMargin = 1;
int $smallButtonSize = 64;

formLayout
  -w ($layoutPadding + $bigButtonSize + $bigButtonMargin + $smallButtonSize + $smallButtonMargin + $smallButtonSize + $layoutPadding)
myFormLayout;
 
Old 01 January 2013   #8
Thanks for the explanation
 
Old 01 January 2013   #9
Thread automatically closed

This thread has been automatically closed as it remained inactive for 12 months. If you wish to continue the discussion, please create a new thread in the appropriate forum.
__________________
CGTalk Policy/Legalities
Note that as CGTalk Members, you agree to the terms and conditions of using this website.
 
Thread Closed share thread



Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

vB code is On
Smilies are On
[IMG] code is On
HTML code is Off
CGSociety
Society of Digital Artists
www.cgsociety.org

Powered by vBulletin
Copyright 2000 - 2006,
Jelsoft Enterprises Ltd.
Minimize Ads
Forum Jump
Miscellaneous

All times are GMT. The time now is 01:11 PM.


Powered by vBulletin
Copyright ©2000 - 2017, Jelsoft Enterprises Ltd.