I was recently brought onto a project where we are developing a lot GUI elements for BlackBerry devices. The standard RIM APIs are pretty basic, almost never do what is required and are difficult or impossible to extend, so we end up re-implementing chunks of it.

Currently the code we have isn't super organized and factored so there are lots of little tricks that get implemented over and over again. I had a thought about how to aid development efforts on this platform and wanted to see if the community could tell me if I'm still sane or if I've gone totally nuts.

By far, the biggest organizational problem I've run into is making sure that each screen is laid out properly with proper padding and such. The current approach is to manually keep track of padding like so:

protected void sublayout(int width, int height) {
  final int padding = 5;
  int y = padding;
  int x = padding;
  layoutChild(_someChild, width - padding * 2, height / 3 - padding * 2);
  setPositionChild(_someChild, x, y);
  y += _someChild.getHeight() + padding;  // Calculate where to start drawing next.
  /* ... snipped ... */
}

As you can see, positioning elements on a screen is a nightmare due to the tedium.

I have investigated other GUI frameworks but, for a variety of reasons, it is difficult to find one that suites our purposes.

One potential solution that came to me is to create a GUI framework who's API resembles HTML/CSS. This would allow for things like padding, margins, borders and colours to be handled through a sort of CSS API while the content would be organized using the HTML part of the API.

It might look something like this:

public class OptionsScreen extends Document {
  public OptionsScreen() {

    // You would set the style (like CSS style) through the constructor.
    Div content = new Div(new Style(new Padding(5), Color.BLACK));

    // Then build up a tree of elements which can each have their own style's.
    // Each element knows how to draw itself, but it doesn't have to worry about 
    // manually handling things like padding.
    //
    content.addChild(new P("This is a paragraph", new Style(new Padding(), Color.RED)));

    Ul list = new Ul();
    list.addChild(new Li("item 1"));
    list.addChild(new Li("item 2"));

    content.addChild(list);

    addChild(content);
  }
}

I can imagine this making it easier to customize the UI of our app (which is very important) with different fonts, colours and layouts.

Does this idea belong on The Daily WTF or do you think there is some promise?