MEL UI Layouts

Introduction

Layouts determine how all the elements in a window should be placed. You can combine and nest several types to make complex layouts. All menus and windows you see in Maya are created in MEL, so you should be able to recreate every existing interface element.

columnLayout

Function: columnLayout

This layout will place all elements withing this layout in one single column. A window will look something like this:

The MEL code for this example is:

if ( `window -exists MyWindow` ) {
 deleteUI MyWindow;
}
window -t "Example Window" MyWindow;
 
columnLayout;
text -l "Text element";
intFieldGrp -l "intField";
button -l "Button";
text -l "etc";
 
showWindow MyWindow;

A quick way to get some more spacing between elements in your columnLayout is to use the -rowSpacing flag:

columnLayout -rowSpacing 10;

The example window now looks like this:

rowLayout

Function: rowLayout

This layout will place all elements in a single (horizontal) row. You must specify the number of elements in this row using the -numberOfColumns flag.

The window will look something like this:

The code for this example is:

if ( `window -exists MyWindow` ) {
 deleteUI MyWindow;
}
window -t "Example Window" MyWindow;
 
rowLayout -nc 3;
intField;
intField;
button -l "Button";
 
showWindow MyWindow;

As you can see, Maya uses a default width for the 'columns' in the row. You can change the width of the columns using the columnWidth flags of the rowLayout command:

rowLayout -nc 3 -cw3 60 100 60;

Making the first element 60 pixels wide, the second 100 and the third element in the row will be 60 pixels wide. The window will now look something like this:

Please note that most elements have their own '-width flag as well that might need to be set to size the actual element itself.

If you try to squeeze in more elements that you've specified for the rowLayout, Maya will generate an error:

// Error: line ##: Too many children in layout: rowLayout1 //

If you're combining (or nesting) layouts, be sure to use the setParent command to set the proper layout parent for your interface elements. An example:

if ( `window -exists MyWindow` ) {
 deleteUI MyWindow;
}
window -t "Example Window" MyWindow;
 columnLayout myMainCol; // (child of the window)
  rowLayout -nc 2 myFirstRow; //this is a child of the myMainCol layout
   text -l "first element in the row layout"; // child of myFirstRow
   text -l "second element in the row layout";
   setParent ..; // go up one in the hierarchy. 
   // Note: You may also use setParent myMainCol in this case
  text -l "first element of the myMainCol layout";
  text -l "second element of the myMainCol layout";
 showWindow MyWindow;

rowColumnLayout

Function: rowColumnLayout

If you want to make a table-like layout, combining a columnLayout with several rowLayouts, you can do this with the rowColumnLayout. You need to choose whether you want a row- or column-based rowColumn layout. In row format, you need to specify the number of rows. All elements that are children of this layout will be devided in to x number of rows.

Some examples:

The code:

window;
 rowColumnLayout -numberOfColumns 1;
  button -l "button1";
  button -l "button2";
  button -l "button3";
showWindow;

The code:

window;
 rowColumnLayout -numberOfColumns 2;
  button -l "button1";
  button -l "button2";
  button -l "button3";
  button -l "button4";
showWindow;

The code:

window;
 rowColumnLayout -numberOfRows 1;
  button -l "button1";
  button -l "button2";
  button -l "button3";
showWindow;

The code:

window;
 rowColumnLayout -numberOfRows 2;
  button -l "button1";
  button -l "button2";
  button -l "button3";
  button -l "button4";
showWindow;

frameLayout

Function: frameLayout

The frame layout enables you to 'group' elements in your layout and even enable the user to hide and show parts of your interface. You'll probably know the collapsable frames from the interface of Maya (the Attribute editor for instance).

A typical window using a frame layout looks something like this:

The code:

if ( `window -exists MyWindow` ) {
 deleteUI MyWindow;
}
window -t "Example Window" MyWindow;
 
columnLayout;
 frameLayout -label "First frame";
  columnLayout;
   text -l "Text element";
   intFieldGrp -l "intField";
   button -l "Button";
   text -l "etc";
   setParent ..;
  setParent ..;
 frameLayout -label "Second frame" -collapsable 1;
  columnLayout;
   text -l "Text element";
   intFieldGrp -l "intField";
   button -l "Button";
   text -l "etc";
   setParent ..;
  setParent ..;
 
showWindow MyWindow;

Note that you need to put frame layouts inside a 'normal' layout like a column layout. There's also an restriction to the number of (direct) children of a frameLayout: it can only have one child, so if you want to put more elements within a frame, you need to create a single column-. row or rowColumn layout first.

Note the use of the setParent command in the example to make sure the hierarchy of layouts and elements is correct.

In this example, the second frame is collapsable. You can set this using the -collapsable flag.

As you can see in this example, the alignment of elements needs some work.

Other layouts

There are several other types of layouts. You can find all available types in the MEL Command reference, section Windows > Layouts.