Popular @ dzone.com: fresh links for developers

Submit a story   Vote on new stories
Forum Controls
Whos Online: 167 guest(s), 0 user(s). More info »
Spotlight Features

The Rich Engineering Heritage Behind Dependency Injection

Andrew McVeigh takes us on a tour of the rich heritage behind dependency injection, what it represents, and tells us why its here to stay.

NetBeans 6: Matisse Updates

NetBeans 6 delivers great updates to the Matisse GUI builder. Spend a few minutes with Roman Strobl and get an expert briefing on what's new and what has changed.

Introduction to Groovy Part 3

In this, the third and final installation of Andres' Introduction to Groovy series, you learn about how Groovy handles variable numbers of arguments, named parameters, currying, and more about Groovy operators. Including, some new operators.

Easier Custom Components with Swing Fuse

Swing Fuse (actually just Fuse), is a framework designed to make it easier to create your own custom desktop components. In this article, Daniel Spiewak shows you how to get started and provides sample source code you can download.

Benchmark Analysis: Guice vs Spring

Willam Louth shows how he uses JXInsight Probes to investigate probable performance issues with code bases that he is not familiar with. He also highlights possible pitfalls in creating a benchmark, as well as in the analysis of results.
Read the Spotlight Archives
Replies: 3 - Pages: 1  
Threads: [ Previous | Next ]
  Click to reply to this thread Reply

Wicket: consistent layout using markup inheritance

At 3:37 PM on Apr 11, 2006, Martijn Dashorst DeveloperZone Top 100 wrote:

This Wicket example shows you how to create reusable page layouts and panel layouts using Wicket's markup inheritance . Markup inheritance enables you to add inheritance to your markup allowing you to 'fill in the blanks' in a subclass of your page or component.

In this example we assume you already have read and understood the other examples which give you information on the structure and nature of Wicket applications. If you haven't yet, read the excellent introduction to Wicket written by R.J. Lorimer.

Page layout

In this article we show a standard strategy for laying out a page. A standard header, the main content body and a standard footer. 

+----------------+
|     HEADER     |
+----------------+
|      BODY      |
+----------------+
|     FOOTER     |
+----------------+

In Wicket you can achieve this using different strategies. This article focuses on one strategy: markup inheritance.

What is markup inheritance?

In Java you can extend classes. This same concept has been fitted into the markup parsing of Java. Markup containers that have files associated (page and panels) can inherit the markup of their super containers.

This is done using two special Wicket tags: and . 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.

Listing 1 the super markup file 

<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:

Listing 2 the child markup file 

<html>
<head></head>
<body>
This is in the child markup 1.<br>
<wicket:extend>
This is in the child markup 2.<br>
</wicket:extend>
This is in the child markup 3.<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.

Listing 3 the final markup 

<html>
<head></head>
<body>
This is in the super markup.<br>
<wicket:child><wicket:extend>
This is in the child markup 2.<br>
</wicket:extend></wicket:child>
This is in the super markup.<br>
</body>
</html>

Here you can see that the <wicket:child /> tag has been expanded, and its contents filled with exactly the markup between the <wicket:extend> tags. (NB. removing the Wicket tags from the final markup is a framework setting)

Implementing the BasePage

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.

Listing 4 The base page's Java class 

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 practice. Now let's take a look at the markup for the BasePage

Listing 5 The base page's markup file 

<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>

In this markup file you see the specific basic layout: we have 3 div elements:

  • div id="header"
  • div id="body"
  • div id="footer"

Note that these aren't Wicket components, just plain markup. We could have made them components, such as a Panel but for brevity we keep it this way.

Now that we have the BasePage finished, we can implement the two subclasses to finish this example.

Implementing the sub pages

We need to build two pages: Page1 and Page2 . Each page needs its own markup file and Java class. Let's first implement Page1 .

Listing 6 Page1's Java class 

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 :

Listing 7 Page1's Markup file 

<html>
<head></head>
<body>
<wicket:extend>
<h1>Page1</h1>
<span wicket:id="label1"></span>
</wicket:extend>
</body>
</html>

Here you see that we added the Label component in the markup between the wicket:extend tags. If we were to add the component outside those tags, Wicket will not be able to render the component in the final page.

Now, let's do the same for Page2 .

Listing 8 Page2's Java class 

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"));
    }
}

Listing 9 Page2's Markup file 


<html>
<head></head>
<body>
<wicket:extend>
<h1>Page2</h1>
<span wicket:id="label2"></span>
</wicket:extend>
</body>
</html>

In Page2 you see that we have a different component structure (label2 instead of label1). As such the pages are composed differently: as far as Wicket is concerned these two pages differ like night and day.

If you paste this code into a Wicket quickstart application, you can see it immediately working (don't forget to set the homepage to Page1 or Page2 , and to keep the Java and HTML files next to one another in your source folder for the fastest results).

Conclusion

Wicket's markup inheritance gives you the tool to create a consistent layout in your Wicket application without having to copy'n'paste the markup around in your files. Together with Wicket's component model this feature becomes a powerful tool in your hands. In this example we haven't touched on the other possible features of markup inheritance:

  • contributing to the <head> section from your sub pages (this works the same as described here )
  • multiple layers of inheritance (this just works)
  • markup inheritance used within Panel components

However, this example should get you up and running. I hope this example has been helpful. Until next time,

Martijn Dashorst

3 replies so far ( Post your own)

1 . At 11:48 PM on Apr 11, 2006, Riyad Kalla DeveloperZone Top 100 wrote:
  Click to reply to this thread Reply

Re: Wicket: consistent layout using markup inheritance

Martijn,
Between all these Wicket articles on JL the only thing missing is a friendly introduction to Models. I think that's the only thing that can potentially get complex in Wicket and it's not because the implementation is complex, it's just because you have to readjust your perspective.

For example working with lists of radio buttons that can change values in drop down boxes or something like that.
Best, Riyad [kallasoft | The "Break it Down" Blog]
2 . At 1:26 AM on Apr 12, 2006, V. Jenks wrote:
  Click to reply to this thread Reply

Re: Wicket: consistent layout using markup inheritance

I'd have to agree...Wicket is a pleasure to work with until you hit a snag w/ something more than trivial in a web form. Models aren't necessarily complex but the implementation details can get hairy w/o any real detailed documentation.

I've struggled w/ DropDownChoice select lists myself. *Not* thinking about request & response cycles is a little backwards for those of us who have been building web apps for a while.

I can't wait for the book...and many more to come after that .

Wicket is great...it's fun to build web apps w/ Java now!
3 . At 6:51 AM on Apr 12, 2006, Ali Anwar wrote:
  Click to reply to this thread Reply

Re: Wicket: consistent layout using markup inheritance

I can't agree more, it's really fun now to do web application.

I vote YES for model tutorial.
Replies: 3 - Pages: 1   Threads: [ Previous | Next ]

thread.rss_message