Índice

Formulario Móvil

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.

Recomendaciones para Procesos con el Formulario Móvil

1. 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.
    

2. 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.
     

3. Usabilidad: El formulario debe ser fácil de usar, conteniendo apenas los campos importantes para tareas o procesos.
    

4. Á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:

   
    

5. Posicionamiento de las acciones: Las acciones más importantes deben estar posicionadas donde el usuario consigue alcanzar fácilmente, conforme a la figura:

   

   
    

6. Personalizaciones: Las personalizaciones se deben realizar dentro de los eventos del proceso o de definiciones de formulario en la Web, todos los eventos que se aplican en los formularios Web también se aplican en los formularios Móvil. Para obtener más informaciones acceda la guía Personalización de Formularios.
   
   
7. Archivos adjuntos: Los archivos adjuntos del formulario Web no se cargan al formulario Móvil, por eso el CSS y las funciones Javascript's se deben implementar dentro del HTML Móvil.
   
   
8. Acceso a servicios internos y externos: Cualquier acceso a webservices u otros servicios interno o externo se debe realizar vía javascript. Recomendamos el uso de jQuery Soap para Webservices.
   
   
9. No todas las informaciones precisan estar en el Formulario Móvil: El gran limitador del Móvil es el tamaño de pantalla, por eso mapee los campos que son más importantes para que tengan prioridad en el formulario. Existen campos que son informativos y no tienen gran utilidad en el proceso o tareas, estos no precisan incluirse en el formulario Móvil.
   
   
10. Tipos: Definiciones de Formulario Móvil soporta los tipos:
    
    1. text
    2. textArea
    3. radio
    4. select
    5. ComboBox
    6. checkbox.

Beneficios

¿Por qué debo usar el Formulario Móvil?

• Permite iniciar/mover solicitudes de cualquier dispositivo móvil, independiente de su ubicación geográfica.
• Acceso rápido a las informaciones, mostrando apenas las informaciones más relevantes.
• Permite la continuidad del proceso, aun fuera del ambiente empresarial.
• A través de la funcionalidad "Proceso Off-line" consigo rellenar informaciones aun sin acceso a internet, para futura sincronización.
  
  
  

Creando un 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:

Personalizando de Formulario Móvil

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:

CSS

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:

body {
font-family: Verdana, Geneva, Tahoma, sans-serif;
background-color: #D1D3D4; /* Background color */
color: #58595B; /* Foreground color used for text */
font-family: Helvetica;
font-size: 14px;
margin: 0; /* Amount of negative space around the outside of the body */
padding: 0; /* Amount of negative space around the inside of the body */ 
min-width:300px;
}

h1 {
margin: 0;
padding: 0;
background-color: #D1D3D4;
color: #FFF;
display: block;
font-size: 18px;
font-weight: bold;
padding: 10px 0;
text-align: center;
text-decoration: none;
}

ul {
list-style: none;
margin: 10px;
padding: 0;
}
ul li {
background-color: #FFFFFF;
border: 1px solid #999999;
color: #58595B;
display: block;
font-size: 14px;
font-weight: bold;
margin-bottom: -1px;
padding: 12px 10px;
text-decoration: none;
}
ul li:first-child {
-webkit-border-top-left-radius: 8px;
-webkit-border-top-right-radius: 8px;
 
}
ul li:last-child {
-webkit-border-bottom-left-radius: 8px;
-webkit-border-bottom-right-radius: 8px;
 position:relative;
}

.mylabel {
width: 28%;
 overflow: hidden;
text-overflow: ellipsis;
-o-text-overflow: ellipsis;
white-space: nowrap;
display:inline-block;
 position:relative;
 float:left;
 line-height:32px;
}

input[type=text] {
width: 70%; 
 font-family: Verdana, Geneva, Tahoma, sans-serif;
font-size: 14px;
background-color: #E8E8E8;
 position:relative;
 float:right;
}

textarea {
width: 70%; 
 font-family: Verdana, Geneva, Tahoma, sans-serif;
font-size: 14px;
background-color: #E8E8E8;
 position:relative;
 float:right;
}

select {
width: 70%; 
 font-family: Verdana, Geneva, Tahoma, sans-serif;
font-size: 14px;
background-color: #E8E8E8;
 position:relative;
 float:right;
}

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>

jQuery Mobile

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>

JavaScript

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>

Servicios

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:

• El uso de servicios internos del Fluig, como por ejemplo Dataset, se deben realizar preferentemente en los eventos de personalización de Formulario y Procesos, de esta manera lo que se personalizará para la web, también se adoptará para móvil, evitando la replicación del código.
• Técnicas especiales para el formulario web, como por ejemplo a llamadas de dataset dentro del formulario, no se aplican en el Móvil. 

Traducción de Formularios

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:

• Portugués: nome_do_formulario_mobile_pt_BR.properties;
• Inglés: nome_do_formulario_mobile_en_US.properties;
• Español: nome_do_formulario_mobile_es.properties.

Principal secundario para dispositivos médicos

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 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:

getValue

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);

getValues

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();

getValuesBySequence

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);

getValuesByField

Devuelve todas las secuencias y valores de un determinado campo. Recibe como parámetros el nombre del espacio.

masterList.getValuesByField(field);

Ingrese adjuntos de la solicitud directamente desde el Formulario

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. 

¿Cómo identificar que estoy usando el Móvil en los eventos?

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:

  • AfterProcessing
  • AfterSaveNew
  • BeforeProcessing
  • DisplayFields
  • EnableFields
  • InputFields
  • ValidadeForm

  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."; 
  	}
  }

Ejemplo

Haga el download de los archivos ejemplo aquí. 

A continuación un ejemplo de formulario que se mapeó para uso en dispositivos móviles:

• Formulário Web

• Formulario Móvil

Ítems que están en una tabla se pueden transformar en un collapsible del jQueryMobile.

Al activar el botón '+', el ítem se expande: