...

O Formulário Mobile é gerado automaticamente pelo Fluig de acordo com um mapeamento dos campos do formulário do processo. A geração automática não traz integrações, customizações, funções Javascript's e CSS, isso deve ser feito manualmente e adequado conforme necessidade do processo. Existem diversas particularidades para o desenvolvimento e customização de formulário Mobile, todos eles serão tradados no decorrer desta documentação.

Recomendações para Processos com Formulário

...

Mobile

1. Inicie o desenvolvimento pelo formulário mais restritivo:O Formulário Mobile é mais restritivo que o Formulário Web, por isso é recomendado que o desenvolvimento seja iniciado por ele. Quando você conseguir colocar todas as informações necessárias pro processo no Formulário Mobile, o mapeamento para Web será muito mais fácil, uma vez que o tamanho de tela é muito maior.

   Obs.: É possível fazer de forma contrária, porém o trabalho normalmente é maior.

2. Formulário Responsivo: Hoje no mercado existe os mais variados tipos de tamanhos de telas e resoluções, por isso qualquer formulário desenvolvido para Mobile deve ser responsivo, ou seja, deve se ajustar a qualquer tamanho de tela.

3. Estética:A aparência visual e design do html devem ser atraentes para os usuários, conseguimos isso através de CSS ou jQueryMobile que será explicado nas próximas sessões.

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

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

   

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

   

7. Customizações: As customizações devem ser feitas dentro dos eventos do processo ou formulário na Web, todos os eventos que são aplicados nos formulários Web também são aplicados nos formulários Mobile.
8. 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 hmtl Mobile.
9. 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.
10. Nem todas informações precisam estar no 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, esses podem ser eliminados do Formulário 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 da funcionalidade "Processo Off-line" consigo preencher informações mesmo sem acesso a internet, para sincronização posteriormente.

Formulário Mobile

O Fluig identificada o formulário Mobile pelo nome, o formulário Mobile deve ter o mesmo nome do formulário Web acrescido da palavra "_ecmMobile", por exemplo: O meu formulário web chama "compras.html", o formulário Mobile, obrigatoriamente, deve-se chamar "compras_ecmmobile.html". Como já vimos, o  Formulário Mobile não carrega arquivos  anexos, logo toda customização deve ser feito dentro do HTML.

CSS

No Fluig Web é comum ter o arquivo CSS separado do HTML, porém quando estamos desenvolvendo o HTML Mobile precisamos manter tudo dentro de um único arquivo. O CSS utilizado para parte Web provavelmente não se aplica ao Mobile, por isso é recomendado que o Mobile use um CSS próprio que deixe o formulário responsivo.

O CSS deve ser inserido dentro da head no html Mobile e deve ser utilizada a tag <style type="text/css"> Insira aqui o CSS </style>. Segue alguns exemplos de CSS que podem ser aplicados nos formulários Mobile, eles estão separados por componentes:

Você deve tratar no CSS todos os componentes que serão utilizados no seu HTML Mobile para que todos tenham o mesmo padrão, seu HTML Mobile com CSS deve ter essa estrutura:

<html >

<head>

<title>Formulário de Compras </title>

<style type="text/css">

 Aqui você deve incluir a estrutura do CSS de cada componente

</style>

</head>

<body>

</ body >

</html>

Obs.: Essa é a Estrutura, dentro de cada tag

JavaScript

Serviços

JQuery Mobile

...

Pai X Filho Mobile

Exemplo