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 de formulário Mobile, estas serão tratadas no decorrer deste guia.
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, por isso recomendamos a utilização do fluig style guide.
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:
(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) Os campos email, tel, range, date, time, week não são suportados pelo Windows Phone e são apresentados como caixas de texto padrão.
Não está homologada a implementação de evento que utilizem Gestures (swipe, longpress, tap, entre outros) em formulário no fluig Mobile. |
Porque devo usar formulários no 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:
|
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:
<html > <head> <script type="text/javascript" src="http://code.jquery.com/jquery-1.5.2.min.js"></script> </head> <body> </ body > </html> |
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. |
A partir do fluig 1.5.2 (server), temos uma nova técnica para utilização de Pai e Filho e Zoom que vai facilitar em muito o desenvolvimento sobre 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.
Essas técnicas ainda não funcionam para Windows Phone e também para utilização off-line em qualquer plataforma móvel. Em breve teremos novidades! |
O fluig dispões de um serviço nativo para consumo de dados de datasets no componente de zoom. Não é permitido o uso de serviços personalizados para este componente. |
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 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 nome_do_anexo é uma String e corresponde ao nome do anexo que será salvo na listagem de anexos daquela solicitação.
Esta técnica quando implementada, também está disponível para o fluig web. No formulário web acessado pela plataforma, ao clicar no botão com o recurso showCamera você será direcionado para a aba Anexos apresentando a janela de escolha de arquivos.
|
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:
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:
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:
function beforeStateEntry(sequenceId){
var isMobile = getValue("WKMobile");
if (isMobile!=null && isMobile==true){
throw "Esse processo não pode ser executado pelo mobile.";
}
} |
<script src="http://URL_DO_SERVIDOR/webdesk/vcXMLRPC.js"></script> <script src="http://URL_DO_SERVIDOR/portal/resources/js/jquery/jquery-1.7.2.js"></script> |
Para atualizações anteriores ao fluig 1.5.6, utilizar da seguinte maneira:
|
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 fluig, 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;
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");
} |
Para atualizações anteriores ao fluig 1.5.6, utilizar da seguinte maneira:
|
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 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;
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 fazer o download de um exemplo de formulário utilizando xmlPRC clique aqui. |
3) Chamadas assíncronas: A partir do fluig 1.5.6, você também pode realizar chamadas assíncronas:
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) {}
});
|
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) {}
); |
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!");
}
} |
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.
| Para o funcionamento de anexos do formulário, o caminho dos arquivos devem ser relativos e não podem ser externos. |
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.
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 mínima dos browsers de cada plataforma que deve ser considerada durante o desenvolvimento:
| Versão mínima da plataforma | Versão mínima do browser |
|---|---|
| Windows Phone 8 | Internet Explorer 10 |
| Android 4.0 (Ice Cream Sandwich) | Webkit 534.30 |
| iOS 7 | Mobile Safari 9537.53 |
