Tuesday, July 15, 2008

Define That Boundary - Borders

One of the more important features we left out of the initial drop of LWUIT was pluggable borders, this is no longer the case in the latest drop.
The new LWUIT drop includes a border class with several default border types, it also features the ability to replace this class with custom made borders. A border is now a part of the style, it can be replaced using the resource editor (the Ant task is still pending here). There is really not much to it, borders draw themselves in the padding area so you need to make sure your padding is big enough to contain the border.
One of the coolest ways you can manipulate borders is with the resource editor, just pick a component type (e.g. the menu) and set a border to it (in this case round border with theme colors and 10 pixel arcs). Notice that round borders are REALLY slow with image backgrounds/translucency so don't try running something like this on an S40 device (this is due to the lack of shaped clipping in MIDP). However, they work rather well for opaque or fully transparent borders and look absolutely stunning... The performance penalty might be acceptable for something small like a button, generally I consider the rounded border approach to be the superior approach for generating rounded buttons mentioned in a previous blog post.
Borders can be easily created and modified in code in the predictable ways through getStyle().setBorder(...) etc.

One thing that should probably be clarified about borders is how they relate to painters, normally these are two completely distinct features with no relation to one another... However, in some cases a border must control the background (e.g. in rounded borders) in such cases the border essentially replaces any custom painter and the painter would have no effect!

Border colors may be "implicitly" built from the theme or specified implicitly by the user, we tried to define "rules" for color selection using the new lighter/darker color methods we added to Graphics. This is a very powerful feature but might yield unpredictable results.


  1. Is there a way to control the thickness of a (rounded) border? I want the border to become thicker when the component is selected, but haven't found a way yet to accomplish this.


  2. No, this is technically not possibly in MIDP since we can't control the stroke width. Drawing a rectangle within another might create "gaps" on some devices for some rectangles.
    You can either use an image border or just subclass and create your own border type (we just use a 9 or 3 image border).