Histórico da Página
...
Índice | ||||||
---|---|---|---|---|---|---|
|
Formulário MobileMobile
No Fluigfluig, é possível movimentar solicitações workflow, a partir de aplicativos móveis. Devido a isso, ao salvar um formulários no Fluigfluig, automaticamente o formulários mobile é gerado, de acordo com o mapeamento dos campos do formulários do processo.
Apesar do Fluig fluig dispor da geração automática, existem diversas particularidades para o desenvolvimento e customização de formulário Mobile, estas serão tradadas 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, por isso qualquer formulário desenvolvida para Mobile deve ser responsivo, ou seja, deve se ajustar a qualquer tamanho de tela.
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.
Usabilidade: O formulário deve ser fácil de usar, contendo apenas o campos importantes para tarefas ou processo.
Á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:
Posicionamento das ações: As ações mais importantes devem estar posicionadas onde o usuário consegue alcançar facilmente, conforme a figura:
- 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 e referências relativas: Os arquivos anexos e referências relativas 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:
- text
- textArea
- radio
- select
- combobox
- checkbox.
- email (3)
- tel (3)
- range (3)
- date (3)
- time (1)(3)
- week (2)(3)
- number
- hidden
- password
...
Nota | ||
---|---|---|
| ||
Não está homologada a implementação de evento que utilizem Gestures (swipe, longpress, tap, entre outros) em formulário no Fluig fluig Mobile. |
Benefícios
Porque devo usar o 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 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 é fluigé possível criar definições de formulários de diferentes maneiras, utilizando o Fluig fluig Studio, através da modelagem de processos workflow ou através de upload de formulário na navegação de documentos.
...
Deck of Cards | |||||||||||||||||||||||||||||||||||||||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| |||||||||||||||||||||||||||||||||||||||||||||||||||
|
...
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.
O CSS deve ser inserido dentro da head no arquivo .html Mobile e deve ser utilizada a tag:
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:
Bloco de código | ||
---|---|---|
| ||
<html >
<head>
<script | ||
Bloco de código | ||
| ||
<style type="text/cssjavascript"> Insira aqui o CSS </style>. |
Acompanhe a seguir, movimentando-se pelas abas abaixo, alguns exemplos de componentes CSS que podem ser aplicados no formulários Mobile:
...
effectDuration | 0.5 |
---|---|
history | false |
id | install-windows |
effectType | fade |
...
default | true |
---|---|
id | 1 |
label | Body |
title | Selecione a linguagem |
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;
} |
src="http://code.jquery.com/jquery-1.5.2.min.js"></script>
</head>
<body>
</ body >
</html> |
Nota | ||
---|---|---|
| ||
Referências aos arquivos externos, como por exemplo o JQuery mobile, não devem ser utilizados em processos que tenham o uso off-line, pois quando a utilização é feita de forma off-line apenas o formulário é armazenado. |
...
id | 2 |
---|---|
label | Headings |
title | Termo de uso |
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;
} |
...
id | 3 |
---|---|
label | List |
title | Instalação do fluig |
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;
} |
...
id | 4 |
---|---|
label | Label |
title | Instalação do fluig |
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;
} |
...
id | 5 |
---|---|
label | Input Text |
title | Instalação do fluig |
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;
} |
...
id | 3 |
---|---|
label | TextArea |
title | Instalação do fluig |
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;
} |
...
id | 3 |
---|---|
label | Select |
title | Instalação do fluig |
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 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:
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> |
Nota | ||
---|---|---|
| ||
Referências aos arquivos externos, como por exemplo o JQuery mobile, não devem ser utilizados em processos que tenham o uso off-line, pois quando a utilização é feita de forma off-line apenas o formulário é armazenado. |
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, deve ser transferido para o Formulário Mobile.
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, abra o arquivo html Mobile em um navegador no desktop. Se não houverem inconsistências, o formulário provavelmente abrirá corretamente também no Fluig Mobile. |
...
Serviços
Para utilizar serviços internos ou externos ao Fluig fluig é necessário instanciar, executar e tratar o retorno do serviço via javascript. Para webservices, recomendamos o uso de jQuery Soap.
...
- O uso de serviços internos do Fluigfluig, como por exemplo Dataset, devem ser feitos preferencialmente nas 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 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.
...
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 Fluigfluig. Porem o produto lhe permite desenvolver um formulário customizada para dispositivos móveis consultando estes campos.
...
Bloco de código | ||
---|---|---|
| ||
<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> |
O acesso aos Datasets é igual à Web, a seguir são apresentados dois exemplos:
1) Built-in Datasets: este tipo de Dataset permite navegar em dados das entidades do próprio Fluigfluig, como usuários, grupos, processos ou tarefas por exemplo. Esses datasets são pré-definidos no produto e não podem ser alterados pelo usuário;
Bloco de código | ||
---|---|---|
| ||
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"); } |
2) CardIndex Datasets: este tipo de Dataset permite navegar nos dados existentes em formulários de uma determinada definição de formulário publicada no Fluigfluig. 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 Fluigfluig;
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") ; } |
Para baixar um exemplo de formulário utilizando xmlPRC clique aqui.
Geolocalização em formulário
Bloco de código | ||
---|---|---|
| ||
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
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 |
Exemplo
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
- Formulário Mobile
Informações | ||
---|---|---|
| ||
Como podemos ver, o Formulário Web tem muitos campos e seu mapeamento para dispositivos móveis 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: |
Itens que estão em uma tabela podem ser transformados em um collapsible do jQueryMobile.
Ao acionar o botão '+', o item é expandido:
} |
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 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 | ||
---|---|---|
| ||
Para o funcionamento de anexos do formulário, o caminho dos arquivos devem ser relativos e não podem ser externos. |
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 |