UIManager

Yanru MuAbout 5 min

UIManager

UIManager Introduction

There are two main objects needed to manage a window, the UIManager that handles layout, and the UIDispatcher that manages interaction events, accessed as follows:

ui = fusion.UIManager()
dispatcher = bmd.UIDispatcher(ui)

Windows are created with the the UIDispatcher, passing a dictionary of attributes like ID and Text, with GUI elements in nested layouts all created with the UIManager.

UIDispatcher Functions

The UIDispatcher object has a few important functions to manage processing of events.

Common usage is to create your window and set up any event handlers, including a Close handler for the window that calls ExitLoop(), then Show() your window and call RunLoop() to wait for user interaction:

ui = fusion.UIManager
dispatcher = bmd.UIDispatcher(ui)

win = dispatcher.AddWindow({ 'ID': 'myWindow' }, [ ui.Label({ 'Text': 'Hello World!' }) ])

def OnClose(ev):
    dispatcher.ExitLoop()

win.On.myWindow.Close = OnClose

win.Show()
dispatcher.RunLoop()

AddWindow() will also accept a single child without needing a list, or a single dictionary containing both proprties and child elements, for ease of use.

As well as constructing new child elements and layouts, the UIManager also offers a few useful functions:

FindWindow(ID)

Returns an element with matching ID

FindWindows(ID)

Returns a list of all elements with matching ID

QueueEvent(element, event, info)

Calls the element's event handler for 'event', passing it the dictionary 'info'

UIManager Elements

The element's ID is used to find, manage, and dispatch events for that element. GUI elements also support a set of common attributes including Enabled, Hidden, Visible, Font, WindowTitle, BackgroundColor, Geometry, ToolTip, StatusTip, StyleSheet, WindowOpacity, MinimumSize, MaximumSize, and FixedSize. Some other common GUI elements and their main attributes include:

Some elements also have property arrays, indexed by item or column (zero-based), e.g. newItem.Text[2] = 'Third column text'

Some elements like Label and Button will automatically recognise and render basic HTML in their Text attributes, and TextEdit is capable of displaying and returning HTML too. Element attributes can be specified when creating the element, or can be read or changed later:

win.Find('myButton').Text = "Processing..."

Most elements have functions that can be called from them as well:

Show() Hide() Raise() Lower() Close() Returns boolean Find(ID) Returns child element with matching ID GetChildren() Returns list AddChild(element) RemoveChild(element) SetParent(element) Move(point) Resize(size) Size() Returns size Pos() Returns position HasFocus() Returns boolean SetFocus(reason) Accepts string "MouseFocusReason", "TabFocusReason", "ActiveWindowFocusReason", "OtherFocusreason", etc FocusWidget() Returns element IsActiveWindow() Returns boolean SetTabOrder(element) Update() Repaint() SetPaletteColor(r,g,b) QueueEvent(name, info) Accepts event name string and dictionary of event attributes GetItems() Returns dictionary of all child elements

Elements can be accessed by the window's FindWindow(id) function, or by assigning them to a variable for later usage, which is more efficient. The GetItems() function will return a dictionary of all child elements for ease of access.

UIManager Layout

Additionally, elements can be nested to define layout, using the HGroup and VGroup elements. As with Window and other elements, tou can pass a single dictionary or list with all properties and children, or separate them into a dict of properties and list of children, for convenience:

winLayout = ui.VGroup([
    ui.Label({ 'Text': "A 2x2 grid of buttons", 'Weight': 1 }),
    
    ui.HGroup({ 'Weight': 5 }, [
        ui.Button({ 'ID': "myButton1",  'Text': "Go" }),
        ui.Button({ 'ID': "myButton2",  'Text': "Stop" }),
        ]),
    ui.VGap(2),
    ui.HGroup({ 'Weight': 5 }, [
        ui.Button({ 'ID': "myButtonA",  'Text': "Begin" }),
        ui.Button({ 'ID': "myButtonB",  'Text': "End" }),
        ]),
    ]),
win = dispatcher.AddWindow({ 'ID': "myWindow" }, winLayout)

HGap and VGap elements can included for finer spacing control. Note also the Weight attribute, which can be applied to most elements to control how they adjust their relative sizes. A Weight of 0 will use the element's minimum size.

Event Handlers

Window objects will call user-defined event handler functions in response to various interaction events. Event handlers are managed using a window member called 'On'. This has sub-members for each GUI element with an ID, and those have members for each available event. To set up an event handler, define a function for it, then assign the function to the window's On.ID.Event member as follows:

def OnClose(ev):
    dispatcher.ExitLoop()

win.On.myWindow.Close = OnClose

Alternatively, if your object's ID is stored in a string variable called 'buttonID', you could use:

win.On[buttonID].Clicked = OnButtonClicked

Event handler functions are called with a dictionary of related attributes such as who, what, when, sender, and modifiers. Common events and some additional attributes they receive include:

MousePress: Pos, GlobalPos, Button, Buttons MouseRelease: Pos, GlobalPos, Button, Buttons MouseDoubleClick: Pos, GlobalPos, Button, Buttons MouseMove: Pos, GlobalPos, Button, Buttons Wheel: Pos, GlobalPos, Buttons, Delta, PixelDelta, AngleDelta, Orientiation, Phase KeyPress: Key, Text, IsAutoRepeat, Count KeyRelease: Key, Text, IsAutoRepeat, Count ContextMenu: Pos, GlobalPos Move: Pos, OldPos FocusIn: Reason FocusOut: Reason

Event handlers can be enabled or disabled for a given element by turning them on or off in the Events attribute:

ui.Slider({ 'ID': 'mySlider', 'Events': { 'SliderMoved': True } })

Some common events like Clicked or Close are enabled by default.

Further Information

This document provides a basic introduction only, and does not list all available UIManager elements and attributes. As UIManager is based on Qt, you can refer to the Qt documentation at https://doc.qt.io/qt-5/qwidget.html for more information on element types and their attributes. There are also many third-party examples and discussions available on user forums for DaVinci Resolve and Fusion Studio.

Last update:
Contributors: muyanru