Home Tutorials Wicket Using "Tab" in wicket

Related Tutorials


 
 

Share on Google+Share on Google+

Using "Tab" in wicket

Advertisement
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

     

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

     

Advertisements

If you enjoyed this post then why not add us on Google+? Add us to your Circles



Liked it!  Share this Tutorial


Follow us on Twitter, or add us on Facebook or Google Plus to keep you updated with the recent trends of Java and other open source platforms.

Posted on: October 7, 2008

Related Tutorials

Discuss: Using "Tab" in wicket   View All Comments

Post your Comment


Your Name (*) :
Your Email :
Subject (*):
Your Comment (*):
  Reload Image
 
 
Comments:1
hardik
October 4, 2012
<div wicket:id="tabs" class="tabpanel">

I'm getting error on this line like this Last cause: Unable to find component with id 'tabs' in [TransparentWebMarkupContainer [Component id = wicket_extend12]] Expected: 'wicket_child11:wicket_extend12.tabs'. Found with similar names: '' Please,help in this issue
DMCA.com