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();
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.
ReplyDeleteBy 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!
How can someone get this?
ReplyDeleteDo we have to wait for the next official release?
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?
ReplyDeleteRegards.
Lucas M. Nobile
I've solved the problem fixing some imports. Slider works like a charm!
ReplyDeleteRegards.
Lucas M. Nobile
Unfortunately I only see a white rectangle instead of the slider :(
ReplyDeleteProbably 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?
Follow the resource editor tutorials, just add a theme and add styles for Slider/SliderFull.
ReplyDeleteI 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).
ReplyDeleteThe 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?
I don't understand your problem?
ReplyDeleteYou 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.
I was just missing the setEditable() :S Thanx for your time Shai!
ReplyDeletegot it! But When I run the code only the percentage is visible :-(
ReplyDeleteBrian please see my response to gavdian above, you need to customize the theme.
ReplyDeleteHi! Can you explain how did you change style of the progress bar
ReplyDeleteSlider has two styles Slider and SliderFull. If you invoke setUIID("Progress") on slider then the second style will become ProgressFull etc.
ReplyDeleteEssentially 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.
The source has nothing in it. The resource file is the entire thing, it won't help much in understanding how this works though.
ReplyDeletehow to get seekbar in lwuit for audio/video player using slidercomponent ????
ReplyDeleteHow 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?
ReplyDelete-Thanks-