20 dic 2011

GWT: eventos touch


GWT me recuerda a Django, si bien la documentación es muy extensa tiene multitud de trucos y tips que 
leyendo solamente el Javadoc son imposibles de descubrir, el manejo de eventos touch es un ejemplo perfecto por lo que creí oportuno escribir esta micro-guia para manejar esas situaciones. Los dispositivos táctiles como tablets y smartphones son medios de acceso cada vez más habituales a nuestras aplicaciones web por tanto no podemos quedarnos solamente con los eventos relacionados al mouse, algo tan común como mostrar un mensaje al hacer mouseover sobre un elemento de la interfaz simplemente no funciona.
GWT tiene clases especificas relacionadas al touch así que vamos a ver como utilizarlas, básicamente manejaremos los eventos TouchStartEvent, TouchMoveEvent y TouchEndEvent a través de sus handlers TouchStartHandler, TouchMoveHandler y TouchEndHandler, los resultados puedes verlos en el video: 




El ejemplo es muy sencillo, como vemos en el código en el método onModuleLoad está el manejo de los eventos, añadí clear() solo para limpiar los estilos y poder cambiar el fondo del panel que implementa el touch. El gran truco para que funcione es añadir la línea event.preventDefault(), esta cancela la propagación del evento disparado y permite que la aplicación detecte los siguientes, si no lo especificamos la aplicación no puede distinguir cundo pasamos de uno a otro y se queda con el primero detectado, lamentablemente esto no lo vi por ningún lado en la documentación ya que te envía a la Safari Touch Event Documentation donde seguramente no encuentres muchos ejemplos de GWT :)


public class Touch_test implements EntryPoint {

 // utilizamos un FocusPanel para detectar los eventos y un Label para mostrar su nombre  
 private final FocusPanel fpanel = new FocusPanel();
 private final Label lbl = new Label("evento: ");


 // limpiamos los estilos para mostrar cada evento con un color diferente
 private void clear() {
  fpanel.removeStyleName("back_red");
  fpanel.removeStyleName("back_gray");
 }

 
 public void onModuleLoad() {
  
  // le damos alto, ancho y un borde  
  fpanel.setStyleName("fPanel");
  
  // detectamos el evento TouchStartEvent 
  fpanel.addTouchStartHandler(new TouchStartHandler() {
   @Override
   public void onTouchStart(TouchStartEvent event) {
    event.preventDefault(); // IMPORTANTE!!

    lbl.setText("evento: touch");
    clear();
    fpanel.addStyleName("back_red"); // coloreamos de rojo el panel
   }
  });
  
  // detectamos el evento TouchMoveEvent
  fpanel.addTouchMoveHandler(new TouchMoveHandler() {
   @Override
   public void onTouchMove(TouchMoveEvent event) {
    event.preventDefault(); // IMPORTANTE!!

    lbl.setText("evento: move");
    clear();
    fpanel.addStyleName("back_gray"); // coloreamos de gris el panel
   }
  });
  
  // detectamos el evento TouchEndEvent
  fpanel.addTouchEndHandler(new TouchEndHandler() {
   @Override
   public void onTouchEnd(TouchEndEvent event) {
    event.preventDefault(); // IMPORTANTE!!

    lbl.setText("evento: end");
    clear();  // dejamos si estilos el panel
   }
  });

  RootPanel.get().add(lbl);
  RootPanel.get().add(fpanel);
 
 }
}




Los estilos son solo para darle un toque visual:

.fPanel {
 height:200px; 
 width:200px;
 border: solid 1px #CCC;
}

.back_red{
 background-color:red; 
}

.back_gray{
 background-color: #CCC; 
}


Es bastante simple, lo que quiero destacar es asegurarse de agregarle la dichosa línea event.preventDefault() y funciona bastante bien, lo probé en un iPad y un smartphone con Android y en ambos responde de forma similar, otra cosita que sumar a nuestro arsenal de desarrollo.



14 dic 2011

Por qué iOS es más fluido que Android

No soy de compartir enlaces sin agregar algo más pero este vale la pena, nada de subjetividades, puro argumento técnico, sin más les recomiendo Por qué iOS es más fluido que Android