Excerpt | ||
---|---|---|
| ||
How to create consistent layout using Markup Inheritance |
Panel | ||||
---|---|---|---|---|
| ||||
|
Definition
Wicket provides quite a few ways to modularize your web page creation. In addition to Markup Inheritance, you should also have a look at how you can simplify page creation using Wicket tags and Fragments. Markup Inheritance lets a Component extend the markup of its super class. The subclass markup is inserted at one point in the super class markup.
Let's see an example:
Parent.java:
Code Block |
---|
public class Parent extends Component {} |
Parent.html:
Code Block |
---|
... parent content ... <wicket:child/> ... parent content ... |
Child.html
Code Block |
---|
<wicket:extend> ... child content ... </wicket:extend> |
Child.java:
Code Block |
---|
public class Child extends Parent {} |
Renders as:
Code Block |
---|
... parent content ... ... child content ... ... parent content ... |
It is just like having a Panel defined in your Component class markup, and let subclasses add the Panel. But it doesn't need an extra Component and is much easier to use. Markup Inheritance is also a convenient replacement for most Border components.
Markup Inheritance works with WebPages, so you can easily use the same header and footer on several pages.
Using Markup Inheritance with Header Contribution
You can now combine Markup Inheritance with Header Contribution. First, define a base Page. The markup:
Code Block | ||||
---|---|---|---|---|
| ||||
<html> <head> </head> <body> Base Page Before <wicket:child/> Base Page After </body> </html> |
The Java code:
Code Block |
---|
class Parent extends WebPage { public Parent() { } } |
Next define a child Page. First the markup:
Code Block |
---|
<head> <span wicket:id="label"/> </head> <wicket:extend> Child Page </wicket:extend> |
The Java code:
Code Block |
---|
public class Child extends Parent { public Child() { add(new Label("label", "Here you go")); } } |
Now, when you fire this all out the resulting page should render as:
Code Block |
---|
<html> <head> <span wicket:id="label">Here you go</span> </head> <body> Base Page Before Child Page Base Page After </body> </html> |
Markup Inheritance with Wicket 1.1 on Phil's Weblog
TODO: describe <wicket:head> its functionality and the difference to <head>
- <head> will be inserted in output automatically if required
- <head> is not a wicket specific tag and you must use add() for components within in <head>
- <head> is supported by panels, borders and inherited markup, but is not copied to the output. They are for previewability only (except on Pages)
- <wicket:head> is not necessary in Page markup. Wicket interprets <head> as <wicket:head> automatically.
- <wicket:head> makes sense in Panels, Borders and inherited markup (of Panels, Borders and Pages)
- components within <wicket:head> must be added by means of add() like allways with Wicket. No difference (anymore)
- <wicket:head> and it's content is copied into the output. Component contained in <wicket.head> are rendered as usual
Using Markup Inheritance with Panels
Markup Inheritance works with panels as well as Pages. To make this work, you have to make the markup container a transparent resolver, or add the child components to the markup container.
To mark an container as transparent resolver, override
Code Block | ||||
---|---|---|---|---|
| ||||
WebMarkupContainer wmc = new WebMarkupContainer( "wmc" ) { @Override public boolean isTransparentResolver() { return true; } }; |