Voltar para a página Gerador de interface
Voltar para Layout de tela

Funções JavaScript

Layout de tela

  • Utilizado para definir o layout de uma determinada tela criada pelo gerador de interface.

Comandos Javascript

O gerador de interface permite que sejam adicionados comandos em linguagem Javascript nas interfaces criadas.
Estes comandos possuem diversas utilidades, como por exemplo, realizar validações, desabilitar ou habilitar campos, esconder objetos de tela, dentre outras.
Para utilizar os comandos Javascript, no agrupamento dos campos do layout de tela, deve-se clicar sobre a descrição Formulário. Neste momento, no canto direito, abrirá uma caixa de texto com a descrição Javascript, conforme a imagem abaixo:

O gerador de interface fornece várias funções já pré-definidas, fazendo somente a chamada da função sem a necessidade de programá-la Javascript. São elas:

setValor(elemId, valor) - Define um valor para o campo.

  1. elemId: O id do elemento no formulário html (alias do campo).
  2. valor: Valor a ser inserido no campo referente ao elemId informado.
  • Exemplo: Inserção do valor COD01 no campo de id PES_1_PES_CODTEL:
setValor('PES_1_PES_CODTEL', 'COD01');

setValor(elemId, valor, indexDet) - Define um valor para o campo.

  1. elemId: O id do elemento no formulário html (alias do campo);
  2. valor: valor a ser inserido no campo referente ao elemId informado.
  3. indexDet: Quando o campo for de um detalhe, pode definir um item especifico. Se não definido o valor será inserido em todos os itens do detalhe (inicia sempre em zero “0”).
  • Exemplo: Inserção do valor COD01 no campo de id PES_1_PES_CODTEL do primeiro registro do detalhe:
setValor('PES_1_PES_CODTEL', 'COD01', 0);

getValor(elemId, indexDet) - Recupera o valor de um campo.

  1. elemId: O id do elemento no formulário html (alias do campo);
  2. indexDet: Quando o campo for de um detalhe, pode definir um item especifico. Se não definido o valor será inserido em todos os itens do detalhe (inicia sempre em zero “0”).
  • Exemplo: Recupera o valor do campo de CEP:
getValor('PES_1_PES_CEP');
  • Exemplo: Quando for detalhe e definido para pegar o primeiro item do detalhe:
getValor('PES_1_PES_CEP', 0);

escondeObjeto(elemId, indexDet) - Esconde um campo da tela.

  1. elemId: O id do elemento no formulário html (alias do campo);
  2. indexDet: Quando o campo for de um detalhe, pode definir um item especifico. Se não definido o valor será inserido em todos os itens do detalhe (inicia sempre em zero “0”).
  • Exemplo: Esconder o campo de cep:
escondeObjeto('PES_1_PES_CEP');
  • Exemplo: Esconder o campo de cep do primeiro item do detalhe:
escondeObjeto('PES_1_PES_CEP', 0);

mostraObjeto(elemId, indexDet) - Esconde um campo da tela.

  1. elemId: O id do elemento no formulário html (alias do campo);
  2. indexDet: Quando o campo for de um detalhe, pode definir um item especifico. Se não definido o valor será inserido em todos os itens do detalhe (inicia sempre em zero “0”).
  • Exemplo: Mostar o campo de cep que foi escondido:
    • mostraObjeto('PES_1_PES_CEP');
  • Exemplo: Mostar o campo de cep do primeiro item do detalhe que foi escondido:
mostraObjeto('PES_1_PES_CEP', 0);

desabilitaObjeto(elemId, indexDet) - Desabilita um campo da tela.

  1. elemId: O id do elemento no formulário html (alias do campo);
  2. indexDet: Quando o campo for de um detalhe, pode definir um item especifico. Se não definido o valor será inserido em todos os itens do detalhe (inicia sempre em zero “0”).
  • Exemplo: Mostar o campo de cep que foi escondido:
    • desabilitaObjeto('PES_1_PES_CEP');
  • Exemplo: Mostar o campo de cep do primeiro item do detalhe que foi escondido:
desabilitaObjeto('PES_1_PES_CEP', 0);

copiarValor(elemIdDestimo, elemIdOrigem) - Cópia o valor de um campo para outro.

  1. elemIdDestimo: é o id do elemento no formulário html que receberá o valor;
  2. elemIdOrigem: é o id do elemento no formulário html que será copiado.
  • Exemplo: Copiar o valor do cep para o cep de cobrança:
copiarValor('PES_1_PES_CEPCOB', 'PES_1_PES_CEP');

copiarValorSeVazio(elemIdDestimo, elemIdOrigem) - Cópia o valor de um campo para outro se o campo de destino estiver vazio.

  1. elemIdDestimo: é o id do elemento no formulário html que receberá o valor;
  2. elemIdOrigem: é o id do elemento no formulário html que será copiado.
  • Exemplo: Copiar o valor do cep para o cep de cobrança se o cep de cobrança estiver vazio
copiarValorSeVazio('PES_1_PES_CEPCOB', 'PES_1_PES_CEP');

adicionarEvento(elemId, evento, funcao) - Adiciona um evento ao um elemento de tela. Caso tenha o return false ou algum campo com erro não propaga o evento.

  1. elemId: é o id do elemento no formulário html;
  2. evento: é o evento que irá ser observado.
  3. funcao: é a função javascript a ser executada.
  • Exemplo: Ao clicar no botão gravar ser disparado a função “replicaEnderecoCobranca”:
adicionarEvento("btGravar","click", replicaEnderecoCobranca);
function  replicaEnderecoCobranca(){…};

adicionaCampoComErro(elemId, msg) - Adiciona um campo e mensagem com erro. Caso seja utilizada em uma função definida no adicionarEvento a exibição das mensagens será automática, caso contrário deve ser chamada a função exibeMsgCampoComErro() para exibir as mensagens e campos destacados. Para limpar estas mensagens e campos destacados deve-se chamar a função removeCamposComErro().

  1. elemId: é o id do elemento no formulário html;
  2. msg: Mensagem do erro (deve indicar a qual campo se refere).
  • Exemplo: Não permitir informar o valor “X” no código e nome:
adicionarEvento("btGravar","click", gravaAntes);
function gravaAntes(){
var nome = getValor('PES_1_PES_NOME');
if(nome == "X"){
adicionaCampoComErro("PES_1_PES_NOME", "O nome '" + nome + "' não é permitido.");}
var codigo = getValor('PES_1_PES_CODTEL');
if(codigo== "X"){
adicionaCampoComErro("PES_1_PES_CODTEL", "O código'" + nome + "' não é permitido.");}}

paginaCarregada(funcao) - Função a ser invocada quando a página estiver carregada.

  1. funcao: é a função javascript a ser executada (apenas o nome da função sem parenteses) não possui retorno;
  • Exemplo: Quando a página estiver carrega será executado a função “escondeCampos”:
paginaCarregada(escondeCampos);
function  escondeCampos(){…}

obrigatorioSe(elemId, funcao, msg) - Obriga a informa o campo conforme resultado da função (true obriga informar e false não obriga).

  1. elemId: é o id do elemento no formulário html que será obrigatório.
  2. funcao: é a função javascript a ser executada (deve retornar true ou false).
  3. msg: mensagem a ser exibida quando campo for obrigatório (quando null será mensagem padrão).
  • Exemplo: Obriga a informar a número da carteira militar quando do sexo masculino e maior de 18 anos.
 obrigatorioSe("PES_1_PES_CARRES",ehSexoMasculinoMaior18,"Número do documento militar é obrigatório.");

calculaIdade(data) - Calcula a idade da data passada com parâmetro (com base data atual).

  1. data: a ser calculada no formato dd/MM/yyyy.
  • Exemplo: Calcula a idade da data “01/01/2000”.
calculaIdade(“01/01/2000”);

getValorSql(codigo, params) - Retorna um valor de uma consulta sql. O Sql deve ser previamente cadastrado na tela de “Layout de tela”.

  1. codigo: Código do sql cadastro
  2. params: Este parametros é um array então os valores deve estar contidos entre[], se não tiver nenhum filtro no sql não e necessário declarar o mesmo. Caso algum os itens do deste array seja um outro array no sql deve tarar este filtro com operador “in”.
  • Exemplo: Recuperação do id da parcela.

SQl: 

SELECT PAR_ID
  FROM TB_PARCELA 
    WHERE PAR_CODPAR = #PARAM[INT] 
      AND PAR_VALBRU IN (#PARAM[DEC:IN]) 
      AND PAR_SITPAG IN (#PARAM[INT:IN]) 
      AND PAR_DATVCT = #PARAM[DATA]

JavaScript: 

var sitPag = [1,2];	
var result = getValorSql("SQL_1", ["1", getValor("PIDC_1_PIDC_NOTA"), sitPag, getValor("PES_1_PES_DATNAS")]);
alert(result);

Onde:

  • “SQL_1” é o código do sql a ser executado, previamente cadastrado “1” é um parâmetro fixo que será injetado no primeiro filtro só sql PAR_CODPAR = #PARAM[INT]
  • getValor(“PIDC_1_PIDC_NOTA”) é um campo decimal do detalhe que será injetado no filtro de seguinte do sql PAR_VALBRU IN (#PARAM[DEC:IN])
  • sitPag é uma lista de valores fixos em javascript que será injetado no parâmetro de próxima ordem PAR_SITPAG IN (#PARAM[INT:IN])
  • getValor(“PES_1_PES_DATNAS”) é um parâmetro de data que será injetado na próxima ordem no sql PAR_DATVCT = #PARAM[DATA]

getValoresSql(codigo, params) - Retorna várias linhas e colunas de consulta sql. Chamada idem getValorSql, mudando apenas a forma do retorno que é uma lista. Cada item da lista corresponde uma do sql, em cada linha as colunas possuem o mesmo alias do sql.

  • Exemplo:

SQl: 

SELECT PAR_ID, PAR_DATVCT
        FROM TB_PARCELA 
        WHERE PAR_CODPAR = #PARAM[INT] 
               AND PAR_VALBRU IN (#PARAM[DEC:IN]) 
               AND PAR_SITPAG IN (#PARAM[INT:IN]) 
               AND PAR_DATVCT = #PARAM[DATA]

JavaScript: 

var sitPag = [1,2];
 
var result = getValoresSql("SQL_1", ["1", getValor("PIDC_1_PIDC_NOTA"), sitPag, getValor("PES_1_PES_DATNAS")]);
if(result != null){//Não teve nenhum resultado
for (i = 0; i < result.length; i++) {//Percorre as linhas
alert(result[i].PAR_ID + "->" + result[i].PAR_DATVCT);
}
}

msg(mensagem, tipoMsg, id) - Adiciona mensagem na área de mensagens do sistema.

  1. mensagem: Texto a ser exibido.
  2. tipoMsg: Informação (I), Advertência (A), Erro (E).
  3. id: Identificador para mensagem, necessário para poder realizar a exclusão da mesma.
  • Exemplo:
msg(“O valor informado não é válido para este campo”, "E");

ou 

msg(“O valor informado não é válido para este campo”, "E", "PES_1_PES_NOME");

removeMsg(id) - Remove as mensagens da área de mensagens do sistema. Quando não informado o parâmetro “id” serão removidas todas as mensagens (inclusive as geradas pelo sistema). Quando informado o parâmetro “id” será permitido excluir apenas mensagens que foram adiciona pela função “msg(mensagem, tipoMsg, id)” e que tenha informado o parâmetro “id”.

  1. id: Identificador da mensagem.
  • Exemplo 1:
removeMsg();

ou 

removeMsg("PES_1_PES_NOME")
  • Exemplo 2: Adicinado o evento ao mudar no nome quando o nome for “Maria” emite a mesagens caso contrário remove a mesma.
adicionarEvento("PES_1_PES_NOME", "change", naoPermiteNome);
function naoPermiteNome(){
var nome = getValor('PES_1_PES_NOME');
if(nome == "Maria"){
msg("O nome '" + nome + "' não é permitido.", "E", "PES_1_PES_NOME");
}else{removeMsg("PES_1_PES_NOME");}}

destacaCampoErro(elemId, indexDet) - Destacar um campo com a borda diferente informado que está com erro.

  1. elemId: é o id do elemento no formulário html.
  2. indexDet: Quando o campo for de um detalhe, pode definir um item especifico. Se não definido mostra todos os campos correspondentes do detalhe (inicia em zero “0”).
  • Exemplo:
destacaCampoErro('PES_1_PES_CEP');

Quando for detalhe e definido para destacar o primeiro item do detalhe. 

destacaCampoErro('PES_1_PES_CEP', 0);

removeDestacaCampoErro(elemId, indexDet) - Remover destaque de um campo com erro.

  1. elemId: é o id do elemento no formulário html.
  2. indexDet: Quando o campo for de um detalhe, pode definir um item especifico. Se não definido mostra todos os campos correspondentes do detalhe (inicia em zero “0”).
  • Exemplo: Remove o destaque do campo de cep.
removeDestacaCampoErro('PES_1_PES_CEP');

Quando for detalhe e definido para remover o destaque do primeiro item do detalhe. 

removeDestacaCampoErro('PES_1_PES_CEP', 0);

focus(elemId, indexDet) - Adiciona focus a um campo

  1. elemId: é o id do elemento no formulário html.
  2. indexDet: Quando o campo for de um detalhe, pode definir um item especifico. Se não definido mostra todos os campos correspondentes do detalhe (inicia em zero “0”).
  • Exemplo: Aplica o foco no campo de cep.
focus('PES_1_PES_CEP');

Quando for detalhe e definido para aplicar o foco no primeiro item do detalhe. 

focus('PES_1_PES_CEP', 0);

escondeAddExcluirDet(detalheId) - Esconde as ações(icones) de adicionar/excluir do detalhe
detalheId: Id do detalhe que será escondido os icones (Excluir/Adicionar)
Exemplo: id do detalhe “idiomas”

escondeAddExcluirDet(“idiomas”);

mostraAddExcluirDet(detalheId) - Mostra as ações(icones) de adicionar/excluir do detalhe
detalheId: Id do detalhe que será mostrado os icones (Excluir/Adicionar)
Exemplo: id do detalhe “idiomas”

mostraAddExcluirDet(“idiomas”);

Para pegar o ID do detalhe, abra a interface, adicione um detalhe e clique no primeiro campo do detalhe, clique com o botão direito e depois em Inspecionar elemento. O ID está sendo informado no ID do input.



No campo ID do Input apresenta formPrincipal:idFormacaoacadDapessoa:0:FAP_1_FAP_CARHOR.
Porém o ID do detalhe é apenas FormacaoacadDapessoa.

Exemplo: formPrincipal:idListadeCursos:0:CUR_1_CUR_NOMCUR.
Retiramos o que está em vermelho e temos o ID ListadeCursos.


* Eventos em javascript
* Campos pré definidos
* Propriedades do componente - Avançado

Voltar para a página Gerador de interface
Voltar para Layout de tela

  • (edição externa)