Page History

Scope

This page describes the use of the TabbedPanel with closed close button component.
It is enhanced an enhancement of the AjaxTabbedPanel from wicket-extensions , which where tabs can't are allowing tabs to be simply closed by a button.

With this little update, we can now closed close any tab simply by clicking on his closedits close-button. For example, it's exactly the same graphic method of Firefox, with a little button on the ride site right side of a tab (I say right side, but position can, of course, be changed in css).

Codes / .java

First modification, AbstractTab.class

First, we have to modify AbstractTab class to introduce two ideas:

...

This class simply extends wicket.extensions.markup.html.tabs.AbstractTab.
We add two variables and so, two methods.
*Variable title and method to get it.
*Variable canBeClosed and method to know if this tab is closeable or not. (true means closeable, false will hide the close button)

Second modification, our TabbedPanel

.java

So we created tabs, no we have to create a panel who contains our tabs.
I simply rewrited org.apache.wicket.extensions.markup.html.tabs.TabbedPanel and add some modifications.
Let see the code, I'll explain just after my modifications.

...

1. First, don't forget to changed all old AbstractTab by our new class, MyAbsctractTab anywhere in this code
2. A new variable is add: "whereAmI". Thanks to it, we could know at any time where we are, or what we're whatching. So when we created our TabbedPanel we specify we're looking first tab.
   When we changed selected tab by setSelectTab(int index) we changed whereAmI too.
   And if we remove tab we're whatching, we set view on the first tab. (in my code my first tab always exists cause i put variable canBeClosed in MyAbstractTab on false value).
3. I add "this.setOutputMarkupId( true )" too in MyTabbedPanel constructor to let Ajax update it.
4. Most important parts are the new button and the removeTab function.
   In constructor, I add the new button, override his onSubmit method to call removeTab function. I created a form for this button, and put the button on visible or not (varibale canBeClosed).
   RemoveTab function just remove tab corresponding to button you pushed, and call setSelectabTab to be sure of view context.
5. I created a new function, findSelectedTab, which has the same goal of geSelectTab function, but do it with title of the tab.
   Thanks to this new function, it's simplest to know position of any tab, simply by giving name.

.html

To finish, here the corresponding html code of class above.

...