How to, add and remove Panel/window!?

here is the problem i have,



i have like multiple windows, on a button click each window opens, or some panel, or some control. now on the same button click again that particular window/panel/control, is hidden using element.hide() method,



but that affects my fps, when there like multiple windows open with lotta buttons also on it!

so instead, could there be a way where i can add or remove rather than show and hide? every time?.



i have everything under same screen and same layer!



any alternative to design?

Hide only stops showing the element, it still remains on the stack.

What you want is the element.markForRemoval() method. This one, in combination with the element.layoutElements(), actually removes the element from the stack.

You call the markForRemoval on the element you want to remove. The layoutElements is called on the parent element.



To add a new element there are multiple ways. Which one works best in your case depends on the situation. If you continuously add and remove the same elements I would suggest storing them in a list somewhere so you don’t have to rebuild them each time you need them.

can i get some code example of doing that?

and didnt get it, about storing them in a list some were!

please explain with some example! :slight_smile:

i mean get the fundamentals of of doing it, but if you can give some code example of the both u mentioned, will be great indeed, for better understanding, and implementing!

Here’s how I do it in the TabsControl, in the TabsControl I add the buttons to the top dynamically whenever a new tab is added. Since it is also possible to remove a tab, the buttons are also removed dynamicaly:



[java]

Element tabButtonPanel = elmnt.findElementByName("#tab-button-panel");

if (tabButtonPanel.findElementByName(tabId + “-button”) == null) {

new ButtonBuilder(tabId + “-button”) {{

style(“nifty-button”);

childLayout(ChildLayoutType.Horizontal);

interactOnClick(“switchTab(” + tabId + “)”);

if (buttonWidth != null) {

width(buttonWidth);

}

if (buttonHeight != null) {

height(percentage(100));

} else {

height(“25px”);

}

label(buttonCaption);

}}.build(nifty, nifty.getCurrentScreen(), tabButtonPanel);

}

[/java]



Here tabButtonPanel is the element you want to add the tab button. The rest is just general builder code on creating a button.



[java]

elmnt.findElementByName("#tab-button-panel").findElementByName(tabId + “-button”).markForRemoval();

elmnt.layoutElements();

[/java]



Here I remove the tab button added in the first example. The button gets removed from elmnt. As a result, elmnt needs to have it’s child elements layout redone.



The big thing here is that, to add elements dynamically, you almost always end up with using the builder pattern code. Which isn’t bad as such, it’s just different then what you are used to doing with the XML code.

There is a way around that, and that would be to setup your own personal control type, complete with builder pattern code. That way, you would still be using the builder pattern to add the element dynamically, but you would have an XML describing what the element looked like.

thanks for that good example! :slight_smile:



i understood almost of it, apart from the last two lines, related to personal control type!

and it sounds something like i wanted, but just some more light on last two lines please! :slight_smile:



Thanks,

If you mean these two lines:



[java]

elmnt.findElementByName("#tab-button-panel").findElementByName(tabId + “-button”).markForRemoval();

elmnt.layoutElements();

[/java]



The first line there locates the button added in the previous piece of code. Since the button was placed on

[java]elmnt.findElementByName("#tab-button-panel")[/java]

I first lookup that one and then the actual button.

The markForRemoval tells nifty to remove the button from the #tab-button-panel element. Because this is just a flag that’s set, we need to redo the layout. The element is actually removed during the creation of the layout. This is why I call the layoutElements() at the end.

0oh no no,

sorry, i got that,

actually the last two lines of the post!



“There is a way around that, and that would be to setup your own personal control type, complete with builder pattern code. That way, you would still be using the builder pattern to add the element dynamically, but you would have an XML describing what the element looked like.”

some light here please! :slight_smile:

Ah ok, the part about setting up your own control definition.

That one is a bit harder to explain. All I can really say is to check out the source of the nifty-default-controls. There are a lot of controls in there already which can be used as examples on how to setup your own custom controls.

ok cool thank u! :slight_smile: