Better HTML Buttons… with images
0 Comments Published September 21st, 2005 in Java, JavaScript, Web Tags: .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.
Search
Calendar
| M | T | W | T | F | S | S |
|---|---|---|---|---|---|---|
| « Aug | Oct » | |||||
| 1 | 2 | 3 | 4 | |||
| 5 | 6 | 7 | 8 | 9 | 10 | 11 |
| 12 | 13 | 14 | 15 | 16 | 17 | 18 |
| 19 | 20 | 21 | 22 | 23 | 24 | 25 |
| 26 | 27 | 28 | 29 | 30 | ||
Archives
Categories
- Android (3)
- Apple (26)
- Books (7)
- Eclipse (14)
- Errors (3)
- Firefox (7)
- Git (2)
- Hardware (16)
- Horror Code (8)
- Internet (18)
- Java (98)
- JavaScript (9)
- Life, universe and everything (45)
- Lifehacks (25)
- Linux (50)
- Opinions (25)
- OSX (4)
- Python (1)
- Software (27)
- Speeches and Conferences (8)
- Unix (3)
- Web (21)
- Windows (19)
Tag Cloud
Android apple architecture Bash colors configuration CSS Development Düsseldorf Eclipse germany Git Google Hardware hdr How-To Java JAXB job junit Karmic Linux MacBook music night Open Source Opinion oracle OSX patterns Pitfalls Practices Resume Security Software Suspend TDD Testing tip tonemapped Tricks Ubuntu video Web XML
WP Cumulus Flash tag cloud by Roy Tanck and Luke Morton requires Flash Player 9 or better.
Blog License
Blogs I like
Books on the desk
Friends' Blogs
- Antonio Terreno & Valter Bernardini
- Bruno Bossola
- Daniele Galluccio
- Domenico Ventura
- Ed Schepis
- Fabrizio Gianneschi
- Luca Grulla
- Luigi Zanderighi
- Marcello Teodori
- Mida Boghetich
- Muralidharan Chandrasekaran
- Piero Ricca
- Renzo Borgatti
- Simone Bordet
- Simone Bruno
- Uberto Barbini
- Valvolog
- Webtide blogs (Greg Wilkins & Jan Bartel)
Links




















No Responses to “Better HTML Buttons… with images”
Please Wait
Leave a Reply