Creating
...
layouts using markup inheritance
This markup inheritance example show you how to create reusable page layouts and panel layouts.
Watch the Screencast
In all the Wicket examples, you have to put all files in the same package directory. This means putting the markup files and the java files next to one another. It is possible to alter this behavior, but that is beyond the scope of this example. The only exception is the obligatory web.xml
file which should reside in the WEB-INF/
directory of your web application root folder.
...
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>
|
...