En el Fluig, es posible mover solicitudes workflow, a partir de aplicaciones móviles. Debido a eso, al guardar un formulario en el Fluig, automáticamente se genera el formulario móvil, de acuerdo con el mapeo de los campos del formulario del proceso.
A pesar de que el Fluig dispone de la generación automática, existen diversas particularidades para el desarrollo y personalización del formulario Móvil, estas se tratarán en el transcurso de esta guía.
Formulario Responsivo: Hoy en el mercado existen variados tamaños de pantallas y resoluciones, por eso cualquier formulario desarrollado para Móvil debe ser responsivo, es decir, se debe ajustar a cualquier tamaño de pantalla.
Estética: La apariencia visual y design del html deben ser atractivos para los usuarios, conseguimos eso a través de CSS o jQueryMobile que se explicará en las próximas sesiones.
Usabilidad: El formulario debe ser fácil de usar, conteniendo apenas los campos importantes para tareas o procesos.
Área de clic: Los elementos del HTML deben estar bien posicionados de tal manera que facilite el área de clic, pues hoy existen dispositivos en que las pantallas son muy pequeñas. Sigue un ejemplo:
Posicionamiento de las acciones: Las acciones más importantes deben estar posicionadas donde el usuario consigue alcanzar fácilmente, conforme a la figura:
¿Por qué debo usar el Formulario Móvil?
En el Fluig es posible crear definiciones de formularios de diferentes maneras, utilizando el Fluig Studio, a través del modelado de procesos workflow o a través de upload de formulario en la navegación de documentos.
Siga a continuación, moviéndose por las pestañas a seguir, las formas de creación de formularios:
|
Con la inclusión de formularios que soporten la visualización en dispositivos móviles, es posible mover solicitudes Workflow y realizar el relleno de las informaciones de formularios con mayor movilidad y agilidad.
Como hemos visto, el Formulario Móvil no carga archivos adjuntos, luego, cada personalización se debe realizar dentro del HTML, este posee una serie de particularidades que se tratarán a continuación:
Al personalizar un Formulario Móvil, el CSS utilizado para parte Web probablemente no se aplica al archivo del dispositivo móvil, por eso se recomienda que el Formulario Móvil use un CSS propio que mantenga el formulario responsivo.
El CSS se debe agregar dentro de la head en el archivo .html Mobile y se debe utilizar la tag:
<style type="text/css"> Insira aqui o CSS </style>. |
Siga a continuación, moviéndose por las pestañas a seguir, algunos ejemplos de componentes CSS que se pueden aplicar en el formulario Móvil:
|
Usted debe tratar en el CSS todos los componentes que se utilizarán en su HTML Móvil para que todos tengan el mismo estándar, su HTML Móvil con CSS debe tener esa estructura:
<html > <head> <title>Formulário de Compras </title> <style type="text/css"> <!--Aquí usted debe incluir la estructura del CSS de cada componente--> </style> </head> <body> </ body > </html> |
Esta es la estructura básica, dentro de cada tag debe haber elementos y lógicas correspondientes a ellas. |
El jQuery Móvil es un framework de interfaz para dispositivos móviles que tiene el objetivo de dar un layout responsivo para las definiciones de formularios. Él facilita mucho en el desarrollo, pues usted no precisa crear un CSS proprio para cada elemento y se puede utilizar en el Fluig Móvil. Es posible seguir ejemplos en el link: http://demos.jquerymobile.com/1.4.2/.
Este se puede incorporar en el HMTL Móvil de forma simple:
<html > <head> <script type="text/javascript" src="http://code.jquery.com/jquery-1.5.2.min.js"></script> </head> <body> </ body > </html> |
Así como el CSS, el javascript también debe estar dentro del HTML Móvil, luego toda lógica que en la web, normalmente, queda en archivos .js, se debe transferir al Formulario Móvil.
Para mantener una organización dentro del HTML, recomendamos dejar las lógicas al final en el archivo:
<html> <head> </head> <body> </body> </html> <script language="javascript"> /* Aquí usted debe incluir la lógica javascript */ </script> |
Para probar el Formulario Móvil, abra el archivo html Móvil en un navegador en el desktop. Si no hay inconsistencias, el formulario probablemente abrirá correctamente también en el Fluig Móvil. |
Para utilizar servicios internos o externos al Fluig es necesario instanciar, ejecutar y tratar el retorno del servicio vía javascript. Para webservices, recomendamos el uso de jQuery Soap.
A continuación algunas sugerencias:
La traducción de Formulario Móvil se debe realizar siguiendo la guía de Traducción de Formularios . Pero el diferencial, es que será necesario incluir tres nuevos archivos con las literales siguiendo la nomenclatura a continuación:
Los campos que emplean la técnica de principal y secundario no se ingresarán en el formulario generado automáticamente para dispositivos móviles por el Fluig. Pero el producto le permite desarrollar un formulario personalizado para dispositivos móviles consultando estos campos.
La edición de campos principal y secundario a través de dispositivos móviles no es posible, aun en formularios personalizados. Estos campos son disponibles apenas para consulta. |
La consulta a los espacios padre e hijo en dispositivos móviles se realiza a través de funciones javaScript, disponibles dentro del objeto masterList al momento de exhibir el formulario. Son ellas:
Devuelve una string con el valor de un campo principal y secundario, recibiendo como parámetros el número de secuencia del secundario y el nombre del campo.
masterList.getValue(sequence,field); |
Devuelve un objeto con todos los valores de los campos principal y secundario, agrupados por el número de secuencia. Este método no posee parámetros.
masterList.getValues(); |
Devuelve un objeto con todos los valores de los espacios de una determinada secuencia. Recibe como parámetro el número de la secuencia.
masterList.getValuesBySequence(sequence); |
Devuelve todas las secuencias y valores de un determinado campo. Recibe como parámetros el nombre del espacio.
masterList.getValuesByField(field); |
Existe una forma bien simple para guardar adjuntos upload a través de un botón en el formulario. Para eso es necesario ingresar en el evento onclink del button el método showCamera:
<input type="button" value="Insira Foto" onclick="showCamera(nome_do_anexo);"/>
<script language="javascript">
function showCamera(parameter) {
JSInterface.showCamera(parameter);
}
</script> |
El parámetro nome_do_anexo es una String y corresponde al nombre del anexo que se guardará en la lista de adjuntos de aquella solicitud.
Con ese recurso es posible aplicar una personalización o/y restricción solamente en el Formulario Móvil, independiente de la Web. Así puedo definir que un proceso o actividad va a recibir un valor diferenciado o que determinada actividad no se puede ejecutar por el Móvil vía personalización.
Existen dos formas de hacer esa personalización:
Eventos del Formulario
Todos los eventos que reciben en el método el form pueden hacer una personalización exclusiva para el Formulario Móvil, son los eventos:
Para utilizar el evento es necesario hacer la siguiente llamada form.getMobile(), donde retornará un booleano indicando si es un formulario móvil o no. Ejemplo:
function displayFields(form, customHTML) {
if ( form.getMobile() != null && form.getMobile()) {
form.setValue('mtr_usuario', new java.lang.Integer(123456));
}
} |
Eventos del Proceso
En los eventos de proceso, la propiedad WKMobile identifica si la acción fue realizada por el dispositivo móvil, ella puede ser utilizada en los eventos del proceso conforme al ejemplo:
function beforeStateEntry(sequenceId){
var isMobile = getValue("WKMobile");
if (isMobile!=null && isMobile==true){
throw "Ese proceso no puede ser ejecutado por el móvil.";
}
} |
Haga el download de los archivos ejemplo aquí.
A continuación un ejemplo de formulario que se mapeó para uso en dispositivos móviles:
Como podemos ver, el Formulario Web tiene muchos campos y su mapeo para dispositivos móviles se debe realizar con mucho cuidado. Los campos Datos de la propuesta se mapearon para Móvil, observen que tiene campos que no existen en el Móvil, pues no se hace necesario en este contexto: |
Ítems que están en una tabla se pueden transformar en un collapsible del jQueryMobile.
Al activar el botón '+', el ítem se expande:
