- html file
- java class file
In Wicket the convention is to add html files to the same package as the class file is, this isn't mandatory.
1. html file
The html file tells wicket where to put which component.
2. java class file
Tells Wicket to fill the elements with which components and/or data.
In part 1 I've set up a basic application, in which I've added a HTML file and a Java class file. For this example I'm going to reuse these files and add a tabpanel there.
I've updated the HTML file by adding a placeholder for the tabpanel. HelloWicket.html now looks like:
<!DOCTYPE html> <html> <body> <h1 wicket:id="message">Message goes here</h1> <div wicket:id="tabs" class="tabpanel" /> </body> </html>
I've added the next few lines to HelloWicket.java and created the method addTabs(), which returns an empty List for now.
List<AbstractTab> tabs = addTabs();
add(new TabbedPanel<AbstractTab>("tabs", tabs));
Adding tabs
A tab panel without tabs isn't very useful... so lets start with adding tabs to the tab panel.I've created four tab panels named: TabPanel1 through 4 (not very creative, I know).
Here's the HTML from TabPanel1.html
<wicket:panel> <h1>Tab 1 - TextField Example</h1> </wicket:panel>
Notice that for the Panel a Wicket specific tag is used.
And the corresponding Java from TabPanel1.java
public class TabPanel1 extends Panel {
public TabPanel1(String id) {
super(id);
}
}
TabPanel1 extends Panel. This matches to the html tag <wicket:panel>.
At this point a tab is created, but it isn't added to the tab panel yet.
Add tab to tab panel
To add the tab to the tab panel, we first need to know where to add it. In the HelloWicket.html the tab panel is added (see example above). The tabs are added in HelloWicket.java through the following Java code:private List<AbstractTab> createTabs() {
List<AbstractTab> tabs = new ArrayList<AbstractTab>();
AbstractTab tab1 = new AbstractTab(new Model<String>("first tab")) {
public Panel getPanel(String panelId) {
return new TabPanel1(panelId);
}
};
tabs.add(tab1);
return tabs;
}
The tab is now added to the tab panel. When you run the application you'll see a tab containing a Header with Tab 1.Check out the sources to see the complete application with all four tabs all containing other components
References:
Source code (GitHub)Wicket component reference (including link to source code)
Wicket user guide (free ebook)
