Scope
This page describes the use of the TabbedPanel with image tabs component.
It is enhanced AjaxTabbedPanel from wicket-extensions, which has a nested image on the left side of text.
The whole idea behind extending tabs with image is TO USE NEW LINK INSTANCE, THAT CONTAINS IMAGE, NOT ONLY TEXT.
Simple idea.
Faq
If you want to have non-ajax TabbedPanel, it's the same work, but instead of AjaxTabbedPanel you must
override TabbedPanel only and instead of AjaxFallbackLink return Link instance.
Examples (for Wicket 1.3beta3 or later version)
Example 1
1.MyAjaxFallbackLink.java (Link enhanced with Image)
public class MyAjaxFallbackLink extends AjaxFallbackLink { public MyAjaxFallbackLink(String id, boolean isSelectedTab) { super(id); Image image; if (isSelectedTab){ image = new Image("image", new ResourceReference(MyAjaxFallbackLink.class, "image_selected.gif")); }else{ image = new Image("image", new ResourceReference(MyAjaxFallbackLink.class, "image_unselected.gif")); } add(image); } public void onClick(AjaxRequestTarget target) { //really nothing here -> to override } }
2. MyAjaxTabbedPanel.java
override newLink() in AjaxTabbedPanel to return your link
public class MyAjaxTabbedPanel extends AjaxTabbedPanel { public MyAjaxTabbedPanel(String id, List tabs) { super(id, tabs); setSelectedTab(0); //make sure, the first selected tab has index=0. Important for image in first selected tab! } protected WebMarkupContainer newLink(String linkId, final int index) { int selectedTab = getSelectedTab(); boolean selected = (index == selectedTab); return new MyAjaxFallbackLink(linkId, selected) { private static final long serialVersionUID = 1L; public void onClick(AjaxRequestTarget target) { setSelectedTab(index); if (target != null) { target.addComponent(MyAjaxTabbedPanel.this); } onAjaxUpdate(target); } }; } }
3. MyAjaxTabbedPanel.html
copy html code from TabbedPanel.html and extend with image to pass hierarchy
<wicket:panel> <div wicket:id="tabs-container" class="tab-row"> <ul> <li wicket:id="tabs"> <a href="#" wicket:id="link"> <img wicket:id="image" class="left-image"/> <span wicket:id="title">[[tab title]]</span> </a> </li> </ul> </div> <div wicket:id="panel" class="tab-panel">[panel]</div> </wicket:panel>
Example 2
In this example you can have in each tab different image. Do the steps 2 and 3 as in previous example. Alter the code to appropriate ajax / non ajax variant.
1. ImageTabLink
Link which has image inside to be used with ImageTabbedPanel
public abstract class ImageTabLink extends Link { public ImageTabLink(String id, ResourceReference image) { super(id); add(new Image("image", image)); } }
Steps 2 & 3 follow the same logic
4. AbstractImageTab
public abstract class AbstractImageTab extends AbstractTab { private ResourceReference image; public AbstractImageTab(IModel title, ResourceReference image) { super(title); this.image = image; } public ResourceReference getImage() { return image; } }
5. ImageTabbedPanel
public class ImageTabbedPanel extends TabbedPanel { public ImageTabbedPanel(String id, List tabs) { super(id, tabs); } protected WebMarkupContainer newLink(String linkId, final int index) { List tabs = getTabs(); //check for usage of our custom class, if it is not our class, add as image empty container - this way you can use image only in tabs you want ITab currentTab = (ITab)tabs.get(index); if (currentTab instanceof AbstractImageTab) { AbstractImageTab imageTab = (AbstractImageTab)currentTab; return new ImageTabLink(linkId, imageTab.getImage()) { @Override public void onClick() { setSelectedTab(index); } }; } else { WebMarkupContainer link = super.newLink(linkId, index); link.add(new WebMarkupContainer("image").setVisible(false)); return link; } } }