Blog Archives
Tapestry – Override the default CSS of BeanEditForm Component
Tapestry includes a powerful component capable of generating a complete create/edit user interface for a typical JavaBean, BeanEditForm.
When a page is rendered (which has t:beaneditform tag), the BeanEditForm component will read its object parameter as the JavaBean to edit (with the current properties of the JavaBean becoming the defaults for the various fields). Likewise, when the form is submitted by the user, the object parameter is read and its properties populated from the request.
Indeed another great component of Tapestry, which shows the power of it…
When I was practicing this feature today, with some basic tutorial application, I have seen following form for my bean called “CreateAddress”.
Well, I didn’t likde the provided in-built css (i.e. default.css), and tried to add some css class directly into the .tml file… But it was not the solution for this issue.
Following are the steps to apply your own css to the BeanEditForm component page :
Step : 1
Create your own directory inside Web Pages, 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 “style”, and then click on Finish.
Step : 2
Create your own .css file inside newly created directory “style” with name my_style.css.
Step : 3
Add following lines into my_style.css file :
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: left;
clear: left;
padding-right: 3px;
}
input.t-beaneditor-submit
{
position: relative;
left: 150px;
}
Step : 4
Now Inside your class (controller) you need to inject an Asset, use following code to do so :
@Inject
@Path("context:style/my_style.css")
private Asset styles;
public Asset getStyles() {
return styles;
}
Step : 5
Finally provide in the page template a link to the stylesheet, (where you have t:beaneditform tag)
<head>
<link rel="stylesheet" href="${style}" type="text/css"/>
</head>
After applying all the above changes, when I tested the same page, I got the overridden css styles (my_style.css) on the browser :
Provide your suggestions on this, so that I can modify the private data if required…
Nirmal Jatania's Blog 