A partir de la versión 6.5 del Framework ZK, los desarrolladores pueden aprovechar el poder de ZK para crear una aplicación web, que funcione correctamente en dispositivos móviles como una tableta (Tablet, en inglés).
Como ya sabemos, existen diferencias entre el hardware de una tableta y un PC, debemos pensar diferente en la fase de diseño, teniendo en cuenta cada detalle que necesita ser ajustado para que se vea como esperamos en todos los dispositivos, y por lo tanto consigamos proveer de una buena experiencia al usuario en ambos. A continuación mostraremos como puedes controlar y usar ZK 6.5 para hacer el mejor uso de él.
Diferentes estilos
En una tableta, los usuarios operan con sus dedos, mediante interacciones de tipo táctiles, por lo tanto el tamaño de los componentes en los que tiene que hacer clic (por ejemplo botones) no puede ser muy pequeño, 24px x 24px es el límite.
Por otra parte, si el tamaño del componente es pequeño, el espacio entre componentes debe ser grande, para evitar que el usuario pulse los botones cercanos por error.
ZK ha ajustado los componentes de acuerdo a este principio, por ejemplo Combobox,Timebox y Colorbox, los desarrolladores ahora pueden usarlos en un dispositivo móvil directamente. Para más detalles, te recomendamos que leas: UI Enhancements.
Diferentes eventos:
Eventos de Ratón
Como no hay ratón o cursor en las tabletas, los eventos relacionados con el ratón son diferentes que en el escritorio tradicional.
Primero de todo, onMouseOver no está soportado, tooltip y autodrop tampoco funcionan en una tablet. Segundo, onRightClick no está soportado directamente por el browser nativo como evento, pero ZK simula este evento del siguiente modo "pulsar y aguantar pulsado un momento", por lo tanto la propiedad context (que muestra el menú contextual) y onRightClick pueden ser usados en una tablet.
Por otra parte, si a Image o Div se les añade la propiedad onClick, los desarrolladores deben añadir el CSS cursor: pointer; en el atributo sclass o style, para que el navegador del tablet pueda gestionar la propiedad onClick correctamente.
ClientInfoEvent
Los usuarios pueden cambiar fácilmente la orientación de la tablet, por lo tanto los desarrolladores tienen que poder identificar cual es la orientación que los usuarios están usando y aplicar los cambios necesarios al tamaño y diseño. ZK 6.5 añade esta información sobre la orientación en el objeto ClientInfoEvent, simplemente añadimos atributo de evento onClientInfo para obtener el objeto ClientInfoEvent y accedemos a su método getOrientation(), isPortrait() o isLandscape().
Por ejemplo:
<tabbox id="tbx" height="400px" width="600px">
<attribute name="onClientInfo"><![CDATA[
ClientInfoEvent oe = (ClientInfoEvent) event;
lbl.setValue(oe.getOrientation());
if (oe.isPortrait()) {
tbx.setHeight("600px");
tbx.setWidth("400px");
} else {
tbx.setHeight("400px");
tbx.setWidth("600px");
}
]]></attribute>
<tabs>
<tab label="tab 1" />
</tabs>
<tabpanels>
<tabpanel>
Current Orientation:
<label id="lbl" />
</tabpanel>
</tabpanels>
</tabbox>
Otras consideraciones acerca del scrolling
En el artículo Scrolling on Tablet se realizó un análisis sobre el principio básico de scroll en tablets.
A continuación, discutiremos a cerca de algunos componentes muy comunes que puede que uses en tu implementación.
· Para crear un nuevo text area, puedes usar <textbox multiline="true" />cuando el contexto es grande, puedes hacer scroll en el componente Textbox. Este comportamiento lo maneja directamente el navegador, nada que ver con ZK, por lo tanto, su comportamiento será diferente de otros componentes en los que es ZK quien controla el scroll.
· Si el sistema contiene un Image, el desarrollador debe especificar el tamaño para o activar la precarga mediante el atributo a tal efecto, de cualquier otro modo, el scroll no funcionará como se espera. Veamos un ejemplo a continuación.
<zk>
<window contentStyle="overflow:auto" height="300px" border="normal">
<image src="http://www.zkoss.org/resource/img/index/src/top_bannerimage3.png" />
<div>bottom</div>
</window>
</zk>
En este caso, Window no producirá una barra de scroll, el usuario final de la aplicación no podrá ver la imágen entera, puesto que no podrá hacer scroll de la misma.
Esto se soluciona de 2 formas, 1. Activando el atributo de preload como en el siguiente ejemplo.
<zk>
<window contentStyle="overflow:auto" height="300px" border="normal">
<custom-attributes org.zkoss.zul.image.preload="true"/>
<image src="http://www.zkoss.org/resource/img/index/src/top_bannerimage3.png" />
<div>bottom</div>
</window>
</zk>
2. O indicando el tamaño de la imagen, como en el siguiente ejemplo:
<zk>
<window contentStyle="overflow:auto" height="300px" border="normal">
<image height="500px"
src="http://www.zkoss.org/resource/img/index/src/top_bannerimage3.png" />
<div>bottom</div>
</window>
</zk>
Nuestra recomendación es activar el atributo de precarga en el fichero de configuración zk.xml para evitar tener que hacerlo en todas las imágenes, una a una.
· No te recomendamos que asignes el número de filas en el componente Listbox, es decir que no establezcas ningún valor en el atributo rows, como en el siguiente ejemplo.
<zk>
<zscript> String[] s = new String[100]; </zscript>
<listbox id="lbx1" height="300px">
<zk forEach="${s}">
<listitem label="${forEachStatus.index + 1}" />
</zk>
</listbox>
<listbox id="lbx2" rows="8">
<zk forEach="${s}">
<listitem label="${forEachStatus.index + 1}" />
</zk>
</listbox>
</zk>
En el iPad, solo una pequeña parte de los 10 elementos del componente lbx1 es visible, el usuario final verá que es incompleto y hará scroll de forma natual. Este efecto no es el mismo en el componente lbx2, puesto que hemos establecido el número de filas "rows" a un valor. Esto sucede de igual modo en los componentes Grid y Tree.
Tan simple como sea posible
Como hemos mencionado antes, el tamaño de la pantalla en tablets o teléfonos móviles es mucho más pequeño y los componentes crecen respectivamente para facilitar al usuario final la interacción con ellos. Por lo tanto, no es prudente crear un diseño complejo para que los usuarios interactuen con él meticulosamente.
La potencia de procesar es mucho menor en un tablet que en un PC tradicional. El tiempo de renderizado en un ordenador de escritorio, puede ser lo suficientemente breve como para ignorarlo, pero puede ser un problema en una tablet. Por lo tanto el diseño de websites para tableta siguiendo el concepto "Tan simple como sea posible" es muy importante.
Otra forma de mejorar la velocidad de rendimiento es activar el atributo ROD de los componentes de tipo Listbox, Grid y Tree.
Conclusión
ZK 6.5 provee de la habilidad de crear aplicaciones web para el escritorio y la tableta desde el mismo código de base. Pero teniendo en cuenta a la hora de desarrollar algunas de las diferencias a las que hemos apuntando.
Envíenos sus comentarios.
