Tabs with image

Table of contents

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)

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>

Child pages