Histórico da Página
Índice
Índice | ||||||
---|---|---|---|---|---|---|
|
Formulário Mobile
|
Formulário mobile
...
No Fluig, é possível movimentar solicitações workflow, a partir de aplicativos. Devido a isso, ao salvar um formulário no Fluig, automaticamente o formulário mobile é gerado, de acordo com o O Formulário Mobile é gerado automaticamente pelo Fluig de acordo com um mapeamento dos campos do formulário do processo.
Apesar do Fluig dispor da 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
Inicie o desenvolvimento pelo formulário mais restritivo:O Formulário Mobile é mais restritivo que o Formulário Web, por isso é indicado 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.
de formulários, existem diversas particularidades para o desenvolvimento de formulário mobile. Estas serão tratadas no decorrer deste guia.
Recomendações para processos com formulário mobile
...
- Formulário responsivo: hoje no mercado existem variados tamanhos de telas e resoluções dos dispositivos, por isso qualquer formulário desenvolvido para mobile deve ser responsivo, ou seja, deve se adequar a qualquer tamanho de tela.
- Estética: a aparência visual e design do HTML
...
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.
...
- devem ser atraentes para os usuários, conseguimos isso através de CSS
...
- , por isso recomendamos a utilização do Fluig Style Guide.
- Usabilidade:
...
- o formulário deve ser fácil de usar, contendo apenas
...
- os campos importantes para
...
- a tarefa ou processo.
- Área de clique:
...
- os elementos do HTML devem estar bem posicionados de forma que facilite a área de clique
...
- .
...
...
- Posicionamento das ações:
...
- as ações mais importantes devem estar posicionadas onde o usuário consegue alcançar
...
- facilmente, conforme a
...
...
- imagem abaixo.
- Desenvolvimentos: os desenvolvimentos devem ser 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.
- Acesso a serviços internos
...
- :
...
- o acesso a
...
- serviços internos pode ser feito através de Datasets via
...
- xmlRPC. Para mais informações, clique aqui.
- Acesso a serviços externos: recomendamos a utilização de Datasets para acessar serviços externos, esses Datasets são acessados no mobile via xmlRPC conforme descrito acima.
- Nem todas informações precisam estar no
...
- formulário mobile:
...
- o grande limitador do
...
- mobile é o tamanho de tela do dispositivo, por isso mapeie os campos que são mais importantes para que tenham prioridade no formulário. Existem campos que são
...
- de teor informativo e sem grande utilidade no processo ou tarefas,
...
Benefícios
Porque devo usar o Formulário Mobile?
...
- estes não precisam ser inclusos no formulário mobile.
- Consultas aos datasets via Javascript em eventos para validação de formulários: não é recomendada a consulta em Datasets dentro dos eventos beforeMovementOptions e beforeSendValidate, pois cada requisição gera uma atividade assíncrona, cujo tempo de retorno pode interferir na lógica de validação definida.
- Carregamento inicial do formulário dentro de Javascript: dependendo da plataforma e da versão do sistema operacional, o tempo e a ordem de carregamento do formulário a partir de um .js pode resultar em um comportamento diferente do planejado.
Deck of Cards | |||||||||||||||||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| |||||||||||||||||||||||||||||
|
- Formulários offline: para a plataforma Android, o serviço da API pública /public/ecm/dataset/search não carregará os dados em modo offline, quando a requisição for realizada através do método POST.
- Eventos de teclado na plataforma Android: o evento onkeypress, atribuído para campos HTML, não é detectado pelo teclado da plataforma Android. Recomendamos utilizar o evento oninput e realizar os tratamentos necessários na chamada desse evento.
- A tag <input> possui a capacidade de suportar diferentes tipos de dados, dessa forma, como boa prática quando a mesma for utilizada, o atributo type deve ser definido, por exemplo:
Bloco de código | ||
---|---|---|
| ||
<input type="text" id="idCampo" name="campoTxt"> |
Tipos: Definições de formulário mobile suporta os tipos abaixo:
- text
- textArea
- radio
- select
- combobox
- checkbox.
- email (3)
- tel (3)
- range (3)
- date (3)
- time (1)(3)
- week (2)(3)
- number
- hidden
- password
Painel | ||||
---|---|---|---|---|
| ||||
(1) Existe um bug no Android Lollipop (5.0) que inviabiliza o uso do tipo time. Para mais informações, clique aqui; (2) O campo week não é suportado pelo iOS; (3) Existe um bug no Android Jelly Bean (4.1, 4.2 e 4.3) que inviabiliza o uso do tipo select. Para mais informações, clique aqui, aqui e aqui. Como medida de correção, a sugestão é utilizar o componente de Zoom: Desenvolvimento de Formulários - Zoom. |
Nota | ||
---|---|---|
| ||
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 informações mais relevantes;
- Permite a continuidade do processo, mesmo fora do ambiente empresarial;
- Através do recurso "Processo Off-line" é possível preencher informações mesmo sem acesso a internet, para futura sincronização.
Criando um formulário mobile
...
Informações | ||
---|---|---|
| ||
Ao criar formulários para dispositivos móveis, é importante adotar algumas diretrizes para assegurar uma experiência eficaz para o usuário e garantir que a disposição dos campos e botões não comprometa a usabilidade. Nesse sentido:
|
Nota | ||||||
---|---|---|---|---|---|---|
| ||||||
Ao realizar customizações, atente-se para que a renderização seja feita de forma correta em navegadores mobile. A customização deve estar compatível com o Safari para iOS e Chrome para Android. Versões mínimas de cada plataforma que devem ser consideradas durante o desenvolvimento
|
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:
Nota | ||
---|---|---|
| ||
Formulários de processos que possuem versões em rascunho não são carregados quando o usuário está offline (sem conexão com a internet). Somente informações do rascunho do processo são apresentadas. |
Deck of Cards | |||||||||||||||||||||||||||||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| |||||||||||||||||||||||||||||||||||||||||
|
Nota | ||
---|---|---|
| ||
Ao contrário da web, o comportamento da função setHidePrintLink no mobile não esconde o botão de impressão. Mas também não permite que o usuário efetue a impressão do formulário. |
Carregando dados do dataset em modo offline
...
Para realizar o carregamento dos dados do dataset em modo offline no formulário do processo, é necessário relacionar o dataset ao campo zoom faz uso durante o modo offline. Acompanhe a seguir, o procedimento para configuração do carregamento:
Deck of Cards | ||||||||||
---|---|---|---|---|---|---|---|---|---|---|
| ||||||||||
|
Nota | ||
---|---|---|
| ||
Após definir as configurações, é necessário efetuar a limpeza de cache no aplicativo e realizar uma nova consulta. |
Dica |
---|
Acesse nossa documentação e saiba mais sobre como Habilitar dataset offline no mobile. |
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.
Funções mobile
...
getAttachments
É uma função que retorna uma Promise com a lista dos anexos do formulário. Funciona de forma offline.
No exemplo abaixo foi utilizado um await para aguardar a lista dos arquivos que pode ser vazia, caso não haja anexos.
Bloco de código | ||||
---|---|---|---|---|
| ||||
var listaArquivos = await JSInterface.getAttachments();
|
O objeto retorna sempre um json que é uma lista de arquivos. Cada arquivo pode ou não ter os dados, conforme abaixo:
Bloco de código | ||||||
---|---|---|---|---|---|---|
| ||||||
[{
"documentId": 4917,
"version": 1000,
"createDate": 1713872206178,
"newAttach": false,
"size": 1.2485828,
"fileName": "file.pdf",
"description": "file.pdf",
"streamControlUrl": "" //Pode ser http ou caminho do arquivo /folder/file.pdf
}] |
Painel | ||||
---|---|---|---|---|
| ||||
Caso não tenha a informação no arquivo anexado, o valor será null por padrão. |
Exemplo de chamada no JS de forma async:
Bloco de código | ||
---|---|---|
| ||
async function getFiles() {
var listFiles = await JSInterface.getAttachments();
} |
beforeValidateAttachments
...
Este evento acontece ao clicar em "enviar" no navegador antes de abrir a tela de movimentação. Por isso, esse código deve ser implementado em um arquivo javascript vinculado ao formulário html. Ele recebe um parâmetro que é a lista de todos os anexos que estão vinculados no formulário e é muito útil para algumas validações antes mesmo de ser enviado para o servidor.
Bloco de código | ||
---|---|---|
| ||
var beforeValidateAttachments = function (listFiles) {
if (listFiles.length == 0) {
throw 'Necessário incluir um anexo.';
}
} |
- Os dados sempre serão uma lista de arquivos com os valores:
Bloco de código | ||||||
---|---|---|---|---|---|---|
| ||||||
[{
"documentId": 0, //0 caso for novo anexo
"version": 0, //0 caso for novo anexo
"createDate": null,
"newAttach": true, //true para novo anexo
"size": 1.2485828, // tamanho do arquivo em MB
"fileName": "file.pdf",
"description": "file.pdf",
"streamControlUrl": "" //Pode ser http ou caminho do arquivo /folder/file.pdf
}] |
Pai x Filho e Zoom para dispositivos móveis
...
A partir do TOTVS Fluig Plataforma 1.5.2 (server), temos uma técnica para utilização de Pai e Filho e Zoom que facilita o desenvolvimento sobre a plataforma. Usando o Fluig Style Guide tudo ficará mais responsivo e esses dois componentes se adequam a web e ao mobile.
Painel | ||||
---|---|---|---|---|
| ||||
Leia mais detalhes na nossa documentação: Desenvolvimento de Formulários - Zoom e Desenvolvimento de Formulários - Pai x Filho. |
Nota | ||
---|---|---|
| ||
|
Nota | ||
---|---|---|
| ||
|
Insira anexos da solicitação diretamente do formulário
...
Há uma maneira bem simples para salvar anexos upload através de um botão no formulário. Para isso é necessário inserir no evento onclick do button o método showCamera:
Nota | ||
---|---|---|
| ||
Não é recomendada a troca do nome da função para o método showCamera no iOS. Isso faz com que o método não funcione conforme o esperado. |
Bloco de código | ||
---|---|---|
| ||
<input type="button" value="Insira Foto" onclick="showCamera('Nome do arquivo em anexo');"/>
<script language="javascript">
function showCamera(param) {
JSInterface.showCamera(param);
}
</script> |
O parâmetro passado na função JSinterface.showCamera é uma String e corresponde ao nome do anexo que será salvo na listagem de anexos daquela solicitação.
Nota | ||
---|---|---|
| ||
No My Fluig somente imagens podem ser adicionadas como anexo. É possível escolher uma imagem da galeria ou ainda tirar uma foto usando a câmera. |
Informações | |||||||
---|---|---|---|---|---|---|---|
| |||||||
O método JSinterface.showCamera, também é aplicado na plataforma web. Acessando o Fluig Plataforma pelo navegador, ao clicar em um botão utilizando o recurso você será direcionado para a aba Anexos e uma janela será exibida para a seleção dos arquivos. Acessando a aba de Anexos será possível realizar o upload de apenas um arquivo por vez.
|
Desabilite o evento Pull to refresh do componente nativo
...
Há uma maneira bem simples para desabilitar o evento de Pull to refresh responsável por atualizar os dados do formulário. Para isso é necessário inserir o método disablePullToRefresh:
Bloco de código | ||
---|---|---|
| ||
<script language="javascript">
function disablePullToRefresh(){
return true;
}
</script> |
Como identificar se estou usando o mobile nos eventos?
...
Com esse recurso é possível aplicar 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 desenvolvimento.
Existe duas formas de fazer tal desenvolvimento:
Eventos do Formulário
...
Todos os eventos que recebem no método o form podem fazer um desenvolvimento exclusivo para o formulário mobile:
- 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 | ||
---|---|---|
| ||
function displayFields(form, customHTML) {
if ( form.getMobile() != null && form.getMobile()) {
form.setValue('mtr_usuario', new java.lang.Integer(123456));
}
} |
Eventos do Processo
- beforeMovementOptions
- beforeSendValidate
Nota | ||
---|---|---|
| ||
Os eventos "beforeMovementOptions" e "beforeSendValidate" serão executados no dispositivo mobile antes mesmo de serem enviados para o servidor. Para mais informações sobre estes eventos acesse a página Desenvolvimento de Workflow. |
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 | ||
---|---|---|
| ||
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
...
O acesso de datasets pelo mobile é realizado com o xmlPRC, desse modo é possível trocar de informações com Fluig via AJAX. Para utiliza-lo, basta acionar as seguintes importações no HTML do formulário:
Bloco de código | ||
---|---|---|
| ||
<script src="../vcXMLRPC.js"></script>
<script src="http://URL_DO_SERVIDOR/portal/resources/js/jquery/jquery.js"></script> |
O acesso aos Datasets é igual à web, a seguir são apresentados alguns exemplos:
Datasets internos Fluig
Este tipo de Dataset permite navegar em dados das entidades do próprio Fluig Plataforma, como usuários, grupos, processos ou tarefas por exemplo. Esses datasets são pré-definidos, por isso não podem ser alterados pelo usuário. A lista com os datasets disponíveis pode ser consultada aqui.
Bloco de código | ||||
---|---|---|---|---|
| ||||
var filter = new Object();
filter["colleaguePK.colleagueId"] = "john";
var colleagues = DatasetFactory.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");
} |
Painel | |||||
---|---|---|---|---|---|
| |||||
Para atualizações anteriores ao TOTVS Fluig Plataforma 1.5.6, substituir a linha 3 por:
|
Datasets internos formulário
Este tipo de Dataset permite navegar nos dados existentes em formulários de uma determinada definição de formulário publicada no Fluig. Para que uma definição de formulário seja disponibilizada como Dataset, é necessário preencher o campo Nome Dataset na publicação da definição de formulário. O
valor informado será utilizado para a busca do Dataset no Fluig;
Bloco de código | ||
---|---|---|
| ||
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") ;
} |
Painel | ||||
---|---|---|---|---|
| ||||
Para fazer o download de um exemplo de formulário utilizando xmlPRC clique aqui. |
Chamadas assíncronas
A partir do TOTVS Fluig Plataforma 1.5.6, é possível realizar chamadas assíncronas:
Bloco de código | ||
---|---|---|
| ||
var filter = new Object();
filter["colleaguePK.colleagueId"] = "john";
var colleagues = DatasetFactory.getDatasetValues("colleague", filter,
{ success: function(colleagues) {
if(colleagues.length > 0){
document.getElementById("colleagueName").value = colleagues[0].colleagueName;
document.getElementById("login").value = colleagues[0].login;
}else{
alert("Nenhum Usuário Encontrado");
}
}, error: function(jqXHR, textStatus, errorThrown) {}
});
|
Bloco de código | ||
---|---|---|
| ||
DatasetFactory.getDataset("areas", null, constraints, null, {
success: function(area) {
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") ;
}
}
}, error: function(jqXHR, textStatus, errorThrown) {}
); |
Deck of Cards | |||||||||||||||||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| |||||||||||||||||||||||||||||
|
Informações |
---|
Veja o exemplo (form-mobile-waze) em nosso repositório aqui. |
Nota | ||
---|---|---|
| ||
Esta técnica funciona apenas em ambiente HTTPS a partir do Android 6.0 e iOS 10. |
Explorando o input file no mobile
...
É possível manipular arquivos diretamente do formulário mobile através do input file, onde no aplicativo mobile é possível acessar arquivos do dispositivo ou incluir uma imagem diretamente da câmera. Importante observar que ao escolher um ou mais arquivos através desse componente, esses arquivos
não serão anexados à solicitação em questão, uma vez que essa funcionalidade é exclusiva do recurso showCamera descrito nessa documentação.
Bloco de código | ||
---|---|---|
| ||
<input type="file" id="btUpload" name="btUpload" title="Arquivos" accept="image/*" class="btn btn-primary" multiple> |
Um ponto para observar é que, ao realizar o upload direto da câmera, não é possível adicionar várias fotos simultaneamente, mesmo quando o parâmetro 'multiple' é especificado, sendo este um comportamento do próprio sistema operacional. O cenário de múltiplo upload pode ser realizado acessando os
arquivos já existentes do dispositivo.
Deck of Cards | |||||||
---|---|---|---|---|---|---|---|
| |||||||
|
Formulário único
...
A partir da atualização 1.5 do Fluig Plataforma 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
...
- Download de anexos: este procedimento será automático, porém apenas os anexos do formulário são baixados.
- 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.
Nota | ||
---|---|---|
| ||
|
Dica | ||
---|---|---|
| ||
Recomendamos a leitura da documentação Eventos de formulários na seção das funções getAttachments e sendAttachments. Referentes ao retorno e envio das informações dos anexos. |
Guia de estilos off-line
...
Agora é possível utilizar o guia de estilos em modo off-line sem a necessidade de qualquer conexão a internet, ficou bem mais fácil e independente personalizar seu formulário para processo off-line. Uma vez ao dia o Fluig Mobile ira verificar novas atualizações, caso alguma atualização esteja disponível, o download da mesma será feita automaticamente de forma rápida e transparente, sem precisar se atentar a formas manuais e demoradas para atualização. O guia de estilos off-line está disponível tanto para Android como para IOS.
Versões mínimas 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. Acesse a Matriz de portabilidade e veja a versão mínima dos browsers de cada plataforma que deve ser considerada durante o desenvolvimento.
Atualizar anexos de javascript de formulário mantendo sua versão ao importar para o Eclipse
...
No arquivo html do formulário, é necessário fazer a referência ao arquivo javascript como no exemplo abaixo:
Bloco de código |
---|
<script type="text/javascript">
const head = document.getElementsByTagName('head')[0];
const script = document.createElement('script');
script.src = `testeMobile.js?${Date.now()}`;
script.type = 'text/javascript';
head.appendChild(script);
</script> |
O código acima faz com que ao importar o formulário mantendo sua versão, será gerada uma data na referência do arquivo, invalidando o cache do aplicativo My Fluig
...
Customizando Formulário Mobile
Com a inclusão de definição de formulários que suportem a visualização em dispositivos móveis, é possível movimentar solicitações Workflow através destes dispositivos e realizar o preenchimento das informações da definição de formulários HTML, garantindo maior mobilidade e agilidade para realizar movimentações de solicitações workflow.
Para incluir um novo fichário com suporte de dispositivos móveis, realize o procedimento padrão para exportação da definição de formulário e selecione os campos que irão compor o formulário mobile na tela antes da conclusão da exportação. Após a exportação será incluindo também outro arquivo HTML e marcando-o como "mobile" na pasta forms do projeto Fluig.
Veja na imagem a seguir a tela de seleção mobile na exportação de uma definição de formulário:
Figura 15 - Definição de formulário mobile.
Após exportado o formulário deve ficar conforme a seguir:
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 e eles tem uma série de particularidades que serão tratadas a seguir:
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:
Body
Bloco de código | ||
---|---|---|
| ||
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
Bloco de código | ||
---|---|---|
| ||
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
Bloco de código | ||
---|---|---|
| ||
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
Bloco de código | ||
---|---|---|
| ||
.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
Bloco de código | ||
---|---|---|
| ||
input[type=text] {
width: 70%;
font-family: Verdana, Geneva, Tahoma, sans-serif;
font-size: 14px;
background-color: #E8E8E8;
position:relative;
float:right;
} |
TextArea
Bloco de código | ||
---|---|---|
| ||
textarea {
width: 70%;
font-family: Verdana, Geneva, Tahoma, sans-serif;
font-size: 14px;
background-color: #E8E8E8;
position:relative;
float:right;
} |
Select
Bloco de código | ||
---|---|---|
| ||
select {
width: 70%;
font-family: Verdana, Geneva, Tahoma, sans-serif;
font-size: 14px;
background-color: #E8E8E8;
position:relative;
float:right;
} |
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:
Bloco de código | ||
---|---|---|
| ||
<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> |
Nota | ||
---|---|---|
| ||
Essa é a estrutura básica, dentro de cada tag deve ter elementos e lógicas correspondentes a elas. |
jQuery Mobile
O jQuery Mobile é um framework de interface para dispositivos móveis que visa dar um layout responsivo para os 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. Existem vários exemplos no link: http://demos.jquerymobile.com/1.4.2/
Ele pode ser incorporado no HMTL Mobile de forma simples:
Bloco de código | ||
---|---|---|
| ||
<html >
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.5.2.min.js"></script>
</head>
<body>
</ body >
</html> |
JavaScript
Assim como o CSS, o javascript também deve estar dentro do HTML Mobile, logo toda lógica que na web, normalmente, fica em arquivos .js anexados, deve ser transferido para o Formulário Mobile.
O javascript tem que ficar dentro do uma tag <script language="javascript"> aqui vai a lógica em javascript </script>, para manter uma organização dentro do HTML, recomendamos deixar as lógicas no final no arquivo.
Bloco de código | ||
---|---|---|
| ||
<html>
<head>
</head>
<body>
</body>
</html>
<script language="javascript">
/* Aqui você deve incluir a lógica javascript */
</script> |
Nota | ||
---|---|---|
| ||
Para testar o formulário Mobile, primeiro abra-o em um navegador no desktop normal, se ele abrir no desktop sem nenhum erro, deve abrir normalmente dentro do Fluig Mobile. |
Serviços
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 dicas:
- O uso de serviços internos do Fluig, como por exemplo Dataset, devem ser feitos preferencialmente nas eventos de customização de Formulário e Processos, pois assim tudo que é aplicado na web, também será aplicado no Mobile. Evita a replicação de código.
- Técnicas especiais para formulário web, como por exemplo a chamadas de dataset dentro do formulário, não são aplicadas no Mobile.
Tradução de Formulários
A tradução de formulário Mobile deve ser feita da mesma forma que o formulário web, conforme documentação: Tradução de Formulários . A única diferença é que será preciso incluir mais três arquivos com as literais de tradução dos Formulários Mobile com a seguinte nomenclatura:
- Português: nome_do_formulario_mobile_pt_BR.properties;
- Inglês: nome_do_formulario_mobile_en_US.properties;
- Espanhol: nome_do_formulario_mobile_es.properties.
- compras_ecmmobile_pt_BR.properties;
- compras_ecmmobile_en_US.properties;
- compras_ecmmobile_es.properties.
Pai Filho para dispositivos móveis
Os 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 customizado para dispositivos móveis consultando estes campos.
Nota |
---|
A edição de campos pai e filho através de dispositivos mobile não é possível, mesmo em formulários customizados. Somente consulta. |
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
Retorna uma string com o valor de um campo pai e filho, recebendo como parâmetros o numero de sequencia do filho e o nome do campo.
Bloco de código | ||
---|---|---|
| ||
masterList.getValue(sequence,field); |
getValues
Retorna um objeto com todos os valores dos campos pai e filho, agrupados pelo numero de sequencia. Este método não possui parâmetros.
Bloco de código | ||
---|---|---|
| ||
masterList.getValues(); |
getValuesBySequence
Retorna um objeto com todos os valores do campos de uma determinada sequencia. Recebe como paramento o numero da sequencia.
Bloco de código | ||
---|---|---|
| ||
masterList.getValuesBySequence(sequence); |
getValuesByField
Retorna todas as sequencias e valores de um determinado campo. Recebe como parâmetro o nome do campo.
Bloco de código |
---|
masterList.getValuesByField(field); |
Exemplos: Formulários Pai Filho + Eventos.
Exemplo
Abaixo segue um formulário que foi mapeado para o uso em Mobile:
- Formulário Web
- Formulário Mobile
Como podemos ver, o formulário Web tem muitos campos e seu mapeamento pro Mobile deve ser feito com muito cuidado.
Os campos "Dados da proposta" foram mapeados para Mobile, notem que tem campos que não existem no Mobile, pois não se faz necessário neste contexto:
O itens que estão em uma tabela foram transformados em um collapsible do jQueryMobile.
Ao acionar o +, o item é expandido: