jueves, 13 de mayo de 2010

Grails Plugin: ValidationField (Español)

Introducción
El plugin ValidationField nos permite renderizar elementos de formularios html, con la ventaja de que estos son "inteligentes" y cuando detectan errores de validación, estos son mostrados automáticamente a través de un mensaje y cambiando su estilo CSS.
Cuando el usuario envía el formulario, si hay errores de validación de dominio, los elementos del formulario cambiarán su borde a rojo y el mensaje configurado será mostrado bajo este (en rojo, también).
El mensaje de error puede ser mostrado o no, tan solo ajustando la propiedad "showMessage" a "true" o "false".
El color de los mensajes y de los elementos del formulario pueden ser modificados a través de CSS, al igual que el mensaje de error.
 
Instalación

En la línea de comando, en tu aplicación grails escribe: 

grails install-plugin validation-field

También puedes descargar el plugin y escribir:

grails install-plugin [folder_de_descarga]/validation-field-0.2.zip

Eso es todo

Utilizando el plugin Validation Field
En tu archivo/plantilla gsp, dentro de las etiquetas <head> pon esta línea, para importar la hoja de estilos CSS

<g:validationFieldIncludes />

Ahora puedes usar las etiquetas  <g:validationField />y <g:validationSelect /> en vez de <input .../> y <select>.

Uso para mostrar elementos input y textArea <g:validationField ... />
Solamente se requieren 3 propiedades para la etiqueta <g:validationField />:

tag: Tipo de etiqueta html ( input o textarea ).
domain: El objeto a ser evaluado (algo así como ${myObject}).
field: El nombre del campo o propiedad del objeto.

ejemplos:

<g:validationField tag="textarea" domain="${person}" field="name" />

Esta línea mostrará un elemento textArea en la página, cuando el usuario envíe el formulario (Si el campo nombre ha quedado vacío y este fué ajustado como obligatorio en la clase de dominio) se mostrará el mismo elemento textArea, pero su estilo CSS será reemplazado automáticamente por uno más visible, y será mostrado el mensaje de error respectivo.

<g:validationField tag="input" type="text"  domain="${person}" field="name" />

Igual que el anterior, pero e vez de un textArea, será mostrado un input text.

Puedes usar todas las propiedades html ( style, width, height, class, etc ) con la etiqueta <g:validationField> (funciona igual para elementos "input" de tipo "password")


Uso para mostrar elementos select <g:validationSelect ... />

Para usar etiquetas <g:validationSelect .../> las propiedades son exactamente las mismas que usando la etiqueta de Grails <g:select> además de las propiedades requeridas por el plugin: "domain" y "field".

ejemplo:


<g:validationSelect domain="${person}" field="country" from="${Country.list()}" value="${person.country.id}" optionKey="id" optionValue="name" />


 Las propiedades 'domain' y 'field' son propias del plugin ValidationField, el resto pertenecen a la etiqueta de Grails <g:select />.


Nota: Documentación acerca de la etiqueta <g:select> en: http://grails.org/doc/latest/ref/Tags/select.html


Otras propiedades (para ambas etiquetas, validationField y validationSelect):

value:Valor por omisión a ser mostrado.
messageErrorClass: Nombre de la clase CSS para reemplazar el estilo CSS del mensaje de error/validación.
fieldErrorClass: Nombre de la clase CSS, para reemplazar la clase del input/textArea/select cuando hay un error de validación.
customErrorMessage: Si no quieres mostrar el mensaje i18n, puedes cambiarlo aquí.
showMessage: String "true" o "false"para indicar si deseas mostrar el mensaje de error u omitirlo (y solo mostrar el cambio de estilo del campo).

viernes, 23 de abril de 2010

Grails Validation Plugin ( ValidationField Plugin )


Introduction
This plugin allow us to render input (text/password),textArea and select tag forms.
When the user send the form, if there are domain class errors, the form element tags change their CSS style, showing the error (and the message).
Your i18n default message can be showed or not, just by setting the property showMessage to "true" or "false".
The CSS style for the form elements and the error message are both customizables.

How to install it?

On your application command line type: 

grails install-plugin validation-field

Or download the plugin from here and type:

grails install-plugin [dir]/validation-field-0.2.zip

Thats all

Now, how to start to work with it?
In the gsp file, between the <head> tags, put this line ( to import the required css file ): 

<g:validationFieldIncludes />

Now, you can use the  <g:validationField /> and the <g:validationSelect /> tags instead the <input .../> and <select> tags.

Usage for render input and textArea form elements <g:validationField ... />
Are required just three properties in your <g:validationField /> tag:

tag: The type of html tag ( input or textarea ).
domain: The domain object (just like this ${myObject}).
field: The name of the object's field to evaluate.

examples:

<g:validationField tag="textarea" domain="${person}" field="name" />

This line will show a textArea html element in your html rendered page, when the user send the form (if the field 'name' is empty and in your domain class it was setted as mandatory ), the gsp now will rendered with the same textArea, but his CSS Style will change for one more visible (red colored), and your i18n message will be shown ( in red color, too ) just under the textarea.

<g:validationField tag="input" type="text"  domain="${person}" field="name" />

Will show the same, but in a input text form element.

You can use all the html properties ( style, width, height, class, etc ) in the <g:validationField> tags (it works with password input tags)


Usage for render select form elements <g:validationSelect ... />


The usage of the validationSelect tag is the same as the Grails <g:select> tag, you must use the same properties, plus the ValidationField Plugin properties: domain and field.


example:


<g:validationSelect domain="${person}" field="country" from="${Country.list()}" value="${person.country.id}" optionKey="id" optionValue="name" />


The 'domain' and 'field' properties are ValidationPlugin properties, the rest are Grails <g:select /> properties.


Note: The <g:select> properties are in: http://grails.org/doc/latest/ref/Tags/select.html


Advanced usage (for both validationField and validationSelect tags):
Other properties:

value:By default value to be shown.
messageErrorClass: CSS class to overwrite the plugin CSS class by default to use in the error/validation message.
fieldErrorClass: CSS class to overwrite the plugin CSS class by default to use in the error/validation form field.
customErrorMessage: A message to be shown if you don't want to show the grails validation default message.
showMessage: String (true or false) that indicate if you want to show the validation message of just the field with the style changed.