Como usar a API JavaScript para estender as funcionalidades do APEX

O JavaScript continua ganhando tração dentro do mundo Oracle. Além do banco estar aceitando código JS, o APEX que é uma plataforma low code que gera aplicações rapidamente está fornecendo uma API JS para manipulação de seus compoentes.

Na semana passada foi ao apresentado no Oracle Office Hours por mim (https://www.mundojs.com.br/author/pkunzel) um breve tutorial de como usar a está API para esta comunicação.

Segue então abaixo o vídeo para curtam e comentem o nele o que acharam.

Caso você queira conhecer o APEX, basta criar uma conta em apex.oracle.com para usa-lo sem custo. Por ser uma base de dados bem restrita, não dá para montar um sistema de grande, mas todas as funcionalidade estão lá

Live sobre Front-end JS e APEX

Olá pessoal, hoje é mainha primeira live solo apresentando sobre programação Front-end com o Oracle APEX. Nele estarei falando de diversas funcionalidades nas ações dinâmicas (event listeners) e como usar expressões javascript para estender as funcionalidades do código.

Onde?

A live será hoje, dia 21/06/22 as 20:00 no youtube pelo link:

Link da Live

Quais serão os tópicos?

Estarei falando de Oracle APEX, Ações Dinâmicas, JavaScript e jQuery

Isso ai, quem tiver interesse pode dar um pulo lá ou assistir depois.

Como usar JavaScript no Oracle APEX

O que é o Oracle APEX?

Para aqueles que não conhecem, o Oracle APEX é uma plataforma gratuita de desenvolvimento low code disponibilizado pela Oracle e que você pode testar tanto criando uma conta https://apex.oracle.com/, criando direto em cima de uma banco oracle em sua maquina quanto instanciando na nuvem.

Se você nunca mexeu nele, então eu recomendo começar pelo link que passei para ver se a plataforma atende as necessidades e pelo simples fato de ser mais rapido de fazer tudo funcionar.

Imagem do Dashboard do APEX
Dashboard do APEX

Nossas postagens sobre APEX

Veja aqui mais postagens nossas sobre o tópico: https://www.mundojs.com.br/tag/apex/

Onde o JavaScript se encaixa nisso?

Caso você ja tenha acessado o link ou acessou antes de continuar lendo você deve estar se perguntando, onde o JavaScript vai ser usado aqui? Se eu colocar JavaScript não vou estar deixando de usar a plataforma da forma correta?

Como muito pode ser feito sem programar e sem intervenção direta de código, eu espero que você tenha feito essas perguntas, pois elas são importantes.

A resposta é simples, você pode sim trabalhar com o Javascript usando a API JavaScript disponibilizada e pode fazê-lo em múltiplos níveis.

Por exemplo, coisas como

// caixas de mensagem
apex.message.alert(texto);
apex.message.confirm(texto, funcaoCallback);

// definir valores
apex.item(identificador).setValue(valor)

// chamadas AJAX
apex.server.process(nomeProcess, dadosEnviados, funcaoCallback);

Podem ser feitas com funcionalidades (blocos lógicos) low code como

  • alert
  • confirm
  • set value
  • execute server side code, set value ou refresh

Mesmo assim, é importante que saber que temos opções que recebem suporte e que estão disponíveis na API. por isso acho importante evitar código que modele/acesse diretamente as propriedades como

// caixas de mensagem
alert(texto)
confirm(texto)
$( seletor ).dialog();

// definir valores
document.querySelector(seletor).value = valor;
$(selector).val(valor)

// chamadas AJAX
fetch(url, opcoes)
$.ajax(url);

Por mais que estes métodos funcionem, ja me deparei com casos que o framework (não só no APEX) mudou e com isso a funcionalidade deixou de acontecer ou teve um comportamento inesperado. Problemas como

  • seletores mudarem dentro do framework
  • links serem ajustados
  • componentes complexos serem reestruturados

Entre outras opções são comuns com o crescimento das plataformas, especialmente quando elas usam conjuntos de ferramentas de suporte.

Conclusão

Essa foi uma postagem rápida tentando falar um pouco da melhor forma de trabalhar como um desenvolvedor front end no APEX e mostrar algo, que na minha opinião, é muito importante e precisa ser feito com basntate estudo e atenção

Utilizando API JavaScript no Oracle APEX

Este será um artigo curto em uma série de postagens mostrando como utilizar a API JavaScript disponibilizada para o Oracle Application Express (APEX).

É comum que sistemas precisem de mensagens de alerta e confirmação quando certas ações ocorrem. Podemos querer avisar o usuário que a assinatura dele está para expirar ou queremos garantir que ele não está apagando um registro sem querer.

Solução com JavaScript puro

A um tempo atrás, seria usado o alert e confirm:

alert(“teste”);

confirm(“Você tem certeza que deseja excluir este item?”);

Que fazem o papel desejado, no entanto são um tanto simples e não se adaptam ao layout da página. Mas se estes itens te atendem ao seu projeto, você pode parar de ler aqui e acessá-los diretamente por ações dinâmicas no sub-item notification conforme a imagem abaixo:

Solução com Region e Ação Dinâmica:

Além da opção com JavaScript puro, no Apex você pode:

  • Criar uma Region;
  • Dar a posição Inline Dialog a ela;
  • Definir seu template como Inline Dialog ou Inline Popup;
  • Criar ou adicionar a uma ação dinâmica do tipo Open Region.

Então isso vai permitir abrir uma tela em branco que você precisa tratar:

Para telas simples e repetitivas como um alert e um confirm é muito trabalho que acaba sendo multiplicado pelo tamanho do seu sistema e necessidade. Mas novamente, se você tem uma necessidade mais sofisticada, ai acima está a solução

Solução com a API JavaScript

Uma solução muito boa que é disponibilizada para podermos chamar uma tela de aviso é através da API JavaScript para o APEX. Neste caso, podemos nos valer de diversas chamadas com efeitos visuais diferentes que ajudam a dar uma cara melhor e a padronizar a sua aplicação.

apex.message.alert(mensagem, callback)

Através desta função podemos chamar em tempo de execução um alert pronto para exibir qualquer mensagem. Caso você queria executar alguma coisa após o alert ser fechado pelo usuário, basta passar um callback como segundo parâmetro. Senão nem precisa informá-lo.

apex.message.alert(“Olá Mundo”);

apex.message.confirm(mensagem, callback)

Similar ao alert, o confirm tem a mesma estrutura e parâmetros. Como ele espera que o usuário clique em OK ou Cancelar, é mais importante termos uma função de callback para verificar o que foi clicado.

apex.message.confirm("Você concorda?\n Clique em OK para continuar.", function( okPressed ) {
    console.log(`Pressionou no OK: ${okPressed}`);
});

apex.message.showPageSuccess( mensagem )

Caso você queira algo menos intrusivo e que seja apenas uma mensagem na tela para seus usuários, vale a pena testar a função showPageSucess que precisa apenas de uma string para saber qual texto exibir. O mesmo deverá aparecer no canto superior da tela (se você não alterou o CSS dele).

apex.message.showPageSuccess("Algo aconteceu com sucesso!!");

Encerrando

Então era isso ai. Essas são algumas das formas mais simples de mostrar informações dentro do apex. Elas não são as únicas e caso você tenha duvidas ou precisa de algo mais especifico, vale a pena conferir a documentação neste link:

https://docs.oracle.com/database/apex-5.1/AEAPI/apex-message-namespace.htm

Gostou deste artigo? Comente abaixo!