nerdErg Form Taglib V2.0

Bringing Readability, Convention, Consistency and CSS to form design. Updated to Version 2.0.

It gives you:
  • Labels and structure without cluttering up your GSP form
  • Standard error marking and handling without cluttering up your GSP form
  • Compatibility with browsers
  • Javascript assistance with pickers and choosers where appropriate using jQuery
  • CSS themeable rendering of forms

General attributes

  • label: the Label you wish to display for the field. if not set no label is displayed. Labels can have embedded \n chars that are translated to <br> to force a new line in a label
  • delim: the Delimiter char displayed after a label. By default a ":" is displayed after the label.
  • bean: the bean the field is contained in. If this bean has an errors property then the errors are highlighted.
  • field: the beans field to display
  • name: the name of the field. If no id attribute is set the id is also set to this value
  • table: if set true then a table is used to layout the label and value. If false CSS is used for layout. Default is false, use true for IE6 compatibility
  • value: if bean has not been set then this can be used to directly set the value for the field.

Notes:

  • You can add any attributes that make sense for an input of the type being used and they'll be automatically included. Specifying a name attribute for example will override any auto set name. This is useful when you have multiple sets of inputs with the same field name, so you might have name="${index}.firstName"
  • Specifying a size attribute on text inputs is also a good example of an additional attribute.
  • Boolean attributes like disabled, checked and readonly are correctly inserted if the value evaluates to Groovy true and left out completely if the value evaluates to false. So adding an attribute checked="${true}" will insert the attribute checked='checked'. Truth is extended to mean any non zero-length string that !(value ==~ /(?i)false/) so if you have checked='false' then checked will not be inserted.
  • As you'd hope/expect all the values are HTML encoded, and protected from null value errors.
  • The bean attribute can be just a map of values.

Using it

Install it with
grails install-plugin nerderg-form-tags

To get the date picker and time entry functions you need to install some javascript stuff. The plugin includes a standard CSS and Javascript library to get you going, but you need to add some things to your page/layout.

First install the jQuery and the jquery-ui plugins (jquery is installed by default with Grails 2.x)
grails install-plugin jquery
grails install-plugin jquery-ui

Note you need to specify a theme for jquery-ui to use.
The jQuery timeentry and mousewheel plugins are now bundled in nerdErg Form Tags
Now edit your layout or page.gsp and add the following to the header section to include the jQuery and nerdergFormTags javascript and CSS.

<!--
include the javascript libs, css and
add the default code to associate the date and time INPUT tags with date
and time pickers from nerdergFormtags.js. Feel free to use your own...
-->

<r:require modules="nerdergFormTags"/>

<!--

set the default display dateFormat and icon for datepicker for the above JS
-->
<g:javascript>
nerdergFormTags.dateImg = "${resource(plugin: 'nerderg-form-tags', dir: 'images/icons', file: 'date.png')}";
nerdergFormTags.dateFormat = "dd/mm/yy";
</g:javascript>

... and that's it! Welcome to clean forms. You can find the example nerdergFormTags application at https://github.com/pmcneil/nerdErgFormTagsTestApp


Copyright © nerdErg Pty Ltd 2012 ABN 20 159 294 989