Can a wicket:child tag be nested under another Component on the Page?

Question

In Wicket 1.4, I'm trying to allow child pages to alter a CSS class on a tag in the parent page, which I do all the time. What is odd about this case is that the tag I want to target wraps the child page markup. Here's a simplified snip of what I tried:

ParentPage.html

<div id="main" wicket:id="main">
  <wicket:child />
</div>

ParentPage.java

public abstract class ParentPage {

  private WebMarkupContainer main;

  protected ParentPage() {
    main = new WebMarkupContainer("main");
    add(main);
  }

  public void setClassAttr(String cssClass){
    main.add(SimpleAttributeModifier("class", cssClass);
  }
}

ChildPage.html

<wicket:extend>
  ...
</wicket:extend>

ChildPage.java

public class ChildPage extends Page {    
   ...

    public ChildPage() {
      super();
      ...     
      setClassAttr("specific-class-for-this-page");
    }
}

...Which blows up because it appears the HTML from the child loads, but not the java. (If I remove the wicket:id and java code on div#main, all is well.)

Note that the tag on the parent that I want to manipulate from the child is actually wrapping the wicket:child tag. In other cases I have done something similar, the tags I want to monkey with tend to be siblings or otherwise distant to the wicket:child tag.

All I really want to do is allow the child to change the class attribute on the parent - is there another way to do this? Why can't a child page be nested under another Wicket page component?

Answer 1

I would just like to point out that this has been removed as of Wicket 1.5. So, if you are using Wicket 1.5 or higher, you would use a TransparentWebMarkupContainer component instead of WebMarkupContainer.isTansparentResolver(). I also had the same problem as the poster. I have an outer, containing div which wraps a wicket:child tag, and I adjust its width (Twitter Bootstrap fluid grid) based on the content that it needs to display. My mainContentContainer is a TransparentWebMarkupContainer:

<div class="row-fluid">
    <div class="span3" wicket:id="sidebarPanel"></div>
    <div class="span6" wicket:id="mainContentContainer">
        <wicket:child/>
    </div>
    <div class="span3" wicket:id="rightPanel"></div>
</div>

Sometimes the rightPanel is completely hidden, and the mainContentContainer changes to class="span9" to take up the unused viewport.

See here.

Thanks for posting. I had the exact same problem until I read this post.