Better HTML Buttons… with images

I never understood why HTML spec, still links the action of a form to the form itself: in a form you may need more possibility (edit, delete, insert, etc...) and you'll have many buttons then, so I think that html should link the action to the button, like in any intelligent gui language.
So it would be more useful a tag like:
<input type="submit" action="servleturl"/>

In current project we used Tag Files, a feature available in JSP 2.0 specification: you can write tags using JSP, and this is very good if your tags must produce some template code.

One of our Tag File uses a syntax like the following:

<my:button action="update.jspa" >
    <ww:text name="'application.update.button'" />
</my:button>

the action attribute is mandatory, but if you need you can define your tag with more optional attributes, for example to add javascript execution, or to ask "are you sure?" alert, etc...
The action identifies the application controller (i.e. a servlet) that will be executed when button is clicked.
The label of the button is defined by the body content of the my:button tag. In this case the "<ww:text name="'application.modify.button'" />" is resolved by a webwork <ww:text /> tag that provides internationalization(i.e. will display: "update" string for Americans, and "aggiorna" for Italians).

With a simple javavascript I am able to obtain enclosing form (owner of the button), changing the action of the form tag on the fly, then submit the form: in this way, buttons are associated with action.
The <form /> tag will specify the action attribute as an empty string (as it is mandatory): <form action=""/>

The nice thing of having a body of the tag button, is that you can include something inside it, and you are completely free! (you can insert a table, if you like... hey, stop! don't do that!).

For example, an icon with corresponding description:

<my:button action="http://www.google.com/">
     <ww:url id="imagesurl" value="'http://it.newinstance.it/wp-content/uploads/2006/10/export.png'" includeParams="'none'" />
     <img style="border: 0; vertical-align: middle; margin-right: 5px;" src="<ww:property value="#imagesurl"/>"/>
     <ww:text name="'application.export.button'" />
</my:button>

And this, executing our custom jsp tag file, will render as:

<button onclick="form.action='http://www.google.com/'; form.submit(); return false" >
     <img style="border: 0px none; vertical-align: middle; margin-right: 5px;" src="http://it.newinstance.it/wp-content/uploads/2006/10/export.png" />
     Export
</button>

The "return false" at the end of the javascript is a compatibility issue, to make it behave the same way in different browsers (without it, for instance, explorer will submit the form twice!). And this is how it will look like:

I won't show here the source code for the button.tag file: it's really trivial, and ... I would have problems with copyright, but the concept is there, and writing a tag that translate the <my:button/> in the source shown, it's really easy.


No Responses to “Better HTML Buttons… with images”  

  1. No Comments

Leave a Reply

XHTML: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>



Calendar

September 2005
M T W T F S S
« Aug   Oct »
 1234
567891011
12131415161718
19202122232425
2627282930  

Follow me

twitter flickr LinkedIn feed

Subscribe by email

Enter your email address:

Archives


Categories

Tag Cloud


Listening