...
Examples (for Wicket 1.3beta3 or later version)
Example 1
1.MyAjaxFallbackLink.java (Link enhanced with Image)
| Code Block |
|---|
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
| Code Block |
|---|
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
| Code Block |
|---|
|
<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
| Code Block |
|---|
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
| Code Block |
|---|
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
| Code Block |
|---|
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;
}
}
}
|