Using "Tab" in wicket
Tab Panel items are separated with the different tab
and different tabs show different component which are associated with them. Only
one tab will be activated at a time.
In the previous section of Wicket example you have
learned about creating modal panel, template website,
autocompleter and some more. Now in this part of Wicket tutorial you will
learn how to create tabbed panel in Wicket.
In this example of creating Tab panel in wicket we have
created three tab panels and these three panels are showing different associated
components with them. In our example we have created following six files to
create a tabbed panel which consists of three tabs "first", "second"
and "third".
- TabbedApplication.java
- TabbedPanelPage.java
- TabbedPanelPage.html
- TabbedPanelPage$TabPanel1.html
- TabbedPanelPage$TabPanel2.html
- TabbedPanelPage$TabPanel3.html
TabbedApplication.java file will call TabbedPanelPage.java.
Here is the example code of TabbedApplication.java as follows:
TabbedApplication.java
package com.roseindia.wicket;
import org.apache.wicket.protocol.http.WebApplication;
public class TabbedApplication extends WebApplication {
public TabbedApplication() {
}
public Class getHomePage() {
return TabbedPanelPage.class;
}
}
|
TabbedPanelPage.java
package com.roseindia.wicket;
import java.util.ArrayList;
import java.util.List;
import org.apache.wicket.markup.html.WebPage;
import org.apache.wicket.extensions.ajax.markup.html.tabs.AjaxTabbedPanel;
import org.apache.wicket.extensions.markup.html.tabs.AbstractTab;
import org.apache.wicket.markup.html.panel.Panel;
import org.apache.wicket.model.Model;
public class TabbedPanelPage extends WebPage
{
public TabbedPanelPage()
{
List tabs = new ArrayList();
tabs.add(new AbstractTab(new Model("first tab"))
{
public Panel getPanel(String panelId)
{
return new TabPanel1(panelId);
}
});
tabs.add(new AbstractTab(new Model("second tab"))
{
public Panel getPanel(String panelId)
{
return new TabPanel2(panelId);
}
});
tabs.add(new AbstractTab(new Model("third tab"))
{
public Panel getPanel(String panelId)
{
return new TabPanel3(panelId);
}
});
add(new AjaxTabbedPanel("tabs", tabs));
}
private static class TabPanel1 extends Panel
{
public TabPanel1(String id)
{
super(id);
}
};
private static class TabPanel2 extends Panel
{
public TabPanel2(String id)
{
super(id);
}
};
private static class TabPanel3 extends Panel
{
public TabPanel3(String id)
{
super(id);
}
};
}
|
TabbedPanelPage class defines three inner class TabPanel1,
TabPanel2 and TabPanel3 which are called when user click on these
tabs. Corresponding to TabbedPanelPage class HTML file is as
follows:
TabbedPanelPage.html
<html>
<head>
<style>
div.tabpanel div.tab-row li {
margin: 0;
padding: 0;
display: inline;
list-style-type: none;
}
div.tabpanel div.tab-row a:link,
div.tabpanel div.tab-row a:visited {
float: left;
background: #f3f3f3;
font-size: 12px;
line-height: 14px;
font-weight: bold;
padding: 2px 10px 2px 10px;
margin-right: 4px;
border: 1px solid #ccc;
text-decoration: none;
color: #666;
}
div.tabpanel div.tab-row li.selected a:link,
div.tabpanel div.tab-row a:visited.active {
border-bottom: 1px solid #fff;
background: #fff;
color: #000;
}
div.tabpanel div.tab-row a:hover {
background: #fff;
}
</style>
</head>
<body>
<p>
<div wicket:id="tabs" class="tabpanel"></div>
</p>
</body>
</html>
|
According to inner classes of TabbedPanelPage we have
to create three more HTML files as well . Here is the code of these three files
as follows:
TabbedPanelPage$TabPanel1.html
<html>
<wicket:panel>
<br/>
This is tab-panel 1
</wicket:panel>
</html>
|
TabbedPanelPage$TabPanel2.html
<html>
<wicket:panel>
<br/>
This is tab-panel 2
</wicket:panel>
</html> |
TabbedPanelPage$TabPanel3.html
<html>
<wicket:panel>
<br/>
This is tab-panel 3
</wicket:panel>
</html> |
We have to do corresponding XML file entry into
the web.xml file to call TabbedApplication class. Here is the code
fragment which is to be included into :
<filter>
<filter-name>
TabbedApplication
</filter-name>
<filter-class>
org.apache.wicket.protocol.http.WicketFilter
</filter-class>
<init-param>
<param-name>applicationClassName</param-name>
<param-value>com.roseindia.wicket.TabbedApplication</param-value>
</init-param>
<init-param>
<param-name>debug</param-name>
<param-value>2</param-value>
</init-param>
</filter>
<filter-mapping>
<filter-name>
TabbedApplication
</filter-name>
<url-pattern>
/wicket/tab/*
</url-pattern>
</filter-mapping> |
Output:
Download Source Code
|
Del.icio.us
Digg
Google
Spurl
Blink
Furl
Simpy
Y! MyWeb
