As you could read in the 3rd part of my reviewon "LWUIT 1.1 for Java ME Developers", creating the actual form and putting functionality in it is actually very simple. The book helped me a lot, but mainly because I already new what I wanted, I know some Swing and a reference guide is good enough in those cases. After a bit of effort I ended up with the screen at the right. It looks like a real form, and it behaves as a real form. But you have to be from the sixties to appreciate this kind of GUI, in this day and age you want to see something more appealing.
Look at the previous post and you know where I wanted to end up. The SVG version of the form looks a lot better and more importantly it is in the line of our game IFF's look and feel.
There are 2 main points to be addressed in this perspective:
- The TextFields shouldn't be this high. I need one character high TextFields.
- The style of the form needs adjustment.
So I needed a different layout and the only really other candidate for this type of UI is the GroupLayout. I'd been playing with Matisse in the past (NetBeans' WYSIWYG tool to create Swing UI's) so I knew what was possible. It is also one of the more complicated layouts in LWUIT. But this is where the book shines. The book goes into fair detail on the topic of layouts and very much on the GroupLayout. This is also one of the few occasions I thought that the amount of code in the book was just right. Not too much and not too little. Excellent, because GroupLayout requires a certain kind of thinking which differs from any of the other LWUIT supported layout. It took me about 15 minutes to go through the book's text on the layout and another 5 minutes to create the screen you see above to the left.
Please note, the book doesn't state it, but you should draw your form on a piece of paper before anything else and then draw around your components the groups (Vertical and Horizontal, read the book or the online Developer's Guide and you'll understand) before attempting to code the beast. Unfortunately, Matisse can be used to create the form, but that hasn't been released by the NetBeans team. After posting this I'm going to vote for the related issue 144743 in IssueZilla. Please also vote for it.
Styling is done using either by setting the style of components on the form using code. And the book covers this quite extensively. Actually, I started off by using this mechanism of changing the appearance of the UI. But a more elegantly way of achieving the same is using 'themes'. Themes are sets of definitions of a UI's appearance much like a CSS. LWUIT allows for creating themes in code, but there is also a Theme Editor available. Both ways of creating a theme are very well documented in the book, although I have to say that the Theme Editor is pretty much self-explanatory.
As you can see above, to the left, the UI looks pretty much like the SVG version shown in the previous post, but it's not quite the same. Again the TextFields are a bit different. There's a reason for this, and I found this obviously, considering the image on the right. No help from the book, the Developer Guide or the LWUIT JavaDocs. The problem was in the proportional bitmap font I used in the left image. The problem was corrected by using a system font. I haven't found a way to right-allign the labels. Still to be done, sometime soon.