Problems with styling, etc

Troubleshooting gui
1

Ok so I got a lot of problems regarding the style of the ProgressBar mainly. So if I start styling the problem I run into is the ElementID stuff, where I can’t set an individual object to have said Element ID. I found this out by looking through the code itself. How can I make it like CSS and just have a specific set of styles apply to 1 specific object? It’s easy in html as i can do something like <div class=""> or <div id="">. Also while I’m at it, how can I style the text of a specific ProgressBar?

2

Also another thing: Is there any way of me knowing the specific attributes? Like if I want to make text bold do I use attrs.set("fontWeight", 500);

3

Hi, and welcome to the community
I´m gonna try to explain what i know about the ElementId stuff, lol
Your elemenid helps your style on knowing what panel to target and your childs, and if you dont specify it when you create your panel, its going to have the elementid that the class has defined for you, but you can make it more unique if you change it
Example of the element id with childs

ElementId parent = new ElementId("myparent");
ElementId child = parent.child("mychild");  //this will be myparent.mychild

or

ElementId child = new ElementId("myparent.mychild");  //this will be myparent.mychild

The progressbar has its own parent id, called progress, and it has two childs, a Label panel called label and a normal Panel called value. The ProgressBar sets its own id for styling as progress.container. The label will be progress.label, and the normal panel is progress.value

If you want to change the id, it will be like this

ProgressBar bar = new ProgressBar(new ElementId("myprogressbar"),"mystyle");

and the style will be something like this in java

attrs = styles.getSelector("myprogressbar.container", style);
attrs.set("background", new QuadBackgroundComponent (monkey));
attrs.set("preferredSize", new Vector3f(barS.x,barS.y,1));

attrs = styles.getSelector("myprogressbar.label", style);
attrs.set("background", labelC);
attrs.set("alpha", 0.8f);
attrs.set("color", ColorRGBA.Blue);
attrs.set("preferredSize", new Vector3f(labS.x,labS.y,1));
attrs.set("textVAlignment", VAlignment.Center);
attrs.set("textHAlignment", HAlignment.Center);
attrs.set("fontSize", 25);

attrs = styles.getSelector("myprogressbar.value", style);
attrs.set("background", new QuadBackgroundComponent (blood));
attrs.set("preferredSize", new Vector3f(valS.x,valS.y,1));

When your using a panel and you want to change the style and you dont know what you can change, just look at the class of the panel and look for the @StyleAttribute annotation, the value of the annotation is what you put on the attrs.set

I hope this helps

3 Likes
4

And if you just want to change the color of the text of a specific progress bar then you can use what I told you in the discord channel:

ProgressBar myBar = new ProgressBar(...);
myBar.getLabel().setColor(ColorRGBA.Red);

…or whatever.

Edit: and for others stumbling across this thread, the Lemur wiki has some background on the underpinnings of the excellent answer that @pankey provided. Styling · jMonkeyEngine-Contributions/Lemur Wiki · GitHub

1 Like