Tema 2

Trabajando con

Navegadores

Willy Hurtado Vela

• Adquirir conciencia del problema de botón atrás y adelante en aplicación AJAX y saber solucionarlo

• Conocer el uso de la Clase History y la Interfaz ValueChangeHandler

• Tener la habilidad de escribir código para reconocimiento de navegadores

• Usar la técnica de Vinculación Diferida (Deferred Binding) para desacoplar código.

Objetivos

Contenido

1. El problema del botón Atrás

1.1. Configurando su Pagina HTML

1.2. La clase History

1.3. La Interfaz ValueChangeHandler

2. Detectando Navegadores

2.1. La manera clásica

2.2. Usando Deferred Binding

Trabajando con Navegadores

Codificación en JAVA

Necesidades especificas del navegador o aplicación web

Javascript

1. El problema del botón Atrás

Botones de atrás y adelante en Chrome

1. El problema del boton Back

1.1. Configurando su pagina HTML

<!-- OPTIONAL: include this if you want history support --> <iframe id="__gwt_historyFrame"

style="width:0;height:0;border:0"></iframe>

Unable to initialize the history subsystem; did you

include the history frame in your host page? Try

<iframe src=\"javascript:''\"

id='__gwt_historyFrame'

style='position:absolute; width:0; height:0;

border:0'></iframe>

1. El problema del boton Back

1.2. La clase History

Clase: com.google.gwt.user.client.History

History.addValueChangeHandler()

#page0

#page1

#page2

History.newItem(token)

1. El problema del boton Back

1.3. La Interfaz ValueChangeHandler

Interfaz:

com.google.gwt.event.logical.shared.ValueChangeHandler @Override

public void onValueChange(ValueChangeEvent<String> event) {

// Ir al estado token = event.getValue()

}

#page0 #page1 #page2

2. Detectando navegadores

2.1. La manera clásica

public static native String getUserAgent() /*-{ return navigator.userAgent.toLowerCase();

}-*/;

if (getUserAgent().contains("gecko")) ...

2. Detectando navegadores

2.2. Usando Deferred Binding

<!-- Vinculacion Diferida para recocer IE 6 y 8-->

<replace-with class="com.mycompany.project.client.HolaMundoNavegadorIE">

<when-type-is

class="com.mycompany.project.client.HolaMundoNavegadorEstandar"/>

<any>

<when-property-is name="user.agent" value="ie6"/>

<when-property-is name="user.agent" value="ie8"/>

</any>

</replace-with>