Fabiel Prestes

Olá pessoal,

Hoje irei postar mais um Flex Fast Code. Neste irei mostrar a aplicação do pattern Factory Method para criação de colunas
de DataGrid, agora não se limitem em apenas colunas. Nesta classe factory poderão conter outros modelos de criação.

Agora vamos ao codigo.

Classe FactoryDataGrid

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42

/**
 * Visitem www.fabielprestes.com.br, tudo sobre Java e Flex.
 */
package com.fabielprestes.factory{
 
	import mx.controls.dataGridClasses.DataGridColumn;
 
 
	/**
	 * @author Fabiel Prestes
	 */
	public class FactoryDataGrid{
 
		public function FactoryDataGrid(){
		}
 
		/**
		 * metodo responsavel por criar e retornar um DataGridColumn baseado nos parametros
		 * passados.
		 * 
		 * @param String HeaderText of column.
		 * @param String dateFild of column.
		 * @param uint Width of column.
		 * @param String TextAlign of column.
		 * @param Boolean If the column will be editable.
		 * 
		 * @return DataGridColumn 
		 */
		public static function crieColuna(headerText:String, dataField:String, widht:uint, 
			textAlign:String, editable:Boolean = false):DataGridColumn{
 
			var novaColuna:DataGridColumn = new DataGridColumn();
			novaColuna.headerText = headerText;
			novaColuna.dataField = dataField;
			novaColuna.width = widht;
			novaColuna.setStyle("textAlign",textAlign);
			novaColuna.editable = editable;
 
			return novaColuna;
		}
	}
}

Pronto agora vamos criar a classe Application.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical">
 
	<mx:Script>
		<![CDATA[
			import mx.collections.ArrayCollection;
			import com.fabielprestes.factory.FactoryDataGrid;
 
			private function addColuna():void{
				var colunas:Array = dg.columns;
 
				colunas.push(FactoryDataGrid.crieColuna(tiNomeCol.text, "",Number(tiTamanhoCol.text),cbAlinhamento.selectedLabel,false));
 
				dg.columns = colunas; 
			}
 
		]]>
	</mx:Script>
	<mx:DataGrid id="dg" width="100%" height="50%">
		<mx:columns>
			<mx:DataGridColumn id="colCod" headerText="Código" width="20" textAlign="center"/>
			<mx:DataGridColumn id="colNome" headerText="Nome" width="100" textAlign="center"/>
		</mx:columns>
	</mx:DataGrid>
 
	<mx:Panel horizontalAlign="right" paddingRight="10" paddingBottom="10">
		<mx:Form width="50%">
			<mx:FormItem label="Nome Coluna">
				<mx:TextInput id="tiNomeCol"/>
			</mx:FormItem>
			<mx:FormItem label="Tamanho Coluna">
				<mx:TextInput id="tiTamanhoCol"/>
			</mx:FormItem>
			<mx:FormItem label="Alinhamento">
				<mx:ComboBox id="cbAlinhamento">
					<mx:Array>
						<mx:String>center</mx:String>
						<mx:String>left</mx:String>
						<mx:String>right</mx:String>
					</mx:Array>
				</mx:ComboBox>
			</mx:FormItem>
		</mx:Form>
		<mx:Button label="Adicionar Coluna" click="addColuna()"/>
	</mx:Panel>
 
</mx:Application>

Exemplo Funcionando:

Salve pessoal,

Hojei estarei mostrando como integrar Flex com o Java, ainda vejo bastante pessoas com duvida em como realizar esta integração.
Apesar de ser bastante simples existem alguns detalhes que devem ser levados em consideração.

Para este post iremos criar dois projetos um Java_Integracao e um Flex_Integracao, lembrando que também é possivel realizar a integração utilizando apenas um projeto, no qual contém tanto os fontes Java quanto Flex.

Utilizaremos o projeto OpenSource BlazeDs licença LGPL para fazer a integração e comunicação entre o Java e o Flex. Atualmente o BlazeDs é o projeto Java sever-side mais utilizado pelas empresas e pelas comunidades.

As principais caracteristicas do Blaze são:

• Facil integração dos projeto Flex e Air com back-end Java.
• Alto desempenho em trasferências de dados.
• Free e OpenSource

No Kit de download do Blaze a adobe fornece algumas aplicações de exemplo, vale a pena dar um confirida no arquivoblazeds-samples.war.
Ao extrair o blaze para uma pasta qualquer você deve ter percebido que ele ja vem com um tomcat, contudo iremos utilizar nosso proprio tomcat. A unica diferença entre os dois é que a Adobe já fornece um tomcat com todas a libs do blaze dentro do tomcat, contudo muitas destas libs não são importantes para este exemplo de integração.

Os requisitos para que o Blaze funcione 100% são:

1. JDK 1.5 or higher.
2. Java Servlet Container 2.3 or higher.
3. Flex SDK 3.2
4. Flash Player 9

Para mais detalhes sobre o BlazeDs entre no site http://opensource.adobe.com/wiki/display/blazeds/BlazeDS/.

Requisitos para a realização da Integração:

1. Tomcat 6
2. Java 6
3. BlazeDs 3.x
4. Sdk Flex 3.x
5. Eclipse, FelxBuilder ou NetBeans. Obs: Contudo irei utilizar o Eclipse Ganymed

Neste post irei assumir que você sabe configurar Tomcat, Java e o Eclipse. Neste exemplo de integração não irei fazer o uso persistência a uma base de dados, estaremos utilizando objetos em memoria.

Para instalar o Sdk Flex é muito simples, basta apenas utilizar o padrão NNF (Next > Next > Finish) do windows.

Agora que você já está com todos os requisitos OK, vamos para a melhor parte.

Passo 1: Criação de um projeto java Dynamic Web Project.

ø Com o eclipse aberto vá em File > New > Project ou ctrl + N.
ø Selecione a pasta Web > Dynamic Web Project.
Com isso irá ser aberta um tela de configuração de seu Web Project.

1 - Em Project Name informe: Java_Integracao
2 - Em Target Runtime selecione a configuração de seu Tomcat.
Caso você não tenha um Server configurado faça o seguinte:

2.1 - Selecione New ao lado de Target Runtime, fazendo isso irá aparecer um nova tela de configuração
New Server Runtime Environment.
2.2 - Escolha Apache > Apache Tomcat 6.0 e selecione a opção Create a new local
server isso nos poupará trabalho futuro pois isso fará com que após a configuração do server o eclipse crie um
novo Project Server, agora clique em next.
2.3 - Nesta segunda você deverá escolher um nome para o seu server, informar onde o seu tomcat esta instalado e escolher a
versão JRE, clique em finish. Pronto agora você tem um Server Runtime configurado.
Após informar o Target Runtime apenas clique em finish, agorá você já tem o seu projeto Java criado e pré configurado.

Passo 2: Configurando um nome de contexto.
ø Quando você terminou de criar seu projeto Java_Integracao o eclipse automaticamente já configurou um nome de contexto, este
alias é utilizado pelo Server para poder executar sua aplicação de dentro da IDE Eclipse. Assim caso voce deseje alterar este
nome sega os seguintes passos:

2.1 - Clique com o botão direito sobre o projeto e clique em Properties.
2.2 - Selecione Web Project Settings. Nesta tela terá apenas um campo chamado Context
Root o nome default deste campo é proprio nome do projeto no nosso caso “Java_Integracao”.

Passo 3: Adicionando as lib necessárias.
ø Libs do BlazeDs

1. backport-util-concurrent.jar
2. commons-fileupload-1.1.jar
3. commons-httpclient-3.0.1.jar
4. commons-io-1.1.jar
5. commons-logging.jar
6. flex-bootstrap.jar
7. flex-messaging-common.jar
8. flex-messaging-core.jar
9. flex-messaging-remoting.jar

Passo 4: Criando os arquivos de configuração do BlazeDS

ø Na pasta/WebContent/WEB-INF crie uma pasta chamada flex, nesta irtá conter todos os
arquivos que o blazeDS necessita para poder realizar a comunicação de sua aplicação Flex com Java.
Após criar a pasta flex você deve criar 2 arquivos.

1 - remoting-config.xml

O Remoting Service permite uma aplicação cliente o acesso a métodos de objetos do lado do servidor Java, sem configurar
os objetos como serviços web. Para acessar objeto do lado do servidor, o cliente Flex irá utilizar o componente RemoteObjetct
do proprio Sdk do Flex.
O RemoteObject é declatado em classes MXML ou ActionScript para se conecatar com serviços remotos. usa-se o RemoteObject
para chamar metodos em classes Java ou ColdFusion.

Mas para o RemoteObjetc saber qual classe Java buscar, você deve configurar o arquivo remoting-config.xml e incluir uma tag
chamada , esta tag contem um atributo chamado “id” isto define um alias para a sua classe Java e o
seu RemoteObject irá utilizar este alias em suas propriedades. Definido o ID você deve definir o source (caminho) de sua classe
Java.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

<?xml version="1.0" encoding="UTF-8"?>
<service id="remoting-service" class="flex.messaging.services.RemotingService">
 
    <adapters>
        <adapter-definition id="java-object" class="flex.messaging.services.remoting.adapters.JavaAdapter" default="true"/>
    </adapters>
 
    <default-channels>
        <channel ref="my-amf"/>
    </default-channels>
 
    <destination id="facadeContato">
        <properties>
            <source>com.fabielprestes.facade.FacadeContato</source>
        </properties>
    </destination>
 
  </service>

2 - services-config.xml

Este é considerado um arquivo de alto nivel, onde se localizam as configurações mais importantes. Neste é possivel definir
esquemas de segurança, difinir canais e outros serviços. Não estarei entrando em detalhes sobre este arquivo.

<?xml version="1.0" encoding="UTF-8"?>
<services-config>
 
    <services>
        <service-include file-path="remoting-config.xml" />
 
    	<!-- 
    	Application level default channels. Application level default channels are 
    	necessary when a dynamic destination is being used by a service component
    	and no ChannelSet has been defined for the service component. In that case,
    	application level default channels will be used to contact the destination.
        -->   
        <default-channels>
           <channel ref="my-amf"/>
        </default-channels>
 
	</services>
 
 
    <channels>
        <channel-definition id="my-amf" class="mx.messaging.channels.AMFChannel">
            <endpoint url="http://{server.name}:{server.port}/{context.root}/messagebroker/amf" class="flex.messaging.endpoints.AMFEndpoint"/>
            <properties>
                <polling-enabled>false</polling-enabled>
            </properties>
        </channel-definition>
    </channels>
 
    <logging>
        <!-- You may also use flex.messaging.log.ServletLogTarget -->
        <target class="flex.messaging.log.ConsoleTarget" level="Error">
            <properties>
                <prefix>[BlazeDS] </prefix>
                <includeDate>false</includeDate>
                <includeTime>false</includeTime>
                <includeLevel>true</includeLevel>
                <includeCategory>false</includeCategory>
            </properties>
            <filters>
                <pattern>Endpoint.*</pattern>
                <pattern>Service.*</pattern>
                <pattern>Configuration</pattern>
            </filters>
        </target>
    </logging>
 
    <system>
        <redeploy>
            <enabled>true</enabled>
            <watch-interval>20</watch-interval>
            <watch-file>{context.root}/WEB-INF/flex/services-config.xml</watch-file>
            <watch-file>{context.root}/WEB-INF/flex/remoting-config.xml</watch-file>
            <touch-file>{context.root}/WEB-INF/web.xml</touch-file>
        </redeploy>
    </system>
 
</services-config>

Pronto agora com todos os arquivos criados podemos continuar a configuração do projeto. Agora iremos alterar o arquivo web.xml de nossa aplicação.

ø web.xml

Neste arquivo você deve indicar ao container que estamos utilizando o BlazeDs. Assim você deve inserir algumas tags de configuração. Edite seu arquivo para ficar desta maneira.

<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
	xmlns="http://java.sun.com/xml/ns/javaee" xmlns:web="http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd"
	xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd"
	id="WebApp_ID" version="2.5">
 
	<display-name>Java_Integracao</display-name>
 
	<!-- MessageBroker Servlet -->
	<servlet>
		<servlet-name>MessageBrokerServlet</servlet-name>
		<servlet-class>flex.messaging.MessageBrokerServlet</servlet-class>
		<init-param>
			<param-name>services.configuration.file</param-name>
			<param-value>/WEB-INF/flex/services-config.xml</param-value>
		</init-param>
		<load-on-startup>1</load-on-startup>
	</servlet>
	<servlet-mapping>
		<servlet-name>MessageBrokerServlet</servlet-name>
		<url-pattern>/messagebroker/*</url-pattern>
	</servlet-mapping>
 
	<welcome-file-list>
		<welcome-file>index.html</welcome-file>
		<welcome-file>Flex_Integracao.html</welcome-file>
		<welcome-file>index.jsp</welcome-file>
		<welcome-file>default.html</welcome-file>
		<welcome-file>Flex_Integracao.html</welcome-file>
		<welcome-file>default.jsp</welcome-file>
	</welcome-file-list>
</web-app>

Ok, agora seu projeto Java_Integracao esta totalmente configurado esperando apenas para começar a implementação, mais antes disso agora iremos configurar o projeto Flex_Integracao.

Passo 1: Criando Projeto Flex_Integracao

ø Com o eclipse aberto vá em File > New > Project ou ctrl + N.
ø Selecione a pasta Web > Flex Project.
Com isso irá ser aberta um tela de configuração de seu Flex Project.

1 - Em Project Name informe: Flex_Integracao
As outras opções você pode deixar como estão, agora clique em next.

2 - Na proxima tela na opção Output folder URL http://localhost:8080/Java_Integracao

3 - Clique em finish e seu projeto estará criado com sucesso.

Passo 2: Incluindo parametro no compilador do Flex

ø Agora temos de informar ao compilador do Flex que existe um servidor de AMF levantado.

1 - Clique com botão direito no projeto Flex_Integracao > Properties > Selecione
Flex Compiler > em Additional compiler arguments
adicione a linha -services Caminho real do projeto Java_integracao+”/WebContent/WEB-INF
flex/services-config.xml”. Ex: c:/dev/Java_integracao//WebContent/WEB-INF/flex/services-config.xml
Clique em OK, prontinho agora o seu projeto Flex já esta totalmente configurado.

Passo 3: Configurando Output Folder

ø Agora temos de informar para o projeto Flex onde ele deve gerar os arquivos swf, html, history e etc, deve-se fazer isso para que consigamos rodar a aplicação de dentro da IDE de desenvolvimento, para isso faça:

1 - Clique em browser. Aqui você irá apontar para a pasta WebContent do seu projeto Java_Integracao, isso fará com que os seus arquivos html template e swf irão ser alocados em seu projeto java.

Final das configurações

Daqui em diante começa a melhor parte, a implementação.

Para este exemplo estaremos criando uma agenda telefônica, onde o usuario poderá inserir um novo contato, excluir um contato existente e alterar um contato existente.

Obs: Lembrando que nesta Agenda não irei utilizar um padrão que pode ser seguido em projetos reais e também não estarei fazendo uso de algum framework como o Carnigorn, Pure MVC etc. Este exemplo é apenas para efeito didático.

Vamos começar com as classes Java

Iremos criar os seguintes pacotes.

• com.fabielprestes.facade
• com.fabielprestes.model.entidades

No pacote com.fabielprestes.model.entidades crie as seguintes classes:

Contato.java

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

package com.fabielprestes.model.entidades;
 
public class Contato {
 
	private String nome;
 
	private String fone;
 
	private String endereco;
 
	public Contato(){
	}
 
	public String getNome() {
		return nome;
	}
	public void setNome(String nome) {
		this.nome = nome;
	}
	public String getFone() {
		return fone;
	}
	public void setFone(String fone) {
		this.fone = fone;
	}
	public String getEndereco() {
		return endereco;
	}
	public void setEndereco(String endereco) {
		this.endereco = endereco;
	}
}

RespostaRemota.java Esta será a classe responsável pelo trafego de objetos entre o Flex e o Java

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34

package com.fabielprestes.model.entidades;
 
public class RespostaRemota {
 
	private boolean status;
 
	private Object valueObject;
 
	public RespostaRemota(){
		super();
	}	
	public boolean isStatus() {
		return status;
	}
	public void setStatus(boolean status) {
		this.status = status;
	}
	public Object getValueObject() {
		return valueObject;
	}
	public void setValueObject(Object valueObject) {
		this.valueObject = valueObject;
	}
 
	public void crieRespostaErro(Object value) {
		this.setStatus(false);
		this.setValueObject(value);
	}
 
	public void crieRespostaSucesso(Object value) {
		this.setStatus(true);
		this.setValueObject(value);
	}
}

No pacote com.fabielprestes.facade crie a seguinte classe:

FacadeContato.java Esta será a classe que o RemoteObject usará para se comunicar o servidor.
Esta classe não fará nada demais, apenas irá verificar se os campos foram preenchidos caso não preenche com valores default.
No post Parte 2 iremos aplicar persistencia neste projeto.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

package com.fabielprestes.facade;
 
import com.fabielprestes.model.entidades.Contato;
import com.fabielprestes.model.entidades.RespostaRemota;
 
public class FacadeContato {
 
	private RespostaRemota resposta;
 
	public RespostaRemota crieNovoContato(Contato contato) throws Exception{
		resposta = new RespostaRemota();
		try {
			if(contato == null)
				throw new Exception("Contato está nulo.", null);
 
			if(contato.getEndereco().equals(""))
				contato.setEndereco("Endereço desconhecido.");
 
			if(contato.getNome().equals(""))
				contato.setNome("Nome desconhecido.");
 
			if(contato.getFone().equals(""))
				contato.setFone("Telefone desconhecido.");
 
			resposta.crieRespostaSucesso(contato);
		} catch (Exception e) {
			resposta.crieRespostaErro(e.getMessage());
		}
		return resposta;
	}
}

OK! Todas as classes java necessárias para este post são estas acima. Agora iremos criar as classes do Flex.

Como dito anteriomente iremos criar uma agenda de contatos, onde o usuário poderá criar um novo contato inserindo o nome, telefone e seu endereço..

OBS: Nesta primeira parte do post a nossa aplicação apenas irá inserir novos contatos e lista-los em um DataGrid, já na parte back-end nós não iremos persistir este contato em um banco de dados ou algo do genero, nós apenas iremos verificar se todos os atributos foram devidamente preenchidos, caso não estejam iremos inserir dados default. Agora não se preocupem em nossa serie Integrando Flex com Java - Parte 2 iremos modificar este mesmo projeto para realizar as devidas persistencias em um banco de dados, contudo iremos por etapas para sre mais simples de entender a integração.

Agora que todo o “Bla Bla Bla” foi explicado vamos ao enteressa, as classes Flex.

Neste projeto Flex_Integracao teremos dois pacotes.

• com.fabielprestes.model - Objetos de Negócios
• com.fabielprestes.view - Objetos de Visão
• com.fabielprestes.view.ascript - Objetos de Controle da Visão

No pacote com.fabielprestes.model crie as seguintes classes:

ContatoDAO.as classe responsável por criar um objeto RemoteObject, o qual irá abir uma conexão com o servidor Java e disparar uma chamada no mesmo.
Algo a se notar, esta classe extende a classe EventDispatcher, isso foi feito com o seguinte propósito, como nós não estamos utilizando um framework como o Cairngorm o qual tem suas classes Service, Delegate, ModelLocator entre outras que ficam monitorando as respostas do server e assim avisar as classes ou objetos que estas já podem mudar seu comportamento e assim por diante. Não entrarei em discução sobre o Cairngorm neste post, pois este terá um outro post apenas para ele.

Nes post nós iremos fazer tudo o que o Cairngorm faz só que na unha mesmo.
Beleza voltando a classe EventDispatcher, a classe ContatoDAO extente ela para que quando esta receba a resposta de uma chamado do servidor o DAO seja capaz de enviar um aviso a classe controller de origem que o processamento no server foi realizado com sucesso ou não e assim realizar o comportamento configurado.

Se nós não tivessemos extendido esta classe seria impossível amarrarmos um evento a ela, ou seja, sem isso seria impossivel de a classe controler saber o resultado do processamento do server.
Iremos ver a amarração na classe Agenda.as. Mais aí segue um exemplo:

1
2
3
4
5

var contatoDAO:ContatoDAO = new ContatoDAO();
 
/* O "addEventListener" só pode ser feito graças a classe EventDispatcher. */
contatoDAO.addEventListener(ContatoEvent.CONTATO_CRIADO, trateContatoCriado);
contatoDAO.crieNovoContato(crieContatoDaTela());

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74

package com.fabielprestes.model{
	import flash.events.EventDispatcher;
 
	import mx.controls.Alert;
	import mx.rpc.events.FaultEvent;
	import mx.rpc.events.ResultEvent;
	import mx.rpc.remoting.mxml.RemoteObject;
 
	/**
	 * @author Fabiel Prestes 
	 */
	public class ContatoDAO extends EventDispatcher{
 
		private var _remote:RemoteObject;
 
		protected var respostaRemota:RespostaRemota;
 
		private var contatoEvent:ContatoEvent;
 
		public function ContatoDAO(){
			/* Criando uma instancia do objeto RemoteObject, no qual será utilizado para 
			 * enviar uma chamada par ao Java. */
			_remote = new RemoteObject();
 
			/* Alterando o comportamento do mouse */
			_remote.showBusyCursor = true;
 
			/* Setando o alias destino que definimos no arquivo remoting-config.xml anteriormente */
			_remote.destination = "facadeContato";
		}
 
		/**
		 * Metodo responsavel por enviar ao Servidor Java uma requisição para
		 * persistir um objeto Contato.
		 * @param Doenca
		 */
		public function crieNovoContato(contato:ContatoVO):void{
			this._remote.addEventListener(ResultEvent.RESULT, trateContatoCriadoSucesso);
			this._remote.addEventListener(FaultEvent.FAULT, trateErroDAO);
			this._remote.crieNovoContato(contato);
		}
 
		/**
		 * @private
		 * Trate a resposta que o servidor enviou da chamada <b>crieNovoContato</b>
		 */
		private function trateContatoCriadoSucesso(evt:ResultEvent):void{
			respostaRemota = evt.result as RespostaRemota;
 
			/* Caso o Status seja TRUE isso indica que não houve nenhuma Exception disparada
			 * no processamento do metodo 'crieNovoContato' */
			if(respostaRemota.status){
				contatoEvent = new ContatoEvent(ContatoEvent.CONTATO_CRIADO);
				contatoEvent.valueObject = respostaRemota.valueObject as ContatoVO;
			}else{
				contatoEvent = new ContatoEvent(ContatoEvent.CONTATO_ERRO);
				contatoEvent.valueObject = respostaRemota.valueObject.toString();
			}
 
			/* Dispara o nosso evento personalizado */
			this.dispatchEvent(contatoEvent);
		}
 
		/**
		 * @private
		 * Metodo responsavel por escutar a resposta de todos os metodos do DAO 
		 * que o servidor retornou e depois mostar um alerta com o erro.
		 * @eventType FaultEvent
		 */
		protected function trateErroDAO(evt:FaultEvent):void{
			Alert.show(evt.fault.toString());
		}
	}
}

ContatoEvent.as Classe que contém eventos personalizados (não entrarei em detalher sobre eventos personalizados.) e que serão disparados a cada resposta do servidor.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

package com.fabielprestes.model{
 
	import flash.events.Event;
 
	public class ContatoEvent extends Event{
 
		public static const CONTATO_CRIADO:String = "contatoCriado";
		public static const CONTATO_ERRO:String = "contatoErro";
 
		public var valueObject:Object;
 
		public function ContatoEvent(type:String, bubbles:Boolean=false, cancelable:Boolean=false){
			super(type, bubbles, cancelable);
		}
 
	}
}

ContatoVO.as Esta classe é exatamente o espelho da classe Contato no projeto Java_Integracao, apenas lembrando esta classe ContatoVO não precisa ter exatamente os mesmos atributos que a classe java.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

package com.fabielprestes.model{
 
	import flash.events.Event;
 
	/**
	 * @author Fabiel Prestes
	 */
	public class ContatoEvent extends Event{
 
		public static const CONTATO_ALTERADO:String = "contatoAlterado";
		public static const CONTATO_CRIADO:String = "contatoCriado";
		public static const CONTATO_DELETADO:String = "contatoDeletado";
		public static const CONTATO_ERRO:String = "contatoErro";
 
		public var valueObject:Object;
 
		public function ContatoEvent(type:String, bubbles:Boolean=false, cancelable:Boolean=false){
			super(type, bubbles, cancelable);
		}
 
	}
}

RespostaRemota.as Esta classe serve apenas para trafegar os objetos entre o Java e o Flex nós poderiamos trafegar o objeto Contato diretamente entre as aplicações, contudo uma classe de transporte pode deixar mais flexível a camada de DAO.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34

package com.fabielprestes.model {
 
	/**
	 * @author Fabiel Prestes
	 */
	[RemoteClass(alias="com.fabielprestes.model.entidades.RespostaRemota")] 
	public class RespostaRemota {
 
		private var _status:Boolean;
 
		private var _valueObject:Object;
 
		public function RespostaRemota() {
 
		}
 
		public function get status():Boolean{
			return _status;
		}
 
		public function set status(value:Boolean):void{
			_status = value;
		}
 
		public function get valueObject():Object{
			return _valueObject;
		}
 
		public function set valueObject(value:Object):void{
			_valueObject = value;
		}
 
	}
}

No pacote com.fabielprestes.view crie a seguinte classe:

AgendaUI.mxml Esta classe terá apenas os componentes gráficos do Flex como DataGrid, Botões e etc. Contudo estes componentes não terão nenhum comportamento, esta caracteristica ficará a cargo da classe Agenda.as, já que esta será o controller.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

<?xml version="1.0" encoding="utf-8"?>
<mx:VBox xmlns:mx="http://www.adobe.com/2006/mxml" width="100%" height="100%"
	paddingBottom="5" paddingLeft="5" paddingRight="5" paddingTop="5" backgroundColor="#B4D0ED">
 
	<mx:DataGrid width="100%" height="80%" id="dgContato">
		<mx:columns>
			<mx:DataGridColumn headerText="Nome" dataField="nome"/>
			<mx:DataGridColumn headerText="Telefone" dataField="fone"/>
			<mx:DataGridColumn headerText="Endereço" dataField="endereco"/>
		</mx:columns>
	</mx:DataGrid>
 
	<mx:ApplicationControlBar width="100%" height="20%">
		<mx:Form width="50%" height="50%">
			<mx:FormItem label="Nome">
				<mx:TextInput id="tiNome"/>
			</mx:FormItem>
			<mx:FormItem label="Telefone">
				<mx:TextInput id="tiFone"/>
			</mx:FormItem>
			<mx:FormItem label="Endereco">
				<mx:TextInput id="tiEnd"/>
			</mx:FormItem>
		</mx:Form>
 
		<mx:VBox height="50%" width="50%" horizontalAlign="right">
			<mx:Button label="Inserir" width="70" id="btInserir"/>
			<mx:Button label="Limpar" width="70" id="btLimpar"/>
		</mx:VBox>
	</mx:ApplicationControlBar>
</mx:VBox>

No pacote com.fabielprestes.view.ascript crie a seguinte classe:

Agenda.as Nesta classe serão realizados e definidos todos os comportamentos da nossa agenda.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95

package com.fabielprestes.view.ascript{
 
	import com.fabielprestes.model.ContatoDAO;
	import com.fabielprestes.model.ContatoEvent;
	import com.fabielprestes.model.ContatoVO;
	import com.fabielprestes.view.AgendaUI;
 
	import flash.events.MouseEvent;
 
	import mx.collections.ArrayCollection;
	import mx.controls.Alert;
	import mx.events.FlexEvent;
	import mx.events.ListEvent;
 
	/**
	 * @author Fabiel Prestes
	 */
	public class Agenda extends AgendaUI{
 
		private var contatoDAO:ContatoDAO;
 
		[Bindable]
		private var arrayContato:ArrayCollection = new ArrayCollection();
 
		public function Agenda(){
			super();
 
			this.addEventListener(FlexEvent.CREATION_COMPLETE, init);
		}
 
		/**
		 * @private
		 */
		private function init(evt:FlexEvent):void{
			this.btLimpar.addEventListener(MouseEvent.CLICK, trateLimpar);
			this.btInserir.addEventListener(MouseEvent.CLICK, trateInserir);
 
			this.dgContato.dataProvider = arrayContato;
		}
 
		/**
		 * @private
		 */
		private function trateLimpar(evt:MouseEvent):void{
			limpeForm();
		}
 
		/**
		 * @private
		 * Disparado no clique do botao inserir.
		 * Dispara uma chamada de criar novo contato ao model DAO e amarra um evento de resposta.
		 */
		private function trateInserir(evt:MouseEvent):void{
			contatoDAO = new ContatoDAO();
			contatoDAO.addEventListener(ContatoEvent.CONTATO_CRIADO, trateContatoCriado);
			contatoDAO.crieNovoContato(crieContatoDaTela());
			limpeForm();
		}
 
		/**
		 * @private
		 * Trata a resposta que o model recebeu do servidor.
		 */
		private function trateContatoCriado(evt:ContatoEvent):void{
			if(evt.valueObject is ContatoVO){
				arrayContato.addItem(evt.valueObject as ContatoVO);
				Alert.show("Contato criado com sucesso.","Informação");
			}else{
				Alert.show(evt.valueObject.toString(),"Informação");
			}
		}
 
		/**
		 * @private
		 * Cria um objeto Contato baseado no formulario.
		 */
		private function crieContatoDaTela():ContatoVO{
			var contato:ContatoVO = new ContatoVO();
			contato.nome = this.tiNome.text;
			contato.fone = this.tiFone.text;
			contato.endereco = this.tiEnd.text;
 
			return contato;
		}
 
		/**
		 * Limpa todos os campos do formulario.
		 */
		public function limpeForm():void{
			this.tiEnd.text = "";
			this.tiFone.text = "";
			this.tiNome.text = "";
		}
	}
}

Beleza pessoal agora tando o projet Java_Integracao quanto o Flex_Integracao estão com todas as classes criadas, basta apenas executar a aplicação.

Passos para a execução da aplicação.

1. Start o servidor TomCat
2. Clique com o botão direito em cima do Projeto Flex > Run As > Flex Application

Pronto isso fará o seu browser padrãos ser iniciado com a aplicação rodando e agora e só diversão.

Então é isso pessoal, espero ter ajudado a todos e qualquer dúvida ou sugestão entrem em contato. Estarei prontamente para atende-los.

Aqui está o link para baixar os dois projetos.
E fiquem atentos estarei lançando um screencast deste post.
E também logo estarei lançando a segunda parte da serie de “Integrando Flex com Java Parte 2 - Agora fazendo uso de persistencia dos objetos”

Salve pessoal,

A partir de hoje irei começar uma sequência de post destinados ao pessoal que deseja tirar a certicação SCJP da Sun.
Os post em si conterão questões, dicas e/ou explicações.

Dado o codigo Abaixo marque todas as alternativas corretas.

enum A { A }
class E2 {
     enum B { B }
     void C() {
          enum D { D }
     }
}

Ola pessoal,

Este é mais Flex Fast Code, neste irei mostar como aplicar o efeito de rotação em imagens juntamente irei aplicar um efeito Fade.

Este Flex Code é muito simples tendo grau de dificuldade 1.

• Resumindo este Code tem 2 HSlider. O primeiro implica diretamente na rotação da imagem conforme for deslizando a barra,

já o segundo implica no tamanho da imagem.

Classe mxml.

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" 
	width="450" height="300" horizontalScrollPolicy="off" viewSourceURL="srcview/index.html">
 
	<mx:HBox id="barra" top="10" left="10" horizontalAlign="center">  
		<mx:HSlider minimum="-30" maximum="30" value="-10" toolTip="Rotação" 
			change="minhaImagem.rotation = event.currentTarget.value" liveDragging="true"/>  
 
		<mx:HSlider minimum="100" maximum="200" value="100" toolTip="Tamanho" 
			change="minhaImagem.height = event.currentTarget.value" liveDragging="true"/>  
 
		<mx:CheckBox label="Visivel" change="minhaImagem.visible = event.currentTarget.selected" selected="true"/>  
	</mx:HBox>  
 
	<mx:Image id="minhaImagem" height="100" top="60" left="30" rotation="-10" source="@Embed('img/Blue hills.jpg')">  
		<mx:filters>  
			<mx:DropShadowFilter/>  
		</mx:filters>  
		<mx:showEffect>  
			<mx:Fade alphaFrom="0" alphaTo="1" duration="1000"/>  
		</mx:showEffect>  
		<mx:hideEffect>  
			<mx:Fade alphaFrom="1" alphaTo="0" duration="1000"/>  
		</mx:hideEffect>  
	</mx:Image> 
</mx:Application>

Exemplo Funcionando:

Salve pessoal,

Hoje vou demonstar como criar uma barra de menu similar ao do Mac usando apenas os efeitos nativos do Flex.
Existe uma lib chamada Fish eye que realiza este mesmo processo com algumas melhorias, vale a pena dar uma olhada, segue o link FishEye.

Lembrando que este é um simples exemplo, depois é com vocês a tarefa de adicionar novas melhorias, mas a base esta aí.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
	width="355" height="160" verticalAlign="bottom" horizontalAlign="center" 
	viewSourceURL="srcview/index.html">
 
   <mx:Script>
		<![CDATA[
 
			public function mouseOver(evt:MouseEvent):void{
				aumentar.play([evt.currentTarget]);
			}
 
			public function mouseOut(evt:MouseEvent):void{
				diminuir.play([evt.currentTarget]);
			}
 
		]]>
	</mx:Script>
 
	<mx:Resize id="aumentar" duration="150" widthTo="80" heightTo="80"/>
	<mx:Resize id="diminuir" duration="200" widthTo="40" heightTo="40"/>
 
	<mx:HBox id="providerImg" horizontalScrollPolicy="off" verticalScrollPolicy="off" 
		clipContent="true" width="100%" horizontalAlign="center" verticalAlign="bottom">
 
		<mx:Image width="40" height="40" 
			mouseOver="mouseOver(event)" mouseOut="mouseOut(event)"
			buttonMode="true" useHandCursor="true"/>
		<mx:Image source="img/Error.png" width="40" height="40" 
			mouseOver="mouseOver(event)" mouseOut="mouseOut(event)"
			buttonMode="true" useHandCursor="true"/>
		<mx:Image source="img/TimeIntervals.png" width="40" height="40" 
			mouseOver="mouseOver(event)" mouseOut="mouseOut(event)"
			buttonMode="true" useHandCursor="true"/>
		<mx:Image source="img/ChartTypes.png" width="40" height="40" 
			mouseOver="mouseOver(event)" mouseOut="mouseOut(event)"
			buttonMode="true" useHandCursor="true"/>
	</mx:HBox>
 
</mx:Application>

Daew pessoal blz,

Esses dias eu estava vendo as listas de Java e observei que muitos desenvolvedores tem dúvida
de como automatizar tarefas de Sql como create, drop e etc com o Ant.
Devido a isso resolvi criar um post direcionado a esta questão.
Neste Java Fast Code irei demonstrar a execução automática dos scripts SQL.

Obs: Vale lembrar que existem outras maneiras de se executar uma target Ant com o Java.
Também não irei entrar em detalhes sobre os scripts Ant e Sql.

A classe abaixo PopularBase.java executa um comando de processo para executar a target do Ant.

public class PopularBase{
     public static void main(String[] args) throws Exception {
          try {
               Runtime.getRuntime().exec("rundll32 SHELL32.DLL,ShellExec_RunDLL "+"ant createTables_MySQL");
          } catch (IOException e) {
               e.printStackTrace();
          }
     }
}

Abaixo segue o arquivo build.xml

<project name="Exemplo" default="ajuda" basedir=".">
 
        <!--<property name="sql.driver" value="org.gjt.mm.mysql.Driver"/>-->
	<property name="sql.driver" value="com.mysql.jdbc.Driver"/>
	<property name="sql.url" value="jdbc:mysql://localhost:3306/db_pcc"/>
	<property name="sql.user" value="root"/>
	<property name="sql.pass" value="root"/>
 
       <!-- 
	    Target     : createTables_MySQL
	    Finalidade : criar as tabelas no banco MySql
	    Como faz   : utiliza os .sql
	-->
	<target name="createTables_MySQL">
            <sql driver="${sql.driver}" url="${sql.url}" userid="${sql.user}" password="${sql.pass}" >
                 <classpath>
           	      <pathelement location="WebContent/WEB-INF/lib/mysql-connector-java-5.0.7-bin.jar"/>
                 </classpath>
      	         <transaction src="sql/create_table.sql"/>
            </sql>
        </target>
 
</project>

Abaixo segue o script SQL. createTables_MySQL

CREATE TABLE tbusuario
     idUsuario bigint(20) NOT NULL AUTO_INCREMENT,
     tpUsuario char(1) NOT NULL,
     status char(1) NOT NULL,
     login varchar(20) default NULL UNIQUE,
     senha varchar(20) default NULL,
     PRIMARY KEY  (idUsuario)
) ENGINE=InnoDB DEFAULT CHARSET=latin1;
 
-- INSERINDO UM ADMINISTRADOR
INSERT INTO tbUsuario (tpUsuario, status, login, senha) values ('S','A','adm','adm');

E eh isso pessoal, basta apenas executar o metodo main da classe PopularBase
que o Java se encarregará de criar um processo chamar o cmd passando o comando Ant como parametro.

Espero ter ajudado.

Daew pessoal,

Estava hoje vendo uns blogs de Flex e achei um post no qual fala sobre efeitos 3D nativos do
Flash Player 10. Achei bem interessante segue o Link.

Dale pessoal !

Esta semana tenho um post para aqueles gostam de livros no formato digital.
Este site tem varios livros para download free, sobre varios assuntos de programação, indo de baixo nivel ate alto nivel.

E-Books Free