Histórico da Página
...
| Nota | ||
|---|---|---|
| ||
Para o correto funcionamento do formulário no Fluigfluig, todos os campos de formulário devem estar dentro da tag <form> no HTML principal ou identificar o formulário para cada campo, conforme padrão HTML. O Fluig fluig utiliza internamente todos os campos de formulário que possuem a propriedade "name" para armazenamento das informações. Para formulários que armazenam dados em tabelas do banco de dados, existe a limitação de 1000 campos. Além disso cada campo pode ter no máximo 30 caracteres. Quando o formulário é armazenado em tabelas do banco de dados, existem alguns termos que não podem ser utilizados no atributo "name", pois são palavras reservadas de alguns sistemas de banco de dados. Abaixo é apresentada uma lista de termos reservados:
|
...
| Deck of Cards | ||||||||||||||||||||||||||||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| ||||||||||||||||||||||||||||||||||||||||||||
|
...
Todos os eventos da definição de formulário recebem a referência ao formulário. Através dessa referência é possível acessar os campos do formulário, acessar/definir o valor de um campo e acessar/definir o estado de apresentação do campo. Os detalhes de cada evento são apresentados nas próximas seções deste documento.
O Fluig fluig é possível utilizar log de execução nos eventos de customização. Através da variável global log é possível obter o feedback da execução de cada evento. Existem quatro níveis de log, são eles:
...
A seguir serão detalhados os eventos disponíveis para a customização de uma definição de formulário no Fluigfluig.
AfterProcessing
É o último evento a ser disparado para o formulário. O evento recebe como parâmetro uma referência ao formulário da definição de formulário.
...
Esse evento é disparado no momento em que os dados do formulário são passados para a BO responsável por formulário do Fluigfluig. O evento recebe como parâmetro uma referência ao formulário da definição de formulário. Exemplo:
...
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 todos os formulários, exceto nos casos onde o formulário já a realize. Nestes casos o Fluig fluig identificará que o jQuery já esta definido e não realizará a importação novamente. 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 fluigjQuery, com valor false, que o Fluig fluig deixará de fazer tal importação, porem algumas outras funcionalidades como a mascara de campos do Fluigfluig, também serão desabilitadas.
...
Para auxiliar o desenvolvedor de formulários, o Fluig fluig permite habilitar mascarás por campo, bastando informar o atributo "mask" e a máscara desejada aos objetos input do tipo text.
...
| Bloco de código | ||||
|---|---|---|---|---|
| ||||
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" |
| Nota |
|---|
| O Fluig fluig mobile não suporta o atributo mask. |
...
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 todas os Volumes cadastradas no Fluigfluig.
Caso seja necessária a ordenação dos dados provindos de um dataset interno, indicamos a criação de um dataset customizado que execute o interno e ordene os dados, antes de alimentar o componente combobox.
...
Permite a consulta de entidades e outros formulário 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 .
| Informações | ||
|---|---|---|
| ||
Para utilizar o zoom do fluig, é necessário estar utilizando o fluig Style Guide, para mais informações acesse https://style.fluig.com/ |
| Bloco de código | ||
|---|---|---|
| ||
<input <input type="zoom" name="colleaguec7_zoom1total" data-zoom="{ 'displayKey':'colleagueName', 'datasetId':'colleague', 'fields':[ { 'field':'colleagueId', 'label':'ID' },{ 'field':'colleagueName', 'label':'Nome', 'standard':'true', 'standardsearch':'true', },{ 'field':'login', 'label':'Login', 'search':'true' } ] }" /> |
Onde:
- type: o atributo type para este componente obrigatoriamente é 'zoom'
- name: nome do campo
- data-zoom: parâmetros do zoom onde:
- displayKey: valor de exibição após selecionado o registro.
- filterValues: atributo do dataset e valor para serem filtrados.
- datasetId ou cardDatasetId: opte por uma das opções:
- datasetId: é o nome do dataset (Built-in, CardIndex ou Customized).
- cardDatasetId: é o numero de outro formulário para consulta.
- fields: Estrutura do filtro
- field: atributo do dataset que será utilizado.
- label: descrição da coluna.
- standard: a coluna que será utilizada como ordenação padrão e valor do registro selecionado.
- search: a coluna que será utilizada para filtrar os registro.
...
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.
- Nome da Janela: Nome da janela que será utilizado pelo navegador do usuário como identificador. Para evitar a sobreposição de conteúdo em janela é recomendado que para cada zoom chamado por um mesmo formulário seja adicionado um nome diferente. Ex: “ZoomFormec”.
- Comandos Adicionais: Comandos adicionais utilizados para a criação da janela que irá conter a aplicação zoom. Ex: “width=230, height=230”.
| Informações | ||
|---|---|---|
| ||
Devido a uma restrição dos navegadores a url do programa de zoom externo ao Fluig fluig deverá estar no mesmo domínio em que o Fluig fluig se encontra. Caso contrário não será possível atribuir ao campo do formulário o valor escolhido para o zoom. Este problema ocorrerá por que os navegadores proíbem a pratica de codificação JavaScript cross-domain. |
...
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].
- Nome do Campo: Nome do campo que irá receber o valor passado para a função.
Ex: cod_fornec. - 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.
| Bloco de código | ||
|---|---|---|
| ||
<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.
Serviços de Dados
O Fluig fluig possui integração com dois tipos de serviços de dados, são eles: Dataset e Serviços Externos. Ambos podem ser usados em todos os eventos disponíveis para customização de definição de formulário.
...
É um serviço de dados que fornece acesso às informações, independente da origem dos dados. O Fluig fluig fornece Datasets internos que permitem acesso as entidades, como Usuários, Grupos de Usuários, entre outros. Consulte o cadastro de Datasets do Fluig fluig para obter a relação completa dos Datasets disponíveis e seus respectivos campos.
...
Por exemplo, para acessar o Dataset de usuários do Fluigno fluig no evento displayFields de uma definição de formulário:
...
É um serviço de dados que permite o acesso de aplicações de terceiros através do Fluigfluig. Este serviço de dados suporta dois tipos de conexão, são eles: AppServer do Progress® e Web Services.
Os serviços de dados são cadastrados e configurados a partir da função Visualização de Serviços do Fluig fluig Studio.
Para mais informações sobre o cadastro dos serviços consulte: Integração Com Aplicativos Externos. E para informações de utilização dos serviços nos eventos consulte: Desenvolvimento de Workflow.
...
Para incluir um novo formulário com suporte de dispositivos móveis, realize o procedimento padrão para exportação da definição de formulário e selecione os campos que irão compor o formulário mobile na tela antes da conclusão da exportação. Após a exportação será incluindo também outro arquivo HTML e marcando-o como "mobile" na pasta forms do projeto Fluigfluig.
Veja na imagem a seguir a tela de seleção mobile na exportação de uma definição de formulário:
...
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 customizado para dispositivos móveis consultando estes campos.
...
| Informações |
|---|
As literais e seus respectivos valores são informados em arquivos de propriedades com a extensão .properties para cada um dos idiomas desejados. Os idiomas suportados para a tradução são os mesmos suportados pelo Fluigfluig:
|
...
Ao exportar um formulário para o Fluigfluig, os arquivos de propriedades contendo as literais são publicados como anexos dele.
O formulário é apresentado no idioma que está configurado para o usuário corrente.
...
Visão Geral
Import HTML Content
Conteúdo das Ferramentas
Tarefas