jMonkeyEngine.org

Hey all,

Currently we’re working on a panel which shows income on the left side and costs on the right side. To get a better overview of these incomes and costs, we switch the backgroundcolour per row. One row consists out of a panel and in that panel we put 2 labels. This always worked for us, untill recently we saw a mistake from our side in the panel. When there are too many items, the items go out of the panel.

One simple solution: add the items in a ScrollPanel.

So far so good, this works.

However, the row colors are waaay too dark all of a sudden. It’s almost not possible to tell the difference between the colors.

This is an example of the code we use to create a list of items in one scrollpanel:

	private void buildCosts() {
		lightBackground = true;
		numberOfEntries = 0;

		ScrollPanelBuilder costScrollPanelBuilder = new ScrollPanelBuilder("costScrollPanelBuilder") {
			{
				width("570");
				height("460");
			}
		};
		costScrollPanelBuilder.set("horizontal", "false");
		costScrollPanelBuilder.set("vertical", "true");

		Element costScrollPanel = costScrollPanelBuilder.build(nifty, screen, costPanel);
		Element scrollPanelContainer = scrollPanel.findElementByName("#nifty-scrollpanel-child-root");

		PanelBuilder panelBuilder = new PanelBuilder() {
			{
				childLayoutAbsolute();
				width("550");
				height("30");
			}
		};		

                Element costPanelHolder = panelBuilder.build(nifty, screen, scrollPanelContainer);
		costPanelHolder.setId("costPanelHolder");

		NiftyUtils.setLocation(scrollPanel, 0, 0); //Our niftyUtils class takes care of positioning the nifty panels

		for (final CostBookValue cost : myCostBookList) {

		labelBuilder1 = new RoLabelBuilder() {
			{
				if (lightBackground) {
					backgroundColor(#1b3a40ff);
				} else {
					backgroundColor("#0D2226ff");
				}
				textHAlignLeft();
				font("Arial-12.fnt");
				name("label");
				width("418");
				height("28");
			}
		};

		labelBuilder2 = new RoLabelBuilder() {
			{
				if (lightBackground) {
					backgroundColor("#1b3a40ff");
				} else {
					backgroundColor("#0D2226ff");
				}
				textHAlignRight();
				font("Arial-12.fnt");
				name("label");
				width("130");
				height("28");
			}
		};

			Element costPanel = panelBuilder.build(nifty, screen, costPanelHolder);
			costPanel.setId("costPanel" + costPanelCounter);

			Element label1 = labelBuilder1.build(nifty, screen, costPanel);
			NiftyUtils.setLocation(label1, 0, 0);
			NiftyUtils.setText(label1, " " + desc + " " + cost.getName());
			label1.setId("costLabel1id" + costPanelCounter);

			Element label2 = labelBuilder2.build(nifty, screen, costPanel);
			NiftyUtils.setLocation(label2, 420, 0);
			NiftyUtils.setText(label2, "Value");
			label2.setId("costLabel2id" + costPanelCounter);

			NiftyUtils.setLocation(costPanel, 0, numberOfEntries * 30);

			lightBackground = !lightBackground;
			costPanelCounter++;
			numberOfEntries++;
		}

		NiftyUtils.setSize(costPanelHolder, 550, numberOfEntries * 30);
		scrollPanelContainer.layoutElements();
		scrollPanel.getNiftyControl(ScrollPanel.class).setUp(0, 20, 0, 20 * 10, AutoScroll.OFF);
	}

So to sum things up: We’ve added a ScrollPanel around the itemPanel. It works great, however the colors are too dark.

Anyone who knows what we’re doing wrong here?

//EDIT:
Added screenshot to make things more clear

Its in the style definition, not the control definition, my bad