Árvore de páginas

Você está vendo a versão antiga da página. Ver a versão atual.

Comparar com o atual Ver Histórico da Página

« Anterior Versão 4 Próxima »

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

 


    Fluig Studio

    Para incluir un nuevo formulario con soporte a dispositivos móviles, realice el procedimiento estándar para exportación de formulario y seleccione los campos que compondrán el formulario móvil en la pantalla antes de la conclusión de la exportación.

    Después de la exportación se incluirá otro archivo HTML marcado como "móvil" en la carpeta forms del proyecto Fluig

     

    Vea en la imagen a seguir la pantalla de selección móvil en la exportación de un formulario:

    Figura 15 - Formulario móvil.

     

    Después de la exportación, el formulario debe quedar conforme a la imagen a seguir:

     

    Nota

    El Fluig identifica el formulario Móvil por el nombre, este debe tener el mismo nombre del formulario Web sumado de la palabra "_ecmMobile".

    Ejemplo: Creado el formulario web "compras.html", el formulario Móvil, obligatoriamente, se debe nombrar como: "compras_ecmmobile.html"


    Configuración de Formulario Móvil en Procesos

    Es posible permitir la creación del Formulario Móvil también a través del Generador de Formulario, conforme al paso a seguir:

     

    Paso 1: Crear o editar un proceso existente y activar el ítem Formulario.

     

    Paso 2: Seleccionar la carpeta destino donde ese formulario se publicará, también atribuya un título y descripción. Después, haga clic en Crear Formulario.

     

    Paso 3:  Incluya los campos y en cada uno de ellos, seleccione si este será también agregado al formulario para dispositivos móviles, haciendo clic en la opciónFormulario Móvil?.

     

    Información

    No todos los campos mapeados en el formulario del proceso, se pueden mapear para el formulario para dispositivos móviles. Los campos que se pueden mapear exhiben la opción "Formulario Mobile?".




    Upload vía Navegación de Documentos

    En la upload vía navegación de documentos se realiza como una publicación estándar de formulario, donde el formulario web debe tener un nombre definido y el Formulario Móvil debe ser sumado con el término _ecmmobile

     

    Nota

    El Fluig identifica el formulario Móvil por el nombre, el formulario Móvil debe tener el mismo nombre del formulario Web sumado de la palabra "_ecmMobile".

    Ejemplo: Creado el formulario web "compras.html", el formulario Móvil, obligatoriamente, se debe nombrar como: "compras_ecmmobile.html"

    Atenção

    Las Definiciones de Formularios generadas por los métodos de creacion anteriormente listados, precisan ser editados en el caso que necesite de alguna personalización especial, estos se generan automáticamente conteniendo los ítems básicos para su funcionamiento.

     

    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

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


      Headings

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


      List

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


      Label

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

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


      TextArea

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


      Select

      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>

      Atención

      Esta es la estructura básica, dentro de cada tag debe haber elementos y lógicas correspondientes a ellas.

       

      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>

      Atención.

      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.

       

      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.
      Ejemplo: Si el Formulario se llama compras_ecmmobile, entonces los nombres de los archivos .properties serán:
      • compras_ecmmobile_pt_BR.properties;
      • compras_ecmmobile_en_US.properties;
      • compras_ecmmobile_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 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:

       

      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

       

      Nota

      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:


      • Sem rótulos