Introducing a Lightweight UI Toolkit: Bringing Desktop Development into Java ME

Show the Results

The following code shows the main parts of the WeatherDisplay class.

form.setTitle(weatherRss.title);
form.setLayout(new BoxLayout(BoxLayout.Y_AXIS));

Container conditionContainer = new Container(new BorderLayout());
Label textCondition = new Label(weatherRss.actualCondition.text);
...
Container center = new Container(new BoxLayout(BoxLayout.Y_AXIS));
center.addComponent(humidity);
...
conditionContainer.addComponent(BorderLayout.NORTH, textCondition);
conditionContainer.addComponent(BorderLayout.WEST,  icon);
conditionContainer.addComponent(BorderLayout.EAST,  temp);
conditionContainer.addComponent(BorderLayout.CENTER, center);

Button link = new Button("Get_complete_forecast");
link.addActionListener(new ActionListener() {
   public void actionPerformed(ActionEvent arg0) {
      try {
         weatherMid.platformRequest(weatherRss.link);
      } catch (ConnectionNotFoundException ex) {
         ex.printStackTrace();
      }
   }
});
form.addComponent(conditionContainer);
form.addComponent(link);

As I said earlier, you nested a BoxLayout Container inside the CENTER of a BorderLayout Container. That, in turn, is placed on a BoxLayout Form. Basically, this way, I know that the temperature is always going to be shown on right border, and that other weather parameters always are going to be shown on the center of the screen.

So, the final result is shown in Figure 4. In Figure 5, with a smaller resolution, a scroll appeared but the relative positioning of all elements is maintained.

Figure 4: Displaying poor results

Figure 5: Scroll appears in small screens

Boring? Yes! Use Styles and Resources

Okay, you have seen that with LWUIT you have more possibilities to design your screens than with the ancient lcdui package, but to be honest, at this point your app seems only a little better than old apps.

LWUIT adds a new concept to mobile UI components: a Style object associated with every element shown on the screen. You can modify color, font, margin and padding, background images, and even how the background is painted (using Painters, that you will see in the next article). The way to do it is to get the Style object associated to a component and change its properties, as shown in the next code sample (colors must be expressed in RGB notation):

Button link = new Button("Get complete forecast");
link.getStyle().setBgSelectionColor(0x000000);
link.getStyle().setBgColor(0xFFFFFF);
link.getStyle().setFgColor(0xFFAABB);

Page 4 of 7



This article was originally published on July 17, 2008