Hi all,
I am trying to implement a reusable CollapsableBorder component.
I intend to use it to create collapsable sections on my web page (clicking a
link collapses/expands the section, i.e. the border contents).
The component seems to work just fine for basic usage.
The problem, however, occurs when I attempt to nest a collapsable border
inside another collapsable border.
The following code shows how the CollapsableBorder component is implemented:
public class CollapsableBorder extends Border {
private boolean isCollapsed = false;
public CollapsableBorder(final String id, String header) {
super(id);
// Create a markup container that wraps the border's body
final WebMarkupContainer bodyWrapper = new
WebMarkupContainer("body") {
@Override
public boolean isVisible() {
return !CollapsableBorder.this.isCollapsed;
}
};
bodyWrapper.setOutputMarkupPlaceholderTag(true);
final AjaxLink collapseLink = new AjaxLink("collapseLink") {
@Override
public void onClick(AjaxRequestTarget target) {
// Toggle visibility of border's body
CollapsableBorder.this.isCollapsed =
!CollapsableBorder.this.isCollapsed;
target.addComponent(bodyWrapper);
}
};
add(collapseLink);
collapseLink.add(new Label("header", header));
add(bodyWrapper);
bodyWrapper.setVisible(true);
bodyWrapper.add(getBodyContainer());
}
}
with the following markup:
<html>
<body>
<wicket:border>
# [Header goes here]
<div wicket:id="body">
<wicket:body/>
</div>
</wicket:border>
</body>
</html>
I also use it in a very simple example where I nest two CollapsableBorders
as follows:
<html xmlns="http://www.w3.org/1999/xhtml";>
<body>
<div wicket:id="outerBorder">
Outer border content
<div style="margin: 10px;" wicket:id="innerBorder">
Inner border content
</div>
</div>
</body>
</html>
with corresponding code:
public class NestedBordersTestPage extends WebPage {
public NestedBordersTestPage() {
super();
CollapsableBorder outerBorder = new
CollapsableBorder("outerBorder", "Outer border");
CollapsableBorder innerBorder = new
CollapsableBorder("innerBorder", "Inner border");
add(outerBorder);
outerBorder.add(innerBorder);
}
}
Find the source code for this example (generated from the quickstart maven
archetype) attached to this mail (
http://www.nabble.com/file/p17528668/collapsable.border.tar.gz
collapsable.border.tar.gz ).
On the attached example application, the following particular sequence of
steps results in an exception being thrown:
1. Click "Inner border" link (i.e., collapse inner border)
2. Click "Outer border" link (collapse outer border)
3. Click "Outer border" link again (try to expand outer border)
This results in "WicketMessage: Expected close tag for <div style="margin:
10px;" wicket:id="innerBorder">"
I am sure many of you folks have implemented similar functionality. Any
pointers on
what I'm doing wrong and how to fix it would really be appreciated.
Thanks, Peter
--
View this message in context:
http://www.nabble.com/Problems-toggling-visibility-on-nested-borders-tp17528668p17528668.html
Sent from the Wicket - User mailing list archive at Nabble.com.
---------------------------------------------------------------------
To unsubscribe, e-mail: [EMAIL PROTECTED]
For additional commands, e-mail: [EMAIL PROTECTED]
