29 abril 2015

Ventanas adaptables (Sync Screens Tool)

¿Cómo funciona la nueva herramienta "Sync Screens"?


La idea es que, tras crear un "remote form", podamos formatear todos sus campos y controles para que aparezcan con el tamaño y posición correctos, según cada una de las posibles orientaciones y tamaños de pantalla, ya sean de tipo escritorio, tabletas o móviles. (según las diferentes configuraciones soportadas para la propiedad $screensize).

Sin duda se trata de una tarea que nos consume mucho tiempo a los desarrolladores, debido al gran número de diferentes dispositivos y diseños soportados por los "remote form".


Afortunadamente ésta herramienta nos permitirá realizar ésta labor de forma automática, lo que sin duda nos ahorrará mucho tiempo, además de hacer que nuestras aplicaciones sean más consistentes y fáciles de usar para los usuarios finales, puesto que se adaptarán al dispositivo en uso.


Podrá localizar la nueva herramienta "Sync screens" situada bajo el menú "Tools≥≥Add Ons".


Para utilizarla deberá seleccionar una biblioteca desde el desplegable "Library" y seleccionar el "remote form" JavaScript que desee sincronizar. Mediante el desplegable 'Source Screensize' podrá indicar cual es el punto de partida sobre el cual se construirán el resto de los tamaños seleccionados. (por defecto aparecerá seleccionado "desktop") Después, deberá elegir qué tamaños deberán sincronizarse mediante las casillas de verificación. Los elementos situados bajo "Options" le permitirán escalar o no los objetos, según su posición horizontal y/o vertical y/o según su anchura y altura. Si no desea que un objeto en particular sea alterado por la herramienta, puede optar por bloquearlo. Para ello y desde el modo-diseño, pulse botón derecho sobre el objeto y escoja la opción "Lock", la opción "Ignore Locked Components" (por defecto activada) le permitirá decidir si tal comportamiento deberá ser tenido en cuenta o no. Una vez realizados los ajustes pertinentes, haga clic sobre el botón "Sync".

Ahora podrá cambiar la propiedad $screensize de su "remote form", para comprobar el funcionamiento de los diferentes diseños seleccionados. Recomendamos que también realice pruebas en un navegador y en diferentes dispositivos para comprobar que los diferentes objetos del "remote form" se dimensionen y posicionen correctamente.

No hay comentarios: