Changing the Styles of Grid and BeanEditForm

Everything works fine but looks less than perfect. For example, the labels of BeanEditForm are cramped on the left side of the form so that lines like Birth Date Verified have to split into two lines, and it misplaces the other labels as a result. Also, the background color and the font used by default for Grid and BeanEditForm might not fit the design of your application. Fortunately, the appearance of these components is de fined by CSS styles, and so we can easily infl uence how they look by changing the styles.

Tapestry provides a default stylesheet, named appropriately default.css, and this is exactly where the styling of its components is de fined. Tapestry adds the default stylesheet in such a way that it will always be the first for every page, and so any stylesheet that we provide can override whatever is de fined in default.css. To make the desired changes, we need to provide a stylesheet of our own and in it declare the same styles as in default.css—with the same names, but with different content.

As the first step, we might want to look into the default.css file. It can be found in the Tapestry source code package that can be downloaded from http://tapestry. apache.org/download.html. The name of the package will be similar to tapestrysrc 5.0.6 binary (zip). The default.css file can be found inside the package, in the tapestry-core\src\main\resources\org\apache\tapestry subdirectory.

This file contains a signi ficant number of styles, but those related to BeanEditForm have t-beaneditor in their name, and those related to Grid contain t-data-grid. Let's say we want to change the background of BeanEditForm to white, the surrounding border to green and give more space to the labels. Admittedly, I am not an expert in CSS, but it is not actually dif ficult to figure out what exactly should be changed. These are the two style de finitions we shall want to tweak:

DIV.t-beaneditor
{
  display: block;
  background: #ffc;
  border: 2px solid silver;
  padding: 2px;
  font-family: "Trebuchet MS", Arial, sans-serif;
}
DIV.t-beaneditor LABEL
{
  width: 10%;
  display: block;
  float: left;
  text-align: right;
  clear: left;
  padding-right: 3px;
}

The first of them de fines the appearance of the form in general, the second—the appearance of the labels used for the fields in the form. It is easy to guess that the first de finition will allow us to change, most signi ficantly, the background, the border and the font of the form, while the second allows us to change the space given to the labels (currently only 10% of the width of the page). But where do we put our own style de finitions? It will be convenient to have a directory for all the assets of our web application, let's name it appropriately, styles. It should be created at the root of the web application, on the same level where page templates are placed.

To create it in NetBeans, right click on the Web Pages folder inside the project structure. Select New|File/Folder…, then Other in Categories and Folder in File Types. Click on Next, give the new folder a name, and then click on Finish. Now right click on the new styles folder and again select New|File Folder…. Choose Other for Categories, Empty File for File Types, click on Next and name the new file something like styles.css.

In Eclipse, the sequence of actions will be similar, but the new styles folder should be added to the WebContent folder in the project structure.

Now we can put the aforementioned style de finitions into styles.css, and change them as required. Let's try something like this:
DIV.t-beaneditor
{
  display: block;
  background: white;
  border: 2px solid green;
  padding: 2px;
  font-family: "Trebuchet MS", Arial, sans-serif;
}
DIV.t-beaneditor LABEL
{
  width: 150px;
  display: block;
  float: left;
  text-align: right;
  clear: left;
  padding-right: 3px;
}

In fact, it should be enough to leave only the highlighted lines here as the other details were already speci fied in the default style sheet. We can also influence the positioning of the Save button:
input.t-beaneditor-submit
{
  position: relative;
  left: 150px;
}

However, to see the changes, we need to make the new stylesheet available to the web page. Tapestry can inject an asset, be it a stylesheet or an image, into the page
class when we ask it to do that, so let's add to the AddCelebrity page class to the following lines of code:

@Inject
@Path("context:styles/styles.css")
private Asset styles;
public Asset getStyles()
{
return styles;
}

Finally, provide in the page template a link to the stylesheet:

<head>
  <title>Celebrity Collector: Adding New Celebrity</title>
  <link rel="stylesheet" href="${styles}" type="text/css"/>
</head>

If you run the application now, you will notice a signi ficant difference in the form's appearance:

You can continue experimenting from here with styles on your own, using the default.css file and the source code of the rendered page (where you can see
which styles are used for what) as your starting point. But let me show you one more very useful component.

FCKEditor Component

Quite often, we might want to give the users of our application an opportunity not only to enter a message, but also to format it similarly to how they would do this in a familiar word processor. There are JavaScript-enabled rich text editors available for this purpose, the most famous of them is perhaps FCKEditor (http://www.fckeditor.net/), but integrating such an editor into a web application might require additional knowledge and effort.

Thankfully, there is a custom Tapestry 5 component developed by Ted Steen and Olof Naessen that wraps FCKEditor. As a result, we can use this excellent rich text
editor in the same way like any other Tapestry component. The component can be downloaded from http://code.google.com/p/tapestry5-fckeditor/ as a JAR file (make sure you pick the version, 1.0.2 or later). The name of the file will be similar to tapestry5-fckeditor-1.0.2.jar. Please put it into the WEB-INF/lib subfolder of our web application. In Eclipse, you might want to press F5 to make sure that the IDE has noticed the addition.

Let's use the FCKEditor component to enter a celebrity's biography at the AddCelebrity page. All we need to do is to change the type of component used to edit the biography property in the page template:

<t:parameter name="biography">
  <t:label for="biography"/>
  <t:fckeditor.editor t:id="biography"
t:value="celebrity.biography"/>
</t:parameter>

The result of this change might look a bit overwhelming:

Page 5 Of 6 - Advanced Components from the book "Tapestry 5 - Building Web Applications"