Wicket: notifique si el modelo de página ha sido cambiado

Question

El problema es el siguiente; Una página web contiene múltiples elementos de formulario, que el usuario puede modificar y guardar mediante un botón de guardar, o los cambios pueden descartarse.

Si el usuario intenta salir de la página sin guardar los cambios, necesito una ventana modal para que aparezca preguntándome si el usuario desea guardar los cambios antes de abandonar la página.

¿Qué debo hacer para verificar si el modelo de página/formulario ha sido modificado por un usuario desde que se cargó por primera vez y cómo puedo iniciar esta comprobación cuando se hace clic en cualquier enlace de página?

Cualquier respuesta o sugerencia sería muy apreciada,

Gracias.

Answer 1

Creo que estarías buscando una solución solo de JavaScript, normalmente empaquetada como un comportamiento de wicket.

aplicación depende de la biblioteca JavaScript que utiliza, aquí hay un código de prototipo:

var windowdirty = false; 
var windowdirtyinitialized = false; 

function initwindowdirty(){ 
    if(windowdirtyinitialized)return; 
    windowdirtyinitialized=true; 

    Event.observe(window,"beforeunload",function(){ 
     return (!windowdirty || 
      confirm("You have started entering values, do you really want to leave"); 
    }); 
} 

function monitor(componentId){ 
    $(componentId).observe("change",function(){ 
     windowdirty = true; 
    }); 
} 

function undirty(){ 
    windowdirty=false; 
} 

Vamos a poner esto en un archivo llamado DontLeaveBehavior.js

He aquí un comportamiento que utiliza este archivo JavaScript :

public class DontLeaveBehavior extends AbstractBehavior{ 

    /** 
    * {@inheritDoc} 
    */ 
    @Override 
    public void renderHead(final IHeaderResponse response){ 
     response.renderJavascriptReference(new JavascriptResourceReference(DontLeaveBehavior.class, 
      "DontLeaveBehavior.js")); 
     response.renderOnDomReadyJavascript("initwindowdirty();"); 
     super.renderHead(response); 
    } 

    /** 
    * {@inheritDoc} 
    */ 
    @Override 
    public void bind(final Component component){ 
     super.bind(component); 
     component.setOutputMarkupId(true); 
    } 

    /** 
    * {@inheritDoc} 
    */ 
    @Override 
    public void onRendered(final Component component){ 
     final Response response = RequestCycle.get().getResponse(); 
     response.write(JavascriptUtils.SCRIPT_OPEN_TAG); 
     response.write("monitor('" + component.getMarkupId() + "');"); 
     response.write(JavascriptUtils.SCRIPT_CLOSE_TAG); 
    } 

} 

Ahora aquí está una página que asigna automáticamente este comportamiento a todos de la misma infantiles que son componentes de texto:

public class Mypage extends WebPage{ 

    ... 

    private boolean behaviorAssigned = false; 

    /** 
    * {@inheritDoc} 
    */ 
    @Override 
    protected void onBeforeRender(){ 
     if(!behaviorAssigned){ 
      behaviorAssigned=true; 
      visitChildren(new IVisitor<Component>(){ 

       @Override 
       public Object component(Component component){ 
        if(component instanceof AbstractTextComponent<?>){ 
         component.add(new DontLeaveBehavior()); 
        } 
        return null; 
       } 
      }); 
     } 
     super.onBeforeRender(); 
    } 

} 

y por último pero no menos importante, su botón de envío tiene que llamar al undirty() por supuesto.

Nada de esto ha sido probado, porque tengo que irme a casa ahora a cenar con mi esposa & niños (que es incluso más divertido que la codificación wicket, por supuesto), pero debería comenzar.

La porción específica del prototipo debe ser fácilmente portada a cualquier otra lib de JavaScript, pero probablemente no deberías hacerlo sin una lib si no sabes lo que estás haciendo.

---

Editar:

He creado una nueva versión de este prototipo que funciona con y mootools y posted it on my weblog. Esta versión solo se instala en el componente del formulario y se adjunta automáticamente a los niños a través de javascript.

nuevo EDIT: allí, ya que el enlace funciona