Pull down to refresh con Dojo Mobile

Implemente un patrón popular de interfaz de usuario usado en aplicaciones nativas de teléfonos inteligentes

Aprenda cómo usar Dojo Mobile 1.8 para implementar la popular función pull-down-to-refresh en sus aplicaciones móviles web. Este artículo le muestra cómo desarrollar dos aplicaciones de ejemplo: una aplicación pull-down-to-refresh y una variante pull-down-to-go-back. Se proporciona un código fuente completamente descargable. Después de trabajar con los ejemplos, usted podrá implementar muchas más variaciones en este patrón de UI.

Yoshiroh Kamiyama, Software Engineer, IBM

Yoshiroh KamiyamaYoshiroh Kamiyama es ingeniero asesor en software en Yamato Software Lab (YSL), IBM de Japón. Trabaja en WebSphere Feature Pack para Web 2.0 y móvil y trabajó anteriormente en varios proyectos de desarrollo incluyendo Mobile Mashup, Lotus iNotes y Rational Portfolio Manager, muchos de los cuales usaron el kit de herramientas Dojo. Él es colaborador original de dojox.mobile y miembro del comité de kit de herramientas Dojo.



25-02-2013

Activar para actualizar es un patrón de UI ampliamente usado en aplicaciones nativas de teléfonos inteligentes para iPhone, Android y BlackBerry. Realiza exactamente lo que indica el nombre: Si navega hasta la parte superior de una lista, actívela y suéltela, la lista refresca sus contenidos. Esta función popular, que se muestra en funcionamiento en Figura 1, le brinda a los usuarios una forma rápida para actualizar la vista:

Figura 1. Pull down to refresh
Three screenshots demonstrating the pull down to refresh feature in an iOS application

Este artículo le muestra cómo implementar la función pull-down-to-refresh en sus aplicaciones con Dojo Mobile 1.8. Comience al crear un pequeño widget que habilita a los usuarios a activar la vista para revelar un recuadro de mensaje en la parte superior. Luego use ese widget para desarrollar dos aplicaciones de ejemplo: una aplicación pull-down-to-refresh y una variante pull-down-to-go-back. (Obtenga el código fuente completo en la sección de Descargas que se encuentra en la parte final de este artículo).

Crear el widget PullView

Como puede ver en Figura 1 y en las aplicaciones nativas de los teléfonos inteligentes que usted usa, un recuadro de mensaje (un área que muestra mensajes como Activar para actualizar... ) y un componente de lista se mueven juntos cuando activa la lista, mientras que una cabecera en la parte superior con una posición fija. Listado 1 muestra una forma para obtener este comportamiento con Dojo Mobile:

Listado 1. Cómo ubicar un recuadro de mensaje en una ScrollableView
<h1 data-dojo-type="dojox.mobile.Heading"
    data-dojo-props='fixed:"top"'>Technical Topics</h1>
<div id="view1" data-dojo-type="dojox.mobile.ScrollableView">
  <div id="pull">
    <img id="icon" src="images/refresh-arrow.png">
    <div id="msg1">Pull down to refresh...</div>
    <div id="msg2">Check for new items</div>
  </div>
  <ul data-dojo-type="dojox.mobile.EdgeToEdgeDataList">
    ....
  </ul>
</div>

Listado 1 usa un widget Heading para colocar la cabecera en la parte superior. El recuadro de mensaje y la lista se encuentran en un widget ScrollableView. De esta manera, el recuadro de mensaje y la lista se desplazan juntos, mientras que la cabecera permanece fija. El recuadro de mensaje, sin embargo, se encuentra visible desde el inicio, como se muestra en Figura 2:

Figura 2. Recuadro de mensaje en una ScrollableView
Screenshot of a message box in a ScrollableView

Usted no desea que el recuadro de mensaje aparezca hasta que el usuario active la lista, por lo tanto necesita una forma para ocultarlo inicialmente.

Ocultar el recuadro de mensaje

Usted puede ocultar el recuadro de mensaje al aplicar el CSS que cambia su posición, según se muestra en Listado 2:

Listado 2. Cómo ocultar el recuadro de mensaje al comienzo de la lista
#pull {
  position: absolute;
  height: 65px;
  top: -65px;
}

Listado 2 oculta el recuadro de mensaje al brindarle una posición absoluta que se encuentra arriba de la lista. Cuando el usuario activa la lista, el recuadro de mensaje aparece a la vista.

Mantener visible el recuadro de mensaje

Ahora que se muestra el recuadro de mensaje solo cuando se activa la lista. Por ahora, todo bien. El problema, sin embargo, es que la ScrollableView recupera su posición inicial tan pronto como el usuario suelta la lista. En cambio, usted desea mantener visible el recuadro de mensaje mientras se actualiza la lista. Para lograr este efecto, necesita subclasificar la ScrollableView e implementar la lógica necesaria. El método adjustDestination() es un buen lugar para realizarlo. Puede obtener la altura del recuadro de mensaje y deslizarse hasta la posición donde se muestra el recuadro de mensaje completo en la parte superior. Si adjustDestination() regresa a false, el comportamiento predeterminado de desplazamiento se cancela. Listado 3 muestra el código de ejemplo para la subclase:

Listado 3. Sigue mostrando el recuadro de mensaje (PullView.js)
define([
  "dojo/_base/declare",
  "dojo/dom",
  "./ScrollableView"
], function(declare, dom, ScrollableView){
  return declare("dojox.mobile.PullView", ScrollableView, {
    adjustDestination: function(to, pos, dim){
      var h = dom.byId("pull").offsetHeight;
      if(this.getPos().y >= h){ // if completely revealed
        this.slideTo({y:h}, 0.3, "ease-out");
        return false;
      }
      return true;
    }
  });
});

Publicación de eventos

Finalmente, necesita publicar eventos para que la aplicación del usuario pueda escuchar o conectarse, como se muestra en Listado 4:

Listado 4. Publicación de eventos (PullView.js)
  return declare("dojox.mobile.PullView", ScrollableView, {
    adjustDestination: function(to, pos, dim){
      var h = dom.byId("pull").offsetHeight;
      if(this.getPos().y >= h){
        this.slideTo({y:h}, 0.3, "ease-out");
        connect.publish("/dojox/mobile/onPulled", [this]);
        this.onPulled(this);
        return false;
      }
      return true;
    },


    scrollTo: function(/*Object*/to, /*Boolean?*/doNotMoveScrollBar, /*DomNode?*/node){
      this.inherited(arguments); // scrollable#scrollTo() will be called
      var h = dom.byId("pull").offsetHeight;
      connect.publish("/dojox/mobile/onPull", [this, to.y, h]);
      this.onPull(this, to.y, h);
    },

    onPull: function(/*Widget*/view, /*Number*/y, /*Number*/h){
    },

    onPulled: function(/*Widget*/view){
    }
  });

En Listado 4, onPull() se llama mientras el recuadro de mensaje se extrae. onPulled() se llama cuando el recuadro de mensaje se activa completamente y luego se suelta.


Desarrollar una aplicación pull-down-to-refresh

Ahora que tiene el widget PullView, está listo para desarrollar una aplicación de muestra pull-down-to-refresh. El primer paso es reescribir Listado 1 como Listado 5:

Listado 5. La aplicación de muestra pull-down-to-refresh
<h1 data-dojo-type="dojox.mobile.Heading"
    data-dojo-props='fixed:"top"'>Technical Topics</h1>
<div id="view1" data-dojo-type="dojox.mobile.PullView"
    data-dojo-props='onPull:onPull, onPulled:onPulled'>
  <div id="pull">
    <div id="prog" class="progDiv"></div>
    <img id="icon" src="images/refresh-arrow.png">
    <div id="msg1"></div>
    <div id="msg2">Check for new items</div>
  </div>
  <ul data-dojo-type="dojox.mobile.EdgeToEdgeDataList">
    ....
  </ul>
</div>

A continuación, usted necesita realizar un par de cosas más en el lado de la aplicación.

Rotar un ícono de flecha

Podría querer rotar el ícono de flecha mientras se activa la lista, como se muestra en Figura 3:

Figura 3. Rotar el ícono mientras se activa
Screenshot showing a rotating arrow icon in the message box, next to the message

Como muestra Listado 6, puede rotar la flecha en el manejador onPull() . También puede actualizar el mensaje en onPull() para avisarle al usuario que suelte la lista.

Listado 6. Rotar un ícono de flecha
onPull = function(view, y, h){
  dom.byId("msg1").innerHTML = percent < 100 ?
    "Pull down to refresh..." : "Release to refresh...";
  y = y > h ? h : y;
  var percent = y / h * 100;
  var deg = -1.8 * percent + 360;
  dom.byId("icon").style.webkitTransform = "rotate(" + deg + "deg)";
}

Realizar una acción

El manejador onPulled() se llama cuando el recuadro de mensaje se activa completamente y luego se suelta. Usted puede colocar una acción actualizar en este manejador. La acción puede variar, según la aplicación determinada. En Listado 7, el widget de la lista actualiza su contenido al llamar a setStore():

Listado 7. Rotar un ícono de flecha
onPulled = function(view){
  if(prog1.timer){ return; }

  // hide the arrow icon
  dom.byId("icon").style.visibility = "hidden";

  // update the message
  dom.byId("msg1").innerHTML = "Loading...";

  // add a ProgressIndicator and start it
  dom.byId("prog").appendChild(prog1.domNode);
  prog1.start();

  // reload the datastore
  store.close();
  registry.byId("list").setStore(store);
}

Listado 7 también oculta el ícono de flecha, actualiza el mensaje para Loading... y agrega un ProgressIndicator. Figura 4 muestra el contenido que se actualiza:

Figura 4. Actualización del contenido
Screenshot of list content being refreshed

Cerrar el recuadro de mensaje

Cuando se completa la acción actualizar, usted cierra el recuadro de mensaje como se muestra en Listado 8:

Listado 8. Cerrar el recuadro de mensaje
connect.connect(registry.byId("list"), "onComplete", function(){
    registry.byId("view1").slideTo({y:0}, 0.3, "ease-out");
    prog1.stop();
    dom.byId("icon").style.visibility = "visible";
});

Figura 5 muestra la lista con el recuadro de mensaje cerrado y el contenido actualizado:

Figura 5. Recuadro de mensaje cerrado
Screenshot of the list view with the message box closed and the list content updated

Desarrollar una aplicación pull-down-to-go-back

Ahora cree una variación de la aplicación de muestra — esta vez, una aplicación pull-down-to-go-back. Si el usuario activa el contenido, aparece un botón verde dentro de una ranura horizontal y lo mueve de derecha a izquierda, como puede ver en Figura 6:

Figura 6. Aplicación pull-down-to-go-back
Two-part screenshot of the pull-down-to-go-back application. The left side shows the user pulling down on the content. The right side shows that a green knob in a horizontal slot appears as the content is being pulled down.

Si el usuario suelta el contenido después de que el botón verde llega al límite izquierdo de la ranura, como se muestra en Figura 7, la aplicación regresa a la vista anterior:

Figura 7. Listo para regresar
Screenshot of the pull-down-to-go-back application showing that when the green knob reaches the left edge of the slot, the user can go back by releasing the content.

Deslizar un botón verde

De la misma manera que implementó la rotación del ícono de flecha en la primera aplicación de muestra con el manejador onPull() , usted puede deslizar el nodo del botón en onPull(), como se muestra en Listado 9:

Listado 9. Deslizar un botón verde
onPull = function(view, y, h){
  dom.byId("msg1").innerHTML = y < h ? "Pull down to go back" : "Go back";
  y = y > h ? h : y;
  var percent = Math.round(y / h * 100);
  dom.byId("knob").style.left = (100 - percent) + "px";
}

Realizar una acción

Esta vez, la acción que realiza en el manejador onPulled() egresará a la vista anterior con el método performTransition() de la vista actual, como se muestra en Listado 10:

Listado 10. Regresar a la vista anterior
onPulled = function(view){
  registry.byId("view2").performTransition("view1", -1, "slide");
}

Conclusión

En este artículo, usted aprendió cómo implementar dos variantes del patrón de UI pull-down-to-refresh con Dojo Mobile 1.8. Ahora también debería poder implementar otras aplicaciones pull-down-to-X, donde X es la acción que elige.

Tenga en cuenta que la implementación actual del widget PullView en el código de muestra es un tanto más compleja que lo que he descrito en este artículo. Hasta puede colocar el recuadro de mensaje en la parte inferior de la vista si especifica la opción pullDir="up" . Esa opción lo habilita a crear una aplicación pull-up-to-load-more, por ejemplo.


Descargar

DescripciónNombretamaño
PullView widget and sample appspullview.zip16KB

Recursos

Aprender

Obtener los productos y tecnologías

  • Dojo 1.8.x: Descargue la versión de kit de herramientas Dojo.

Comentarios

developerWorks: Ingrese

Los campos obligatorios están marcados con un asterisco (*).


¿Necesita un IBM ID?
¿Olvidó su IBM ID?


¿Olvidó su Password?
Cambie su Password

Al hacer clic en Enviar, usted está de acuerdo con los términos y condiciones de developerWorks.

 


La primera vez que inicie sesión en developerWorks, se creará un perfil para usted. La información en su propio perfil (nombre, país/región y nombre de la empresa) se muestra al público y acompañará a cualquier contenido que publique, a menos que opte por la opción de ocultar el nombre de su empresa. Puede actualizar su cuenta de IBM en cualquier momento.

Toda la información enviada es segura.

Elija su nombre para mostrar



La primera vez que inicia sesión en developerWorks se crea un perfil para usted, teniendo que elegir un nombre para mostrar en el mismo. Este nombre acompañará el contenido que usted publique en developerWorks.

Por favor elija un nombre de 3 - 31 caracteres. Su nombre de usuario debe ser único en la comunidad developerWorks y debe ser distinto a su dirección de email por motivos de privacidad.

Los campos obligatorios están marcados con un asterisco (*).

(Por favor elija un nombre de 3 - 31 caracteres.)

Al hacer clic en Enviar, usted está de acuerdo con los términos y condiciones de developerWorks.

 


Toda la información enviada es segura.


static.content.url=http://www.ibm.com/developerworks/js/artrating/
SITE_ID=90
Zone=Desarrollo móvil
ArticleID=859256
ArticleTitle=Pull down to refresh con Dojo Mobile
publish-date=02252013