labels, links, and repeaters
135Performing common tasks with components
<html>
<body>
<h1>WOPR</h1>
<a href="#" wicket:id="link">Play global thermonuclear war</a>
</body>
</html>
public class MyPage extends WebPage { public MyPage() {
Link link = new Link("link") { @Override
protected void onClick() {
System.out.println("Link clicked");
} };
add(link);
link.add(new SimpleAttributeModifier("onclick", "return confirm('Are you sure?');");
} }
In this quick example, we add a link to the page that logs a message to the console.
The link is fitted with an attribute modifier that adds an onclick event to the link’s tag. The browser asks for confirmation with the message “Are you sure?” If the user clicks OK, the browser sends the request to the server; if the user clicks Cancel, noth-ing happens. Figure 5.11 shows how this looks in the browser.
This example shows how you can use attribute modifiers to add JavaScript events to existing components in an elegant way without much effort. When we discuss cre-ating rich components in chapter 10, you’ll see how you can use attribute modifiers to pull your Web 1.0 application into the twenty-first century with Ajax and superflu-ous effects.
You may have wondered about the markup in our examples carrying some extra weight when rendered to the browser: the wicket:id and, in some cases, the label’s tags. Let’s travel light by removing that excess baggage.
Listing 5.15 Adding a confirmation popup to a link
WOPR
Play global thermonuclear warthermonuclear war
Figure 5.11 A screenshot of the confirmation link created by adding an attribute modifier to a Link component
136 CHAPTER 5 Working with components: labels, links, and repeaters
5.6.3 Removing excess markup
In all our previous examples, the label’s open and close tags appear in the final out-put. Sometimes you want to remove those tags to produce smaller markup, or to remove tags that cause layout problems when they appear out of context in the HTML. Take the following, chewed-up Hello World! example:
<!-- original markup -->
<span wicket:id="message">Hello, World!</span>
</body>
</html>
In the final markup, the span tags and the Wicket identifiers are still rendered. If you want to remove the span tags from the final output, you can use the following setting on the Label component: setRenderBodyOnly(booleanvalue). This setting is part of all Wicket components, and it works on almost all of them in a similar way. Exceptions are the Page component and components that don’t have their own markup but repeat the attached markup, such as repeating views and list views.
Let’s see how this setting works on our label in the following example. Here we’ve altered the Java code to hide the Wicket-specific tags:
/* Java code */
add(new Label("message", "Hello, World!").setRenderBodyOnly(true));
<!-- final markup -->
In the final markup, the span tags have disappeared, along with the Wicket identifiers.
This is a nice way to clean up the excess markup that is sometimes necessary to con-struct a working page.
In some cases, you need to add markup in a place where it’s illegal to do so. Con-sider the following markup example:
137 Summary
</tr>
<tr>
<td wicket:id="cols2">...</td>
</tr>
</span>
</table>
The span tags in this example are illegal as per the HTML specification: the only tags that are allowed as children of a table tag are the tr, tfoot, tbody, and thead. For those who want to keep their markup clean, Wicket provides a special Wicket tag for these situations: wicket:container. Because the tag resides in the wicket namespace, replacing span with the wicket:container tag produces valid markup. The next example shows what this looks like:
<table>
<wicket:container wicket:id="rows">
<tr>
<td wicket:id="cols1">...</td>
</tr>
<tr>
<td wicket:id="cols2">...</td>
</tr>
</wicket:container>
</table>
Using the wicket:container tag has the benefit of passing a validator, which is a requirement for some projects and companies. Keep in mind, though, that all Wicket namespaced tags are removed from the final markup if you run your application in production mode. We’ll discuss configuring your Wicket application for production in chapter 14.
5.7 Summary
In this chapter, we looked at a some components: basic ingredients that enable you to build web applications using Wicket. You learned how to render plain text, formatted text, and text containing HTML to the browser. Although rendering text containing HTML is handy and gives you and your users great power, you shouldn’t ignore the safety concerns that stem from this approach. Your site won’t be the first to fall prey to insertion attacks.
Displaying content is important for any web application, but an application is more than a set of pages without relationships. Using links, you can navigate to other websites or within your own application. With bookmarkable links, you let users store a book-mark to a particular spot of interest in the application or site (for instance, an article).
Links are also suited to respond to users’ actions, such as removing all the data from a database or performing an action and navigating to another page. The AjaxFall-backLink is instrumental in transforming an old-style link-based page to a Web 2.0, Ajax-enabled page, while still providing support to browsers that shun JavaScript or Ajax.
Next, we showed how to repeat components to render lists of data. Using a RepeatingView component, we created an example menu for web applications. The
138 CHAPTER 5 Working with components: labels, links, and repeaters
menu serves as an example to contrast the hands-on approach of the repeating view with the more abstract and flexible approach enabled by the list view.
With the basic components covered, we discussed several operations you can per-form on them. Hiding a component completely removes it from the markup (unless you tell the component specifically to leave a placeholder tag, using setOutputMark-upPlaceholderTag). Using attribute modifiers, you can change all the markup attributes of your component tags: we showed how to modify a label’s color and how to add extra JavaScript to a link, asking for confirmation before the request is sent to the server. Finally, you learned how to clean up the extra markup generated by com-ponents in places where you don’t want it—for instance, to make the rendered markup valid.
The components and operations we’ve discussed should allow you to build a basic Wicket application. But unfortunately, this isn’t enough for many web applications:
most applications need more methods of interacting with users, such as checkout forms, comments, and profile edit pages. The next chapter will discuss how to add forms and form components to your application.
139