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

First of all, it has nothing to do with actually setting the attribute, but with putting <wicket:child> inside a container.

Now imagine if ChildPage was a Panel, what would the code of your ParentPage look like? It would contain a line somewhere saying main.add( new ChildPanel() ). That's how the main component knows that when it renders, it should call the rendering method of your child panel too.

But with inheritance it's different. Your main component has no way of knowing what <wicket:child> should resolve to. Marking your main container transparent tells Wicket to ask the parent component (that is, your page component) to resolve and render it.

Answer 2

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.

Answer 3

it's working great. on the component where is wicket:id="main" do what is above.

ain = new WebMarkupContainer("main") {
    private static final long serialVersionUID = 1L;

    @Override
    public boolean isTransparentResolver() {
        return true;
    }
};

and exception do not occur.

Answer 4

I suppose your childpage extends the parentpage. Why not pass the class name into the parent's constructor like

public class ChildPage extends ParentPage {    
   public ChildPage() {
     super("my-class");
   }
}

Answer 5

A co-worker found the fix - make the component about the wicket:child tag a "transparentResolver". +1 to anyone who can clearly articulate how this works precisely?

    main = new WebMarkupContainer("main") {
        private static final long serialVersionUID = 1L;
        @Override
        public boolean isTransparentResolver() {
            return true;
        }
    };
    add(main);

Answer 6

I think, that your wicket usage (or at least code you posted) is strange (I tried with 1.4.22)...

public abstract class ParentPage {

Probably you forgot extends WebPage.

public class ChildPage extends Page { 

here you want to extends ParentPage I guess.

Everything works as expected and final HTML generated is

<div id="main" wicket:id="main" class="specific-class-for-this-page">
    <wicket:child>
        <wicket:extend>
            text
        </wicket:extend>
    </wicket:child>
</div>

My recommendation is "do not use HTML id for wicket elements when you do not need to".