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”.

Image_1

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…

Advertisements

Posted on April 30, 2011, in Tapestry and tagged , , , , , . Bookmark the permalink. Leave a comment.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: