How do I extend TabbedPanel to modify markup and add links and icons?

[Hajo Lemcke]

Hello,

I want to create a dynamic tabbed panel in Apache Wicket 7.3 with AjaxTabs added and removed dynamically. To remove a tab, I want to add an [x] link to the tab header which sends the form on the tab panel 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">
  <ul>
    <li wicket:id="tabs">
      <img wicket:id="icon" height="40" style="float:left" width="30">{icon}</img>
      <a wicket:id="link" href="#">{link}</a>
      <a wicket:id="closeTab" href="#" style="float:left;"
        class="ui-icon ui-icon-close ui-icon-circle-close">(x)</a>
      <div wicket:id="okCancelDialog">{okCancelDialog}</div>
    </li>
  </ul>
  <div wicket:id="panels">{panels}</div>
</wicket:panel>

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

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

[Sebastien]

Hi Hajo,

Adding or removing the tab is just matter of updating the tabmodel.
But, while adding is pretty simple (see the example on demo site), the remove thru the x-icon requires some additional dev because such behavior is not shipped by jquery-ui
Maybe the best would be to have a ClosableTab (and ClosableAjaxTab), so it simplifies users life ! :)

I don't think you can manage it by yourself for now, I guess you will not be able to specify something else than a label for the tab's title (so you cannot supply the icon, imo)

Please open an issue, I will try to update this asap.

Thanks and best regards,
Sebastien

[Hajo Lemcke]

Hi Sebastien,

thanks for the extremely fast answer. I will open an issue on this topic.

I think that a "Closable(Ajax)Tab" is a good approach. But to be more flexible maybe you could implement a method like "newTabContainer" as in the Wicket standard TabbedPanel. Having this method, anyone can extend your TabbedPanel, use his own markup and just overload "newTabContainer" to add anything what is required.

Best Regards
Hajo

[Hajo Lemcke]

I have opened issue #236 for this topic

[Hajo Lemcke]

I have "started" to modify TabbedPanel (renamed here to JQueryTabbedPanel). I extracted method "populateTabContainer" which can be overwritten in a subclass (here: HalTabbedPanel).

The problem here is, that at this moment, I can only access the LoadingPanel, but not yet the Panel put on the AjaxTab.

Maybe its best not only having a loading panel but also some kind of "loading tab item header" which gets replaced later. Some method "getLazyTabHeader" similar to "getLazyPanel".

Any idea how to solve this?

[Sebastien]

Hi,

I am not sure to understant why you need a lazy load tab "title" panel... ajax lazy load is designed to lazy load slow content so the ui is not frozen...

I will have a look at this over the we, if my poor spare time allows it :/

Best regards,
Sebastien

[Hajo Lemcke]

Hi Sebastien,

I want to implement the following features in my tabbed panel.

1. Display an icon (as specified by the panel on the tab) and even setting decorators on that icon (like in Eclipse)
2. Display the JQuery close icon on a link. The link action should send the form (if the panel contains a form)
3. Display the JQuery warning icon on a link if a form did not validate
4. Modifying the title from the panel on the tab
   

I wasn't able to put the link (from 2) to send the form in method "populateItem". I could only access the LoadingPanel.

In total, the use case is as follows:

Adding an (x) with a link to close the panel. If the panel contains a form, the link should send that form for evaluation. If validation is OK then the data from the form will be saved to the database. If the validation fails, a dialog box should open to ask the user if we wants to close and loose changes or correct the errors. If he decides to close, the tab should be closed and discard all changes. If he decides to correct the errors, the dialog box must close and a warning icon with a link should appear. If the user hits the warning icon, an information box with the validation error string appears.

Have a nice weekend

Hajo