As of version 4.1.2 of Tapestry a new Rounded Corner generator service is now available for you to use as a convenience for generating various types of images that are easily referencable in your CSS and html templates.
The original inspiration for this service is based around the article on ajaxian.com which outlines the Google Rounded Corner Generator service used by some of the google web services to construct UIs.
The basic idea behind the service is that it lets you write really simple / definable URL strings generate the images. For instance - the orange corner listed above was generated with a URL like:
./rounded?c=FF9900&bc=white&w=60&h=60&a=tr&sw=3&o=.5
There are actually a lot more options than just generating rounded corners. If you look at the images listed above you'll notice that they additionally have drop shadows generated.
Information:The rounded corner service is currently only available by including the tapestry-contrib library dependency in your project.
| Name | Type | Required | Default | Description |
|---|---|---|---|---|
| c |
Hex string or any css2 color name. |
yes |
Primary color of the generated image. Can be any standard hex string - such as FF9900 or any
of the 16 standard css2 colors defined in the w3 css2 spec.
CSS2 Color names: aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, and yellow |
|
| bc |
Hex string or any css2 color name. |
no | transparent |
Background color of the generated image. Can be any standard hex string - such as FF9900 or any
of the 16 standard css2 colors defined in the w3 css2 spec.
CSS2 Color names: aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, and yellow Warning:
If you don't specify a background color for your image the service will render the image with a transparent background and serve the
image as type |
| w | pixels | yes |
Specifies the width of the generated image. Can be simple numbers like 10 for 10 pixels or more precise such as
5.16 pixels.
|
|
| h | pixels | yes | Specifies the height of the generated image in pixels. | |
| a | One of:[tl,tr,bl,br] | yes |
The angle of the corner you would like to generate. tl=Top Left, tr=Top Right, bl=Bottom Left, br=Bottom Right
|
|
| sw | pixels | no | If you would like the corner to also have a drop shadow this parameter controls the relative width in pixels of the generated drop shadow effect around the outer edges of your corner. | |
| o | percent | no | 0.5 |
Controls the opacity of the generated drop shadow when used in conjunction with the sw(shadow width) parameter.
|
There are two additional types of images this service can generate - one of these is buidling straight side shadows.
<style type="text/css">
.side {
background: url('/rounded?s=right&sw=2') repeat-y right;
padding-right: 10px;
}
</style>Example:
This has a side shadow.
| Name | Type | Required | Default | Description |
|---|---|---|---|---|
| s | One of: [left, right, top, bottom] | yes | The side to generate the side shadow for. | |
| sw | pixels | no | This parameter controls the relative width in pixels of the generated drop shadow effect. | |
| o | percent | no | 0.5 |
Controls the opacity of the generated drop shadow when used in conjunction with the sw(shadow width) parameter.
|
Entire areas can also be generated with a shadow effect coming out in the bottom right. This particular image generation is still slightly inflexible in all available options but should suffice for the majority of simple circumstances.
<style type="text/css">
.detail {
display:block;
margin-top:2em;
padding: 0 1.1em 2em;
background: url("rounded?c=white&bc=white&w=600&h=40&shadow=true&ah=10&aw=10&sw=4&o=.5") left bottom no-repeat;
}
</style>Example:
| Name | Type | Required | Default | Description |
|---|---|---|---|---|
| c |
Hex string or any css2 color name. |
yes |
Primary color of the generated image. Can be any standard hex string - such as FF9900 or any
of the 16 standard css2 colors defined in the w3 css2 spec.
CSS2 Color names: aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, and yellow |
|
| bc |
Hex string or any css2 color name. |
yes |
Background color of the generated image. Can be any standard hex string - such as FF9900 or any
of the 16 standard css2 colors defined in the w3 css2 spec.
CSS2 Color names: aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, and yellow |
|
| w | pixels | yes |
Specifies the width of the generated image. Can be simple numbers like 10 for 10 pixels or more precise such as
5.16 pixels.
|
|
| h | pixels | yes | Specifies the height of the generated image in pixels. | |
| aw | pixels | yes | Specifies the arc width of the generated image in pixels. | |
| ah | pixels | yes | Specifies the arc height of the generated image in pixels. | |
| sw | pixels | yes | This parameter controls the relative width in pixels of the generated drop shadow effect around the outer edges of your corners. | |
| o | percent | no | 0.5 |
Controls the opacity of the generated drop shadow when used in conjunction with the sw(shadow width) parameter.
|
The TimeTracker demo application is probably the best example of configuring this service and using it in an application.
There isn't a whole lot to configuring the service, but it will require that you have a hivemodule.xml hivemind configuration
file set-up in your project's WEB-INF/ directory. The TimeTracker demo application has a hivemodule.xml definition looking like:
<?xml version="1.0"?>
<module id="timetracker" version="1.0.0" package="org.apache.tapestry.timetracker">
<contribution configuration-id="tapestry.url.ServiceEncoders">
<asset-encoder id="asset" path="/assets" />
<extension-encoder id="extension" extension="svc" after="*"/>
<direct-service-encoder id="direct" stateless-extension="direct" stateful-extension="sdirect"/>
<page-service-encoder id="page" extension="html" service="page"/>
<!-- This is key - maps /rounded servlet path requests to the rounded corner service -->
<path-encoder id="rounded" path="/rounded" service="rounded" />
</contribution>
</module>
The key addition to the file is the use of the new path-encoder service in what is probably the standard hivemined setup that most people already configured to take advantage of friendly urls.
<path-encoder id="rounded" path="/rounded" service="rounded" />
The only other addition you'll want to make is to configure your web.xml servlet mapping section to include the
new path="/rounded" configuration you just added to your hivemodule.xml:
..
<servlet-mapping>
<servlet-name>timetracker</servlet-name>
<url-pattern>/rounded</url-pattern>
</servlet-mapping>
By default the rounded corner service handles all of the necessary http caching header logic in addition to caching the generated images on the server side - so the service and the images it generates should be more than scalable enough to fit the majority of asset serving needs of most applications.