Composite-based theming

[rubenwardy]

trafficstars

I've come across this multiple times - there's been lots of occasions when widgets don't support the theme properties I'd expect.

My suggestion is to go from:

ChildWindow {
	TitleColor = rgba(255, 255, 255, 215);
	TextureTitlebar = "rvwp.png" Part(25, 64, 26, 55) Middle(3, 3, 20, 49);
	TitleBarHeight = 32;
	BackgroundColor = #2e2e2f;
	DistanceToSide = 15;
	PaddingBetweenButtons = 20;
	ShowTextOnTitleButtons = true;
	CloseButton = {
		Texture = "rvwp.png" Part(47, 40, 20, 22) Middle(0, 0, 20, 22);
		TextureHover = "rvwp.png" Part(85, 40, 20, 22) Middle(0, 0, 20, 22);
		TextColor = transparent;
	};
	MaximizeButton = &BorderlessButton;
	MinimizeButton = &BorderlessButton;
}

to something like:

ChildWindow {
	Titlebar = {
		TextColor = rgba(255, 255, 255, 215);
		Texture = "rvwp.png" Part(25, 64, 26, 55) Middle(3, 3, 20, 49);
		Height = 32;

		ShowTextOnTitleButtons = true;
		CloseButton = {
			Texture = "rvwp.png" Part(47, 40, 20, 22) Middle(0, 0, 20, 22);
			TextureHover = "rvwp.png" Part(85, 40, 20, 22) Middle(0, 0, 20, 22);
			TextColor = transparent;
		};
		MaximizeButton = &BorderlessButton;
		MinimizeButton = &BorderlessButton;
	};

	Content = {	// Alternatively: panel
		BackgroundColor = #2e2e2f;
		DistanceToSide = 15;
		PaddingBetweenButtons = 20;
	};
}

Rather than each widget declaring different but similar properties for each part - for example, Texture and TitlebarTexture - they have a child renderer to handle each part

[rubenwardy]

Side-note: You can generalise nearly all theming as a background with states. For example, titlebars and buttons are similar in that they have a background and some text. You should consider having a common base for "boxes" with backgrounds and text like this, so that they are all guaranteed to support Texture/BackgroundColor/Padding/Border/etc, and any common states

A ChildWindow would compose of a titlebar component and a content component, both being draw with boxes that can take those above parameters using shared code

[texus]

One of the goals for 0.9 was to make widgets use reusable components, but it was too much work and I gave up on it. I had a lot of ambitious ideas for 0.9, but those kind of rewrites are just way too time consuming and demotivating for me, so this won't happen in 0.9 (unless someone contributes the code).

An alternative design would be to just have a single global TextColor and BackgroundColor property (and others) that are shared by most widgets. You would still need to set these properties in a few widgets that don't use the default values, but since you would need to set less properties for each individual widget it wouldn't matter so much that they aren't grouped nicely. Unfortunately the current code structure doesn't allow it (since themes are translated into renderers first without knowing what widget type yet and thus without knowing which of the global properties to use).

[texus]

While I still want something more composite-based in the future, it won't happen for TGUI 1.0, and I'm not going to keep this issue open until it does.

Global properties in theme files were added, so a lot of duplicate lines can be reduced by simply specifying a global TextColor or BackgroundColor property at the top of the theme. Since this information was finally documented today (in the second half of the custom themes tutorial), I don't see a purpose to keeping this issue open any longer.