Keeping track of focused widget in GUI tree

Question

I'm designing a GUI framework based on trees of widgets. Widgets are general control and container structures that are everything from panels to buttons to file dialogs. Widgets have an array of child widgets; a button contains a label and maybe an icon. Widgets are fed input events where the widget first does its own logic with the event then passes it on to its children. The application feeds input events to a single root widget, which can be anything from a single button in the middle of the screen to a full control window.

I need a way to handle which widget(s) receives keyboard events. I've decided that one of the widgets in a given widget tree would be the focused widget. Widgets would have a gainFocus method and a loseFocus method, which would be used in response to mouse click events or manually by the application. It's unlikely I'll implement tabbing. When one widget gains focus, any existing focused widget would naturally lose focus.

I still want each ancestor of the focused widget to see a given keyboard event in turn before it's given to the focused widget itself. So if I have a panel with a text box in it, the panel would see the event before the text box does. Therefore I really need to keep track of the chain of widgets from the root widget to the focused widget. I also need to maintain data integrity when I change focus so that all widgets in a tree can correctly tell whether or not they're the focused widget or an ancestor of the focused widget.

I've so far come up with giving widgets a hasFocus boolean and a focusedChildIndex integer. hasFocus would be set to true when the widget has focus. focusedChildIndex would be set to the index of the focused child in its child array, which could be the focused widget itself or the next widget in the chain leading to the focused widget, or -1 to indicate that there's no focused child. Setting these variables when one widget in the tree gets its gainFocus or loseFocus method invoked is something I'm stumped on though.

Edit

So we're clear, this is what I think my widget class will be like:

class Widget
    private Widget parent
    private Array<Widget> children

    // Methods for getters, adding widgets to widget trees, etc.
    ...

    public void mouseClick(int x, int y)
        doMouseClickEvent(x, y)
        for c in children
            c.mouseClick(int x, int y)

As you can see in mouseClick the widget sees the event before its children does. I want keyboard inputs to work the same way, except this time I want to only have a single chain from the root to the focused widget to see the event. Plus I need to make sure that when one widget gains focus the currently focused widget in the tree loses focus.

Answer 1

I'm pretty sure all the widgets have parent in their information (except the root widget of course). So you can go back all the way up to the root whenever a key is pressed and pass events to all of them. I'm not really sure if you are found of static fields/methods but it can easily be implemented using those.

class widget
{
    public widget parent; // a referece to it's parent
    public static widget focusedWidget;
    public static void keypress(Key  k)
    {
        stack <widget> widgets;
        widgets.push(focusedWidget);
        while(widgest.Top.parent != null)   // first create a list of all widgets in the way back to root
            widgets.push(widgest.Top.parent);

        while(widgets.count != 0)           // then calling all widgets in that list starting from root
        {
            widgets.Top.OnKeyPress(k);
            widgets.pop();
        }
    }

}

also you can completely change how you look at the problem and add a focused widget to all your widgets. This way you'll have a little bit advantage of remembering which widgets had focus when user was working with another widget (maybe doing something in another window). but keeping track of is focused get's a little bit harder.

class widget
{
    public widget parent; // a referece to it's parent
    public widget focusedWidget;
    public void OnKeyPress(Key  k)
    {
        // do something here
        focusedWidget.ObKeyPress(k);
    }
    public bool hasFocus{ 
        get
        {
            if(parent == null || parent.hasFocus)
                return parent.focusedWidget == this;
        }
    }
}

Answer 2

What you're talking about here is an event-driven system. This is what most GUI systems use. It's always good to steal from the masters so, let's take a look at Flash's event driven system.

In this diagram, the user clicks on the red box. An click event is generated with the red box as target. As the event travels from the stage down to the box, every attached listener is called, which can stop the event from travelling further.

For instance, if the user clicks on the red box, but the root element has focus then the root element can stop the event from travelling futher.

Once the event reaches its target in the capturing phase, an optional bubbling phase occurs. Here, the event travels from the target element back up to the root. This is useful to for instance tell a parent element that a child element should have focus.

The event takes the following path:

So how would you implement this in C++? Well, take a look at the excellent libRocket. They have implemented an event-driven GUI system in C++. The gist of it is that an event should be an actual object and that you can attach event listeners to widgets. The event object keeps track of what phase it is in and what its target is. The widgets can listen to certain events and stop the event from progressing further.

The code for libRocket is well documented, I'd suggest taking a look at it for ideas.

Images were taken from Introduction to event handling in ActionScript 3.0 .

Answer 3

I believe I've come up with a solution.

As I said earlier, I can use a hasFocus boolean to designate the actual focused widget and a focusedChildIndex to indicate which child widget leads to the focused widget.

class Widget
    private Widget parent
    private Array<Widget> children

    // True if this is the focused widget
    private bool hasFocus
    // Index of child that leads to the focused widget
    private int focusedChildIndex


    new()
        ...

        hasFocus = false
        focusedChildIndex = -1


    // Returns -1 if not an immediate child
    public int getIndexOfChild(Widget child)
        int index = -1
        for int i = 0, children.size() - 1
            if children[i] == child
                index = i
                break
        return index


    // Root of tree this widget is in, or widget itself if it is the root
    public Widget getRoot()
        Widget result = this
        Widget p = parent

        while p != null
            result = p
            p = p.getParent()

        return result


    public bool hasFocus()
        return hasFocus


    public int getFocusedChildIndex()
        return focusedChildIndex


    public void gainFocus()
        if not hasFocus
            getRoot().loseFocus()

            hasFocus = true
            onGainFocus()

            if parent != null
                parent.focusOnChild(this)


    // Used by gainFocus
    public void focusOnChild(Widget child)
        // This method can be run if
        //   - The widget is not already focused on a child
        //   - The given child is actually a child of this widget
        //   - The child is either the focused widget or has a focused child
        int index = getIndexOfChild(child)
        if (focusedChildIndex == -1) and (index > -1)
          and (child.hasFocus()
          or (child.getFocusedChildIndex() > -1))
            focusedChildIndex = index
            if parent != null
                parent.focusOnChild(this)


    public void loseFocus()
        if (parent != null) and (parent.getFocusedChildIndex() > -1)
            parent.loseFocus()
        else
            if hasFocus
                hasFocus = false
                onLoseFocus()

            if focusedChildIndex > -1
                int oldIndex = focusedChildIndex
                focusedChildIndex = -1
                children[oldIndex].loseFocus()


    protected virtual void onGainFocus()
    protected virtual void onLoseFocus()