Árvore de páginas

Versões comparadas

Chave

  • Esta linha foi adicionada.
  • Esta linha foi removida.
  • A formatação mudou.

...

Vídeos How to

Informações
titleAssitaAssista!
  • 5.3.2
    Antes de iniciar o desenvolvimento de formulários assista a série de vídeos how to, clicando aqui.

 

Declaração <!DOCTYPE> HTML

Ao publicar um formulário não é recomendada recomendamos a utilização de declarações:

...

Nota
titleAtenção

Aplicando os valores: Para para visualizar todos os eventos de formulários disponíveis clique aqui.

 

FormController

...

O formController é o objeto que realiza a comunicação entre o formulário e a customização dos eventos. Esse objeto está disponível em cada um dos eventos de customização de
formulários através da variável form. A variável permite alterar os valores dos campos de um registro de formulário e também obter o estado de edição deles, por exemplo: se o
usuário está visualizando ou editando o registro de formulário. Veja a seguir os métodos disponíveis para a variável form:

...

Deck of Cards
effectDuration0.5
historyfalse
idsamples
effectTypefade
Card
defaulttrue
id1
labelPasso1

 

  • Para a criação de uma definição de formulário, na visão Explorador de pacotes deve-se acessar a pasta forms do projeto fluig, clicar com o botão direito e no menu acessar Novo > Formulário. 

 

Figura 1 - Novo Formulário.

 

Card
id2
labelPasso 2

 

  • Na tela de criação de definição de formulário, basta preencher o nome desejado e clicar em concluir.

Figura 2 - Nova Definição de Formulário.


Card
id3
labelPasso 3

 

  • Ao concluir, um pacote referente à definição de formulário é criado na pasta forms e o editor de formulário fica disponível para edição.

 

Figura 3 - Nova Definição de Formulário.


Card
id4
labelPasso 4

 

  • A partir do editor, todo o conteúdo HTML é desenvolvido. No exemplo um formulário simples de cadastro foi desenvolvido.

 

Figura 4 - Novo Formulário.

 

...

Deck of Cards
effectDuration0.5
historyfalse
idsamples
effectTypefade
Card
defaulttrue
id1
labelPasso1

 

  • Para a criação de um script de formulário no fluig, na visão Explorador de pacotes deve-se acessar a pasta forms do projeto fluig, clicar com o botão direito e no menu acessar Novo > Outras

 

Figura 5 - Criação de script evento da definição de formulário.

 

Card
id2
labelPasso 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.


Card
id3
labelPasso 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
id4
labelPasso 4

 

  • No exemplo selecionamos o evento displayFields, e o relacionamos a definição de formulário form_exemplo_fluig.

 

Figura 8 - Criação de script evento da definição de formulário.

 

Card
id5
labelPasso 5

 

  • Ao concluir a estrutura principal do método, estará disponível no editor.

 

Figura 9 - Criação de script evento da definição de formulário.

 

Card
id6
labelPasso 6

 

  • O evento utilizado como exemplo - validateForm, valida o preenchimento dos campos solicitação e usuário.

    O objeto formController, foi utilizado para verificar o valor dos campos, através da sintaxe ‘form.getValue(“fieldname”)’.

    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.

 

...

A apresentação de cada um dos tipos de log está condicionada a configuração do servidor de aplicação. Por exemplo, no JBoss®, por padrão, as mensagens do tipo info e warn são apresentadas no console do servidor e as do tipo debug , error e error são apresentadas no arquivo de log. Abaixo um exemplo de uso do log em script:

...

No exemplo acima estamos listando em um ComboBox todas todos os Volumes cadastradas cadastrados no fluig.

 

Caso seja necessária necessário 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ários criados no 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çõesnote
titleAtenção!

Para utilizar o zoom do fluig, é necessário estar utilizando o fluig Style Guide, para mais informações acesse https://style.fluig.com/

...

  • type: o atributo type para este componente obrigatoriamente é 'zoom'
  • name: nome do campo
  • data-zoom: parâmetros do zoom em formato json onde:
    • maximumSelectionLength: limite de registros selecionáveis, caso não seja informado, o valor padrão é 1.
    • placeholder: texto de placeholder, que irá aparecer no zoom. Pode ser utilizado para instrução.
    • displayKey: coluna filtrável e de exibição após selecionado o registro
    • filterValues: atributo do dataset e valor para serem filtrados. Devem ser colocados em pares, separados por vírgula (,) onde o primeiro valor é o nome do campo e o segundo refere-se ao valor do campo.
    • 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.

...

Informações
titleNota

Devido a uma restrição dos navegadores, a url do programa de zoom externo ao fluig deverá estar no mesmo domínio em que o 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 segundo passo é programar dentro da aplicação externa uma função JavaScript que devolva para o campo do formulário o valor escolhido para o usuário na aplicação externa. Essa aplicação externa poderá ser desenvolvida em qualquer tecnologia de desenvolvimento web existente no mercado de , que a mesma possa realizar a execução de scripts JavaScript no lado do cliente. Segue exemplo de uma função JavaScript que passa o valor para o campo do formulário:

...

Nota
titleImportante

Para atualizações anteriores ao fluig 1.5.6, utilizar da seguinte maneira:

Bloco de código
languagejavascript
(...)
var colleagues = getDatasetValues("colleague", filter);
(...)

 

 

O Dataset para definição de formulário utiliza a mesma chamada do Dataset de entidades, como no caso do usuário. Entretanto ao invés de passarmos como parâmetro o nome do Dataset passaremos o número da definição de formulário, por exemplo: 

Bloco de código
languagehtml/xml
function displayFields(form,customHTML) {
     // Obtendo o usuario via dataset
     filter = new java.util.HashMap();
     filter.put("RNC_nr_solicitacao",new java.lang.Integer(20));
     registrosform = DatasetFactory.getDatasetValues(Number(676),filter);
	 log.info("Usuário de Abertura: "+ registrosform.get(0).get("RNC_colab_abertura"));
}

...

No novo modelo implementado, agora o parser do formulário aplicará as mudanças do pai filho da seguinte forma:

<table tablename="teste"> - A propriedade tablename determina que Agora agora abaixo dessa tabela será implementado um sistema de pai filho dentro da definição de formulário. A tag <table> terá seus parâmetros varridos na busca de outros parâmetros relacionados à técnica que serão explicados mais adiante nesse texto. Será criada uma outra <table> ao redor da tabela principal que conterá um  botão botão que permite adicionar novos filhos. Isso não ocorrerá apenas em casos em que a propriedade noaddbutton também seja informada em conjunto com  com a propriedade tablename.                                                                                                    

<TR> (primeiro abaixo do table) - A primeira tag de <TR> encontrada dentro da tabela, é visualizada como uma tag que conterá os labels da tabela pai filho a e à esta tag será adicionada uma coluna <TD> contendo o ícone e a função de eliminar filhos existentes em tela. Está nova coluna será a primeira coluna a esquerda da tabela.

<TR> (Segundo abaixo do table) - A técnica pai filho irá ocultar a linha <TR> original e transforma lá transformá-la no seu “template mestre” para criação dos filhos daquela tabela. Cada vez que o botão “novo” for acionado todo o conjunto de campos existentes dentro desse segundo <TR> será replicado em tela com os dados iniciais definidos para estes campos.

...

A técnica também suporta novos atributos que podem ser passados eu e usados para customizar a técnica pai e filho. São elas:

noaddbutton - Remove o botão “adicionar” da tela no momento da edição do formulário. Isso permite ao desenvolvedor escolher aonde ele vai colocar a função  que que criará os filhos em tela podendo amarrar a chamada da função em um link texto ou uma figura ou outro objeto do html.

...

addbuttonlabel - Determina que qual texto será posto no botão de adicionar filhos da técnica. Caso não seja informado o botão virá com o texto padrão (novo).                                    

...

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 fluig:
  • Português (pt_BR);
  • Inglês (en_US);
  • Espanhol (es).

...

Deck of Cards
effectDuration0.5
historyfalse
idsamples
effectTypefade
Card
defaulttrue
id1
labelPasso1

 

  • Para gerar os arquivos de propriedades, na visão Explorador de Pacotes, deve-se acessar o arquivo HTML do formulário a ser traduzido, clicar com o botão direito e acessar a opção Externalizar Strings.

 

Figura 1 - Menu Contextual Externalizar Strings.

 

Card
id2
labelPasso 2

 

  • Os arquivos contendo as literais são criados na pasta do formulário.

Figura 2 - Arquivos Properties na Pasta do Formulário.


Card
id3
labelPasso 3

 

  • Informe os valores correspondentes às literais para o idioma de cada arquivo.

 

Figura 3 - Edição de um Arquivo Properties.


...

Da mesma forma que é possível traduzir a interface do formulário é possível traduzir também mensagem retornadas nos eventos do formulário. Para isso basta utilizar a função i18n.translate dentro dos eventos passando uma propriedade que esteja pré-definida no arquivos .properties deste mesmo formulário. Abaixo um exemplo de uma implementação que irá retornar para o usuário uma mensagem de acordo com o definido no arquivo properties. 

 

Bloco de código
languagejavascript
if (form.getValue('meeting') == null || form.getValue('meeting').trim().length() == 0) {
		throw i18n.translate("proidade_definida_no_arquivo_properties");
	}

...

Para isso, no editor, clique em “Regras de formulário”, Adicionar, selecione o campo e a atividade e em ação, escolha “Validar”. Clique na lupinhalupa.

Essa validação serve para bloquear alguns valores. O usuário não vai informar quais são os valores permitidos, pelo contrário, ele vai configurar quais os valores proibidos.

Por exemplo, se quiser configurar para que um campo idade só permita valores maiores que 18, a configuração deve ser: idade menor 18. Ou seja, é uma validação restritiva e não permissiva.

No caso de uma combinação de fatores, como idade entre 12 e 18 anos:

Bloco de código
Satisfazer UMA das condições
idade menor que 12
idade maior que 18
Ou então, caso queira excluir um determinado grupo intermediario, ou seja, ninguém com idades entre 18 e 60:
 
Bloco de código
Satisfazer TODAS as condições
idade maior que 18
idade menor que 60

 

...