ZK 6.5 Consejos para dispositivos móviles

Framework ZK

ZK 6.5 Consejos para dispositivos móviles

20 de septiembre de 2012, artículo original de Monty Pan, Engineer, Potix Corporation, versión de ZK 6.5

Contenido

1. Introducción
2. Diferentes estilos
1. No se soportan algunos Mold (aspectos gráficos y de comportamiento)
3. Diferentes eventos
1. Eventos del ratón
2. ClientInfoEvent
4. Otras consideraciones acerca del scrolling
5. Tan simple como sea posible
6. Conclusión
7. Referencias

Introducción

Este tutorial pertenece a la siguiente serie:

1. ZK Responsive Design, enfoque/filosofía
2. ZK 6.5 Responsive design
3. ZK 6.5 Empezando con el Responsive Design
4. ZK 6.5 Consejos para dispositivos móviles

Desde la versión 6.5 de ZK, los desarrolladores pueden aprovechar el poder de ZK para crear una aplicación web sin problemas en dispositivos móviles como una tablet.

Tal y como tiene que ser, puesto que exiten 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.

El siguiente artículo está basado en ZK 6.5, explorando y discutiendo cómo 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 interacciónes de tipo táctiles, por lo tanto el tamaño de los componentes en los que tiene que clicar (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.

No se soportan algunos Mold (aspectos gráficos y de comportamiento)

En aplicaciones web destinadas a navegadores clásicos de escritorio, en algunos componentes se disponía de diferentes aspectos gráficos y de comportamientos, para cambiar su aspecto y comportamiento en función de este atributo, pero por diferentes causas operacionales y de no ser aplicable a los dispositivos móviles, ZK ya no soporta el atributo Mold en dispositivos móviles. Para una lista detallada al respecto te recomendamos que leas Unsupported Molds.

A continuación te pongo algunos casos respecto del atributo Mold no soportado:

• Componentes relacionados con la entrada de datos: No se soporta el Mold rounded.
• Button: no soporta los mold os y trendy.
• Groupbox: no soporta los mold default se usará 3d como el de por defecto.
• Splitter: no se soporta el mold os.
• Tabbox: no se soporta el mold accordion-lite.

Diferentes eventos

Eventos de Ratón

Como no hay ratón o cursor en las tabletas, los eventos realcionados 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 hablamos 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. Siguiendo este artículo, el desarrollador puede evitar estas consideraciones y crear aplicaciones web de forma muy productiva.

A disfrutar de ZK 6.5!

Referencias

• Página web oficial de ZK

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