Índice

...

Widgets Mobile 

No fluigFluig, agora é possível movimentar solicitações workflowvisualizar widgets por meio das páginas, 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.

Recomendações para processos com formulário Mobile

. Porém existem algumas particularidades que precisam ser lembradas para que o usuário tenha uma boa experiência com este recurso.

Todas as interfaces devem ser desenvolvidas nativamente, com exceção da visualização dos widgets da página que será renderizada pelo webview nativo da plataforma.

Qualquer tipo de autenticação requerido pela widget é de inteira responsabilidade do servidor do Fluig (SSO, por exemplo), o Mobile é apenas responsável por mostrar o HTML retornado pelo servidor no webview.

Recomendações para o desenvolvimento de widgets:

1. HTML Formulário Responsivo: Hoje no mercado existem variados tamanhos de telas e resoluções, por isso qualquer formulário desenvolvida html desenvolvido 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 da widget devem ser atraentes para os usuários, conseguimos isso através de CSS, por para isso recomendamos a utilização do fluig do Fluig style guide. 

3. Usabilidade: O formulário  A widget deve ser fácil de usar, contendo apenas o campos importantes para tarefas ou processoconteúdo necessário para usuário.

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

    

   Image Removed

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

   

   

   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 interno pode ser feita 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, esse 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, 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.
   
6. Converter widgets já existentes para Mobile : Para agilizar o desenvolvimento focado em mobile e web é necessário utilizar frameworks que tratam a responsividade, recomendamos a utilização do Fluig Style Guide.
7. Elementos Suportados: Widgets Mobile suportam 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
       
       

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

Benefícios

Porque devo usar formulários no Mobile?

...

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.

Acompanhe a seguir, movimentando-se pelas abas abaixo, as formas de criação de formulários:

...

...

Configuração de Formulário Mobile em Processos

É possível permitir a criação do Formulário Mobile também através do Gerador de Formulário, conforme passo a seguir:

Passo 1: Criar ou editar um processo existente e acionar o item Formulário.

Image Removed

Passo 2: Selecionar a pasta destino onde esse formulário será publicada, também atribua um título e descrição. Após isso, clique em Criar Formulário.

Image Removed

Passo 3:  Inclua os campos e em cada um deles, selecione se este será também adicionado ao formulário para dispositivos móveis, clicando na opção Formulário Mobile?.

Image Removed

...

Upload via Navegação de Documentos

No upload via navegação de documentos é feito com uma publicação de um formulário único, que deve atender os requisitos de funcionamento para web e Mobile.

Image Removed

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:

<html >
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.5.2.min.js"></script>
</head>
<body>
</ body >
</html>

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

Image Removed

Image Removed

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

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.

Como identificar que 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:

...

• AfterProcessing
• AfterSaveNew
• BeforeProcessing
• DisplayFields
• EnableFields
• InputFields
• ValidadeForm

...

function displayFields(form, customHTML) {
   if ( form.getMobile() != null && form.getMobile()) {
     form.setValue('mtr_usuario', new java.lang.Integer(123456));
   }
}

...

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

Desenvolvendo widgets com suporte a exibição no Fluig Mobile

Cada uma das plataformas utiliza um browser diferente para a renderização de HTML. 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:

application.type=widget
application.code=news
application.title=Not\u00EDcias da Semana
application.description=Exibe uma lista com as \u00FAltimas not\u00EDcias da semana
application.category=KitIntranet	
application.renderer=freemarker
application.icon=icon.png
developer.code=developer
developer.name=TOTVS S.A.
developer.url=http://www.fluig.com
view.file=view.ftl
edit.file=edit.ftl
application.uiwidget=true
application.resource.js.1=/resources/js/news.js
application.resource.css.2=/resources/css/news.css
simple.deploy=false
application.mobileapp=true

if (WCMAPI.isMobileAppMode()) {
    this.DOM.find('a').attr('href', '#');
}

O aplicativo do Fluig, em alguns casos, utiliza webviews para visualização de páginas. Os webviews utilizam como base o navegador padrão do dispositivo, como por exemplo, o Safari quando o dispositivo em questão utiliza o sistema iOS (iPads e iPhones). 

Quando o navegador Safari de um dispositivo com sistema iOS encontra um iframe dentro da página, ele ajusta a largura do iframe tomando como base a largura do conteúdo exibido dentro do iframe, e ignora qualquer parâmetro de largura definido pelo desenvolvedor. Esse comportamento só acontece no navegador Safari (e, portanto, em webviews que utilizam o Safari como base) de dispositivos com o sistema iOS.

Para contornar esse comportamento, é necessário desenvolver uma técnica de CSS que ajustará o iframe com largura de 100% e altura de 100%, sendo essa altura necessária para compensar a ausência de scroll no iframe, um parâmetro necessário para o funcionamento da técnica de CSS.

<iframe style="width: 1px; min-width: 100%; height: 100%;" scrolling="no"></iframe> 

Consumo de Datasets via xmlRPC

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

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

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

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

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.

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ão 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. A tabela abaixo apresenta a versão mínima dos browsers de cada plataforma que deve ser considerada durante o desenvolvimento:

...