Hajo Lemcke Hajo Lemcke - 5 months ago 28
Java Question

How to extend com.googlecode.wicket.jquery.ui.widget.tabs.TabbedPanel in Wicket?

I want to create a dynamic tabbed panel in Apache Wicket 7.3 with AjaxTabs added and removed. Since AjaxTab is a JQuery extension, I intend to use TabbedPanel from this extension as well.

To remove a tab, I want to add an [x] link to the tab header which sends the form on the tab for validation. If the form has validation errors, a dialog box shall open. I thought about extending TabbedPanel like this:

import com.googlecode.wicket.jquery.ui.widget.tabs.TabbedPanel;
public class MyTabbedPanel extends TabbedPanel {
???


With the following markup in MyTabbedPanel.html

<wicket:panel xmlns:wicket="http://wicket.apache.org">
<div wicket:id="tabs-container" class="tab-row">
<ul>
<li wicket:id="tabs">
<a wicket:id="link" href="#"><span wicket:id="title">{title}</span></a>
<a wicket:id="closeLink" href="#" style="float:left;"
class="ui-icon ui-icon-close ui-icon-circle-close">(x)</a>
</li>
</ul>
</div>
<div wicket:id="panel" class="tab-panel"><!-- no panel --></div>
</wicket:panel>


How can I add an AjaxSubmitLink to the Wicket-ID "closeLink"?

Which methods do I have to overwrite to add my link (and some other icons or stuff)?

Answer

Override #newTabContainer():

@Override
protected LoopItem newTabContainer(final int tabIndex) {
  LoopItem item = super.newTabContainer(tabIndex);
  item.add(new Link<Void>("closeLink") {
    @Override
    public void onClick() {
      getTabs().remove(tabIndex);
    }
  });
  return item;
}