Scope
ComponentBackground | componentJavadoc=Panel
Background
A Panel is a reusable component that holds markup and other components. If you want to reuse a component without copying its markup into each page markup, extend the class Panel:
You can use Markup inheritance with Panels too.
See Panels and borders to see the difference between Panels and Borders and Fragment to see how to use 'in-line' panels.
Panels can be used to create dynamic markup hierarchies.
FAQ
Examples
Typical usage
UserPanel.java:
public class UserPanel extends Panel { public UserPanel(String id, User user) { super(id); add(new Label("username", user.getUsername())); add(new Label("lastLogin", user.getLastLogin())); } }
UserPanel.html:
<wicket:panel> User: <span wicket:id="username">dummy name</span><br/> Last log-in: <span wicket:id="lastLogin">2037-09-10 10:21:59h</span> </wicket:panel>
That's for your reusable panel, which you can now use anywhere like:
add(new UserPanel("user", user);
and:
<span wicket:id="user">[user data]</span>
or for better previewability:
<span wicket:id="user"> <wicket:remove> User: dummy name<br/> Last log-in: 2037-09-10 10:21:59h <wicket:remove> </span>
Advanced example using a ListView
UsersListPanel.java:
public class UsersListPanel extends Panel { public UsersListPanel(String id, List users) { super(id); add(new ListView("users", users) { public void populateItem(final ListItem p_item) { final User user = (User) p_item.getModelObject(); p_item.add(new Label("username", user.getUsername())); p_item.add(new Label("lastLogin", user.getLastLogin())); }}); } }
UsersListPanel.html:
<wicket:panel> <table> <tr> <th>user name</th> <th>last login</th> </tr> <tr wicket:id="users"> <td><span wicket:id="username"></span></td> <td><span wicket:id="lastLogin"></span></td> </tr> </table> </wicket:panel>
That's for your reusable panel, which you can now use anywhere like:
add(new UsersListPanel("users", users));
and:
<span wicket:id="users">[users here]</span>
or for better previewability:
<span wicket:id="users"> <wicket:remove> <table> <tr> <th>user name</th> <th>last login</th> </tr> <tr> <td>dummy Username</td> <td>2037-09-10 10:21:59h</td> </tr> </table> <wicket:remove> </span>