UI in Maya

We embarked on this journey into the MEL Command Reference in hopes that it would help make our turntable animation suck less. As a reminder, a few frames from our animation:


I swear this hasn't been a digression, we really have made some progress. But first, let's try and define �suck less�. Basically we want to provide the user with some controls for editing the turntable animation � for example moving the camera a bit higher and maybe a bit further away. Something like this:


Not the swankiest piece of UI, I know � but it'll get the job done. Let's return to the MEL docs and see what Maya has to offer:


Up in the categories section we see a whole column devoted to UI � windows, panels, controls, etc... Clicking on these links gives lists upon lists of UI related commands. So much in fact that it may be a little daunting. So let's take a step back and try to make some sense of it all.
There are three main components to UI in Maya: windows, layouts, and controls. Almost all MEL UI you create will be contained in a window. You can think of a window as the foundation of your UI - all other components are built on top of it.


The next layers on top of windows are layouts - they organize and position any buttons, fields, checkboxes, etc... (Generically called �controls�) contained in the UI. A 'columnLayout' organizes the controls in a column from top to bottom:


A button is an example of a MEL control - like text fields, checkboxes, option menus, and any number of other controls, a button allows the user to interact with (i.e. to control) the UI. She can click a button, check a checkbox, select an option from an option menu and that change will trigger any MEL commands attached to that control.


If this sounds familiar to you, it's because it was lifted from the first article. This time, though, we're going to go a bit further with layouts and introduce some swankier controls.


Clicking on the �Layouts� link in the MEL Command docs, you can see that the 'columnLayout' is just one of many ways to organize your controls:


That being said, you can create some pretty complex UI arrangements using only columnLayouts and rowLayouts. The key lies in your ability to nest one layout inside another. 'columnLayouts' can contain a column of 'rowLayouts', each of which contains a row of 'columnLayouts', which in turn contain more 'rowLayouts', and on and on! The possibilities are literally endless. Literally! Some examples of the sorts of layouts you can make by combining rows and columns:


Nor are these are simply contrived examples. Nested layouts can be found throughout the Maya user interface and in real life as well - in swanky new phones, in swedish furniture, at the farm...


All controls and layouts are arranged according to their parent layout. If a bunch of controls all share the same 'columnLayout' as a parent, they are arranged in a column � the �My Settings� window from the first article is an example of this:


By default the last layout created before a given control or layout becomes that control or layout's parent.

Let's try this out in the following example, inspired by the oldie-but-goodie �54 Mugs of Beer on the Wall�:



One way to figure out how to build this UI is to start with the biggest layouts and move down towards the smaller, nested layouts. Looking at the picture we can see that the shelves are stacked one on top of the other � meaning we probably want to start with a 'columnLayout':



After that we might notice that, on each shelf, the beer mugs are arranged side-by-side � meaning we probably want to nest a bunch of 'rowLayouts' inside the 'columnLayout', one for each shelf:



But wait, this isn't quite enough. By default all layouts are parented to the layout above them. The first few lines of this code would give us something like:


When in fact we want something like:


In order to make sure each 'rowLayout' is parented to the 'columnLayout' instead of the preceding 'rowLayout' we have to use the 'setParent' command. The 'setParent' command changes the � wait, let's see what the docs say :)

�This command changes the default parent to be the specified parent. Two special parents are "/" which indicates the top of the hierarchy, or ".." which indicates one level up in the hierarchy.�

See, I told you the command reference would come in handy. In this case we want to use the 'setParent ..' command. This is like each 'rowLayout' telling the guy after him �No no, don't use me � use my parent�



Finally let's add the beer bottles and buttons themselves, several to each shelf-like 'rowLayout':


Unfortunately there's one more step. The 'rowLayout' is a little more uptight than the 'columnLayout' - it needs to be told beforehand exactly how many child controls or layouts it can expect. You do this using the '-numberOfColumns' flag. In our example there are 9 beer mugs per shelf, meaning each row has 9 columns. And now the final code:




To recap:

1. Windows are the foundation that other UI components are built on.
2. Layouts arrange controls and other layouts.
3. Controls are the buttons, sliders, and menus that the user interacts with.
4. Layouts can be nested within each other.
5. All layouts and controls are arranged according their parent layout, which, by default, is the last layout created before them.
6. Use the setParent command to change the current parent layout. 'setParent ..' bumps the current parent layout up one level.
7. When using 'rowLayouts' you need to tell it the number of children it can expect using the '-numberOfColumns' flag.