Friday, April 27, 2007

A Wicket rounded box border

This border component is based on this page. It creates a box around your content with rounded corners. to use it:

MyPage.java:
Border boxBorder = new RoundedBox("roundedboxborder");
boxBorder.add(new Label("mylabel", "Hi"));


MyPage.html:
<span wicket:id="roundedboxborder">
<p wicket:id="mylabel">My Label</p>
</span>

RoundedBox.java:
package com.my;

import wicket.behavior.HeaderContributor;
import wicket.markup.html.border.Border;

public class RoundedBox extends Border
{
public RoundedBox(String id)
{
super(id);

add(getCssContributor());
}

/** Subclasses can override */
protected HeaderContributor getCssContributor()
{
return HeaderContributor.forCss(RoundedBox.class, "RoundedBox.css");
}
}

RoundedBox.html:
<html xmlns:wicket="xmlns:wicket">
<body>
<wicket:border>
<div class="roundedBox">
<div class="boxTopLeft">
<div class="boxTopRight"> </div>
</div>

<div class="boxContentLeft">
<div class="boxContentRight">
<wicket:body/>
</div>
</div>

<div class="boxBottomLeft">
<div class="boxBottomRight"> </div>
</div>
</div>
</wicket:border>
</body>
</html>

RoundedBox.css (you could also use the original CSS from the URL above):
.roundedBox {
width: 80%;
margin-bottom: 10px;
}
.boxTopLeft {
background-image: url(/mycontext/images/box_tl.gif);
}
.boxTopRight {
background-image: url(/mycontext/images/box_tr.gif);
background-position: right top;
background-repeat: no-repeat;
height: 10px;
}
.boxBottomLeft {
background-image: url(/mycontext/images/box_bl.gif);
}
.boxBottomRight {
background-image: url(/mycontext/images/box_br.gif);
background-position: right top;
background-repeat: no-repeat;
height: 10px;
}
.boxContentLeft {
background-image: url(/mycontext/images/box_cl.gif);
background-position: left top;
background-repeat: repeat-y
}
.boxContentRight {
background-image: url(/mycontext/images/box_cr.gif);
background-position: right top;
background-repeat: repeat-y;
color: #FFF;
}

The images can be obtained from the URL above. The above CSS assumes the images are in WEB-INF/images.

2 comments:

Jonathan said...

It might be really nice to have a RoundedPanel as well that you can extend using markup inheritance.

Gin said...

>The above CSS assumes the images are in WEB-INF/images

Is this correct? It doesn't work for me. I had to move the images to webapp/mycontext/images.