Histórico da Página
Índice
| Índice | ||||||
|---|---|---|---|---|---|---|
|
Objetivo
...
O objetivo deste guia é descrever o desenvolvimento de formulários avançados no fluig, abordando algumas regras iniciais para dar uma base para outras personalizações e customizações.
Pré-requisitos
...
Antes de iniciar o desenvolvimento de formulários, assista aos vídeos how to no item Criação de formulários.
Não utilize a declaração
...
<!DOCTYPE> HTML
...
Ao publicar uma definição de um formulário não é recomendada recomendamos a utilização de declarações <!DOCTYPE>:
| Bloco de código | ||
|---|---|---|
| ||
<!DOCTYPE>, Ex: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> |
A utilização dessas pode impactar em algumas funcionalidades da definição de formulário ou do Workflow na utilização do navegador Microsoft® Internet Explorer ®Microsoft® Internet Explorer®.
Pré-requisitos
Customização de Formulários
A customização de definição de formulários é realizada pela criação de scripts na linguagem JavaScript. O código de implementação de cada script é armazenado em banco de dados e dispensa o uso de quaisquer outros arquivos, como por exemplo, “plugin.p”.
...
Antes de iniciar o desenvolvimento de formulários, assista aos vídeos how to no item Criação de formulários.
Desenvolvimento de Formulários
...
Para facilitar o desenvolvimento do formulários, você pode usar o Fluig Studio Os eventos de customização para a definição de formulários são criados a partir do plugin Fluig Designer. Para publicar um formulário siga os passos conforme exemplo a seguir:
| Deck of Cards | ||||||||||||||||||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| ||||||||||||||||||||||||||||||||||
|
Após a criação de uma definição de formulário é possível realizar a criação de scripts para customização. O eventos para formulários são criados conforme passos a seguir:
...
| effectDuration | 0.5 |
|---|---|
| id | samples |
| history | false |
| effectType | fade |
| Card | ||||||
|---|---|---|---|---|---|---|
| ||||||
Figura 5 - Criação de script evento da definição de formulário.
|
...
| id | 2 |
|---|---|
| label | Passo 2 |
Selecione a opção Script Evento de definição de formulário e clique no botão Avançar.
Figura 6 - Criação de script evento da definição de formulário.
...
| id | 3 |
|---|---|
| label | Passo 3 |
Nesta tela é necessário informar os campos pertinentes ao evento que se deseja adicionar e clicar no botão Concluir.
Figura 7 - Criação de script evento da definição de formulário.
| Card | ||||
|---|---|---|---|---|
| ||||
Figura 8 - Criação de script evento da definição de formulário.
|
| Card | ||||
|---|---|---|---|---|
| ||||
Figura 9 - Criação de script evento da definição de formulário.
|
Exportando o formulário para o Fluig
...
Após o desenvolvimento, você pode enviar para o fluig o seu formulário. Para saber como e ter mais informações sobre as formas de armazenamento de dados, você pode consultar a nossa documentação sobre Exportando formulários e Modelos de Armazenamento de Formulários.
Garantindo a criação dos campos
Apenas são considerados os campos dentro da tag <form> do html principal usando o atributo name do html. Caso tenha outros arquivos html que compõe o formulário ou criação de campos dinâmicos, estes podem não conseguir ser persistidos corretamente no banco de dados.
Caso necessário, você pode criar os campos como não visíveis para que o fluig entenda que existe aquele campo (ainda que depois será substituído pela sua customização)
Boas práticas de desenvolvimento
Evite a inserção de scripts diretamente no arquivo html. Opte por usar um arquivo .js separado para isso e importe-o no seu html através da tag
| Bloco de código | ||||
|---|---|---|---|---|
| ||||
<script src="minhasfuncoes.js"></script> |
Estrutura de pastas
O Fluig não tem suporte a estrutura de pastas no formulário. Por isso, mesmo que você organize seus arquivos em pastas, como no exemplo abaixo:
| Bloco de código | ||||
|---|---|---|---|---|
| ||||
.
├── Cadastro de itens.html
├── img
│ └── logo.png
└── js
└── itens.js
|
Para o fluig, o seu formulário será entendido assim:
| Bloco de código | ||||
|---|---|---|---|---|
| ||||
.
├── Cadastro de itens.html
├── logo.png
└── itens.js
|
Ainda que nenhum arquivo seja perdido, para evitar confusões nas declarações no formulário o ideal é criar os formulário com todos os arquivos na raiz. A exceção são os eventos de formulário como será visto nessa documentação
...
| id | 5 |
|---|---|
| label | Passo 5 |
No exemplo utilizamos o evento validateForm para validar o preenchimento dos campos solicitação e usuário.
Além disso é possível notar que o recurso FormControler, já detalhado neste treinamento, foi utilizado para verificar o valor dos campos através de ‘form.getValue(“fieldname”)’.
Este e outros eventos poderiam ser utilizados para qualquer customização que fosse necessária.
Ao exportar a definição de formulário os eventos pertinentes a estes também serão exportados para o servidor Fluig.
Figura 10 - Criação de script evento da definição de formulário.
Visão Geral
Import HTML Content
Conteúdo das Ferramentas
Tarefas