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);
}
}
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);
}
},
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;
}
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
O resultado será:
Por enquanto ficamos por aqui pessoal, espero que tenham gostado. Um forte abraço++
Confira outros conteúdos:
Perguntas frequentes
Nossos casos de sucesso
Eu sabia pouquíssimas coisas de programação antes de começar a estudar com vocês, fui me especializando em várias áreas e ferramentas que tinham na plataforma, e com essa bagagem consegui um estágio logo no início do meu primeiro período na faculdade.
Estudo aqui na Dev desde o meio do ano passado!
Nesse período a Dev me ajudou a crescer muito aqui no trampo.
Fui o primeiro desenvolvedor contratado pela minha
empresa. Hoje eu lidero um time de desenvolvimento!
Minha meta é continuar estudando e praticando para ser um
Full-Stack Dev!
Economizei 3 meses para assinar a plataforma e sendo sincero valeu muito a pena, pois a plataforma é bem intuitiva e muuuuito didática a metodologia de ensino. Sinto que estou EVOLUINDO a cada dia. Muito obrigado!
Nossa! Plataforma maravilhosa. To amando o curso de desenvolvimento front-end, tinha coisas que eu ainda não tinha visto. A didática é do jeito que qualquer pessoa consegue aprender. Sério, to apaixonado, adorando demais.
Adquiri o curso de vocês e logo percebi que são os melhores do Brasil. É um passo a passo incrível. Só não aprende quem não quer. Foi o melhor investimento da minha vida!
Foi um dos melhores investimentos que já fiz na vida e tenho aprendido bastante com a plataforma. Vocês estão fazendo parte da minha jornada nesse mundo da programação, irei assinar meu contrato como programador graças a plataforma.
Wanderson Oliveira
Comprei a assinatura tem uma semana, aprendi mais do que 4 meses estudando outros cursos. Exercícios práticos que não tem como não aprender, estão de parabéns!
Obrigado DevMedia, nunca presenciei uma plataforma de ensino tão presente na vida acadêmica de seus alunos, parabéns!
Eduardo Dorneles
Aprendi React na plataforma da DevMedia há cerca de 1 ano e meio... Hoje estou há 1 ano empregado trabalhando 100% com React!
Adauto Junior
Já fiz alguns cursos na área e nenhum é tão bom quanto o de vocês. Estou aprendendo muito, muito obrigado por existirem. Estão de parabéns... Espero um dia conseguir um emprego na área.