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();







16 comments:

  1. I'm trying to do this but I cannot find the Component "Slide". I'm new at your blog so maybe I'm missing something from the past. I'd be grateful if someone could explain me where is this "Slide" coming from.

    By the way, congratulations for the new release, I hope that under Oracle's umbrella everything will keep being as good as now. Thanks for your work!

    ReplyDelete
  2. How can someone get this?
    Do we have to wait for the next official release?

    ReplyDelete
  3. Hi Shai, I can't use the Slider Component. I saw the Slider code and I think there aren´t the "Slider" and "SliderFull" Styles used in UIManager.getInstance().getComponentStyle(...). Also I have the last version of LWUIT (1.4). How can I use properly the Slider Component?

    Regards.
    Lucas M. Nobile

    ReplyDelete
  4. I've solved the problem fixing some imports. Slider works like a charm!

    Regards.
    Lucas M. Nobile

    ReplyDelete
  5. Unfortunately I only see a white rectangle instead of the slider :(

    Probably the problem is here:
    "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).
    "

    How can I do that?

    ReplyDelete
  6. Follow the resource editor tutorials, just add a theme and add styles for Slider/SliderFull.

    ReplyDelete
  7. I executed the jar I found in LWUIT SVN: www -> designer directory. I added fgColour and bgColour to the Slider and the SliderFull components. (FYI the Slider component cannot be found in the component's list which gets displayed when you press the "Add" button in the Themes tab but only in the GUI tab when added - Only the SliderFull component can be found in the Themes tab).

    The code for that is as simple as this:

    - Slider volSlider = new Slider();
    - volSlider.setMinValue(0);
    - volSlider.setMaxValue(100);
    - container.addComponent(volSlider);

    My problem is that I still see a white (colour depends on the Slider's background colour if I remember correctly) box instead of the Slider.

    I just want to add a slider from 0 to 100 and use it as a volume control. The user must be able to interact with it.

    Any help around?

    ReplyDelete
  8. I don't understand your problem?
    You are able to customize the slider color right? Just set a background image, image border... Whatever to make it look as you want.
    If you want the slider to be editable just invoke setEditable.

    ReplyDelete
  9. I was just missing the setEditable() :S Thanx for your time Shai!

    ReplyDelete
  10. got it! But When I run the code only the percentage is visible :-(

    ReplyDelete
  11. Brian please see my response to gavdian above, you need to customize the theme.

    ReplyDelete
  12. Hi! Can you explain how did you change style of the progress bar

    ReplyDelete
  13. Slider has two styles Slider and SliderFull. If you invoke setUIID("Progress") on slider then the second style will become ProgressFull etc.
    Essentially just create the two styles for both selected and unselected styles, within them define an image border matching the style you want. You can use a 9-image border and the 9-image border wizard to achieve these styles.

    ReplyDelete
  14. The source has nothing in it. The resource file is the entire thing, it won't help much in understanding how this works though.

    ReplyDelete
  15. how to get seekbar in lwuit for audio/video player using slidercomponent ????

    ReplyDelete
  16. How about to use the slider as progress bar if I use the Resource Editor and after the progress bar complete 100% it will continue at next form?

    -Thanks-

    ReplyDelete