Primeira Aplicao Flex - Confluence - Datasul S.A.

Page 1 of 6

SDK - Software Development Kit - v.1.0

Primeira Aplicao Flex

Adicionado por Diogo Winck, editado por ltimo por Andr Filippi Cardoso Farias em Set 17, 2009 (ver mudanas)
Etiquetas
componente, reviso_tcnica

Viso Geral
Este documento destina-se a detalhar os passos necessrios para a criao de uma aplicao Flex.
Em anexo, encontra-se um projeto vazio que pode ser utilizado para implementao do contedo deste artigo. H tambm um projeto de exemplo que pode ser utilizado como modelo
para auxiliar na iniciao e nos primeiros passos.

Caractersticas
A primeira aplicao feita baseada no sample ProjetoBase e todo o projeto e configurao so baseados no Maven.

A partir desta estrutura, ser configurado e criado um projeto de exemplo que faz a comunicao entre uma tela Flex e uma classe Java.

Pr-requisitos
Conhecimentos
Flex, Java, Maven

Software
Ambiente Datasul instalado e rodando, Eclipse, FlexBuilder.

Como utiliz-lo?
Incio
l Baixe o projeto vazio;

l Descompacte-o em uma pasta de sua preferncia. Esta ser a raiz do projeto;

l Execute o Maven nas pastas java e flex, onde se encontram os arquivos pom.xml;
l para projetos Java, execute na linha de comando mvn eclipse:eclipse
l para projetos Flex, execute na linha de comando mvn flexbuilder:flexbuilder

l Importe em seu Flex Builder e Eclipse os projetos.

Desenvolvimento
Desenvolveremos um pequeno exemplo de uma calculadora de juros compostos. Para tanto, criaremos uma classe Java que efetuar os clculos e uma tela Flex que receber a entrada
dos usurios (dinheiro, nmero de meses e taxa de juros) e exibir o resultado aps retornar da classe Java.

Iniciaremos pelo Java, onde definiremos a estrutura do projeto.

Projeto

A estrutura de um projeto Datasul dentro da TOTVS a seguinte:

l produto
l aplicao
l mdulo
l funcionalidade

Na estrutura de pacotes, ficaria assim:

com.datasul.<produto>.<aplicacao>.<modulo>.<funcionalidade>

Por tratar-se de uma calculadora de juros, incluiremos o projeto dentro de uma estrutura de finanas, sendo assim, nosso produto ser chamado de Finance.
A aplicao dentro das finanas a Aplicao de Emprstimo, ou Loan Application.
A Calculadora de Juros ser o mdulo Interest Calculator.
A funcionalidade provida pela parte java do programa o servio de clculo, ou service.

Com isso, organizamos os pacotes da seguinte maneira:

com.datasul.finance.loan.interestcalculator.service

Agora, vamos importar nosso mdulo (Interest Calculator) para um projeto separado no Eclipse. Para isso, siga os passos a seguir:

1. No menu File, escolha a opo Import

2. Escolha Existing Projects into Workspace
3. Navegue em sua estrutura de diretrios onde foi descompactada a estrutura do projeto e selecione a raiz de interestcalculator.

http://sdk.datasul.com.br/confluence/pages/viewpage.action?pageId=9700345&decorator... 02/02/2010
Primeira Aplicao Flex - Confluence - Datasul S.A. Page 2 of 6

Logo abaixo, aps ser descompactado e importado, localiza-se o projeto inicial:

Imagem 1 - Projeto InterestCalculator

Agora, vamos alterar a estrutura de nosso projeto da parte Flex.

Voltando estrutura inicialmente definida, os projetos Flex esto definidos dentro da pasta Flex logo abaixo do projeto principal. Utilizaremos a estrutura Flex de acordo com o que
definimos para a estrutura Java, com um adicional: os programas devem obedecer ao padro MVC, portanto devemos modificar a estrutura de acordo, como mostra a imagem 2:

Imagem 2 - Viso da estrutura Flex

Codificao

Aps montar a estrutura de nosso projeto, podemos iniciar sua codificao. Primeiro, vamos fazer a nossa classe Java.

Abra a classe InterestCalculator.java e crie o seguinte mtodo:

/**
* Calcula e retorna o valor total utilizando a taxa de juros informada.
* @param months Quantidade de meses
* @param capital Dinheiro
* @param interest Taxa de juros
*/
public Double interestAmountCalculate(Integer months,Integer capital, Integer interest) {
Double total = null;

Float interestf = interest/100.0f;

//Clculo da porcentagem total em cima dos meses

interestf +=1;
Double totalInterest = Math.pow(interestf, months);

//Agora aplicado ao capital

total = totalInterest * capital;

return total;

http://sdk.datasul.com.br/confluence/pages/viewpage.action?pageId=9700345&decorator... 02/02/2010
Primeira Aplicao Flex - Confluence - Datasul S.A. Page 3 of 6

Cdigo 1 - Cdigo do mtodo que calcular os valores da tela Clculo de Juros

Em seguida, v para seu projeto Flex no Flex Builder e abra o InterestCalculator.mxml para fazer a implementao da tela.

Para isso, vamos criar uma tela com os seguintes campos de entrada de dados:

l Dois campos NumericStepper para os meses e para a porcentagem de juros;

l Um TextInput para o valor do capital.

Tambm criaremos um boto para calcular o valor e um label que receber este valor.

Observe que, no exemplo abaixo, foram adicionados labels para os rtulos e um panel para agrupar visualmente a aplicao:

Imagem 3 - Tela inicial da calculadora a ser criada

Nos treinamentos posteriores, veremos que no aconselhavel utilizar um TextInput para um campo de valores monetrios.

O prximo passo tratar o evento do boto Calcular e codificar a chamada para a classe Java que efetur o clculo.

Trataremos o evento do boto Calcular na classe de controle e, para fazer a chamada para a classe Java, criaremos uma classe chamada InterestCalculatorProxy que responsvel em
chamar e tratar os resultados assim como falhas na chamada ao Java.

Os dados estaro contidos na classe de modelo, como veremos adiante.

Veja abaixo como devem ficar os cdigos:

<template:ViewPresentationModel xmlns:mx="http://www.adobe.com/2006/mxml"
xmlns:template="com.datasul.framework.ui.templates.view.*"
xmlns:interestcalculator="com.datasul.finance.loan.interestcalculator.control.*"
initController="com.datasul.finance.loan.interestcalculator.control.InterestCalculatorController"
initModel="com.datasul.finance.loan.interestcalculator.model.InterestCalculatorModel"
layout="absolute" width="100%" height="100%"
title="Interest Calculator" headerVisibility="neverShow">

<interestcalculator:InterestCalculatorProxy id="proxy" calculator="{this}"/>

<mx:NumberFormatter id="formatter" precision="2" rounding="nearest" />

<mx:Panel x="10" y="10" width="266" height="231" layout="absolute" title="Calculadora de Juros">

<mx:NumericStepper id="nsQtdMeses" value="{model.months}" x="87" y="10" width="71"/>
<mx:NumericStepper id="nsJuros" value="{model.interest}" x="87" y="40" width="71" />
<mx:Label x="10" y="12" text="Qtd Meses:"/>
<mx:Label x="25" y="42" text="% Juros:"/>
<mx:TextInput id="tiCapital" text="{model.capital}" x="87" y="70" width="91"/>
<mx:Label x="30" y="72" text="Capital:"/>
<mx:ControlBar>
<mx:Button label="Calcular" id="calcBtn" click="controller.calcClick()"/>
<mx:Label text="Total: "/>
<mx:Label id="lbTotal" text="{model.total}" color="#003B8C" fontSize="14" fontWeight="bold" width="86" />
</mx:ControlBar>
</mx:Panel>
</template:ViewPresentationModel>

Cdigo 2 - InterestCalculatorView.mxml
Veja que, neste cdigo, temos a declarao do nosso InterestCalculatorProxy no formato MXML:

<interestcalculator:InterestCalculatorProxy id="proxy" calculator="{this}"/>

Alm disso, nesta mesma linha. passamos a instncia de InterestCalculatorView para que, quando o resultado seja retornado do Java, possa ser atribuido o valor retornado no campo total,
conforme feito na classe proxy demonstrada abaixo:

package com.datasul.finance.loan.interestcalculator.control
{
import com.datasul.framework.ui.ro.DatasulRemoteObject;
import com.datasul.finance.loan.interestcalculator.view.InterestCalculatorView;

http://sdk.datasul.com.br/confluence/pages/viewpage.action?pageId=9700345&decorator... 02/02/2010
Primeira Aplicao Flex - Confluence - Datasul S.A. Page 4 of 6

import mx.controls.Alert;
import mx.rpc.events.FaultEvent;
import mx.rpc.events.ResultEvent;

public class InterestCalculatorProxy

{
private var remoteObject:DatasulRemoteObject;
public function InterestCalculatorProxy()
{
this.remoteObject = new DatasulRemoteObject();
this.remoteObject.destination = "com.datasul.finance.loan.interestcalculator.service.InterestCalculator";
this.remoteObject.addEventListener(ResultEvent.RESULT,this.interestAmountCalculateResult);
this.remoteObject.addEventListener(FaultEvent.FAULT,this.remoteFaultHandler);
}

public var calculator:InterestCalculatorView;

public function calculateTotal(months:Number, capital:Number, interest:Number):void {

this.remoteObject.interestAmountCalculate(months, capital, interest);
}

private function interestAmountCalculateResult(e:ResultEvent):void {

if(e!=null) {
calculator.model.total = calculator.formatter.format(e.result);
}
}
private function remoteFaultHandler(event:FaultEvent):void{
if(event.fault) {
Alert.show("Fault: " + event.fault.faultString);
} else {
Alert.show("Message: " + event.message.body.toString());
}
}

}
}

Cdigo 3 - InterestCalculatorProxy.as

A chamada ao clculo realizada pela classe de controle InterestCalculatorController mostrada abaixo:

package com.datasul.finance.loan.interestcalculator.control
{
import com.datasul.framework.ui.base.BaseController;

import mx.controls.Alert;

public class InterestCalculatorController extends BaseController {

// Construtor vazio
public function InterestCalculatorController() {}

public function calcClick():void {

Alert.show("Tela Chamando Proxy: " + view.nsQtdMeses.value+", " + Number(view.tiCapital.text) + ", "
+ (view.nsJuros.value));
view.proxy.calculateTotal( view.nsQtdMeses.value, Number(view.tiCapital.text), (view.nsJuros.value));
}
}
}

Cdigo 4 - InterestCalculatorController.as

Por fim, a classe de modelo contm os dados exibidos na view:

package com.datasul.finance.loan.interestcalculator.model
{
import com.datasul.framework.ui.base.BaseModel;

public class InterestCalculatorModel {

[Bindable]
public var months:Number;

[Bindable]
public var interest:Number;

[Bindable]
public var capital:Number = 0;

[Bindable]
public var total:String = "0.00";
}

Cdigo 5 - InterestCalculatorModel.as

http://sdk.datasul.com.br/confluence/pages/viewpage.action?pageId=9700345&decorator... 02/02/2010
Primeira Aplicao Flex - Confluence - Datasul S.A. Page 5 of 6

Liberao (Deploy)

Agora, a prxima etapa colocarmos nossa aplicao no servidor para rod-la. Para isso, temos que garantir que os pr-requisitos de software deste artigo estejam cumpridos.

Para fazermos a liberao (deploy) da aplicao que foi desenvolvida, primeiro vamos compil-la.

Com a linha de comando aberta na pasta raz do projeto, digite:

mvn clean install

Os arquivos compilados sero gerados nas pastas target, dentro das pastas flex e java. Tambm possvel utilizar o comando mvn clean install separadamente em cada uma das duas
pastas.

Agora, vamos colocar os compilados no EAR do Datasul. Siga os passos a seguir:

V ate a pasta do EAR do Datasul no deploy do JBoss e copie, para l, o JAR gerado. Em seguida, abra o arquivo application.xml que se encontra dentro da pasta META-INF. Edite adicionando
mais um mdulo. O nome do mdulo deve coincidir com o nome do jar como mostrado no exemplo abaixo:

<module>
<java>interestcalculator-java-1.2.6-SNAPSHOT.jar</java>
</module>

O prximo passo fazer o deploy de nossa aplicao Flex, vamos entrar na pasta do WAR do framework que se encontra dentro do EAR.

Dentro desta pasta, temos a pasta modules, onde esto todas as estruturas de menu.
Cada pasta abaixo de modules representa uma aplicao, dentro de cada uma esto os mdulos e as funcionalidades. Seu SWF gerado deve ter uma dessas pastas como destino ou uma nova,
caso represente uma aplicao ainda no existente.

Para que o SWF seja reconhecido, deve-se remover o nmero de verso. Neste exemplo, o SFW gerado na pasta target interestcalculator-flex-1.2.6-SNAPSHOT.swf, que deve ser
renomeado para interestcalculator-flex.swf.

A seguir, temos que cadastrar nossa aplicao Flex no menu para que possamos acess-la por dentro do Datasul.

Para isso, siga os passos deste artigo que contempla o processo de cadastro de um programa Flex ou Progress no menu do Datasul.

Caso no tenha conhecimento suficiente para fazer um cadastro no menu, voc pode substituir, em seu ambiente local, outro SWF que j est cadastrado, fazer o devido backup e colar sua
aplicao com o mesmo nome no menu onde voc ter que buscar a aplicao que foi substituida. Aps os testes, volte aplicao substituida. Para reforar: isso somente pode ser feito em seu
ambiente local. Caso esteja usando um JBoss de um servidor NO altere o ambiente.

Aps o cadastro no menu, busque uma palavra que identifique seu programa no menu. Neste caso poderia ser calculadora, juros.

Resultados esperados
Aps encontrar a aplicao, ao clicar em executar devemos ter o seguinte resultado:

Imagem 7- Imagem da aplicao rodando

Boa Prtica!
Aps a primeira aplicao, procure aperfeioar sua programao usando o padro MVC para as telas, NumberInput para os campos e Progress Monitor para dar feedback para os usurios
enquanto o clculo feito no Java. Lembrando que MVC e NumberInput esto nesta trilha e podero ser vistos nos prximos artigos.

MVC: http://sdk.datasul.com.br/confluence/display/SDKV1/MVC

NumberInput: http://sdk.datasul.com.br/confluence/display/SDKV1/NumberInput

ProgressMonitor:http://sdk.datasul.com.br/confluence/display/SDKV1/Progress+Monitor

Outra coisa que devemos considerar o uso da formatao monetria para o resultado do clculo. Criar uma classe POJO que passe os valores de juros, capital e meses ao Java

http://sdk.datasul.com.br/confluence/pages/viewpage.action?pageId=9700345&decorator... 02/02/2010
Primeira Aplicao Flex - Confluence - Datasul S.A. Page 6 of 6

encapsulado para que, se esses parmetros aumentem, no ser necessrio mudar a assinatura do mtodo. Criar um EJB para a regra de ngocio caso seu objetivo seja o estudo das
duas camadas e no s do lado Flex.

Fontes utilizados

Name Size Creator (Last Modifier) Creation Date Last Mod Date Comment
ProjetoVazio.zip 15 kb Andr Filippi Cardoso Farias Set 17, 2009 Set 17, 2009

ProjetoBase.zip 19 kb Andr Filippi Cardoso Farias Set 17, 2009 Set 17, 2009

Informaes sobre este Documento

Verso Estado Compatibilidade Criador Criao ltimo Revisor ltima Reviso

52 reviso_tcnica 2.5.3, 2.5.4, 3.0.0 Diogo Winck Nov 24, 2008 16:24 Andr Filippi Cardoso Farias Set 17, 2009 10:06

Your
Results: 0 rates
Rating:

Powered por Atlassian Confluence, o Enterprise Wiki. (Version: http://www.atlassian.com/software/confluence Build:#2.8.0 1318) Bug/requisitar caracterstica Atlassian news Contactar Administradores

http://sdk.datasul.com.br/confluence/pages/viewpage.action?pageId=9700345&decorator... 02/02/2010