Com o layout definido e a parte estática construída, partimos para o comporta- mento da aplicação e a interação com o usuário. A começar com os botões, o leitor notará que todos são instâncias da classe meuBotao criada no início do arquivo LZX, e que contêm um método para o eventoonclickdefinido no elemento <method event=”onclick”>. Ou seja, toda ins- tância desta classe invocará este método
Listagem 1.calculadora.lzx
<canvas width=”400” debug=”false”> <simplelayout axis=”y” spacing=”5”/> <script> <![CDATA[ var param1 = 0; var param2 = 0; var operacao = “”; function chamaServidor() { anm.doStart();
var p = new LzParam();
p.addValue(“ par1”, param1, true); p.addValue(“ par2”, param2, true); p.addValue(“ op”, operacao, true); myData.setQueryString(p);
myData.doRequest(); }
function mostraResultado() {
var resultado = myData.getPointer().xpathQuery( “RESULTADO/text()”);
Debug.write(resultado); visorResultado.setAttribute(
‘text’, param1 + operacao + param2 + “=” + resultado); anm2.doStart(); } function animaJanela() { tsp = janela.getAttribute(‘opacity’); if (tsp < 1) janela.animate(‘opacity’,+1,3500,true); else janela.animate(‘opacity’,-1,3500,true); } ]]> </script>
<dataset name=”myData” id=”myData”
src=”http://localhost:8080/calculadora.jsp” ondata=”mostraResultado()”/>
<class name=”meuBotao” extends=”button” width=”30”> <method event=”oncli ck”>
var textoBotao = this.getAttri bute(‘text’) ; var valorVisor = visor.getAttribute(‘text’); if (textoBotao == ‘+’ || textoBotao == ‘-’ || textoBotao == ‘/’ || textoBotao == ‘X’) { operacao = textoBotao; param1 = valorVisor.substring(1); visor.setAtt ribute(‘text’ , ‘ ‘); } else if (textoBotao == ‘=’) { param2 = valorVisor.substring(1); visor.setAtt ribute(‘text’ , ‘ ‘); chamaServidor(); } else if (textoBotao == ‘C’) { visor.setAtt ribute(‘text’ , ‘ ‘); } else { if (valorVisor == ‘0’) { visor.setAttribute(‘text’, ‘ ‘); }
visor.setAttribute(‘text’, valorVisor + textoBotao); }
</method> </class>
<text id=”visorResultado” bgcolor=”#ffcccc” width=”0”>
<animatorgroup id=”anm2” start=”false” process=”simultaneous”> <animator attribute=”wi dth” to=”150”
duration=”2500” motion=”linear”/>
<animator attribute=”op acity” from=”0” to=”100” duration=”2000”/>
</animatorgroup> </text>
<window id=”janela”>
<animatorgr oup id=”anm” start=”false ” process=”simu ltaneous”> <animator attribute=”x”
to=”100” duration=”1000” motion=”linear”/> <animator attribute=”y” to=”100” duration=”100 0”/> </animatorgroup>
<view bgcolor=”#666699” id=”minhaView”> <simplelayou t axis=”y” spacing=”5”/ >
<edittext id=”visor” text=” “ enabled=”fal se”/> <view bgcolor=”#666 699”>
<simplelayout axis=”x” spacing=”5”/> <meuBotao text=”1”/> <meuBotao text=”2”/> <meuBotao text=”3”/> <meuBotao text=”X”/> </view> <view bgcolor=”#666 699”>
<simplelayout axis=”x” spacing=”5”/> <meuBotao text=”4”/> <meuBotao text=”5”/> <meuBotao text=”6”/> <meuBotao text=”+”/> </view> <view bgcolor=”#666 699”>
<simplelayout axis=”x” spacing=”5”/> <meuBotao text=”7”/> <meuBotao text=”8”/> <meuBotao text=”9”/> <meuBotao text=”-”/> </view> <view bgcolor=”#666 699”>
<simplelayout axis=”x” spacing=”5”/> <meuBotao text=”C”/> <meuBotao text=”0”/> <meuBotao text=”=”/> <meuBotao text=”/”/> </view> </view> </window>
<button text=”Clique aqui” onclick=”animaJanela()”/> </canvas>
Edição 39• Java Magazine 73
74 Java Magazine•Edição 39
André Luís Monteiro
([email protected]. br ) é consultor sênior da Fiveware Solutions e tem as certificações SCJP, SCWCD e SCEA.
OpenLaszlo.org
Site oficial do OpenLaszlo que contém tutoriais e um fórum com participação da comunidade.
laszlosystems.com
Empresa que criou o Laszlo original. Disponibiliza aplicações comerciais bastante profissionais.
laszlomail.com
Exemplo de uma aplicação feita em Laszlo.
javamagazine.com.br/downloads/jm39/ jm-openlaszlo.zip
Listagem 2.calculadora.jsp
<%@ page contentType=”text/xml” %>
<%@ taglib prefix=”c” uri=”http://java.sun.com/jstl/core” %> <c:set var=”par1” value=”${param[‘par1’]}”/>
<c:set var=”par2” value=”${param[‘par2’]}”/> <c:set var=”op” value=”${param[‘op’]}”/> <c:if test=”${op==’+’}”>
<c:out value=”<RESU LTADO>${(par1 + par2)}</RESU LTADO>” escapeXml=”f alse”/> </c:if>
<c:if test=”${op==’-’}”>
<c:out value=”<RESU LTADO>${(par1 - par2)}</RESU LTADO>” escapeXml=”f alse”/> </c:if>
<c:if test=”${op==’/’}”>
<c:out value=”<RESU LTADO>${(par1 / par2)}</RESU LTADO>” escapeXml=”f alse”/> </c:if>
<c:if test=”${op==’X’}”>
<c:out value=”<RESU LTADO>${(par1 * par2)}</RESU LTADO>” escapeXml=”f alse”/> </c:if>
ao receber o evento onclick. O método seta as variáveis param1,operacaoeparam2 de acordo com a operação indicada pelo usuário.
Para submeter os dados para o JSP, utilizamos a classe dataset, que permite enviar parâmetros HTTP e recuperar a resposta formatada em XML. Note que na definição do dataset myData, o eventoondata chama a função JavaScript mostraResultado(). Dessa forma, assim que o servidor retornar a reposta, a função será invocada. O código do JSP é bem si mples, conforme ilustra aListagem 2.
Após os dados serem submetidos e a resposta do cálculo ser rec uperada, uma animação faz com que a calculadora se mova para a direita, para que o resultado seja mostrado no plano de fundo. Isso é possível graças ao método animate() da classelzNode (que é a superclasse de todos os componentes gráficos). Este método permite que alterações nas propriedades de um objeto sejam feitas num espaço de tempo determinado. A nossa aplicação contém algumas animações, como a de- finida no elemento <animatorgroup>. Este
elemento agrupa um conjunto de anima- ções relacionadas, que são executadas simultaneamente ou em seqüência.
A função animaJanela() também utiliza recursos de animação. No código dessa função, observe que o método animate() recebe quatro parâmetros: o atributo que será animado, o valor que o atributo de- verá receber; o tempo total da animação, para que o atributo assuma o novo valor; e um booleano, indicando se a alteração do atributo deve ser relativa ou não. Figura 3. Versão final da calculadora.
Para rodar a aplicação, basta copiar o arquivo calculadora.lzx para o diretório
server\lps-3.3.3\my-apps de sua instalação
do OpenLaszlo. É necessário também instalar o JSP no Tomcat. Para simplificar, vamos colocá-lo no diretório server\tom-
cat-5.0.24\webapps\ROOT (a versão do
Tomcat pode variar). Além disso, como o JSP usa a JSTL precisamos do jstl.jar e do
standard.jar (disponíveis em jakarta.apa-
che.org/site/downloads/downloads_taglibs. html, na seção “Standard 1.1 Taglib”). Copie estes dois JARs para o diretório
Server\tomcat-5.0.24\webapps\ROOT\
WEB-INF\lib.
Pronto. Basta apontar o browser para
http://localhost:8080/lps-3.3.3/my-apps/
calculadora.lzx para ver o exemplo fun-
cionando.
Conclusões
Neste artigo apresentamos o básico do OpenLaszlo, da instalação à criação de uma aplicação funcional que faz uso de código Java no servidor. O OpenLaszlo é uma plataforma que vem ganha ndo apoio crescente da comunidade de desenvolve- dores e integra-se especialmente bem com a tecnologia Java. A plataforma está em franca evolução, como atesta o novo pro- jeto “Legals” com release final previsto para o final deste ano, e que suportará a geração para Flash 9 e DHTML.
Figura 2. Layout da calculadora.