Introducing a Lightweight UI Toolkit: Bringing Desktop Development into Java ME
Forms have three different areas on screen:
- A title bar
- A menu bar, where software buttons are laid
- A content pane, where you are supposed to add components
As in Java SE, you have to specify how you want to place components inside your Container. You have five different Layouts:
- BorderLayout: Similar to its desktop big brother, defines four areas where you can place components: NORTH, SOUTH, EAST, and WEST
- BoxLayout: Your components will be placed horizontally or vertically
- FlowLayout: Your components will be placed one after another in a row. If their width overflows the complete width of the screen, there will be multiple rows
- GridLayout: Places components in a grid of cells
- GroupLayout: This is the same as GroupLayout created for GUI Builders such as Matisse. You can use it, but I think that its importance is going to be greater on the future. Sun is giving some hints about their future plans with LWUIT: create a mobile GUI builder using these LWUIT components as a palette. So, stay tuned for future news.
As you can see, you can combine different containers with different layouts. The strength of using this approach based on layouts is that components will maintain relative position between them. So, your GUI will have a similar appearance without being overly affected by differences in the device's resolutions. If sometimes you have been obliged to draw your components directly on a Canvas, you may see Layouts as a step forward to minimize fragmentation in user interfaces.
To add real functionality to your buttons, I also defined an ActionListener. When the user presses a button, the actionPerformed method is called. In your case, it simply creates a connection to Yahoo! Weather, parses the RSS, and shows a screen with results.
As with every mobile application, I added two soft buttons to the screen: exit and about. The way to include those buttons is to create Commands and add them to a Form with the addCommand method.
The result of adding those buttons is shown in Figure 3.
Figure 3: First Lwuit Screen
I'm not going to explain extensively how the RSS is parsed because it is not related to the main topic, but I'll provide some comments to help you better understand the code. If you use KXML, getting a RSS feed is as simple as this:
parser = new KXmlParser(); HttpConnection conn = (HttpConnection) Connector.open( "http://weather.yahooapis.com/forecastrss?p=SPXX0016&u=c"); InputStream rssStream = conn.openInputStream(); InputStreamReader isr = InputStreamReader(rssStream); parser.setInput(isr);
At this point, I set the place for which you want to obtain a weather forecast hard-coded (it is Bilbao, in Spain, a city near where I live). If you want to set your city: location parameter of the URL (p) can be a U.S. Zip code or a location ID. To find your location ID, browse or search for your city from the Yahoo! Weather home page. The weather ID is in the URL for the forecast page for that city.
After parsing Yahoo's response, you will have a YahooWeather object populated with all the information you want to show. So, it's time to create a view.
Page 3 of 7