Data

20 jan, 2014

Utilizando collections para criação de formulários tabulares no Oracle APEX – Parte 02

Publicidade

Olá, pessoal! Vou continuar o artigo de como criar formulários tabulares no Oracle APEX utilizando collections. Nesta segunda parte do artigo, vou demonstrar como deve ser criada a página de formulário.

Criando a página de edição de pessoas

Neste momento, deve-se criar uma página com um formulário simples baseado na tabela de pessoas (TB_PESSOAS). Este formulário representará as informações sobre a pessoa, os formulários de endereço e telefone que serão criados posteriormente.

LL01

 

LL02

 

LL03

Preparando a página

Agora deve ser inserida a função Javascript descrita abaixo no atributo “HTML Header” da página criada:

LL04

 

<script language="JavaScript" type="text/javascript">
 function f_set_collection_value(pThis,pSeqId,pAttribNo,pAttribValue,pTipo,pCollection){ 

    var get = new htmldb_Get(null,$x('pFlowId').value,
              'APPLICATION_PROCESS=setMemberAttribute',0);
    get.addParam('x10',pCollection);
    get.addParam('x09',pSeqId);
    get.addParam('x08',pAttribNo);
    get.addParam('x07',pAttribValue);
    get.addParam('x06',pTipo);
    gReturn = get.get();
    get = null;
    if(gReturn != ""){
      var str_esc = escape(gReturn);
      alert(unescape(str_esc)); 
      return false;
    }
 }
</script>

A função f_set_collection_value é responsável por executar o processo setMemberAttribute através de AJAX assincronamente, ele irá atualizar os valores dos atributos da collection que será utilizada. Seus parâmetros são:

  • pThis – Identifica qual o item que acionou a função;
  • pSeqId – SEQ_ID do registro da collection que será alterado;
  • pAttribNo – Número do atributo que será alterado. Por exemplo, N001 está para ID_TELEFONE logo o número do atributo é 1, C002 está para ramal logo o número do atributo é 2, ou seja, deve ser passado o valor 2 para atualizar o item C002;
  • pAttribValue – Valor que será atualizado;
  • pTipo – Tipo do atributo que será alterado. Por exemplo, N001 está para ID_TELEFONE (que é um número) logo o tipo do atributo é N, C002 está para RAMAL (que é um caractere) logo o tipo do atributo é T. Os tipos que podem ser informados são; N – Número, T – Texto, D – Data, B – CheckBox;
  • pCollection – Nome da collection que será atualizada.

Exemplo:

f_set_collection_value(this,'||seq_id||',2,this.value,'T','TELEFONE')
  • This – Item que esta acionando a função;
  • Seq_id – ID do registro da collection que será atualizado;
  • – Número do atributo que será atualizado. No caso N002;
  • – Tipo do atributo que será atualizado. No caso um atributo caractere, N002;
  • TELEFONE – Nome da collection que será atualizada.

Importante: esta função pode ser utilizada para a atualização de qualquer atributo de qualquer collection. Cuidado para não alterar a collection ou o atributo errado!

Criando o formulário tabular

Finalmente, após tanta preparação (que é necessária), vamos criar o formulário tabular baseado em collections. Edite a página. Vamos criar o formulário tabular para manutenção dos registros na tabela de telefone.

Crie uma nova “Região” do tipo “Relatório Clássico”. Ela deve ser desse tipo, pois nesta versão do APEX não permite mais de um relatório interativo por página:

LL05

Na origem da Região, deve-se utilizar a query abaixo. Esta query é baseada na view APEX_COLLECTIONS filtrando os dados da collection identificada como TELEFONE, que foi carregada no processo de ON-LOAD da página (será explicado mais à frente como efetuar esta carga).

SELECT
apex_item.hidden (30, 
                  seq_id,
                  NULL,
                  'f30_' || seq_id) ||


apex_item.hidden (31, 
                  id_telefone,
                  NULL,
                  'f31_' || seq_id) ||


apex_item.hidden (32, 
                  id_pessoa,
                  NULL,
                  'f32_' || seq_id) ||


apex_item.checkbox (33, 
                    ativo,
                     ' onchange="f_set_collection_value('||seq_id||','||seq_id||',4,this.checked,''B'',''TELEFONE'')"',
                    'S'
                    ) ativo,
                    
apex_item.checkbox (34, 
                    principal,
                     ' onchange="f_set_collection_value('||seq_id||','||seq_id||',3,this.checked,''B'',''TELEFONE'')"',
                    'S'
                    ) principal,                    

apex_item.text
             (35,
              descricao,
              100,
              20,
              'style="width:100%;" onchange="f_set_collection_value(this,'||seq_id||',1,this.value,''T'',''TELEFONE'')"',
              'f35_' || seq_id
             ) descricao,
             
             
apex_item.text
             (36,
              ddi,
              100,
              255,
              'style=" width:60px; text-align:right;" onchange="f_set_collection_value(this,'||seq_id||',3,this.value,''N'',''TELEFONE'')"',
              'f36_' || seq_id
             ) ddi,


apex_item.text
             (37,
              ddd,
              100,
              255,
              'style=" width:60px; text-align:right;" onchange="f_set_collection_value(this,'||seq_id||',4,this.value,''N'',''TELEFONE'')"',
              'f37_' || seq_id
             ) ddd,
             
apex_item.text
             (38,
              numero,
              100,
              255,
              'style=" width:200px; text-align:right;" onchange="f_set_collection_value(this,'||seq_id||',5,this.value,''N'',''TELEFONE'')"',
              'f38_' || seq_id
             ) numero,
             
             
apex_item.text
             (39,
              ramal,
              100,
              255,
              'style=" width:60px; text-align:right;" onchange="f_set_collection_value(this,'||seq_id||',2,this.value,''T'',''TELEFONE'')"',
              'f39_' || seq_id
             ) ramal           


 FROM (  SELECT SEQ_ID            SEQ_ID,
                N001              ID_TELEFONE,
                N002              ID_PESSOA,
                C001              DESCRICAO,
                N003              DDI,
                N004              DDD,
                N005              NUMERO,        
                C002              RAMAL,
                C003              PRINCIPAL,        
                C004              ATIVO,      
                D001              DATA_INCLUSAO,
                C005              USUARIO_INCLUSAO,
                D002              DATA_ALTERACAO,
                C006              USUARIO_ALTERACAO,
                MD5_ORIGINAL      CHECKSUM
           FROM APEX_COLLECTIONS A
          WHERE A.COLLECTION_NAME = 'TELEFONE') TB_TELEFONE_V

Veja que estamos utilizando a API APEX_ITEM para criar os itens no formulário tabular. Esta API é responsável por gerar um objeto do tipo INPUT TEXT no padrão do APEX que permite controlar os valores de sessão do item. Não crie os itens HTML manualmente, inserindo as tags HTML.

Os parâmetros são os seguintes:

  • p_idx – Nome  do item, exemplo quando passado 1 será concatenado o f e publicado como f01 o id do item. Representa o atributo NAME do elemento HTML;
  • p_value – Texto que será demonstrado no valor do item;
  • p_size – Tamanho do item. Representa o atributo WIDTH do elemento HTML;
  • p_maxLength – Quantidade máxima de caracteres permitidos no item;
  • p_attributes – Outros atributos HTML. Pode-se declarar qualquer atributo do elemento HTML, por exemplo STYLE, ID e etc;
  • p_item_id – ID do item, deve ser utilizado um número único entre todos os registros que serão exibidos na página.

Por exemplo:

apex_item.text
             (39,
              ramal,
              100,
              255,
              'style=" width:60px; text-align:right;" onchange="f_set_collection_value(this,'||seq_id||',2,this.value,''T'',''TELEFONE'')"',
              'f39_' || seq_id
             ) ramal
  • 39 – Id do Item. Deve ser único entre todos os itens tabulares da página;
  • Ramal – Coluna da query, que contêm o valor que será exibido no item;
  • 100 – Tamanho de exibição do item;
  • 255 – Quantidade máxima de caracteres permitidos no item;
  • ‘style=” width:60px; text-align:right;” onchange=”f_set_collection_value(this,’||seq_id||’,2,this.value,”T”,”TELEFONE”)”‘                           – Estilo com tamanho de exibição do item, alinhamento do item. O Evento onkeypress, dispara a função que inibe a digitação de caracteres não numéricos (não será abordado nesse momento). O Evento onchange, dispara a função que atualiza a collection com os dados alterados (Veja o fluxo na parte 1 do artigo);
  • ‘f39_’||seq_id  – Id do item concatenado com o número sequêncial que identifica o registro da collection, assim, criando um identificador único do item na página.

Observações:

Veja que os itens do tipo hidden estão concatenados juntamente com o item do tipo checkbox. A ideia é evitar que para cada item hidden seja criado uma nova coluna no formulário.

O parâmetro p_idx deve ser único entre todos os itens em todos os formulários tabulares criados. Independentemente da região que o item se encontra. Por exemplo, não é permitido que existam dois itens com ID 20 na mesma página, mesmo que um deles esteja na região Telefone e outro na região Endereços.

O parâmetro p_attributes pode ser utilizado para determinar as propriedades do item. Por exemplo, style =”width:200px”.

Neste exemplo, optei por fazer a query na view APEX_COLLECTIONS aninhada na query da região para simplificar a explicação. Normalmente criamos uma view para encapsular toda a select, pois geralmente utilizamos essa select em outros pontos da página, como por exemplo durante a validação dos dados do formulário.

Edite a região criada e altera a propriedade “Display As” dos itens para “Standard Report Column”:

LL06

Conclusão

Na segunda parte do artigo, criamos a página para criar os formulários tabulares e passamos a entender mais a fundo quais são os elementos que envolvem a solução, foi explicado como criar o formulário tabular com os itens criados dinamicamente. Na terceira e última parte do artigo vou demonstrar como carregar as informações na collection e processar as informações inseridas nela pelo usuário.

Até lá!