Bindows Nifty Round Corners :: No Images!

In March of 2005, Alessandro Fulciniti wrote a piece on using rounded corners without the use of images -- "Nifty Corners". The idea is simple -- by stacking lines of different lengths on top of one another you form a rounded corner.

Alessandro used a combination of block elements and margins to achieve this. We can do the same by using the basic Bindows building block -- BiComponent -- manipulating its width and then using setStyleProperty() to reduce its margins.

The result is the component, MyRoundedCorners, a BiComponent that allows you to create rounded "top" or "bottom" corner pieces --



You can use the top and the bottom piece to "sandwich" the main body of another BiComponent and create something like this Meebo-like Yahoo! login --



Because MyRoundedCorners is a BiComponent, you can listen for events and add it to other BiComponents. So, you can create a custom dialog, drag it around and even resize it as found here.

Using MyRoundedCorners is simple. To create rounded corners for the top, do this --

var topPiece = new MyRoundedCorners("top");

or with no arguments --

var topPiece = new MyRoundedCorners();

To create rounded corners for the bottom --

var bottomPiece = new MyRoundedCorners("bottom");

There are a few "public" methods ( these are the ones that are meant for you to use; of course, you could iterate through the properties and discover methods that you're not supposed to use! ) that allow you to set properties for the corners.

Most of the methods mimic the behavior found in "out of the box" Bindows components and are self explanatory --

• setWidth(w)


• setBackgroundColor(colorInHexOrRgb)


• setOpacity(oValue)

This is just like BiComponent's setOpacity(). oValue should be a number between 0 and 1 where 1 is totally opaque and 0 invisible.

• setCSSBorder(borderValue)

"borderValue" is equivalent to the values for the CSS border property like --

border: 1px solid #000;

where "borderValue" is "1px solid #000".

• setBackgroundImage(url, repeat)

"url" is the URL value or the name of the background image that you want to use. It's the same value used in the CSS property "background-image".

"repeat" is the same as the CSS property "background-repeat". You can use values "repeat", "repeat-x", "repeat-y" or "no-repeat".

So, to create a rounded top border with a width of 400px with the background color of #9bd1fa, you'd do this --

var container = new BiComponent();
container.setSize(400, 20);
var rc = new MyRoundedCorners("top");
container.add(rc);
rc.setWidth(400);
rc.setBackgroundColor("#9bd1fa");
rc.setOpacity(1);
...
application.getWindow().add(container);

Note that the height of the rounded corners are always 5px. You can't ( and shouldn't ) change that. This makes the API even simpler because all you have to worry about is setting the width of MyRoundedCorners.

You can find the examples/test driver here. You can review the XML here and MyRoundedCorners here.

I built the component and the examples with Bindows 3.0, but it should work for other Bindows versions as well.

Have fun!