Artigos Java Trabalhando com get/set no WaveMaker usando Widgets
Neste artigo iremos discutir um pouco sobre a manipulação de variáveis como setar valores, resgatar esses valores dentro dessa plataforma WaveMaker.

Variáveis

Entendemos como variáveis e elementos não constantes que dentre as mais diferentes razões e necessidades na programação necessitamos a todo o tempo. Sua definição na Wikipédia é:

"Variável, em Programação, é um objeto situado na memória que representa um valor ou expressão."

Em programação também é sabido que temos vários tipos de variáveis, que são de composição e tipos diferentes, como por exemplo as que usamos como tipos primitivos:

-Strings;
-Integer;
-Boolean;
-char;
entre outros...

Problema

Notei que depois de ter alguns artigos sobre o uso da ferramenta WaveMaker, alguns leitores pediram para que eu explicasse como abstrair variáveis de forma fácil e rápida, pois realmente não é da maneira convencional que estamos acostumados em outras IDEs.

Mãos à obra!


Exemplo 1 -Recuperando(get) - usando Widgets:

Crie um projeto novo e insira os componentes como descrito na figura abaixo:



fig.1

Note que inseri dois botões e um campo texto, para nosso primeiro exemplo.

No primeiro botão coloquei o nome, caption para get value, para pegar o valor que tiver no campo texto.

No segundo botão coloquei o nome, caption para set value, para colocar um valor qualquer no campo texto.

Agora selecione, clicando sobre o primeiro botão de get value e vá na aba propriedades e selecione a opção Events pois iremos atribuir um código que será disparado no evento onclick do botão.

Veja os passos também explicados na figura abaixo:



fig.2

Literalmente é isso. Na opção (marcada como o passo 3) dê um duplo clique sobre a opção onClick e selecione a opção JavaScript.



fig.3

Selecionando e abrindo a aba de código JavaScript.

Insira o código abaixo no método respectivo do seu botão:


button1Click: function(inSender) {
        try {
            alert(this.text1.displayValue);
        } catch (e) {
            console.error('ERROR IN button1Click: ' + e);
        }
    }
NOTA:neste comando usamos o this.text1.displayValue, mas você poderá usar o comando getDataValue, como veremos mais adiante.

O resultado será:



fig.4

-Setando(set) - usando Widgets:

No nosso segundo botão (set value), faremos os mesmos passos porém insira o código abaixo: 


button2Click: function(inSender) {
        try {
            this.text1.setDataValue('Hello My Friends');

        } catch (e) {
            console.error('ERROR IN button2Click: ' + e);
        }
    },
O resultado será:



fig.5

Note que o código que inserimos para o Hello My Friends está agora dentro da caixa de texto.

Exemplo 2 -Recuperando - usando HTML Content:

Podemos ainda criar nossos "espaços" HTML, usando um widget chamado Content, mas antes clique na Aba Source, para abrir seus códigos e selecione a aba seguinte chamada MarkUp .

Ainda vamos ver bastante coisas relativas a essa aba Markup que basicamente agora vai nos ajudar a criar um código HTML simples.

digite o seguinte código:



NOTA:nesta aba seus comandos serão selecionáveis através das tags <div> e o comportamento dos elementos HTML pelos eventos onclick. Mas você também pode colocar outros eventos HTML que preferir.

Neste caso inserimos dois campos, (inputs) dois botões (buttons) e cada um dentro de 2 divs em particular, sendo um div para o método getValor() e outro para setValor();

Mas onde estão esses métodos? Você pode estar se perguntando... Calma, primeiro entendamos essa tela a qual precisamos compreender que é na verdade um container de comandos HTML, dispostos e separados por elementos <div> e que como cada qual é um elemento individual deve-se ter o id respectivo! Ou seja vamos usar esse div , chamando -o pelo id.

Vá até a aba Scripts do seu Source e crie os métodos descritos:


function getValor() {
    var a = document.getElementById('texto').value;
    alert("oi" + a);
}

function setValor() {
    document.getElementById('texto2').value = document.getElementById('texto').value;
}
Entenda que você precisou criar um código HTML e seu código JavaScript para chamá-los através de <div>.

Agora vamos fazer o seguinte, pegue o componente que mostro na imagem abaixo, chamado Content. Esse componente é o responsável para colar seu código HTML+JS como um container e dentro dele iremos direcionar os nomes de nossos <div>.

Basic Widgets->Formatting->Content



fig.6

pegue esse componente e arraste para a sua área Canvas.

Depois altere as propriedades listas e selecione em Content o nome da div correspondente ao seu código HTML.



fig.8

Dando certo seu HTML aparecerá no seu Canvas. Faça isso para quantos
desejar.

O resultado será:



Por enquanto ficamos por aqui pessoal, espero que tenham gostado. Um forte abraço++