Histórico da Página

...

O objetivo deste guia é descrever algumas personalizações no desenvolvimento de formulários avançados no fluigFluig, abordando conteúdos como a configuração de máscaras dos campos, utilização de campos combo e zoom, utilização de serviços de dados e utilização de regras de formulário.

...

Neste capítulo será demonstrado como interagir com alguns tipos de controles do formulário que possuem características especiais, como por exemplo, o preenchimento do conteúdo de um ComboBox através da utilização de Datasets.

O fluigFluig, por padrão realiza a importação da biblioteca JavaScript jQuery em jQuery em todos os formulários, exceto nos casos onde o formulário já a realize. Nestes casos o fluig Fluig identificará que o jQuery já está definido e não realizará a importação novamente.

Caso  Caso o formulário utilize outra biblioteca que possa entrar em conflito com o jQuery,  será necessário definir no formulário a variável javascript fluigjQueryjavascript fluigjQuery, com valor false, que o fluig Fluig deixará de fazer tal importação, porem algumas outras funcionalidades como a máscara de campos do fluigFluig, também serão desabilitadas.

...

Para auxiliar o desenvolvedor de formulários, o fluig Fluig permite habilitar máscaras por campo, bastando informar o atributo "mask" e a máscara desejada aos objetos objetos input do tipo text.

<input name="cep" type="text" mask="00000-000">

...

                     
                     Data: "00/00/0000"
                  Horário: "00:00:00"
              Data e Hora: "00/00/0000 00:00:00"
                      CEP: "00000-000"
                 Telefone: "0000-0000"
            Telefone(ddd): "(00) 0000-0000"
Telefone(ddd + 9ºdígitos): "(00) 90000-0000"
           Placa de carro: "SSS 0000"
                      CPF: "000.000.000-00"
                     CNPJ: "00.000.000/0000-00"
                       IP: "099.099.099.099"
              porcentagem: "#00.000,00%"
				    Valor: "#00.000.000.000.000,00"

...

Geralmente é necessário popular um ComboBox de um formulário com um determinado grupo de valores.

No fluig Fluig isto é possível através da utilização de Datasets. Os Datasets são serviços de dados padrão disponibilizados pelo fluigFluig, como por exemplo, o serviço de “Volumes” do produto.

...

No exemplo acima estamos listando em um ComboBox todos os Volumes cadastrados no fluigFluig.

Caso necessário a ordenação dos dados provindos de um dataset interno, indicamos a criação de um dataset (simples ou avançado) que execute o interno e ordene os dados, antes de alimentar o componente combobox.

...

Permite a consulta de entidades e outros formulários criados no fluig Fluig para seleção de dados pelo usuário. Para utilizar este componente basta inserir um campo de texto com alguns parâmetros específicos.

...

...

Para o caso de alguns datasets que o nome dos campos são compostos de duas partes com separação por ponto, somente deve ser usado o nome somente da parte após o ponto. Por exemplo, no dataset de colleagueGroup aonde será o filtrado pelo campo "colleagueGroupPK.colleagueId" o código ficaria dessa maneira:

...

Este método é padrão durante a execução de um formulário dentro do fluig Fluig a partir da atualização 1.5.5 e recarrega o Zoom por inteiro, colocando os novos valores de filterValues. Em que:

...

...

Em situações aonde os dados dos elementos externos ao fluig Fluig são muito volumosos é recomendada a construção de uma aplicação externa ao fluig Fluig que fará o papel de zoom para o usuário. Abaixo será descrita uma técnica JavaScript aonde será possível chamar uma aplicação externa e a mesma poderá devolver o dado solicitado pelo usuário para um campo do formulário do fluigFluig.

O primeiro passo para implementação dessa técnica é criar uma lógica em JavaScript que irá abrir uma nova janela chamando a aplicação externa que irá se comportar como zoom para o formulário. Vamos utilizar e explanar o comando window.open neste exemplo:

...

URL Aplicação Externa: É a url da aplicação externa que funcionará como zoom para o fluigFluig. Ex: http://servidor/applications/forneczoom.asp.

...

...

O código abaixo irá programar um formulário do fluig Fluig contendo um campo e um botão lateral que irá invocar a janela da aplicação externa:

...

Onde:

Id do form no formuário fluigFluig: Caso algum id tenha sido definido para a tag <form> no formulário do fluig Fluig é interessante referenciar neste comando. Pode ser utilizada também a referência de coleção forms dentro do comando (forms[posição]). 
Ex: FornecedorForm, forms[0].

...

Valor: Dado que será passado para o campo do formulário do fluigFluig.

O exemplo a seguir irá programar um exemplo de zoom externo feito inteiramente em HTML com dados estáticos apenas para ilustração. Os dados de zoom podem provir de qualquer fonte seja ela interna ou externa ao fluigFluig.

<html>
  <head>
  <title>Lista de fornecedores</title> 


<script language="JavaScript"> 
function escolha(valor) { 
  // Teste de validade do Opener 
  if (window.opener && !window.opener.closed) { 
      // gravando o valor do campo cod_fornec 
      window.opener.document.forms[0].cod_fornec.value = valor; 
  } 
   window.close(); 
} 
</script>
 
  </head>
  <body>   

  <!-- Os dados abaixo estão fixos mas poderiam ser montados a partir de qualquer origem. --> 

  <table border="1" cellpadding="5" cellspacing="0"> 
  <tbody><tr bgcolor="#cccccc"><td colspan="2"><b>Exemplo aplicacao ECM</b></td></tr> 
  <tr bgcolor="#cccccc"><td><b>Codigo</b></td><td><b>NASDAQ</b></td></tr> 
  <tr><td><a href="javascript:escolha('TOTVSv3')">TOTVS</a></td> 
  <td><a href="javascript:escolha('TOTVSv3')">TOTVSv3</a></td></tr> 
  <tr><td><a href="javascript:escolha('RM1')">RM</a></td> 
  <td><a href="javascript:escolha('RM1')">RM1</a></td></tr> 
  <tr><td><a href="javascript:escolha('DTS3')">Datasul</a></td> 
  <td><a href="javascript:escolha('dts3')">Dts3</a></td></tr> 
  <tr><td><a href="javascript:escolha('Lgx2')">Logix</a></td> 
  <td><a href="javascript:escolha('Lgx2')">Lgx2</a></td></tr> 
  </tbody>
  </table> 

  <!-- Fim dos dados --> 

  </body>
</html>

...

Ao clicar em um dos itens da tela de zoom será chamada a função JavaScript escolha que ira enviar o valor para o campo cod_fornec no formulário do fluigFluig.