Tutorial 2: Simple Layouts

This page assumes you've gone through the first tutorial page already.

Now that you know how to create one object, its time to make a full layout.

Nested layouts

For a very simple example, we'll start with something very basic. In the listener try this:

from mGui.gui import *

with Window(title = 'simple layout') as test_window:
    with ColumnLayout(adjustableColumn = True) as root:
        Text(label = 'Some text here')
        text_scroll = TextScrollList(width = 256, height = 128)
        button = Button(label = 'big button', width = 256)

test_window.show()

That will pop up a window with an empty textScrollList and a button. Neither one does anything yet, but they are a useful example. The way the code is layed out is worth noticing: unlike regular Maya.cmds, mGui uses the structure of the code (the 'with' statements) to indicate the relationship between the widgets -- the buttons, fields and whatnot -- and the structure of the layout -- the columns, rows, grids and so forth. Here we've only got two layers of nesting but in a more graphically complex layout the nesting can make a huge difference in managing the design effectively.

Structured access

Another difference is that in regular maya.cmds coding you'd need to remember the names of the button and the textScrollList if you wanted to do anything else with them later. In mGui they are automatically added to the their parents as named properties. So, if you wanted to make the button's background color change you could do this:

test_window.root.button.backgroundColor = (.9, .1, .1)

or you could change the height of the textScrollList with

test_window.root.text_scroll.height = 256

However you can't use this trick to get at the Text object which sits above the textScroll. That's because the example code doesn't assign it to a variable, so it doesn't get added to its parent with a predictable name. However it's still there; if you really want to find it, any parent object has a field called named_children which shows it's child controls and the aliases that mGui uses to find them for dot-property access. If you type this:

print test_window.root.named_children

you'll get a printout like this:

OrderedDict([(u'text205', window2|columnLayout21|text205), (u'textScrollList23', window2|columnLayout21|textScrollList23), (u'button43', window2|columnLayout21|button43), ('text_scroll', window2|columnLayout21|textScrollList23), ('btn', window2|columnLayout21|button43)])

If you look at the printout you'll see that the text shows up in there with a typical maya widget name like text205, and the other controls show up both with their maya names and the names you gave them as local variables. Most of the time you won't interact with named_children directly, but its sometimes useful if you're debugging or looking for an item that was created by a script rather than explicitly.

This little example is really the core of the way mGui works. You can do much more sophisticated layouts just by combining different layouts (Columns, Rows, Grids and so on) and filling them with controls; the visual nesting and the dot property access make it much easier to manage than the standard maya.cmds approach.

However, as you'll see in the next tutorial, there's another big feature that builds on these basics