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.

Using "Tab" in wicket

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

     

Tutorials

  1. Wicket
  2. "Hello World" example in Wicket
  3. Wicket on Net Beans IDE
  4. Echo Message example in Wicket
  5. Auto Completer example in Wicket
  6. Modal Panel example in Wicket
  7. Creating Website with the use of template in Wicket
  8. Lazy Load Application example in Wicket
  9. Using "Tab" in wicket