Nifty Scrollbar, how does it works?

Dear all,

I am trying to create a panel with a scroll bar but it does not work. I tried to find a tuto and i check the Nifty bible but no one explain how the scroll bar works.

So please, can someone explain me how does it works and how can I make a list of panel managed with a scroll bar?

I tried this :
[java]<control id=“scrollbarprofiles” align=“center” name=“scrollPanel” verticalScrollbar=“true” horizontalScrollbar=“false” height=“70%” width=“75%”>
<panel id=“profiledropdown” align=“center” childLayout=“vertical” height=“100%” width=“100%” ></panel>
</control>[/java]

And to fill in:
[java]Screen index = nifty.getCurrentScreen();
Element element = index.findElementByName(“profiledropdown”);
for(int i = 0; i < 10; i++) {
final int b = i;
new PanelBuilder(“listofprofiles” + i) {{
backgroundColor("#f" + b + “” + b + “f”);
height(“10%”);
}}.build(nifty, index, element);
}[/java]

But of course, it does not work…

Look at those beautiful scroll bar on the top and the left (and remark the horizontalScrollbar=“false” on the code…).

Anyway, I really need some help.

Thank in advance.

Note: images must be direct links in order for them to appear in a post.

The wiki on sourceforce is outdated to correctly choose the visibility of the scrollbars you should use horizontal and vertical attribute . Look at the new github wiki. About the phantom bars on top and on the left I don’t know why they are there but maybe fixing this two attributes helps . Tell me the result if you change them! .

p.s. you could use nifty-editor to avoid this errors in the future. It’s also available as JME plug-in but it’s only at the testing stage so use carefully! .

In fact, I try first to create it with the nifty-editor. But what i want to do is not possible with the editor.

I want :

  1. I receive a List of Profile (I don’t know the size)
  2. I show every Profile on a panel
  3. The List can be very long so I want a vertical scroll bar

So I try to :

  1. Create the control scroll bar on the XML
  2. Create a container panel on the XML
  3. Create each Profile panel with Java by editing the container panel

The look of my screenshot seems working but is not.Only 10 Profiles (red lines for the tests) are showed. If I ask to show 15 profiles, the 10 first are showed and I try to go down by clicking on the down arrow but nothing happens. And of course, there is that problem of phantom bars… I read the link you send to me but it is not very helpful.

Does someone have a simple example who can do something like that ?

Thank a lot.

Oh sorry I didn’t get what you are looking for . With scrollpanel unfortunately you can’t use percentage values for the panel inside , oh well you can but in that case you will have a fixed panel . Yuo have to use pixel values and so having the elements inside the panel with fixed height . So in your case assuming that each profile panel is tall 30px and you have 10 profiles the panel must be tall 300px. Here is the xml and the code :
[xml]
<?xml version=“1.0” encoding=“UTF-8” standalone=“yes”?>
<nifty>
<useControls filename=“nifty-default-controls.xml”/>
<useStyles filename=“nifty-default-styles.xml”/>
<screen id=“start” controller=“mygame.Main”>
<layer id=“layer” backgroundColor="#000f" childLayout=“center”>
<control name=“scrollPanel” id=“GScrollPanel0” vertical=“true” height=“36%” horizontal=“false” width=“36%”>
<panel id=“GPanel0” height=“300px” width=“100%” childLayout=“vertical” y=“0” x=“0”/>
</control>
</layer>
</screen>
</nifty>
[/xml]

and in your bind method :
[java]
public void bind(Nifty nifty, Screen screen) {
Element element = screen.findElementByName(“GPanel0”);
for(int i = 0; i < 10; i++) {
final int b = i;
new PanelBuilder(“prof” + i) {{
backgroundColor("#f" + b + “” + b + “f”);
height(“30px”);
}}.build(nifty, screen, element);
}

}[/java] 

I hope that now it is clearer ! :smiley: . By the way thanks for using nifty-editor! :slight_smile: are you sure that you have the last version ? it doesn’t have the scrollpanel attributes bug .

1 Like

And it works !

So, the height of the panel “GPanel0” must be calculate (liste.size() * profile.height()) and it works nicely…

Thank a lot =D

And of course I use the nifty-editor! As all developers, i am lazy :slight_smile: It is more easy to drag and drop my components :slight_smile: I certainly have the latest version (dl 5 days ago). Maybe I did not understand how the scrollpanel works. I will take a look now.

Again, thank you !