[Solved] No component backgrounds if no layout is used

I’m running Lemur 1.9.1 on jME 3.1.0-beta3. I’m designing a login screen for my game, which at the moment consists of only two text fields (username & password) and a “Login” button attached to a background panel. I’ve tried using several different layouts, but none of them gave a result that was anything near what I wanted. Consequently I decided to drop the layouts in favor of directly attaching textfields and button as children of the background panel node, which from reading several forum topics on layout seems to be the way to get absolute positioning. Doing it this way, however, results in components without any borders/background:

As a test in case the lack of a layout was doing something funky with the background, I added a red QuadBackgroundComponent to the username textfield. As you can see, it doesn’t show up.

Here’s my code (inside my login management appstate):

public void stateAttached(AppStateManager manager){
		// create login window
		loginWindow = new Container();
		loginWindow.setPreferredSize(new Vector3f(450f, 325f, 0));
		loginWindow.addControl(new CenterWidthControl(client.getCamera(), loginWindow));
		loginWindow.addControl(new CenterHeightControl(client.getCamera(), loginWindow));
		// create UI components and add to window
		TextField username = new TextField("username");
		username.setInsets(new Insets3f(4.0f, 4.0f, 4.0f, 4.0f));
		QuadBackgroundComponent background = new QuadBackgroundComponent(ColorRGBA.Red);
		username.setPreferredSize(new Vector3f(50, 20, 0));
		username.setLocalTranslation(10, -20, 10);
		TextField password = new TextField("password");
		password.setInsets(new Insets3f(4.0f, 4.0f, 4.0f, 4.0f));
		password.setLocalTranslation(10, -40, 10);
		Button loginButton = new Button("Login");
		loginButton.addClickCommands((Button source) -> {

			// do login stuff

		loginButton.setInsets(new Insets3f(4.0f, 4.0f, 4.0f, 4.0f));
		loginButton.setLocalTranslation(375, -285, 10);

What do I need to do differently to get absolutely positioned components that don’t lose their borders/backgrounds?

If you don’t use layouts then you have to set EVERYTHING yourself, including preferred size, etc…

What is the look you are trying to get? Maybe there is a way to make layouts work. Show me the layout that you want and I will tell you the best way to achieve it.

I generally use row amd column setters.

...addChild(new Button("button"), 0, 1);

So i start with a primary container. If i want two or more columns i add a container as a child and set the row/columns in that container. This way i can have as many columns as i want wherever i want.

If I can get layouts to do what I need, then it’d be nice to avoid that… but if I have to ditch layouts to get what I need, then I’ll just deal with it.

Here’s (roughly) what my end goal is (pardon the rough sketch - I just whipped this out in GIMP):

Thanks for the tip - I’ll go take a look at this.

You need multiple nested panels…

The user name and password section is one container with a SpringGridLayout… ie: the default setup.

The button panel at the bottom is another container. Then they all go in the outer container.

Container window = new Container();
Container form = window.addChild(new Container();
form.addChild(new Label("User name:")); // starts a new row because no row/col specified
form.addChild(new TextField("Textfield"), 1);  // column specified, continues current row
form.addChild(new Label("Password:")); // starts a new row because no row/col specified
form.addChild(new PasswordField(""), 1);// column specified, continues current row

window.addChild(new Checkbox("Checkbox (Remember Password)"));

// Create a button panel in column major layout
Container buttons = window.addChild(new Container(new SpringGridLayout(Axis.X, Axis.Y)));
buttons.addChild(new Button("Another Button"));
buttons.addChild(new Button("Login"));

…and then if you want the window bigger, set it’s preferred size large and everything will stretch.

But probably what you want is to set the insets of the form and buttons containers.

For example:
form.setInsets(new Insets3f(20, 20, 0, 20));
buttons.setInsets(new Insets3f(50, 10, 10, 10));

Might closely approximate the white space proportions you have.

Thank you very much, @pspeed… with a little bit of inset tweaking, a BorderLayout for the buttons, and disabling a few background panels I got it looking just right.

Personally, if it were me, I’d also set the Username/password label alignment to be right justified.

From a visual perspective, the window also has a ton of white space. You might consider sticking a graphic or something at the top so that the form appears lower and closer to the buttons.

I tried setting the username/password labels to right justification like you suggested, but the whole thing just looks squashed:

The whole thing would need some significant re-aligning if I leave it like that, but it does look nicer with the labels right next to the text fields. I think I’ll try squishing it down significantly in both height/width to reduce whitespace.

(Marking this topic as solved since my original problem is taken care of, but as long as you’re happy to keep giving UI design advice, I’m happy to keep getting it.)

I took a few minutes to experiment with sizes, and here’s what I came up with… you’re right, it looks a lot better with less whitespace. Thank you very much for your time and feedback!

Yeah, personally, usually I start with little to no insets and then add them where I think the UI would be clearer if things were separated a bit. Even sometimes putting the borders back can help break things up.

Note: if you ever want your form (label/value) style things to not have so much whitespace on the left then you can also mess with the FillMode of the layout.
new Container(new SpringGridLayout(Axis.Y, Axis.X, FillMode.None, FillMode.Last))
…is usually what I use for form style layouts.

It leaves it in row-major mode, makes it so components in the layout are never resized vertically by the layout stretching, but only the last column’s components will be resized horizontally by stretching the layout.

It’s nicer for having wide edit fields without having to have a huge window to hold them.

Thanks for the advice… I’ll try that when I start designing the rest of the UI. Just bookmarked this thread - I definitely want that info on the FillMode for later.