Here's another example of a procedural control that makes building Web apps easier. Rounded corners with no script and very little CSS:

        <j:RoundedPanel cornerSize="small" 
                        colorClassName="lightblue" 
                        contentClassName="padded">

            <div>More content.</div>
            
        </j:RoundedPanel>
    

This is converted into JavaScript code for you by the compiler.

RoundedPanel is a script-based procedural control for generating panels with rounded corners. It is related to the NiftyCorners technique (see NiftyCube ).

But if you look at the page markup you won't see any JavaScript. That's all hidden inside the control definition.

The HTML that RoundedPanel's script generates looks something like this:

<div class="container">
    <div class="line color1" style="margin: 0 5px;" />
    <div class="line color1" style="margin: 0 3px;" />
    <div class="line color1" style="margin: 0 2px;" />
    <div class="line color1" style="margin: 0 1px;" />
    <div class="line color1" style="margin: 0 1px;" />

    <div class="content color1" style=";">

        <!-- content for the panel goes in here -->

    </div>

    <div class="line color1" style="margin: 0 1px;" />
    <div class="line color1" style="margin: 0 1px;" />
    <div class="line color1" style="margin: 0 2px;" />
    <div class="line color1" style="margin: 0 3px;" />
    <div class="line color1" style="margin: 0 5px;" />
</div>

In other words, the corners are created by inserting <div> elements that generate horizontal lines of differing lengths. The corner shown above has five lines on the top and five on the bottom. Each line has a different CSS margin to change how intented the line is, to create the curve.

With this basic technique, rounded corners with different colors can be created procedurally, without needing to generate images or write lots of CSS. The approach is also extremely portable to different platforms.

There are several downsides to procedurally generated corners like this:

• The corners are not as smooth (or "antialiased") as corners made using images.
• Some extra nodes are created in the HTML DOM.
• The technique is inefficient for very large rounded corners.
• The content within the panel sits below the corner area - you cannot easily place content "into" the corner.

However, its hard to argue with the simplicity and flexibility of procedurally-generated corners.

See also Reusable Panel , a demonstration of building a custom panel through markup using CSS and images for corners.