Menu
I have a panel (see BasePanel below) that has a list of items and an "action"-bar where buttons are placed. Clicking these buttons makes changes to the items in the list via models.
Now I want the same panel but with slightly different buttons (see CustomPanelA and CustomPanelB below). I have about three configurations for the buttons in the panel.
How can I model this? I thought to use wicket:child but since the buttons are inside another wicket component that did not work.
BasePanel.java
class BasePanel extends Panel {
public BasePanel(String id) {
super(id);
// note: I need this container for refreshing using AJAX
WebMarkupContainer outer = new WebMarkupContainer("outerContainer");
outer.setOutputMarkupId(true);
add(outer);
// ... create listview
outer.add(new ListView("items") { /* implementation of listview */ };
// This container is necessary to show/hide the buttons
WebMarkupContainer actionbar = new WebMarkupContainer("outerContainer");
actionbar.setOutputMarkupId(true);
// ... create default buttons
actionbar.add(new Link("add") { /* implementation of link */ );
}
}
BasePanel.html
<html>
<wicket:panel>
<div wicket:id="outerContainer">
<div wicket:id="actionbar" >
<a wicket:id="add">Add</a>
</div>
<div wicket:id="items">
<!-- ... markup for items is here -->
</div>
</div>
</wicket:panel>
</html>
CustomPanelA.java
class CustomPanelA extends BasePanel {
public CustomPanelA (String id) {
super(id);
// add additional buttons only
actionbar.add(new Link("actionA1") { /* implementation of link */ );
actionbar.add(new Link("actionA2") { /* implementation of link */ );
}
}
CustomPanelA.html
<html>
<wicket:extend>
<a wicket:id="actionA1">ActionA1</a>
<a wicket:id="actionA2">ActionA2</a>
</wicket:extend>
</html>
CustomPanelB.java
class CustomPanelB extends BasePanel {
public CustomPanelB (String id) {
super(id);
// add additional buttons only
actionbar.add(new Link("action_b1") { /* implementation of link */ );
actionbar.add(new Link("action_b2") { /* implementation of link */ );
}
}
CustomPanelB.html
<html>
<wicket:extend>
<a wicket:id="action_b1">Action b1</a>
<a wicket:id="action_b2">Action b2</a>
</wicket:extend>
</html>
921
I think a much better solution is to use RepeatingViews. This way you don't even need to have html for the subpanels.
BasePanel.java
class BasePanel extends Panel {
protected final RepeatingView actionbar;
public BasePanel(String id) {
super(id);
// note: I need this container for refreshing using AJAX
WebMarkupContainer outer = new WebMarkupContainer("outerContainer");
outer.setOutputMarkupId(true);
add(outer);
// ... create listview
outer.add(new ListView("items") { /* implementation of listview */ };
// This container is necessary to show/hide the buttons
actionbar = new RepeatingView("action");
// ... create default buttons
actionbar.add(new Link("add") { /* implementation of link */ }.
setBody(Model.of("Add"));
}
}
BasePanel.html
<html>
<wicket:panel>
<div wicket:id="outerContainer">
<div class="actions">
<a wicket:id="action"></a>
</div>
<div wicket:id="items">
<!-- ... markup for items is here -->
</div>
</div>
</wicket:panel>
</html>
CustomPanelA.java
class CustomPanelA extends BasePanel {
public CustomPanelA (String id) {
super(id);
// add additional buttons only
actionbar.add(new Link("actionA1") { /* implementation of link */ );
actionbar.add(new Link("actionA2") { /* implementation of link */ );
}
}
CustomPanelB.java
class CustomPanelB extends BasePanel {
public CustomPanelB (String id) {
super(id);
// add additional buttons only
actionbar.add(new Link("action_b1") { /* implementation of link */ );
actionbar.add(new Link("action_b2") { /* implementation of link */ );
}
}
Note: inside the RepeatingView you can add any component that inherits the markup of the RepeatingView component. Just make sure you don't add the same component id twice and you'll be fine.
128
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
