...
Border markup | Border usage | Rendered markup |
|---|
| Code Block |
|---|
| <html>
<body>
<wicket:border>
First <wicket:body/> Last
</wicket:border>
</body>
</html> |
| | Code Block |
|---|
|
<html>
<body>
<span wicket:id = "myBorder">
Middle
</span>
</body>
</html> |
| | Code Block |
|---|
|
<html>
<body>
First Middle Last
</body>
</html> |
|
In other words, the markup around the <wicket:body/> tag in the border component is sort of "wrapped around" the body of the <span> tag where the border is used. This seems simple in this example, but keep in mind that nested components and even nested borders can appear anywhere in either markup file. This can be used to create quite complex effects with relatively little code.
NavomaticApplication.java
Just as in the Hello World! example, we need to define our application. In this case, we set Page1 to be our home page.
| Code Block |
|---|
|
package wicket.examples.navomatic;
import wicket.protocol.http.WebApplication;
public class NavomaticApplication extends WebApplication
{
public NavomaticApplication()
{
}
public Class getHomePage()
{
return Page1.class;
}
}
|
Page1.java
The Page1 Java and HTML files look like this:
| Code Block |
|---|
| java |
|---|
| java |
|---|
| titel | Page1.java |
|---|
| borderStyle | solid |
|---|
|
package wicket.examples.navomatic;
import wicket.markup.html.WebPage;
public class Page1 extends WebPage
{
public Page1()
{
add(new NavomaticBorder("navomaticBorder"));
}
}
|
Page1.html
| Code Block |
|---|
|
<html>
<body>
<span wicket:id = "navomaticBorder">
You are viewing Page1
</span>
</body>
</html>
|
Notice that the NavomaticBorder component is attached to the <span> tag because the name of the component in the Java code is "navomaticBorder" and the <span> tag's wicket:id attribute is set to "navomaticBorder". Because the two names match, Wicket associates the NavomaticBorder Java component with the <span> tag.
Page2.java
The Page2 Java and HTML files look almost identical (and we'll omit the sources for Page3 altogether because it follows the same pattern):
| Code Block |
|---|
|
public class Page2 extends WebPage
{
public Page2()
{
add(new NavomaticBorder("navomaticBorder"));
}
}
|
Page2.html
| Code Block |
|---|
|
<html>
<body>
<span wicket:id = "navomaticBorder">
You are viewing Page2
</span>
</body>
</html>
|
NavomaticBorder.java
So how does NavomaticBorder work? Glad you asked. The Java code below simply adds the two BoxBorder components you see. These components are nested borders which each draw a thin black line around their contents. The rest of the magic is in the NavomaticBorder markup.
| Code Block |
|---|
|
package wicket.examples.navomatic;
import wicket.markup.html.border.Border;
import wicket.markup.html.border.BoxBorder;
public class NavomaticBorder extends Border
{
public NavomaticBorder(final String componentName)
{
super(componentName);
add(new BoxBorder("navigationBorder"));
add(new BoxBorder("bodyBorder"));
}
}
|
NavomaticBorder.html
| Code Block |
|---|
|
<html>
<body>
<wicket:border>
<p>
<table>
<tr>
<td>
<span wicket:id = "navigationBorder">
<b>Navigation Links</b>
<p>
<wicket:link>
<a href = "Page1.html">Page1</a><br/>
<a href = "Page2.html">Page2</a><br/>
<a href = "Page3.html">Page3</a>
</wicket:link>
</p>
</span>
</td>
<td>
<span wicket:id = "bodyBorder">
<wicket:body/>
</span>
</td>
</tr>
</table>
</p>
</wicket:border>
</body>
</html>
|
Notice that the markup above encloses the entire contents of the markup file's <body> with a <wicket:border> tag, as we described earlier. This lets the NavomaticBorder know how much of its markup to use when it wraps itself around the markup it finds in the context where it is used. Notice also the <wicket:body/> marker which designates where to put whatever is found inside the tag at the use context.
Next, notice that the navigation links and the border's <wicket:body/> are both enclosed in <span> tags which have wicket:id attributes that associate those tags with the BoxBorder components added in the NavomaticBorder constructor. These nested border components will each draw a thin black line around their contents.
Finally, the <wicket:link> tag is used to mark the links in the navigation as automatic links. Ordinarily, you would need to create link components and attach them to your page manually, but anchor links that are marked as automatic are parsed and hooked up to link components for you, as appropriate. The italicizing behavior is also automatic. Since Wicket knows which page is current, it removes the anchor link tag for any link that points to the current page (since the link would be useless) and italicizes the link text.
web.xml
In order to get this application up and running, we need to register the application with the Wicket servlet in the web.xml file. The following sections need to be added to the web.xml in the WEB-INF folder.
| Code Block |
|---|
|
<servlet>
<servlet-name>NavomaticApplication</servlet-name>
<servlet-class>wicket.protocol.http.WicketServlet</servlet-class>
<init-param>
<param-name>applicationClassName</param-name>
<param-value>wicket.examples.navomatic.NavomaticApplication</param-value>
</init-param>
<load-on-startup>1</load-on-startup>
</servlet>
<servlet-mapping>
<servlet-name>NavomaticApplication</servlet-name>
<url-pattern>/app/*</url-pattern>
</servlet-mapping>
|