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)

Example 1 - on/off image in tabs

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 - custom images in tabs

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.

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;
		}
	}
}
  • No labels