Índice

Formulário Mobile

Formulario Móvil

En el Fluig, es posible mover solicitudes No Fluig, é possível movimentar solicitações workflow, a partir de aplicativos móveisaplicaciones móviles. Devido Debido a isso, ao salvar um formulários no Fluig, automaticamente o formulários mobile é gerado, de acordo com o mapeamento dos campos do formulários do processo.

Apesar do Fluig dispor da geração automática, existem diversas particularidades para o desenvolvimento e customização de formulário Mobile, estas serão tradadas no decorrer deste guia.

Recomendações para Processos com Formulário Mobile

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 pantallaFormulário Responsivo: Hoje no mercado existem variados tamanhos de telas e resoluções, por isso qualquer formulário desenvolvida para Mobile deve ser responsivo, ou seja, deve se ajustar a qualquer tamanho de tela.
    

2. Estética: A aparência  La apariencia visual e y design do del html devem deben ser atraentes atractivos para os usuárioslos usuarios, conseguimos isso através eso a través de CSS ou o jQueryMobile que será explicado nas próximas sessõesse explicará en las próximas sesiones.
     

3. Usabilidade: O formulário deve Usabilidad: El formulario debe ser fácil de usar, contendo conteniendo apenas o los campos importantes para tarefas ou processotareas o procesos.
    

4. Área de cliqueclic: Os  Los elementos do del HTML devem deben estar bem bien posicionados de forma tal manera que facilite a el área de clique, pois hoje existem dispositivos que as telas são muito pequenas.Segue um exemplo:

    

   Image Removed
    

5. Posicionamento das ações: As ações mais importantes devem estar posicionadas onde o usuário consegue alcançar facilmente, conforme a figura:

   Image Removed

   Image Removed
    

6. clic, pues hoy existen dispositivos en que las pantallas son muy pequeñas. Sigue un ejemplo:

   Image Added
    

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

   Image Added

   Image Added
    

8. 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.
   
   
9. 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.
   
   
10. 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.
    
    
11. 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.
    
    
12. Tipos: Definiciones de Formulario Móvil soporta los Customizações: As customizações devem ser feitas dentro dos eventos do processo ou de definições de formulário na Web, todos os eventos que são aplicados nos formulários Web também são aplicados nos formulários Mobile. Para mais informações acesse o guia Desenvolvimento de Formulários.
    Arquivos anexos: Os arquivos anexos do formulário Web não são carregados para o formulário Mobile, por isso o CSS e as funções Javascript's devem ser implementadas dentro do HTML Mobile.
    Acesso a serviços internos e externos: Qualquer acesso a webservices ou outros serviços interno ou externo deve ser feito via javascript. Recomendamos o uso de jQuery Soap para Webservices.
    Nem todas informações precisam estar no Formulário Mobile: O grande limitador do Mobile é o tamanho de tela, por isso mapeie os campos que são mais importantes para que tenham prioridade no formulário. Existem campos que são informativos e não tem grande utilidade no processo ou tarefas, estes não precisam ser inclusos no formulário Mobile.
    Tipos: Definições de Formulário Mobile suporta os tipos:
    
    1. text
    2. textArea
    3. radio
    4. select
    5. comboboxComboBox
    6. checkbox.

Benefícios

Beneficios

¿Por qué debo usar el Formulario MóvilPorque devo usar o Formulário Mobile?

• Permite iniciar/movimentar solicitações mover solicitudes de qualquer cualquier dispositivo móvelmóvil, independente independiente de sua localização su ubicación geográfica.
• Acesso rápido as informaçõesAcceso rápido a las informaciones, mostrando apenas as informações mais las informaciones más relevantes.
• Permite a continuidade do processo, mesmo fora do la continuidad del proceso, aun fuera del ambiente empresarial.
• Através da funcionalidade "Processo A través de la funcionalidad "Proceso Off-line" consigo preencher informações mesmo sem acesso rellenar informaciones aun sin acceso a internet, para futura sincronizaçãosincronización.
  

Criando um Formulário Mobile

No Fluig é possível criar definições de formulários de diferentes maneiras, utilizando o Fluig Studio, através da modelagem de processos workflow ou através de upload de  formulário na navegação de documentos.

Acompanhe a seguir, movimentando-se pelas abas abaixo, as formas de criação de formulários:

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: 

Customizando de Formulário Mobile

Com a inclusão de formulários que suportem a visualização em dispositivos móveis, é possível movimentar solicitações Workflow e realizar o preenchimento das informações de formulários com maior mobilidade e agilidade.

Como já vimos, o Formulário Mobile não carrega arquivos anexos, logo, toda customização deve ser feita dentro do HTML, este possui uma série de particularidades que serão tratadas a seguir:

CSS

Ao customizar um Formulário Mobile, o CSS utilizado para parte Web provavelmente não se aplica ao para o arquivo do dispositivo móvel, por isso é recomendado que o Formulário Mobile use um CSS próprio que mantenha o formulário responsivo.

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 O CSS deve ser inserido dentro da head no arquivo .html Mobile e deve ser utilizada a tag:

<style type="text/css"> Insira aqui o CSS </style>.

Acompanhe Siga a continuación, moviéndose por las pestañas a seguir, movimentando-se pelas abas abaixo, alguns exemplos  algunos ejemplos de componentes CSS que podem ser aplicados no formulários Mobilese 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;
}

Você deve tratar no Usted debe tratar en el CSS todos os los componentes que serão utilizados no seu HTML Mobile se utilizarán en su HTML Móvil para que todos tenham o mesmo padrão, seu HTML Mobile com CSS deve ter essa estruturatengan 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">
 <!--AquiAquí vocêusted devedebe incluir ala estruturaestructura dodel CSS de cada componente-->
</style>
</head>
<body>
</ body >
</html>

...

jQuery Mobile

O jQuery Mobile é um framework de interface para dispositivos móveis que visa dar um layout responsivo para as definições de formulários. Ele facilita muito no desenvolvimento, pois você não precisa ficar criando um CSS próprio para cada elemento e pode ser utilizado no Fluig Mobile. É possível acompanhar exemplos no 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 pode ser incorporado no HMTL Mobile se puede incorporar en el HMTL Móvil de forma simplessimple:

<html >
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.5.2.min.js"></script>
</head>
<body>
</ body >
</html>

...

JavaScript

Assim Así como o el CSS, o el javascript também deve también debe estar dentro do del HTML MobileMóvil, logo luego toda lógica que na en la web, normalmente, fica em arquivos queda en archivos .js, deve ser transferido para o Formulário Mobilese debe transferir al Formulario Móvil.

Para manter uma organização dentro do mantener una organización dentro del HTML, recomendamos deixar as dejar las lógicas no final no arquivoal final en el archivo:

<html>
<head>
</head>
<body>
</body>
</html>
<script language="javascript">
 /* AquiAquí vocêusted devedebe incluir ala lógica javascript */
</script>

Serviços

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 Para utilizar serviços internos ou externos ao Fluig é necessário instanciar, executar e tratar o retorno do serviço via javascript. Para webservices, recomendamos o uso de jQuery Soap.

Segue algumas dicasA continuación algunas sugerencias:

• O El uso de serviços servicios internos do del Fluig, como por exemplo ejemplo Dataset, devem ser feitos preferencialmente nas se deben realizar preferentemente en los eventos de customização de Formulário e Processos, desta maneira o que será customizado para a web, também será adotado para mobile, evitando a replicação 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 especiais especiales para formulário el formulario web, como por exemplo ejemplo a chamadas llamadas de dataset dentro do formulário, não são aplicadas no Mobiledel formulario, no se aplican en el Móvil. 

...

Traducción de

...

Formularios

A tradução de Formulário Mobile deve ser feita seguindo o guia de Tradução de Formulários . Porém o diferencial, é que será preciso incluir três novos arquivos com as literais seguindo a nomenclatura abaixo:

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ésPortuguês: nome_do_formulario_mobile_pt_BR.properties;
• InglêsInglés: nome_do_formulario_mobile_en_US.properties;
• EspanholEspañol: nome_do_formulario_mobile_es.properties.

...

Principal secundario para dispositivos

...

médicos

Os Los campos que empregam a técnica de pai e filho não são inseridos no formulário gerado automaticamente para dispositivos móveis pelo Fluig. Porem o produto lhe permite desenvolver um formulário customizada para dispositivos móveis consultando estes 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.

A consulta aos campos pai e filho em dispositivos móveis é realizada por meio de funções javaScript, disponíveis dentro do objeto masterList no momento da exibição do formulário. São elas:

getValue

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 Retorna uma string com o valor de um campo pai e filho, recebendo como parâmetros o número de sequência do filho e o nome do campo.

masterList.getValue(sequence,field);

getValues

Retorna um Devuelve un objeto com con todos os los valores dos campos pai e filhode los campos principal y secundario, agrupados pelo por el número de sequênciasecuencia. Este método não possui parâmetrosno posee parámetros.

masterList.getValues();

...

getValuesBySequence

Retorna um Devuelve un objeto com con todos os valores do campos de uma determinada sequencia. Recebe como paramento o numero da sequencialos valores de los espacios de una determinada secuencia. Recibe como parámetro el número de la secuencia.

masterList.getValuesBySequence(sequence);

getValuesByField

Retorna todas as sequências e Devuelve todas las secuencias y valores de um un determinado campo. Recebe como parâmetro o nome do campoRecibe como parámetros el nombre del espacio.

masterList.getValuesByField(field);

Insira anexos da solicitação diretamente do Formulário

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 Existe uma forma bem simples para salvar anexos upload através de um botão no formulário. Para isso é necessário inserir no evento onclink do button o método showCamera:

<input type="button" value="Insira Foto" onclick="showCamera(nome_do_anexo);"/>
 
<script language="javascript">
          
          function showCamera(parameter) {
              JSInterface.showCamera(parameter);
          }
</script>

O parâmetro El parámetro nome_do_anexo é uma  es una String e corresponde ao nome do anexo que será salvo na listagem de anexos daquela solicitação.

Como identificar que estou usando o Mobile nos eventos?

Com esse recurso é possível aplicar uma customização ou/e restrição somente no Formulário Mobile, independente da Web. Assim posso definir que um processo ou atividade vai receber um valor diferenciado ou que determinada atividade não pode ser executada pelo Mobile via customização.

Existe duas formas de fazer tal customização:

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 do Formulário
Todos os eventos que recebem no método o form podem fazer uma customização exclusiva para o Formulário Mobile, são os

• eventos:

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

  Para utilizar

o evento é necessário fazer a seguinte chamada:

• el evento es necesario hacer la siguiente llamada form.getMobile(),

onde

• donde retornará

um

• un booleano indicando

se é um formulário mobile ou não. Exemplo

• si es un formulario móvil o no. Ejemplo:

  
  

  Bloco de código
  language javascript
  function displayFields(form, customHTML) { if ( form.getMobile() != null && form.getMobile()) { form.setValue('mtr_usuario', new java.lang.Integer(123456)); } }

  
  
  

• Eventos

do Processo
Nos

• del Proceso
  En los eventos de

processo

• proceso,

a propriedade WKMobile identifica se a ação foi realizada pelo dispositivo móvel. Ela pode ser utilizada nos eventos do processo conforme exemplo

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

  Bloco de código
  language javascript
  function beforeStateEntry(sequenceId){ var isMobile = getValue("WKMobile"); if (isMobile!=null && isMobile==true){ throw "

Esse

• Ese

processo

• proceso

não

• no

pode

• puede ser ejecutado

executado

• por

pelo

• el

mobile

• móvil."; } }

Consumo de Datasets via xmlRPC

 <script src="http://URL_DO_SERVIDOR/webdesk/vcXMLRPC-mobile.js"></script>
<script src="http://URL_DO_SERVIDOR/portal/resources/js/jquery/jquery-1.7.2.js"></script>

var filter = new Object();
filter["colleaguePK.colleagueId"] = "john"; 
var colleagues = getDatasetValues("colleague", filter);
if(colleagues.length > 0){       
	document.getElementById("colleagueName").value = colleagues[0].colleagueName;
	document.getElementById("login").value = colleagues[0].login;
}else{
	alert("Nenhum Usuário Encontrado");
}

var c1 = DatasetFactory.createConstraint("cod_area", "2", "2", ConstraintType.MUST); 
var constraints = new Array(c1);
			
var area = DatasetFactory.getDataset("areas", null, constraints, null);
			
if(area.values.length){
	document.getElementById("cod_area").value = area.values[0].cod_area;
	document.getElementById("area").value = area.values[0].area;
}else{
	alert("Area não encontrada") ;
}

function getLocationUpdate(){
	if(navigator.geolocation){
      // timeout at 60000 milliseconds (60 seconds)
      var options = {timeout:60000};
      geoLoc = navigator.geolocation;
      watchID = geoLoc.watchPosition(showLocation, 
                                     errorHandler,
                                     options);
	}else{
		alert("Sorry, esse dispositivo não suporta geolocalização!");
	}
}
 
function showLocation(position) {
  var lat = position.coords.latitude;
  var longi = position.coords.longitude;
  document.getElementById("latitude").value = lat;
  document.getElementById("longitude").value = longi;
}

function errorHandler(err) {
  if(err.code == 1) {
    alert("Erro: Acesso negado!");
  }else if( err.code == 2) {
    alert("Error: Posição está indisponível!");
  }
}

Versão minimas dos browsers suportados

Faça o download dos arquivos exemplo aqui. 

Abaixo segue um exemplo de formulário que foi mapeado para uso em dispositivos móveis:

• Formulário Web

Image Removed

• Formulário Mobile

Image Removed

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

Image Added

• Formulario Móvil

Image Added

Itens que estão em uma tabela podem ser transformados em um collapsible do jQueryMobile.

Ao acionar o botão '+', o item é expandido:

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

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

Image AddedImage Removed