September 30, 2014
Hot Topics:
RSS RSS feed Download our iPhone app

Introducing a Lightweight UI Toolkit: Shake Your User Interface

  • September 25, 2008
  • By Ibon Urrutia
  • Send Email »
  • More Articles »

Introduction

You saw in the first article of this series [1] the basic structure of a simple LWUIT application, but today it is not sufficient just to have a clear UI. From modern web applications (full of JavaScript tricks) to desktop applications, every 21st century application shows dynamic user interfaces that react with smooth transitions, animations, and other design tips. It's time to add cool stuff to your weather application.

You will beautify the application you started in the first article: I have changed some of the images and default theme from the first article's resources file, and you will play with all the animating effects that LWUIT supports. Without any effort from programmers, this library improves your application's look and feel, adding movement to some of your components. If your target devices don't support those effects well, or they have very limited computing capabilities, you can disable all effects by using the Display.setLightMode(true) method, which shows fewer visual effects/lighter versions of these visual effects to work properly on low-end devices.

But, you also have to resolve some problems with your first application. You will discover other strengths of LWUIT on your way.

The Problem with Yahoo Weather

In the first article, your application showed weather forecasts only for one city (Bilbao was the default). I told you that you need to know the location ID of the target city to query Yahoo's service. Unfortunately, the only way to know the code of a world city is by browsing to http://weather.yahoo.com/; the ID is in the URL for the forecast page for the wanted city, which is the way they recommend [2]. As you can imagine, it's awful advice telling you to use a browser to introduce their city code. This is not what a user expects to encounter in a complete weather application. You have several ways of resolving that:

  • In the Resource Editor application explained in the first article, you can add data to your resources. You could add all city codes as a data file on the resources, but that will increase your application's size. It will be hard to collect all city codes (Yahoo shows weather information for many cities in the world).
  • You can implement those steps for getting city codes, allowing your users to browse through all countries and cities presented on Yahoo's site. The problem is that every redesign on Yahoo's pages or site may cause errors in your application. Also, parsing HTML is slower than getting code from a data file.

You will take the second approach: If the weather city codes change, your application still will run without problems, and I don't think that Yahoo is going to change its page design in the near future.

Another desired feature that you didn't add in first article is the capability of asking weather information for many cities. Of course, you simply can let users browse the countries list every time they want to change the city, but it will be more useful to store the last consulted city codes as bookmarks.

Now, it's time to get to work!

A new parser, but for HTML

You introduced a new parser class, KXmlHtmlParser, to read Yahoo's HTML pages; KXML supports a "relaxed" mode to parse XML documents that aren't standard as HTML pages. Some points about it:

  • To use that relaxed mode, you have to define a feature in this strange way:
    ...
    parser.setFeature("http://xmlpull.org/v1/doc/
                       features.html#relaxed", true);
    ...
    
    Annotate it. I didn't see many examples on Internet
  • You will search some special divs on Yahoo weather, and simply parse the anchor tags (<a>). If someday Yahoo decides to change its pages, your application will be in trouble, but I think that is better than nothing (or better than remembering city codes).
    ...
    if ("yw-regionalnav".equals(parser.getAttributeValue(null,
       "id"))) {
       navLetters = parseLocations(); }
       else if ("yw-regionalloc".equals
          (parser.getAttributeValue(null, "id")) ||
          "yw-browseloc".equals(parser.getAttributeValue(null,
             "id"))) {
          records = parseLocations();
    ...
    

Browsing through Countries and Cities: Lists

I created a new class, PlacesDisplay, that's very similar to the existing WeatherDisplay. It will show you all countries and cities and allows browsing though those lists. Yahoo pages first show world zones; secondly, it shows countries; and finally, it shows city codes. Some of the countries have many cities that are divided on alphabetical order pages.

Figure 1: First page on the Yahoo site


Tags: mobility



Page 1 of 7



Comment and Contribute

 


(Maximum characters: 1200). You have characters left.

 

 


Sitemap | Contact Us

Rocket Fuel