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++