CODEWITHSUNDEEP
user-interfacearchitecture
silentorb
silentorb

Reputation: 2592

GUI architecture: Separation of Layout, Rendering, and Input

All the GUI systems I've worked with involve a normalized base widget object that handles layout, input, and rendering. As I've been creating a game GUI in C++ I've been finding that specializing the roles of each widget so that each widget only handles layout, input, or rendering makes the code more composable, flexible, and organized.

However, as I've stretched that paradigm further and further it is starting to snap, and I am trying to find the sweet spot between normalized and specialized widgets. My main difficulty is I have been unable to find any precedent for this GUI model.

[Edit]

Here is a code example for the traditional GUI model:

var button = new Widget()
button.width = 100
button.height = 30
button.set_fill(FILL_COLOR)
button.set_border(BORDER_COLOR, BORDER_SIZE)
button.click(()=> submit())
button.text = "Submit"

Here is a code example for the specialized GUI model:

var button = new Box()
button.width = 100
button.height = 30
button.add(new Fill(FILL_COLOR))
button.add(new Border(BORDER_COLOR, BORDER_SIZE))
button.add(new Clickable(()=> respond_to_click())
button.add(new Text("Submit"))

The first model relies on a large base class that contains many common GUI features, while the second breaks those features into minimal classes. For the specialized approach, the Box class is only concerned about layout, while classes such as Fill and Clickable have no layout logic beyond inheriting the bounds of their parent.

Upvotes: 1

Views: 215

Answers (1)

J Trana
J Trana

Reputation: 2210

In some ways you could view this as a component-based architecture, which tends to be more popular in video games. The idea here is that separate "components" take different jobs, and usually get attached to something like a root "GameObject". In that sense, "button" might not even properly exist, but rather "control" - but with virtually no top-level logic. Then you simply add components to compose a working object. Component-based architecture is not necessarily GUI specific, but it seems like a close match to the code snippets you are providing.

The good news is that there's a lot written about component-based architectures, so you'll be able to leverage that to evaluate possible strengths and weaknesses. Good luck!

Upvotes: 1

Related Questions