Como adicionar bibliotecas de terceiros
Este tutorial explica quais procedimentos devem ser realizados para adicionar bibliotecas de terceiros no Maker.
Primeiro passo é obter a biblioteca, para este exemplo será utilizada uma biblioteca recém criada, esta biblioteca conterá uma classe, com o nome “Externa” e dois métodos cujos nomes serão ‘Metodo1()’ e ‘Metodo2()’.
public class Externa {
public long Metodo1(long num1,long num2){
long soma = (num1\*2)+(num2\*2);
return(soma);
}
public String Metodo2(){
String msg = "Utilizando biblioteca de terceiros";
return(msg);
}
}
Esta classe foi salva no pacote ‘maker’.
Depois de obter o ‘.jar’ , o mesmo deverá ser copiado para o contexto da aplicação no diretório 'WEB-INF/lib' e o serviço do Webrun deverá ser reiniciado para que a biblioteca/jar seja carregada.
Neste exemplo será criada uma função na API para utilizar um dos métodos.
No Maker abra a janela de funções (Projeto -> Funções) e clique em novo.
Defina os parâmetros da função:
Na aba servidor escreva o código da função:
Código:
protected final Variant BTerceiros() throws Exception {
maker.Externa classeTerceiros = new maker.Externa();
return VariantPool.get(classeTerceiros.Metodo2());
}
Perceba que para instanciar a classe é necessário passar o nome do pacote ’nome_do_pacote.classe’.
Salve a função e feche a janela de funções.
Agora crie um fluxo que executará esta função.
Neste fluxo deverá conter 1 processamento.
No montador de expressões use a função ‘Alertar aguardando Ok’ para exibir a mensagem na tela e como parâmetro utilize a função recém criada para executar a biblioteca de terceiros.
Salve o fluxo e vincule a um evento.
Se tudo estiver correto ao executar no Webrun irá ser exibida a seguinte mensagem:
Caso deseje utilizar o Metodo1 segue o script da função:
protected final Variant somaTerceiros(Variant val1 , Variant val2) throws Exception {
long numero1 = val1.getLong();
long numero2 = val2.getLong();
maker.Externa classeTerceiros = new maker.Externa();
return VariantPool.get(classeTerceiros.Metodo1(numero1,numero2));
}
Observação: Caso não deseje criar uma função na API basta utilizar a função Executar Java.
Exemplo:
Existem duas formas de utilizar variáveis do fluxo nas funções Executar Java e Executar Javascript:
-
Por referência - passamos a referência da variável para a função. Para utilizar, no conteúdo da função, você pode usar a seguinte sintaxe:
<%<Nome da variável>%>Exemplo: return VariantPool.get(classeTerceiros.Metodo1(
<%val1%>.getLong(),<%val2%>.getLong())); -
Por valor - passamos o valor íntegro da variável para a função. O sistema simplesmente substitui o valor no conteúdo da função antes de executá-la. Para utilizar, no conteúdo da função, você pode usar a seguinte sintaxe:
<%=<Nome da variável>%>Exemplo: return VariantPool.get(classeTerceiros.Metodo1(
<%=val1%>,<%=val2%>));
Como referenciar e chamar uma biblioteca Javascript
Para referenciar e utilizar uma biblioteca JavaScript, devemos utilizar a função Executar JavaScript.
Antes de utilizar a biblioteca, devemos referenciá-la no contexto. Para isso, executaremos o seguinte JavaScript:
webrun.include(<caminho relativo da biblioteca>);
Exemplo: webrun.include('MeusJS/biblioteca1.js');
Podemos também criar uma função na API chamada Incluir Javascript. Para isso, acesse o tópico Cadastro de Funções.
Para chamar funções da biblioteca, usamos também a função Executar Javascript:
Exemplo
Vamos mostrar um exemplo real para auxiliar a compreensão deste tutorial. Faremos um exemplo de como utilizar uma biblioteca de terceiros disponibilizada aqui que permite a criação de um dialog (uma caixa de alerta personalizada).
Primeiro, vamos descompactar o conteúdo disponibilizado em um diretório temporário e depois copiar o conteúdo da pasta <diretório temporário>\dialog\js para a pasta <sistemas>\Maker.Commons\MeusJS\. Assim, deveremos ter algo como ilustrado abaixo:
Faremos agora um fluxo e o colocaremos no evento ”Ao Entrar” de um formulário. Esse fluxo irá criar o nosso Dialog.
Primeiro deveram ser criadas as seguintes variáveis.
Logo após deveram ser adicionados os seguintes processamentos.
Processamento 1
Nesse processamento deve ser feito o includ das bibliotecas no webrun com o seguinte código.
webrun.include('MeusJS/dialog/jquery-1.8.2.min.js');
webrun.include('MeusJS/dialog/jquery-ui-1.8.24.custom.min.js');
Processamento 2
O CSS deve ser importado da seguinte forma, basta copiar todo o código do arquivo dialog.css que foi disponibilizado no download acima.
Processamento 3
O elemento lay deve ser obtido para a sua utilização posteriormente.
Processamento 4
O elemento a deve ser criada passando os parâmetros acima.
Processamento 5
Criar um elemento p para utilização conjunta ao próximo elemento.
Processamento 6
Um elemento div deve ser criado com os seguintes parâmetros.
Processamento 7
É preciso definir o conteúdo que irá ficar dentro do dialog.
Processamento 8
Aqui é definido o conteúdo que irá ficar dentro do elemento a. O mesmo será o botão que abrirá o dialog.
Processamento 9
Depois basta anexar o elemento p dentro do elemento div.
Processamento 10
Anexar o elemento a ao nosso lay.
Processamento 11
E anexar a div a lay.
Processamento 12
Esse é o script que irá fazer o dialog funcionar, sem ele a nossa caixa de dialog é uma simples div, o código é da seguinte forma.
$('#dialog').dialog({
autoOpen: false,
width: 600,
buttons: {
"Ok": function() {
$(this).dialog("close");
},
"Cancel": function() {
$(this).dialog("close");
}
}
});
$('#dialog\_link').click(function(){
$('#dialog').dialog('open');
return false;
});
No webrun o seguinte resultado será apresentado:
