Framework ZK

ZKPushState: Manejar el API de Historial de navegación en HTML5 directamente desde Java

18 de diciembre de 2012, artículo original de Monty Pan

Introducción

La especificación HTML5 introduce un API para manejar el histórico de navegación del browser.

El objeto history puede usar pushState() para inyectar la información en el histórico de navegación de la sesión y cambiar la url del browser por la que le hemos proporcionado, si es que le proporcionamos una.
Cuando el historial cambia, el navegador dispara el evento "onpopstate" a en la ventana, "window.onpopstate".

El artículo Administración del histórico con el API HTML desde ZK, explica cómo los desarrolladores de ZK pueden usar ese API con código JavaScript.

Voy a enseñaros cómo cómo puedes hacerlo directamente desde código Java. Lo conseguimos introduciendo un AddOn "ZKPushState", que es un envoltorio que permite a los desarrolladores manejar esta característica, directamente desde Java, lo que hace que manejar el histórico, más y más del estilo que ZK hace las cosas y simplifica la dificultad de tener que codificar y descodificar la información.

¿Cómo lo hacemos?

La única cosa que debes hacer antes de empezar a profundizar en el código es descargar el fichero ZKPS.jar y ubicarlo en el classpath, de forma que puedas llamar al método PushState.push(Map, String, String) desde Java y añadir el atributo onPopupState en el elemento root de tu ZUL.

Para verlo más claro, sigue el siguiente ejemplo.

Ejemplo

Siguiendo el siguiente ejemplo: Administración del histórico con el API HTML desde ZK, que contiene tres TextBoxs y botones de filtro. Puedes escribir texto en las casillas de texto para buscar, haciendo click en el botón de filtro, el componente listbox te mostrará filtrada la información basándose en el texto que introdujiste en el textbox.

Reescribiremos el ejemplo usando ZKPushState y MVVM, el código ZUL de los botones quedará como sigue:

<button label="Filter" width="50px"
onClick='@command("filter", f1=filter1.value, f2=filter2.value, f3=filter3.value)' />

En el ViewModel, el método de comando queda como sigue:

@Command
@NotifyChange("*")
public void filter(@BindingParam("f1") String f1, @BindingParam("f2") String f2, @BindingParam("f3") String f3){
  doFilter(f1, f2, f3);
  Map<String, String> map = new HashMap<String, String>();
  map.put("f1", f1);
  map.put("f2", f2);
  map.put("f3", f3);
  PushState.push(map, "Search results", "?q="+f1+f2+f3);
}

La función de doFilter es para reconstruir el modelo del componente listbox. Al final del método filter(), llamamos a PushState.push(), el cual ejecutará el history.pushState() en la parte del cliente automáticamente. En este punto del tiempo, la URL cambiará y el usuario puede ir a su estado previo haciendo click en el botón de "volver" en la barra de herramientas del navegador, volviendo a la página anterior.

Esto es lo que sucede: después de algunas búsquedas, el navegador mantendrá algunos estados para enlazar con la URL que le proporcionamos. Cuando el usuario clicquea el botón de "volver" del navegador, ZKPushState lanza el PopupStateEvent, por lo tanto, necesitamos añadir el atributo onPopupState en el elemento root de nuestro ZUL del siguiente modo:

<window onPopupState='@command("popupState", event=event)'>

En el ViewModel, el comando se queda como sigue:

@Command
@NotifyChange("*")
public void popupState(@BindingParam("event") PopupStateEvent event){
  Map<String, ?> state = event.getState();
  doFilter(
    state.get("f1").toString(),
    state.get("f2").toString(),
    state.get("f3").toString()
  );
}

Podemos recibir el estado con event.getState() el cual retorna una instancia del objeto Map>String, ?<. Para hacer esto, llamamos al método doFilter con los argumentos que retorna PopupStateEvent, el listbox mostrará la misma información que antes (antes de que el usuario saliera de la página previamente).

Puedes descargar el código fuente completo del ejemplo y ZKPushState del repositorio de github aquí.

Cualquier feedback o comentario será bienvenido! :)

Recursos interesantes

Este documento es un extracto de la documentación oficial del Framework ZK, traducido y ampliado por Francisco Ferri. Colaborador de Potix (creadores del Framework ZK). Si quieres contactar con él puedes hacerlo en franferri@gmail.com, en twitter @franciscoferri o en LinkedIn