...
This is done using two special Wicket tags: <wicket:child>
and <wicket:extend>
. In the super markup you define where the child markup should be put, and in the sub markup you delineate where the child markup starts and ends.
Code Block |
---|
| html |
---|
| html |
---|
title | The super markup file |
---|
borderStyle | solid |
---|
|
<html>
<head></head>
<body>
This is in the super markup.<br>
<wicket:child />
This is in the super markup.<br>
</body>
</html>
|
In this markup you see two sentences that surround the wicket:child
tag. All markup in this file will remain when a sub class of this page is created, only the wicket:child
tag will be replaced with the child markup. So if we look at the following markup:
Code Block |
---|
| html |
---|
| html |
---|
title | The child markup file |
---|
borderStyle | solid |
---|
|
<html>
<head></head>
<body>
This is in de child markup.<br>
<wicket:extend>
This is in the child markup.<br>
</wicket:extend>
This is in the child markup.<br>
</body>
</html>
|
we can see the markup that should be included in the parent. Only the markup between the wicket:extend
tags is included in the final page. Take a look at the following markup which is the final markup when you would use this in a Wicket application.
Code Block |
---|
| html |
---|
| html |
---|
title | The final markup rendered to the browser |
---|
borderStyle | solid |
---|
|
<html>
<head></head>
<body>
This is in the super markup.<br>
<wicket:child><wicket:extend>
This is in the child markup.<br>
</wicket:extend></wicket:child>
This is in the super markup.<br>
</body>
</html>
|
...
Now that we have seen the basics for markup inheritance, we can now take a look at the example at hand. Let's first create the base page.
Code Block |
---|
| java |
---|
| java |
---|
title | The base page's Java class |
---|
borderStyle | solid |
---|
|
package wicket.quickstart;
import wicket.markup.html.WebPage;
import wicket.markup.html.basic.Label;
import wicket.markup.html.link.BookmarkablePageLink;
public abstract class BasePage extends WebPage {
public BasePage() {
add(new BookmarkablePageLink("page1", Page1.class));
add(new BookmarkablePageLink("page2", Page2.class));
add(new Label("footer", "This is in the footer"));
}
}
|
The two links should go into the header, and the footer in the footer of the page. Note that the abstract keyword isn't required, but considered a good practise. Now let's take a look at the markup for the BasePage
Code Block |
---|
| html |
---|
| html |
---|
title | The base page's markup file |
---|
borderStyle | solid |
---|
|
<html>
<head></head>
<body>
<div id="header">
<a href="#" wicket:id="page1">Page1</a>
<a href="#" wicket:id="page2">Page2</a>
</div>
<div id="body">
<wicket:child />
</div>
<div id="footer">
<span wicket:id="footer"></span>
</div>
</body>
</html>
|
...
We need to build two pages: Page1
and Page2
. Each page needs its own markup file and Java class. Let's first implement Page1
.
Code Block |
---|
| java |
---|
| java |
---|
title | Page1's Java class |
---|
borderStyle | solid |
|
package wicket.quickstart;
import wicket.markup.html.basic.Label;
public class Page1 extends BasePage {
public Page1() {
add(new Label("label1", "This is in the subclass Page1"));
}
}
|
In this example you see that we add a new label component to the page: label1
. This component is only available for Page1
, as such Page2
can define its own component hierarchy. Let's take a look at the markup for Page1
:
Code Block |
---|
| java |
---|
| java |
---|
title | Page1's markup file |
---|
borderStyle | solid |
---|
|
<html>
<head></head>
<body>
<wicket:extend>
<h1>Page1</h1>
<span wicket:id="label1"></span>
</wicket:extend>
</body>
</html>
|
...
Now, let's do the same for Page2
.
Code Block |
---|
| java |
---|
| java |
---|
title | Page2's Java class |
---|
borderStyle | solid |
---|
|
package wicket.quickstart;
import wicket.markup.html.basic.Label;
public class Page2 extends BasePage {
public Page2() {
add(new Label("label2", "This is in the subclass Page2"));
}
}
|
Code Block |
---|
| html |
---|
| html |
---|
title | Page2's markup file |
---|
borderStyle | solid |
---|
|
<html>
<head></head>
<body>
<wicket:extend>
<h1>Page2</h1>
<span wicket:id="label2"></span>
</wicket:extend>
</body>
</html>
|
...