Problemas comuns em desenvolvimento Fluig.

Neste guia irei abordar o que denominei: problemas comuns em desenvolvimentos na plataforma fluig, que nada mais são que problemas que eu experimentei durante o desenvolvimento de alguns projetos na plataforma.

O uso desses componentes faz com que, ao ser renderizados em tela, as características do seu desenvolvimento sofram algumas alterações e você poderá passar por alguns problemas.

Vamos aos problemas, em caso de dúvida deixe nos comentários.

Se você deseja uma consultoria acesse este link.

1 – Como esconder campos do tipo ZOOM no Fluig?

Se em algum momento você precisar esconder campos ZOOM no fluig você poderá ter problemas.

Ao inserir no código <input type=’zoom’ /> o fluig irá interpretar aquele campo e aplicará algumas modificações, que irão formar a solução ZOOM, por este motivo você não conseguirá ocultar este campo diretamente.

Até este momento eu não consegui achar uma solução para o ZOOM, por este motivo a minha sugestão é criar um campo do tipo select – mas só funcionará para seleções de dados pré-definidos e com pouca quantidade.

Caso você tenha esta resposta, por favor deixe nos comentários.

2 – Como esconder campos no Fluig.

2.1 – Show / Hide

Para esconder campos do tipo SELECT no fluig, basta utilizar o evento de formulário displayFields, entretanto você poderá utilizar como alternativas também o jQuery, para tratar situações dinâmicas no próprio formulário.

$('#sel_campo').hide();
$('#sel_campo').show();

Se optar por utilizar jQuery / Javascript no formulário, você poderá ter algumas dificuldades, que listo abaixo.

2.2 – Formulários Fluig: Os comportamentos da visão e edição.

Ao movimentar o processo você poderá perceber que os comandos SHOW / HIDE não irão funcionar, pois existem duas diferenças no comportamento do fluig, o primeiro deles é o formulário de edição, enquanto que o segundo é o formulário que lista os dados.

Saber dessa diferenciação é importante, mas o que é mais importante é entender o comportamento do software ao armazenar os dados, por este motivo sugiro que seja estudado as principais tabelas de bancos de dados do fluig, disponíveis neste link, para acompanhar e entender o comportamento do software.

Durante a tela de exibição você não conseguirá acessar as propriedades dos campos do tipo INPUT, pois eles são alterados.

2.3.1 – Tela de Edição.

Exibir campos na tabela de edição é a forma mais simples, pois o comportamento do software é aquele que esperamos durante o desenvolvimento. O Formulário real é renderizados em tela e o acessamos de forma direta.

simples assim.
$('#meucampo').hide();

2.3.2 – Tela de Exibição.

Os problemas começam aqui, durante a exibição em tela o formulário é renderizados de outra forma, onde o sistema omite os campos do tipo INPUT e substituem por tags SPAN e/ou DIV.

Uma forma de verificar em qual tela está é utilizar os eventos de formulários para descobrir modo do formulário, se é Edição ou Exibição, e em seguida enviar esta informação para o formulário.

// logo será acrescentado algum exemplo.

Apesar da plataforma sugerir utilizar eventos de formulários como displayFields e enableFields esta solução pode não ser a suficiente para alguns casos.

Partindo do pressuposto que o desenvolvedor passe por uma situação que o formulário precise ser dinâmico – ou seja – enquanto o usuário manipula as informações o formulário em tela precisa ser reestruturado, irei abordar a manipulação dos elementos html utilizando javascript.

O exemplo abaixo é de um código que analisa os elementos HTML do formulário, acessando suas propriedades através do seu ID, desta forma é possível assumir a forma do elemento e manipular este elemento de acordo com sua forma.

arquivo.js

var meucampo = $('#meucampo');
var no = $(meucampo)[0].nodeName ;
	
if(no=="SELECT" && meucampo.val()=='VALOR_ESPERADO')   {
	
console.log('Ao verificar que o nó é do tipo SELECT, já é possível assumir que estamos na tela de edição. ');

}else if(regime[0].innerText=="VALOR_ESPERADO" && no=="SPAN") ){
   console.log("Foi verificado que a tag do HTML utilizada para renderizar a tela é do tipo SPAN, logo posso assumir que esta é a tela de exibição.') ; 
	  
	  }

3 – Como utilizar o readonly em INPUT SELECT no Fluig

Por alguma forma o campo do tipo SELECT no fluig, quando alimentado por dados de dataset, perde a manipulação dos elementos readonly.

Uma forma alternativa de contornar este problema é desabilitar os eventos de mouse do campo, aplicando a propriedade style=’pointer-events:none‘.

Infelizmente, aplicar este recurso diretamente ao SELECT não surtirá nenhum efeito, por isso a abordagem é inserir o seu campo SELECT dentro de uma DIV e em seguida manipular as propriedades desta DIV.

Obs: este recurso só irá permitir desabilitar o mouse, o teclado permanece inalterado.

	$('#div_sel_meucampo' + linha).prop('style', 'pointer-events:none');