Thursday, October 30, 2008

Making neat user interfaces.

I did grow increasingly dissatisfied with existing user interface libraries such as wxWidgets or Java Swing.
What i would rather like to see is a system where widgets are made from combinations of uniform basic building blocks. Like on websites, using HTML, CSS, and Javascript. I'd use that in my software, if not fact that HTML was never designed for that kind of use, and is too heavyweight while lacking in many things that you need for user interfaces.
So I decided to make my own. Sounds like typical yet another unusable reinvented wheel's story, doesn't it? ;)
Theres screenshot of very early version of that thing in action
On screenshot you can see: the style for that thing, the code that builds the UI, and image of button texture, that is used to make button borders (it is cut in 4 parts for corners, and stretched for edges).
You can think of it as of html-like + css-like system, rendered using OpenGL, yes, with full hardware acceleration.

Any widget is built from simple basic visual elements, Alignment (a thing that aligns whatever you put inside however you please, also handles padding), Grid (similar to tables in html), Box (similar to div in html), text labels of course (todo, editable text labels), combined with non-graphical "logic" object which handles various events and updates visual elements.
For example, a scrollbar could be a Grid, with 2 boxes for arrow buttons, and 3 boxes for space above scroll button, scroll button itself, and space below. Combined with logic object that handles movement of scrollbar and calculates scrollbar position.

Parameters are mostly supplied in a css-like way - you specify the stylesheet that gets applied to your user interface. That allows for easy and consistent styling. You could style the scroll bar same way as you could style buttons, or any other kind of boxes.

I'm still in phase of working on the underlying system and designing it, so at the moment i'm not building any widgets themselves yet (other than basic buttons to test event propagation).
The pretty looks are all defined with styling.

No comments:

Post a Comment