...

Formulário Mobile 

No fluig, é possível movimentar solicitações workflow, a partir de aplicativos móveis. Devido 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 tratadas no decorrer deste guia.

Recomendações para

...

processos com

...

formulário Mobile

...

1. Formulá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 visual e design do html devem ser atraentes para os usuários, conseguimos isso através de CSS, por isso recomendamos a utilização do fluig style guide.

3. Usabilidade: O formulário deve ser fácil de usar, contendo apenas o campos importantes para tarefas ou processo.

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

    

   

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

   

   

6. Customizações: As customizações Desenvolvimentos: os desenvolvimentos devem ser feitas feitos 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.
   
   
7. Acesso a serviços internos: O acesso a serviços interno pode ser feita através de Datasets via xmlRPC. Para mais informações, clique aqui.
   
   
8. Acesso a serviços externos: Recomendamos a utilização de Datasets para acessar serviços externos, esse Datasets são acessados no mobile via xmlRPC conforme descrito acima.
   
   
9. 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.
   
   
10. Tipos: Definições de Formulário Mobile suporta os tipos:
    
    1. text
    2. textArea
    3. radio
    4. select
    5. combobox
    6. checkbox.
    7. email ⁽³⁾
    8. tel ⁽³⁾
    9. range ⁽³⁾
    10. date ⁽³⁾
    11. time ⁽¹⁾⁽³⁾
    12. week ⁽²⁾⁽³⁾
    13. number
    14. hidden
    15. password
        
        

...

Nota
title Atenção
Não está homologada a implementação de evento que utilizem Gestures (swipe, longpress, tap, entre outros) em formulário no fluig Mobile.

 

Benefícios

Porque devo usar formulários no Mobile?

• Permite iniciar/movimentar solicitações de qualquer dispositivo móvel, independente de sua localização geográfica.
• Acesso rápido as informações, mostrando apenas as informações mais relevantes.
• Permite a continuidade do processo, mesmo fora do ambiente empresarial.
• Através do recurso "Processo Off-line" consigo preencher informações mesmo sem acesso a internet, para futura sincronização.
  
  
  

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.

...

...

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

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 link: http://demos.jquerymobile.com/1.4.2/.

Este pode ser incorporado no HMTL Mobile de forma simples:

...

Pai Filho e Zoom para dispositivos móveis

A partir do fluig 1.5.2 (server), temos uma nova técnica para utilização de Pai e Filho e Zoom no fluig que vai facilitar em muito o desenvolvimento sob nossa plataforma. Usando o fluig Style Guide tudo ficará mais responsivo, e esses dois componentes se adequam a web e ao mobile.

...

Comece a usar hoje mesmo lendo detalhes na nossa documentação: Desenvolvimento de Formulários - Zoom e Desenvolvimento de Formulários - Pai x Filho. 
 

...

Insira anexos da solicitação diretamente do

...

formulário

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:

...

O parâmetro nome_do_anexo é uma 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 um desenvolvimento e/ou 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çãodesenvolvimento. 

Existe duas formas de fazer tal customizaçãodesenvolvimento:

• Eventos do Formulário
  Todos os eventos que recebem no método o form podem fazer uma customização exclusiva um desenvolvimento exclusivo 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: form.getMobile(), onde retornará um booleano indicando se é um formulário mobile ou não. Exemplo:
  
  

  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 eventos de processo, a propriedade WKMobile identifica se a ação foi realizada pelo dispositivo móvel. Ela pode ser utilizada nos eventos do processo conforme exemplo:
    
    

    Bloco de código
    language javascript
    function beforeStateEntry(sequenceId){ var isMobile = getValue("WKMobile"); if (isMobile!=null && isMobile==true){ throw "Esse processo não pode ser executado pelo mobile."; } }

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

...

Formulário único

A partir da versão 1.5 do fluig os formulários da web e do mobile devem ser criados de forma única. Sendo assim, o formulário deve atender tanto o mobile quanto a web.

Para criar formulários com este novo padrão verifique o fluig style guide.

Anexos de formulário

1. Download de anexos: este procedimento será automático, porém apenas os anexos do formulário são baixados.  
2. Download de anexos em processos offline: durante o download dos processos offline os anexos do formulário são baixados e estarão disponíveis para utilização de maneira offline.

...

Versão minimas dos browsers suportados

...

Cada uma das plataformas utiliza um browser diferente para a renderização dos formulários. Esta informação deve ser considerada durante o desenvolvimento para evitar problemas de compatibilidade com os arquivos JavaScript/CSS. A tabela abaixo apresenta a versão minima dos browsers de cada plataforma que deve ser considerada durante o desenvolvimento:

Versão minima da plataforma	Versão minima do browser
Windows Phone 8	Internet Explorer 10
Android 4.0 (Ice Cream Sandwich)	Webkit 534.30
iOS 7	Mobile Safari 9537.53

 

...