Thursday, July 29, 2010

Sliding It Back To My First Post

My very first post in this blog (May 2008) was about creating a progress indicator component. At the time LWUIT only had one style per component and the post was mostly about threading in LWUIT. Over that time we considered adding a progress indicator component frequently but had a very difficult issue with its customization. How can we create a component which is both powerful enough for general usage and not too restricted for the various use cases.

Enter the new Slider component which thanks to some advantages such as the multiple styles is far more powerful than the original and it is now a part of LWUIT. The slider can be manipulated like a gauge to control elements such as volume, it can be used to indicate position (with a text overlay inherited from Label) and it can be customized in pretty much any way imaginable.



The demo you see to your right is ridiculously simple containing 3 such sliders, the top and middle one are identical with the middle one adding a status overlay. The bottom slider is set for infinite progress support which is useful to indicate a "please wait" status.



To create such a theme I just customized the "Slider" and "SliderFull" styles with a border for the full state and the empty state (essentially the squares in the center are just the style of SliderFull painted on top of a style of Slider).



final Slider s1 = new Slider();

f.addComponent(s1);



final Slider s2 = new Slider();

s2.setRenderPercentageOnTop(true);

f.addComponent(s2);



Slider s3 = new Slider();

f.addComponent(s3);

s3.setInfinite(true);

new Thread() {

private boolean dir = true;

private int val = 0;

public void run() {

try {

sleep(1000);

while (Display.getInstance().getCurrent() == f) {

sleep(100);

s1.setProgress(val);

s2.setProgress(val);

if (dir) {

if (val > 100) {

dir = false;

}

val++;

} else {

if (val < 1) {

dir = true;

}

val--;

}

}

} catch (InterruptedException ex) {

ex.printStackTrace();

}

}

}.start();







0 comments:

Post a Comment