Example of Wicket's markup inheritance – wicket:child and wicket:extend

2012-12-31

Example of Wicket's markup inheritance –
wicket:child and wicket:extend

This is the most clean way of composing the pages content in Wicket.

Base page

BaseLayoutPage.html:

<html>
  <body>
    <h1>My Web</h1>

    <div class="content">
      <wicket:child />
    </div>

    <div>(c) 2010 Ondra.Zizka.cz</div>
  </body>
</html>

BaseLayoutPage.java:

public class BaseLayoutPage extends WebPage { ... }

Child page

NewsPageContent.html:

<html>
  <body>
    <h1>Child page</h1>

    DON'T get disturbed by this content, it's usually in examples only to confuse you
    (or, to remind you that the child page file will be previewable in browser).
    *** Everything outside "wicket:extend" will be ignored. ***

    <wicket:extend>
      <h2>News</h2>
      So this is the real content to be included into the base page.

      Here we have some component container:

      <div wicket:id="news">Works like usual, so this will be replaced by the component's stuff.</div>

    <wicket:extend>

    *** Again, everything outside the wicket:extend is ignored. ***

    <div>(c) 2010 Ondra.Zizka.cz</div>
  </body>
</html>

NewsPageContent.java:

public class NewsPageContent extends BaseLayoutPage {
  public NewsPageContent(){
    add( new Label("news", "Good news everyone!" ) );
  }
}

How to use it (just for case you don't know yet :)

In your WicketApplication.java:

public class WicketApplication extends WebApplication {
  public WicketApplication(){
    mountBookmarkablePage( "news", NewsPageContent.class );
  }
}
0