09
Ene
13

La validación mola mogollón (también)

Wicket dispone de gran cantidad de validadores predefinidos permitiendo además definir validadores propios.
Los validadores devuelven al componente sobre el que aplican, mensajes acerca del estado de la validación realizada. La idea es crear una extensión de Label que se pueda asociar a un componente de formulario y que muestra el resultado de la validación junto a este, con un comportamiento similar al de FeedbackPanel.
Este componente se activará ajaxmente, por defecto con el evento onchange del componente asociado, aunque admitirá otros eventos en el constructor. Para permitirlo hay que activar la generación del id, setOutputMarkupId(true), tanto en el componente como en la etiqueta.
Para obtener el mensaje de validación, simplemente se establecerá como modelo de la etiqueta un PropertyModel, usando como expresión de la propiedad “feedbackMessage.message” y como objeto del modelo el propio componente asociado.
Como último paso, para se añade al componente el comportamiento de actualización mediante Ajax, forzando a que se refresquen ambos componentes mostrando los modelos actualizados. En este caso se refresca el contenido de los componentes tanto en caso de éxito como de error (que es lo que ocurrirá cuando no se cumplan las condiciones del validador, en el caso del ejemplo, cuando se introduzca una dirección de email no válida)

-FeedbackLabel.java

import java.io.Serializable;

import org.apache.wicket.ajax.AjaxRequestTarget;
import org.apache.wicket.ajax.form.AjaxFormComponentUpdatingBehavior;
import org.apache.wicket.markup.html.basic.Label;
import org.apache.wicket.markup.html.form.FormComponent;
import org.apache.wicket.model.PropertyModel;

@SuppressWarnings({"rawtypes","serial"})
public class FeedbackLabel extends Label {
    private static final long serialVersionUID = 1L;
    
    public FeedbackLabel(String id, final FormComponent component) {
    	this(id, component, "onchange");
    }
    
    public FeedbackLabel(String id, final FormComponent component, final String event) {
        super(id);
        
        this.setOutputMarkupId(true);
        this.setDefaultModel(
            new PropertyModel<Serializable>(component, "feedbackMessage.message"));
        
        component.setOutputMarkupId(true);
        component.add(new AjaxFormComponentUpdatingBehavior(event) {
            protected void onUpdate(AjaxRequestTarget target) {
                target.add(component);
                target.add(FeedbackLabel.this);
            }
            
            protected void onError(AjaxRequestTarget target, RuntimeException e) {
                target.add(component);
                target.add(FeedbackLabel.this);
            }
        });
    }
}

-Index.java

import org.apache.wicket.markup.html.WebPage;
import org.apache.wicket.markup.html.form.EmailTextField;
import org.apache.wicket.markup.html.form.Form;
import org.apache.wicket.model.CompoundPropertyModel;
import org.wicketstuff.annotation.mount.MountPath;

@MountPath("/index")
@SuppressWarnings("serial")
public class Index extends WebPage {
    private static final long serialVersionUID = 1L;

    public Index() {
        add(new TestForm("form"));
    }

    private class TestForm extends Form<Test>{
        private EmailTextField textField;
        private FeedbackLabel textFieldMsg;
		
        public TestForm(String id) {
            super(id);
			
            setModel(new CompoundPropertyModel<Test>(new Test()));
			
            add(textField = new EmailTextField("test"));
            add(textFieldMsg = new FeedbackLabel("testMsg", textField));
        }		
    }
}

-Index.html

<!DOCTYPE html>
<html xmlns:wicket="http://wicket.apache.org">
    <head>
        <meta charset="UTF-8">
        <title>Insert title here</title>
    </head>
    <body>
        <form wicket:id="form">
            <input wicket:id="test" type="email" />	
            <label wicket:id="testMsg">Default</label>
        </form>
    </body>
</html>
Anuncios

0 Responses to “La validación mola mogollón (también)”



  1. Dejar un comentario

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión /  Cambiar )

Google photo

Estás comentando usando tu cuenta de Google. Cerrar sesión /  Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión /  Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión /  Cambiar )

Conectando a %s


Archivos

Anuncios

A %d blogueros les gusta esto: