PyUI Layouts

Using Layouts and Panels

Layouts
Special Panel Types
Splitter Panels
Tabbed Panels

Layouts

Every GUI application has to deal with the task of positioning the widgets and windows that it will use and attaching functionality to them. Some libraries provide dialog building or layout tools for this task, but currently, PyUI requires this to be done with python code. However it is still possible to create complex layouts in PyUI with the help of the Layout Managers.

Each Panel in PyUI has a Layout Manager. (Windows and Frames have a built-in Panel and so act in a similar way). The Layout Manager that come with PyUI are:

Flow Layout Manager - places widgets horizontally next to each other
Border Layout Manager - places widgets at borders of a panel
Grid Layout Manager - places widgets in a regular grid
Table Layout Manager - places widgets within a table possibly spanning multiple rows/columns
AbsoluteLayoutManager - places widgets at relative co-ordinates within a panel

After adding widgets to a Panel with the addChild() method, the pack() method must be called on the Panel to have it lay out the widgets. Below is an example of using the GridLayoutManager:

import pyui
 
def onPress(button):
    print "the button was pressed"

pyui.init(320,320,"gl")

newFrame = pyui.widgets.Frame(10, 10, 200, 200, "hello world!")
newFrame.setLayout(pyui.layouts.GridLayoutManager(3,3))

for i in range(0,9):
    button = pyui.widgets.Button("button #%s" % i, onPress)
    newFrame.addChild(button)
    
newFrame.pack()
pyui.run()
pyui.quit()

This produces something like:

Some Layout Manager require additional arguments to the addChild() method call. The BorderLayoutManager requires each addChild to specify a border to attach the child to. The TableLayoutManager requires a table position in x and y and a span of columns and rows for each addChild() call. The AbsoluteLayoutManager requires x and y positions in relative co-ordinates for each addChild() call.

Special Panel Types

In addition to the basic Panel class there are some special types of Panels - the SplitterPanel, the TabbedPanel and the ViewPanel. Developers can also derived their own classes from Panel.

To use a special Panel type in a Window (or Frame), the default Panel of the Window must be replaced with the new Panel by called replacePanel() on the Window.

Splitter Panels

The SplitterPanel splits an existing Panel into two Panels along the vertical or horizontal. The ratio of the split can be specified as either a percentage or as pixels. To access the inner panel of a SplitterPanel the getFirstPanel() and getSecondPanel() methods are used. Below is an example of using he SplitterPanel in a Frame:

import pyui
 
def onPress(button):
    print "the button was pressed"

pyui.init(320,320,"gl")
newFrame = pyui.widgets.Frame(10, 10, 250, 200, "hello world!")
splitter = pyui.widgets.SplitterPanel(pyui.widgets.SplitterPanel.VERTICAL,
                                      pyui.widgets.SplitterPanel.PERCENTAGE,
                                      35)
splitter.getSecondPanel().setLayout(pyui.layouts.GridLayoutManager(2,4))
newFrame.replacePanel(splitter)
for i in range(0,8):
    button = pyui.widgets.Button("button #%s" % i, onPress)
    splitter.getSecondPanel().addChild(button)
    
newFrame.pack()
pyui.run()
pyui.quit()

Notice that pack() is called on the Frame and the Panels in the frame are packed also. Pack() is recursive. This should look something like:

Tabbed Panels

The TabbedPanel allows multiple Panels to exist within a Panel with only one being visible at a time. Each of the Panels has a visible "Tab" at the top of the panel to allow them to be activated with a single mouse click. Panels are added to a TabbedPanel with the addPanel() method. This method may be passed a Panel to add, or will create a regular Panel by default. Below is an example of using the TabbedPanel:

import pyui
 
def onPress(button):
    print "the button was pressed"

pyui.init(320,320,"gl")
newFrame = pyui.widgets.Frame(10, 10, 250, 200, "hello world!")
tabbed = pyui.widgets.TabbedPanel()
for title in ("Grid Panel", "FOO", "Last one"):
    tabbed.addPanel(title)

newFrame.replacePanel(tabbed)
tabbed.getPanel(0).setLayout(pyui.layouts.GridLayoutManager(2,4))

for i in range(0,8):
    button = pyui.widgets.Button("button #%s" % i, onPress)
    tabbed.getPanel(0).addChild(button)
    
newFrame.pack()
pyui.run()
pyui.quit()

Notice the use of the getPanel() method to retrieve a panel by it's number. This should look something like:

So, by combining Layout Managers and special Panel types it is possible to create complex GUI applications with PyUI.