Friday, September 25, 2009

Review of "LWUIT 1.1 for Java ME Developers" by Packt Publishing [part 04 - reaching the end]


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:
  1. The TextFields shouldn't be this high. I need one character high TextFields.
  2. The style of the form needs adjustment.

The reason for the size of the TextFields in the plain and simpel LWUIT form above is that I used GridLayout to ensure that I had two colums of components, one with the labels and one with the TextFields. LWUIT will ensure that the components are distributed across the complete screen. Please note that the form itself has a BorderLayout and in its center there is a container with a GridLayout.
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.

The cool thing of the Theme Editor is that it has a preview window which shows you exactly how the UI will look given the theme you're creating. It also allows you to provide your own MIDlet, but that didn't work with my test MIDlet, which actually is extremely simpel. I didn't look into the 'why doesn't it work' and the book is not helping at all on this topic. It has some statements, but there's no help in them. Btw, the Theme Editor is in the LWUIT distribution, not in the JavaME SDK 3.0 so don't look for it there. There's also a webstart version on the LWUIT site.
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.



Shai Almog said...

nice post. Couple of things:

1. You can align labels to the right using setAlign(Label.RIGHT). Simple ;-)

2. You could use the grid layout you started with. Just add everything to a container (in grid layout) and place it in the NORTH of the border layout. This will ensure it only takes up the preferred height and not the entire form height.

3. While I agree please do vote for the Matisse RFE... You can still use Matisse for LWUIT. Just create an AWT Container in Matisse and place the components. When the layout is ready move the source code to the LWUIT project and change the package names in the classes. (you might need to create an add(Component) method that calls LWUIT's addComponent(Component) method as well...

Iwan said...

Thx for the tips. Especially on the alignment of the labels, that is sooo simple, and I now realize I was aligning the components instead of the text.

The Grid Layout would work as you mentioned, but I'm happy I found out about the GroupLayout. Once you get it, you get it. I was always a fan of the Gridbag Layout in Swing, because I could start with it using simple layouts and then evolve to the complex layouts I would surely need in the end.

I'll try and use Matisse. I did vote already for the issue. Now that I've been working with LWUIT I think this is something that should be embraced by the JavaME community and better supported and expanded. It's really convenient, simple, straightforward and most of all appealing and compelling. An answer to iPhone UIs if you ask me, on the JavaME platform.


Shai Almog said...

If you liked the gridbag layout approach LWUIT now has a TableLayout in SVN (will land in 1.3) that is much simpler than gridbag and allows spanning, variable widths and the ability to define width by percentage.
Its quite powerful and serves as the basis for the LWUIT 1.3 Table component. The advantages it has over GroupLayout is that it is much easier for "hand coding".

Iwan said...

Ah, thanks. That table layout seems promising. Although to be honest, your tip on using Matisse is invaluable, so now I'm really craving for Matisse like support on LWUIT.
Doing it by hand is cumbersome, although pencil and paper do get you a long way, draw some lines and it all comes together.

Are there any plans in getting LWUIT forms in NB such that you can also use the navigation-flow-editor to visually create the flow of the UI?


my heart said...

m new with LWUIT and m in need of creating a table which should have 19 colums and 15 rows the code gets compiled and is getting clean and built but when i run it on emulator the emulator cannot load the cose so is there any possible way to create a table containing 19 coloums and 15 rows i mean any simpler code or any type of alternative to this stuff???

help needed urgently!!!!