O nosso leitor Sandro André nos fez uma pergunta muito boa para quem está começando a aprender Flex, veja:

“queria tirar uma dúvida, o que é e para que server MXML APPLICATION, MXML MODULE, MXML COMPONENT,? MXML ITEM RENDERER, E MXML SKIN?”

Fiz uma resposta rápida, mas seria interessante adicionarmos mais informações através dos comentários. Conto com vocês!

MXML Application: É a aplicação principal, que “vira” um arquivo SWF
na compilação.

MXML Module: É um módulo, um pedaço da aplicação principal, que também? ”vira” um SWF, mas é dependente de um MXML Application

MXML Component: É um componente que é adicionado ao MXML
Application/Module. Geralmente uma tela, um formulário, um Panel, um
DataGrid.

MXML Item Renderer: É uma renderização personalizada de um item de uma? lista. Uma lista pode ser um Spark List, Um datagrid, um combobox,
etc.

MXML Skin: É a forma como um componente pode ser desenhado. Por
exemplo, um combo box é formado por um Spark TextInput e um Spark
Button. A skin pode mudar essa forma.

Hoje surgiu um problema aqui na @PontoSistemas, onde teríamos que salvar a posição e o tamanho da coluna de acordo com o que o cliente preferir, como cada pessoa organiza a tela de um jeito diferente. Tudo isso porque toda vez que o DataGrid é construído novamente, ele volta ao estado inicial.

A idéia:
Ao organizar ou alterar os tamanhos das colunas de um DataGrid/AdvancedDataGrid salve as posições e os tamanhos das colunas.

A solução:
Altere o tamanho e/ou a ordem das colunas, e recarregue a página. Elas irão voltar na mesma ordem e tamanho que você as deixou.

Clique com o botão direito em cima do DataGrid, depois em “view source” para visualizar o código fonte.

Da maneira que foi implementado, as definições da posição e do tamanho das colunas são salvas na memória do FlashPlayer (como se fosse os cookies das páginas web), ao limpar esse “cookie” as configurações voltam ao estado original.

Por hoje é isso. Em breve novas dicas.

Comentem!!!

Esta é uma tradução do seguinte artigo: 10 Things A Good Flex Developer Should Know

Para ser um bom programador Flex é preciso mais que simplesmente saber como usar alguns componentes nativos do Flex. É preciso muito mais.

Aqui está minha contribuição sobre o assunto… juntamente com alguns recursos ou algumas palavras-chave que você poderá pesquisar facilmente através do Google.

Por favor, comente no blog se você achar que esqueci algo (o que é inevitável) ou se quiser sugerir alguns recursos interessantes que devo acrescentar.

1- Programação orientada a Objetos (OO)

O Flex se baseia na linguagem ActionScript3, que é totalmente orientada a objetos. Embora não seja um conceito fácil de aprender, programação orientada a objeto é um pré-requisito para aprender Flex. Se já possui experiência com OO (Java, C#, Ruby, etc), então você está pronto. Se não, você precisará pegar um livro sobre OO e começar a aprender o mais rápido possível.

· Head First Java (Java? Sim, Eu sei. Mas confie em mim.)

· Object-oriented programming with ActionScript 3.0

Nota: Alguns de vocês poderão perguntar – “O que são padrões de projetos?”. Vamos dar um passo de cada vez? Preocupe-se em entender classes e objetos, interfaces, herança, composição, polimorfismo, encapsulamento, etc. Só então considere estudar padrões de projetos. De fato, se eu escrever um post intitulado “10 coisas que um GRANDE programador Flex deve saber”, padrões de projeto estará nessa lista.

2- ActionScript/MXML

ActionScript é a linguagem de programação usada juntamente com MXML para criar aplicações Flex. MXML é uma linguagem de marcação baseada em XML. Cada tag MXML é mapeada diretamente para uma classe ActionScript correspondente. MXML é usado pelos desenvolvedores Flex principalmente para apresentar a interface do usuário, enquanto que, o ActionScript é usado para a lógica de negócio. Com exceções, é claro.

O Framework Flex inclui centenas de classes ActionScript e interfaces usadas para desenvolver aplicações Flex. Seu nível de habilidade como um desenvolvedor Flex está diretamente ligado ao seu conhecimento em relação ao ActionScript e MXML.

· Flex in a Week

· Tour De Flex

· Essential ActionScript 3.0

Nota: Fique ? vontade com a API do Flex. Como um desenvolvedor Flex, você vai usá-la diariamente.

3- Debugging

Boa parte do tempo de qualquer programador é gasto no debugging. Obviamente, é necessário debugar para rastrear a causa de bugs. No entanto, também é uma ótima maneira de conhecer o código fonte.

Felizmente, existem muitas ferramentas disponíveis para ajudá-lo com o trabalho de debugging. Invista algum tempo para aprender essas ferramentas. Seu investimento irá proporcionar retorno imediato.

· Flash Builder 4.5 Debugger

· De MonsterDebugger

· Kap Inspect

4- Programação orientada a eventos

Aplicações Flex são orientadas a eventos. Toda ação é o resultado de um evento assíncrono.

Como um desenvolvedor Flex, você deve saber como responder a eventos e como criar e disparar eventos. Para isso, é necessária uma sólida compreensão da arquitetura de eventos do Flex, incluindo familiaridade com os seguintes conceitos:

· Eventos nativos (Flash Player ou Framework de eventos Flex)

· Eventos customizados (Eventos criados pelo desenvolvedor, que estende a classe Event ou uma de suas subclasses)

· Disparar eventos, propagação de eventos (ver classe EventDispatcher e seu método dispatchEvent)

· Event listeners, event handlers (ver classe EventDispatcher e seus métodos addEventListener e removeEventListener)

· Fases do evento (capture, target & bubbling phases; target vs. currentTarget)

· Objetos do evento, tipos de eventos (ver classe Event e subclasses)

· Comportamento do evento default (ver classe Event e subclasses e seu método preventDefault)

5- Data binding

Aparentemente, data binding é um “no brainer”[1]. É só vincular o valor de uma propriedade ao valor de outra propriedade usando chaves. Quando o valor da propriedade de origem for alterado, o valor da propriedade de destino também é alterado.

No entanto, existe uma sobrecarga associada ao uso indiscriminado de data binding, podendo haver implicações no desempenho. Uma sólida compreensão de data binding ajudará a determinar quando é apropriado o seu uso e quando não é.

· Flex Tips – Using Bindable Metadata Events

· Michael Labriola’s presentation entitled Diving in the Data Binding Waters

6- Item renderers

Uma característica de uma aplicação Flex bem projetada é a apresentação dos dados de uma forma visualmente atraente. O Flex oferece uma série de controles baseados em listas (DataGrid, List, TileList, HorizontalList, etc) responsável pela apresentação dos dados. Portanto, pode-se personalizar a exibição dos dados com a ajuda de item renderers.

Você irá consumir muito tempo trabalhando com item renderers. Então é melhor saber bem como ele funciona.

· Flex Examples – Item Renderers in Practice

· A Deep Dive into Flex 4 Lists and Layouts

7- Acesso remoto a dados

Você conhece muitas aplicações que não interagem com os dados? Eu também não. Saiba como recuperar dados através de HTTPServive, WebService e RemoteObject. A arquitetura do framework Flex também poderá ajudá-lo com isso (ver #9).

· Retrieving and handling data with HTTPService

· Retrieving and handling data with WebService

· Retrieving and handling data with RemoteObject

8- Styling / Skinning

Não vamos nos esquecer que o Flex é uma tecnologia de interface e, como tal, certamente há expectativas em relação ao design. Como um desenvolvedor Flex, você deve ser capaz de personalizar a aparência de seus aplicativos usando estilos CSS, gráficos e/ou skins.

Com o Flex 4, não há mais desculpas. Use um pouco do seu tempo para conhecer de uma vez o lado direito do seu cérebro. É uma excelente mudança de paradigma, e vai ajudá-lo a diferenciar-se dos outros desenvolvedores Flex.

· Flex Style Explorer

· ScaleNine

· Introduction to Flex: Part 3 – Styles & Skins

9- Pelo menos um framework de arquitetura Flex

A maioria dos frameworks de arquitetura Flex impõe uma separação de camadas através da implementação do MVC (model-view-controller). Além disso, esses mesmos frameworks especificam como seu código deve ser organizado dentro do projeto Flex.

Embora muitos argumentariam que os frameworks são desnecessários, acredito que os desenvolvedores Flex se beneficiam em muitos aspectos da experiência de usá-los. Basta assistir ? s técnicas (boas ou más) empregadas por um framework para resolver problemas complexos de arquitetura. Isso contribuirá para seu crescimento como um desenvolvedor Flex.

Além disso, é difícil negar o fato de que a experiência com framework aumentará substancialmente o seu valor comercial como um desenvolvedor Flex. Jesse Warden me disse recentemente “Existem poucas empresas que não usam frameworks, mas isso é raro. Queiramos ou não, está na ‘moda’”. Eu concordo com Jesse.

· Cairngorm

· Parsley

· PureMVC

· Mate

· Swiz

· Robotlegs

10- Ciclo de vida de componentes e display list

Eu não estava convencido da necessidade de aprender o ciclo de vida de componentes Flex ou da display list até que escrevi o meu primeiro componente customizado (na verdade foi um componente semi-customizado que se estendia do componente Canvas). Até essa época eu usava componentes nativos do Flex, usando apenas o MXML enquanto que a display list era renderizada para mim. Em nenhuma vez tive que usar os métodos addChild, createChildren ou commitProperties, e usava o evento creatiomComplete para tudo.

Meu primeiro componente customizado usava uma quantidade enorme de eventos assíncronos, e eu não poderia prever a ordem em que cada evento seria disparado. Só depois que eu aprendi os métodos e variáveis do ciclo de vida dos componentes do Flex que eu pude ter um certo controle.

Estes métodos do ciclo de vida estão lá para serem usados. Saiba como funcionam e use-os para o seu benefício. Sua vida será mais fácil e você perderá menos cabelos.

· Colin Moock’s Lost ActionScript Weekend – The Display List

· Creating New Components in Flex 3

· Diving Deep with the Flex Component Lifecycle

· Understanding the Flex 3 Component and Framework Lifecycle

[1] Expressão americana usada para algo que requer pouco esforço mental ou inteligência para realizar ou compreender

Olá pessoal beleza?

Pois é em ritmo de AudiCup.
Eis que então o pessoal da Audi entrou em contato comigo essa semana para fazer algo em Web 2.0 para cadastrar os times que irão participar da AudiCup.

Segue os links abaixo:
http://www.audi.com/com/brand/en/experience/sponsoring/sportsponsoring/the_audi_cup_2011.html
http://www.audi.com/com/brand/en/experience/sponsoring/sportsponsoring/the_audi_cup_2011/schedule_and_tickets.html

Inter , estaremos contigo ..
Tu és minha paixão !
Não importa o que digam
Sempre levarei comigo
Minha camisa vermelha ..
e a cachaça na mão
O Gigante me espera ..
Para começar a festa !

O exemplo é mais ou menos o que esta abaixo:

Veja o Fonte é simples:

xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
			   xmlns:s="library://ns.adobe.com/flex/spark"
			   xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600"
			   creationComplete="application1_creationCompleteHandler(event)">
	<fx:Declarations>

	fx:Declarations>
	<fx:Script>
		[CDATA[
			import mx.collections.ArrayCollection;
			import mx.events.CloseEvent;
			import mx.controls.Alert;
			import mx.events.DragEvent;
			import mx.events.FlexEvent;
			import mx.managers.DragManager;

			[Bindable]
			private var time:Time;

			[Bindable]
			private var times:ArrayCollection;			

			[Bindable]
			private var timesConvocados:ArrayCollection=new ArrayCollection();

			private function onDrop(event:DragEvent):void 
				if(event.dragSource.formats.toString() == "items,itemsByIndex,caretIndex") 
					var dragList:Array = event.dragSource.dataForFormat('items') as Array;
					var draggedTimes:Time = dragList[0] as Time;

					if(draggedTimes.fifa == 'N') 
						Alert.show("Não foi possível adicionar este time!nn"+draggedTimes.nome+" não tem mundial de Clubes FIFA!", "AudiCup");
						event.preventDefault();
						event.target.hideDropFeedback(event);
						DragManager.showFeedback(DragManager.NONE);
					
				}
			}	

			protected function application1_creationCompleteHandler(event:FlexEvent):void
			
				times=new ArrayCollection();
				time=new Time();
				time.id=1;
				time.nome="FC Barcelona";
				time.fifa="S";
				times.addItem(time);

				time=new Time();
				time.id=2;
				time.nome="SC Internacional de Porto Alegre";
				time.fifa="S";
				times.addItem(time);

				time=new Time();
				time.id=3;
				time.nome="FC Bayern";
				time.fifa="S";
				times.addItem(time);

				time=new Time();
				time.id=4;
				time.nome="AC Milan";
				time.fifa="S";
				times.addItem(time);

				time=new Time();
				time.id=5;
				time.nome="Grêmio de Porto Alegre";
				time.fifa="N";
				times.addItem(time);

				time=new Time();
				time.id=6;
				time.nome="SC Juventude de Caxias do Sul";
				time.fifa="N";
				times.addItem(time);
			

		]]>
	fx:Script>
	<s:Label x="10" y="10" fontSize="14" fontWeight="bold" text="Audi Cup 2011 Meet the best"/>

	<mx:DataGrid x="10" y="32" width="250" height="200" dataProvider="times"
				dragEnabled="true" dragMoveEnabled="true" dropEnabled="true">
		<mx:columns>
			<mx:DataGridColumn dataField="nome" headerText="Times Disponíveis"/>
		mx:columns>
	mx:DataGrid>

	<mx:DataGrid x="268" y="32" width="250" height="200" dataProvider="timesConvocados"
				 dragEnabled="true" dragMoveEnabled="true" dropEnabled="true" dragDrop="onDrop(event);">
		<mx:columns>
			<mx:DataGridColumn dataField="nome" headerText="Convoque você mesmo - Arraste"/>
		mx:columns>
	mx:DataGrid>
s:Application>

package

	[Bindable]
	public class Time
	
		public var id:Number;
		public var nome:String;
		public var fifa:String;

		public function Time()
		
		
	}
}

Felipe Borella.

Opa.

Resolvi criar este post pois ja havia feito isso para trabalho de faculdade, então, compratilhando o conhecimento adquirido.

Segue abaixo aplicação e os fonte com as explicações:
Clique em Listar e depois salvar.

xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"
	backgroundColor="white">
?
	<mx:Script>
		[CDATA[
			import mx.rpc.xml.SimpleXMLEncoder;
			import mx.utils.ObjectUtil;
			import mx.controls.Alert;
			import mx.collections.ArrayCollection;
?
			private var fr:FileReference;
			private static const FILE_TYPES:Array=[new FileFilter("Arquivo XML", "*.xml")];
			private static const DEFAULT_FILE_NAME:String="trabalho.xml";
			[Bindable]
			public var arr:ArrayCollection=new ArrayCollection(
					[{id:1, nome:"Felipe Borella", cidade:"Marau"},
					{id:2, nome:"Mario Junior", cidade:"Rio de Janeiro"},
					{id:3, nome:"Bãrdei Futebol Clube", cidade:"Marau"},
					{id:4, nome:"Janderson Futebol Clube", cidade:"Rio de Janeiro"}]);
?
			private function iniciar():void
			{
				var xml:XML=objectToXML(arr.source);
				txt1.text=ObjectUtil.toString(arr.source);
				txt2.text=xml.toXMLString();
			}
?
?
			private function objectToXML(obj:Object):XML
			{
				var qName:QName=new QName("pessoa");
				var xmlDocument:XMLDocument=new XMLDocument();
				var simpleXMLEncoder:SimpleXMLEncoder=new SimpleXMLEncoder(xmlDocument);
				var xmlNode:XMLNode=simpleXMLEncoder.encodeValue(obj, qName, xmlDocument);
				var xml:XML=new XML(xmlDocument.toString());
				trace(xml.toXMLString());
				return xml;
			}
?
			private function onLoadFileClick():void
			{
				//cria a instancia do FileReference
				fr=new FileReference();
				//adiciona o evento para a escuta quando o arquivo for selecionado 
				fr.addEventListener(Event.SELECT, onFileSelect);
				//adiciona o evento para a escuta quando o arquivo for cancelado
				fr.addEventListener(Event.CANCEL, onCancel);
				//abri somente arquivos XML
				fr.browse(FILE_TYPES);
			}
?
			//chamado quando o usuario seleciona o arquivo
			private function onFileSelect(e:Event):void
			{
				//quando o arquivo for carregado dispara a escuta da funcao onLoadComplete
				fr.addEventListener(Event.COMPLETE, onLoadComplete);
				// adiciona a escuta quando acontece erro ao carregar arquivo
				fr.addEventListener(IOErrorEvent.IO_ERROR, onLoadError);
				//carrega o conteudo do arquivo
				fr.load();
			}
?
			//Chamado quando o usuario cancela
			private function onCancel(e:Event):void
			{
				trace("File Browse Canceled");
				fr=null;
			}
?
			//chama completa o arquivo carregado
			private function onLoadComplete(e:Event):void
			{
				//recupera os dados do arquivo como um byte array
				var data:ByteArray=fr.data;
				//le o arquivo como uma string e coloca em um text area
				txt2.text=data.readUTFBytes(data.bytesAvailable);
				//limpa a instancia do arquivo tipo filereference
				fr=null;
			}
?
			//quando ocorrer erros ao carregar
			private function onLoadError(e:IOErrorEvent):void
			{
				trace("Error loading file : " + e.text);
			}
?
			//chamadoquando o usuario digita no textarea
			private function onInputChange():void
			{
				//habilita o botao se ha texto para salvar
				saveButton.enabled=(txt2.text.length > 0);
			}
?
			//chamado quando o usuario clica o botao de carregar
			private function onSaveClick():void
			{
				//criando instancia de File Reference
				fr=new FileReference();
?
				//escuta para falha quando foi salvo
				fr.addEventListener(Event.COMPLETE, onFileSave);
?
				//escuta  para quando cancelar
				fr.addEventListener(Event.CANCEL, onCancel);
?
				//escuta para quando ha erros no salvar
				fr.addEventListener(IOErrorEvent.IO_ERROR, onSaveError);
?
				//abre a caixa para saber onde salvar o XML usando o nome default
				fr.save('n'+txt2.text, DEFAULT_FILE_NAME);
			}
?
			//chamado quando o arquivo for salvo
			private function onFileSave(e:Event):void
			{
				trace("File Saved");
				fr=null;
				Alert.show('Salvo com sucesso');
			}
?
			//chamado se o usuario cancela a caixa de dialogo
			private function onCance2l(e:Event):void
			{
				Alert.show('Arquivo cancelado', 'Sistema');
				fr=null;
			}
?
			//chamado se ocorrer erro enquanto salva o arquivo
			private function onSaveError(e:IOErrorEvent):void
			{
				Alert.show('Erro '+ e.text);
				fr=null;
			}
		]]>
	mx:Script>
?
	<mx:DataGrid x="10" y="10" dataProvider="{arr}" width="299">
		<mx:columns>
			<mx:DataGridColumn headerText="Nome" dataField="nome"/>
			<mx:DataGridColumn headerText="Cidade" dataField="cidade"/>
		mx:columns>
	mx:DataGrid>
	<mx:Button id="saveButton" x="412" y="130" label="Salvar" click="onSaveClick()"/>
	<mx:TextArea id="txt1" x="10" y="175" width="228" height="231" editable="false"/>
	<mx:TextArea id="txt2" x="246" y="175" width="228" height="231" editable="false"/>
	<mx:Button x="346" y="130" label="Listar" click="iniciar()"/>
?
mx:Application>

Valeu ai!

Felipe
Marau-RS

Hoje vou mostrar a integração de aplicações Flex 4 com back-end Java, utilizando o Blazeds para comunicação entre eles. Durante a instalação e configuração do ambiente de desenvolvimento, estamos considerando que você está trabalhando numa máquina com Windows. Caso não seja este o caso não fique preocupado, basta repetir os mesmos passos descritos para o Windows adaptando para o sistema operacional que você estiver utilizando.

1. Instalações

- Download Java Development Kit (JDK6), e após configurar a váriavel de sistema JAVA_HOME.
- Download Eclipse IDE for Java Developers.
- Download BlazeDS Turnkey, contêm uma versão configurada do servidor Tomcat e diversos exemplos.
- Download Adobe Flash Builder 4, versão Standalone.

2. Instalando o BlazeDS

Após o download do BlazeDS descompacte-o num diretório de sua preferência:
C:blazeds

* Nesse momento você já deve ter instalado o JDK e confgurado a variável JAVA_HOME.

Para verificar se tudo está funcionando vamos iniciar o servidor Tomcat.

Abra um prompt do Windows e digite:
cd C:blazedstomcatbin

Em seguida inicie o servidor Tomcat:
catalina start

Após a inicialização do servidor, você verá a janela abaixo:

O servidor de aplicação foi inicializado na porta 8400. Como eu disse anteriormente, o BlazeDS Turnkey vem com uma série de aplicações de exemplo mostrando a integração entre o Adobe Flex e o Java.

Para verificar se o servidor está rodando corretamente e ver as aplicações que citei, digite num browser de sua preferência:
http://localhost:8400/

3. Instalando o Eclipse

Após o download do Eclipse, descompacte o conteúdo do arquivo compactado para uma pasta um diretório de sua preferência:
C:eclipse

* Assim como o BlazeDS, o Eclipse também não necessita de instalação. Basta descompactá-lo para utilizar.

4. Instalando o Flash Builder 4

Para a instalação do Adobe Flash Builder 4 basta você ir avançando as opções, sempre mantendo os valores padrões. A versão Standalone é uma versão Trial que dura 60 dias. No site da Adobe você pode obter gratuitamente uma licensa de utilização caso você se enquadre nas exigências legais (estudantes, profissionais autônomos, etc).

5. Criando o projeto Java

Abra a pasta onde você descompactou o Ecplise e execute-o:
C:eclipseeclipse.exe

Em seguida vamos criar nosso projeto Java. Clique em:
File > New > Dynamic Web Project

Agora vamos criar um bean que será usado na serialização das informações que serão trocadas entre o Adobe Flex e o Java.

Clique com o botão direito do mouse no projeto e então:
New > Class

A seguir a implementa da nossa classa Java bean Usuario.java:

package br.com.rectius.model;
?
import java.io.Serializable;
?
public class Usuario implements Serializable {
?
	/**
	 *
	 */
	private static final long serialVersionUID = 1L;
?
	private String nome;
	private String email;
	private String cargo;
?
	public void setNome(String nome) {
		this.nome = nome;
	}
	public String getNome() {
		return nome;
	}
?
	public void setEmail(String email) {
		this.email = email;
	}
	public String getEmail() {
		return email;
	}
?
	public void setCargo(String cargo) {
		this.cargo = cargo;
	}
	public String getCargo() {
		return cargo;
	}
?
}

Agora vamos criar nossa camada de serviço, que será o ponto de entrada das requisições do nosso front-end Flex.

Clique novamente com o botão direito do mouse sobre o projeto e então:
New > Class

A seguir a implementação da nossa camada de serviço UsuarioService.java:

package br.com.rectius.service;
?
import java.util.ArrayList;
?
import br.com.rectius.model.Usuario;
?
public class UsuarioService {
?
	/*
	 * Como não estamos utilizando nenhuma ferramenta
	 * para persistência dos dados, vamos armazenar
	 * a informações nessa lista estática
	 */
	private static ArrayList<Usuario> listaUsuarios =
		new ArrayList<Usuario>();
?
	/*
	 * Insere um novo usuário
	 * @param usuario
	 */
	public void insereUsuario(Usuario usuario)
	{
		listaUsuarios.add(usuario);
	}
?
	/*
	 * Retorna todos os usuários
	 * @return
	 */
	public ArrayList<Usuario> listaUsuarios()
	{
		return listaUsuarios;
	}
?
}

Pronto! Nossa aplicação Java já está finalizada.

6. Configurando o BlazeDS

Para que o Adobe Flex possa se comunicar com nossa camada de serviço no Java, teremos que modificar alguns arquivos de configuração do BlazeDS.

Abra a pasta onde você descompactou o BlazeDS:
C:blazeds

Crie um nova pasta chamada:
C:blazedsBlazedsConfigBase

Localize agora o arquivo blazeds.war e descompacte-o na pasta que acabamos de criar:
Arquivo: C:blazedsblazeds.war
Pasta: C:blazedsBlazedsConfigBase

Veja o contéudo da pasta C:blazedsBlazedsConfigBase>:
C:blazedsBlazedsConfigBaseMETA-INF
C:blazedsBlazedsConfigBaseWEB-INF

* A pasta WEB-INF contém toda a informação necessária para a integração de um projeto Adobe Flex + Java + Blazeds.

Agora vamos copiar algumas pastas do BlazeDS para dentro nosso projeto Java. Localize a pasta:
C:blazedsBlazedsConfigBaseWEB-INF

Copie o arquivo e os diretórios abaixo para WebContentWEB-INF, dentro do Eclipse:
C:blazedsBlazedsConfigBaseWEB-INFweb.xml
C:blazedsBlazedsConfigBaseWEB-INFflex
C:blazedsBlazedsConfigBaseWEB-INFlib

A pasta lib contém todas as biliotecas necessárias para realizar a comunicação do Adobe Flex com o Java.
A pasta flex contém os arquivos de configuração necessários para estabelecer essa comunicação.

Nesse momento a estrutura do seu projeto deve estar como na imagem abaixo:

Agora vamos configurar nossa aplicação para que o Flex consiga se comunicar com o nosso projeto Java.

Dentro do Eclipse localize e abre o arquivo:
WebContentWEB-INFweb.xml

Configure-o conforme a seguir:

<?xml version="1.0" encoding="UTF-8"?>
DOCTYPE web-app PUBLIC "-//Sun Microsystems, Inc.//DTD Web Application 2.3//EN" "http://java.sun.com/dtd/web-app_2_3.dtd">
<web-app>
?
    <display-name>BlazeDSdisplay-name>
    <description>BlazeDS Applicationdescription>
?
    -- Http Flex Session attribute and binding listener support -->
    <listener>
        <listener-class>flex.messaging.HttpFlexSessionlistener-class>
    listener>
?
    -- MessageBroker Servlet -->
    <servlet>
        <servlet-name>MessageBrokerServletservlet-name>
        <display-name>MessageBrokerServletdisplay-name>
        <servlet-class>flex.messaging.MessageBrokerServletservlet-class>
        <init-param>
            <param-name>services.configuration.fileparam-name>
            <param-value>/WEB-INF/flex/services-config.xmlparam-value>
       init-param>
        <load-on-startup>1load-on-startup>
    servlet>
?
-- begin rds
end rds -->
    <servlet>
        <servlet-name>RDSDispatchServletservlet-name>
		<display-name>RDSDispatchServletdisplay-name>
        <servlet-class>flex.rds.server.servlet.FrontEndServletservlet-class>
		<init-param>
			<param-name>useAppserverSecurityparam-name>
			<param-value>falseparam-value>
		init-param>
        <load-on-startup>10load-on-startup>
    servlet>
?
    <servlet-mapping id="RDS_DISPATCH_MAPPING">
        <servlet-name>RDSDispatchServletservlet-name>
        <url-pattern>/CFIDE/main/ide.cfmurl-pattern>
    servlet-mapping>
?
    <servlet-mapping>
        <servlet-name>MessageBrokerServletservlet-name>
        <url-pattern>/messagebroker/*
    
?
    
        index.html
        index.htm
    
?
    
    
?

Ainda dentro do Eclipse localize e abra o arquivo:
WebContentWEB-INFflexremoting-config.xml

Dentro desse arquivo é que informamos quais os serviços que nosso front-end Flex poderá ter acesso. Para tal basta criar um novo destino para cada serviço.

Crie um destino para o serviço UsuarioService adicionando no arquivo remoting-config.xml o código abaixo:

    <destination id="UsuarioService">
    	<properties>
    		<source>br.com.rectius.service.UsuarioServicesource>
    	properties>
    destination>

Pronto! O projeto Java já está configurado para trabalhar com o BlazeDS.

7. Publicando nossa aplicação no Tomcat

Já terminamos o projeto Java e a configuração do BlazeDS. Agora o próximo passo é publicar o projeto no servidor de aplicações Tomcat.

Navegue até a pasta:
C:blazedstomcatwebapps

Crie uma pasta para o projeto Java:
C:blazedstomcatwebappsGerenciaUsuario

Agora dentro do Eclipse, clique sobre a pasta WEB-INF e a copie Edit > Copy.

Cole então seu conteúdo na pasta que criada no passo acima:
C:blazedstomcatwebappsGerenciaUsuario

Agora reinicie o servidor de aplicação Tomcat para subir o projeto que acabamos de fazer deploy:
catalina stop
catalina start

08. Criando o projeto Flex

Uma das novidades do novo ambiente de desenvolvimento Adobe Flex, o Flash Builder 4, é sem dúvidas os recursos de conexão a dados e serviços.
No passo 4 nós fizemos a instalação do Flash Builder 4. Agora localize seu ícone na área de trabalho ou no menu iniciar e abra o aplicativo.

Em seguida crie um novo projeto Flex. Clique em File > New > Flex Project

Agora faça suas configurações conforme a imagem abaixo:

Root folder: Representa o diretório onde fizemos o deploy do nosso projeto Java, dentro do servidor de aplicação.
Root URL: Representa a URL de acesso ao projeto no servidor de aplicação.
Context root: Representa o nome da nossa aplicação.
Output folder: Representa o local onde serão compilados os arquivos do Flex.

Clique em Validate Configuration para se certificar de que você configurou tudo corretamente e em seguida clique em Finish.

Antes de qualquer coisa vamos conferir se o Flash Builder inseriu corretamente um parâmetro de compilação no projeto Flex.

Clique com o botão direito do mouse no projeto Flex, clique em Properties e certifique-se de que o argumento de compilação -services foi inserido:

Agora vamos criar a interface. Digite o código abaixo:

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
			   xmlns:s="library://ns.adobe.com/flex/spark"
			   xmlns:mx="library://ns.adobe.com/flex/mx">
?
	<s:controlBarContent>
		<s:Label text="Gerenciamento de Usuários"
				 fontWeight="bold" fontSize="18"/>
	s:controlBarContent>
?
	<s:layout>
		<s:VerticalLayout
			horizontalAlign="center" verticalAlign="middle"
			paddingLeft="10" paddingRight="10" paddingBottom="20" paddingTop="20"/>
	s:layout>
?
	<s:Panel title="Cadastro de Usuários" width="500">
?
	s:Panel>
?
	<s:Panel width="500" height="100%" title="Listagem de Usuários">
		<mx:DataGrid id="dgUsuarios" left="20" right="20" bottom="20" top="20">
		mx:DataGrid>
	s:Panel>
?
s:Application>

09. Conectando a aplicação Adobe Flex ao Java

Em seguida vamos utilizar os novos recursos inseridos no Flash Builder 4 para se comunicar com o Java.

Clique em Windows > Data/Services. Após a aba correspondente se abrir clique em Connect to Data/Service….

Veja que alguns arquivos foram criados automaticamente:

Clique com o botão direito em qualquer ponto da sua Application (não clique nos componentes Panel ou qualquer outro que não seja a Application) e clique em Generate Service Call:

Em seguida selecione o método listaUsuarios():

Vá para o modo de visualização “Source” e veja que um método handler foi criado para manipular o evento CreationComplete da Application.

Agora volte para o modo “Design”, clique com o botão direito no componente DataGrid e em seguida clique em Bind to Data…

Clique no botão OK e veja o resultado:

Finalizamos o código para a listagem dos usuários. Agora precisamos fazer o código que vai inserir os usuários.

Novamente clique com o botão direito do mouse no componente DataGrid e então clique na opção Generate Details Form…

Arrume o posicionamento do formulário de cadastro, altere o label do botão. Em seguida clique com botão direito do mouse sobre o botão e Generate Service Call…

Agora altere o método button_clickHandler que foi gerado automaticamente:

protected function button_clickHandler(event:MouseEvent):void
{
	var usuario:Usuario = new Usuario();
	usuario.email = emailTextInput.text;
	usuario.nome = nomeTextInput.text;
	usuario.cargo = cargoTextInput.text;
	insereUsuarioResult.token = usuarioService.insereUsuario(usuario);
}

Com isso já conseguimos inserir usuários na coleção do back-end Java. Agora vamos modificar nosso código para que toda vez que um usuário for inserido os usuários sejam listados novamente no componente DataGrid.

Agora altere o método insereUsuarioResult_resultHandler:

protected function insereUsuarioResult_resultHandler(event:ResultEvent):void
{
	listaUsuariosResult.token = usuarioService.listaUsuarios();
}

Agora rode sua aplicação e veja o resultado final.

Pronto! A aplicação está rodando perfeitamente.
Como lição de casa, faça com que seja possível remover e alterar um usuário.

Fontes do projeto:

Download do projeto Flex (28 KB)
Download do projeto Java (3.67 MB)

Referências:
- Accessing data services overview

Espero que tenham gostado e até a próxima!

Os duendes das estatísticas do WordPress.com analisaram o desempenho deste blog em 2010 e apresentam-lhe aqui um resumo de alto nível da saúde do seu blog:

O Blog-Health-o-Meter™ indica: Uau.

Números apetitosos

Um Boeing 747-400 transporta 416 passageiros. Este blog foi visitado cerca de 12,000 vezes em 2010. Ou seja, cerca de 29 747s cheios.

?

Em 2010, escreveu 23 novo artigo, aumentando o arquivo total do seu blog para 80 artigos. Fez upload de 2 imagens, ocupando um total de 85kb.

O seu dia mais activo do ano foi 16 de agosto com 110 visitas. O artigo mais popular desse dia foi C#.

De onde vieram?

Os sites que mais tráfego lhe enviaram em 2010 foram social.msdn.microsoft.com, google.com.br, devmedia.com.br, rederia.net e pt-br.wordpress.com

Alguns visitantes vieram dos motores de busca, sobretudo por exemplo de aplicação desktop c# vs 2010, flavia moreira, sites super interessantes, video aula silverlight e reconhecimento de voz c#

Atracções em 2010

Estes são os artigos e páginas mais visitados em 2010.

C# novembro, 2008
3 comentários

Sobre mim agosto, 2008
54 comentários

Sites super interessantes agosto, 2008
3 comentários

Populando Datagrid usando LINQ TO SQL em Silverlight agosto, 2008
16 comentários

WPF E RECONHECIMENTO DE VOZ março, 2009
4 comentários

Nossa dica Flex de hoje serve para aqueles que desejam acessar métodos ou propriedades do objeto application ou parent documents de dentro de um item renderer. O Flex nos oferece as seguintes formas de acesso:

mx.core.FlexGlobals.topLevelApplication: Retorna o objeto application principal, que pode ser do tipo spark.components.Application ou mx.core.Application.

mx.core.UIComponent.parentDocument: Retorna o parent document do objeto atual. Usado como alternativa ao exemplo que vamos mostrar em seguida.

mx.core.UIComponent.parentApplication: Retorna o objeto application onde o objeto atual está inserido.

Além das formas acima, uma alternativa mais elegante (e orientada a obejtos) para acessar métodos ou propriedades do parent document ou application é utilizarmos os eventos do Flex.

Imagine que temos uma aplicação que lista todos os seus usuários num datagrid. Em uma de suas colunas temos um item renderer com um botão que exclui esses usuários. Para tal precisaremos acessar um método no parent document, que no nosso exemplo será a própria application. Como vimos anteriormente podemos obter o objeto parent document através da propriedade mx.core.UIComponent.parentDocument e dessa forma chamar nosso método de exclusão. Esse método funciona corretamente, porém gera um grande acoplamento entre os objetos além de quebrar o encapsulamento das classes. Para resolvermos esses problemas vamos fazer com que ao clicar no botão excluir um evento bubble seja disparado e no objeto parent document vamos escutar o evento e então chamar o método de exclusão.

O trecho de código abaixo mostra nossa datagrid com o item renderer que possui o botão de exclusão:

1
2
3
4
5
6
7
8
    <mx:DataGrid id="dataGrid" dataProvider="{model}">

        <mx:columns>

            <mx:DataGridColumn headerText="Nome" dataField="nome" />

            <mx:DataGridColumn

                headerText="Ação" dataField="nome"

                itemRenderer="br.com.rectius.itemRendererExample.ButtonItemRenderer" />

        </mx:columns>

    </mx:DataGrid>

A seguir está o código do nosso item renderer. Repare que ao clicar no botão excluir estamos disparando um evento customizado:

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
<?xml version="1.0" encoding="utf-8"?>

<s:MXDataGridItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009"

                          xmlns:s="library://ns.adobe.com/flex/spark"

                          xmlns:mx="library://ns.adobe.com/flex/mx"

                          focusEnabled="true">



    <fx:Metadata>

        [Event(name="ExcluirEvent",type="br.com.rectius.itemRendererExample.ExcluirEvent")]

    </fx:Metadata> 



    <fx:Script>

        <![CDATA[

            import br.com.rectius.itemRendererExample.event.UsersEvent;



            protected function lblData_clickHandler(event:MouseEvent):void

            {

                var excluirEvent:UsersEvent = new UsersEvent(UsersEvent.EXCLUIR_EVENT, dataGridListData.label, true);

                dispatchEvent(excluirEvent);

            }

        ]]>

    </fx:Script>



    <s:Button id="lblData" top="0" left="0" right="0" bottom="0"

              label="Excluir" click="lblData_clickHandler(event)" />



</s:MXDataGridItemRenderer>

A tag Metadata expõe ao parent document o evento customizado do botão excluir:

1
2
3
    <fx:Metadata>

        [Event(name="ExcluirEvent",type="br.com.rectius.itemRendererExample.ExcluirEvent")]

    </fx:Metadata>

Isso nos possibilitou escutar o evento “ExcluirEvent” no parent document:

1
2
3
4
            protected function application1_initializeHandler(event:FlexEvent):void

            {

                dataGrid.addEventListener(UsersEvent.EXCLUIR_EVENT, excluirHandler);

            }

Abaixo você pode ver o evento que criamos para encapsular o usuário a ser excluído. Nesse exemplo estamos setando na propriedade data do nosso evento UsersEvent uma string com o nome do usuário, porém num cenário real poderíamos enviar o ID do usuário, um Value Object que armazenaria todas as propriedades do usuário clicado, ou qualquer outro objeto conveniente para sua situação:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
package br.com.rectius.itemRendererExample.event

{

    import flash.events.DataEvent;



    public class UsersEvent extends DataEvent

    {

        public static var EXCLUIR_EVENT:String = "ExcluirEvent";



        public function UsersEvent(type:String, data:String="", bubbles:Boolean=false, cancelable:Boolean=false)

        {

            super(type, bubbles, cancelable, data);

        }

    }

}

Esperam que tenham gostado. Baixem aqui o projeto de exemplo.

Até a proxima!

E ai rapaziada, mais uma dica massa de como formatar a data no seu DataGrid flex sem usar componentes de terceiros e mil e uma voltas com funções e etc.

Adicione na sua sia um DateFormatter

Ex:

<mx:DateFormatter id="dateFormat" formatString="DD/MM/YYYY"/>

Depois na sua DataGridColumn faça isso

<mx:DataGridColumn headerText="Data Nascimento:" width="100" dataField="dtNascimento">
	<mx:itemRenderer>
		<mx:Component>
			<mx:Label text="{outerDocument.dateFormat.format(data.dtNascimento)}"/>
		mx:Component>
	mx:itemRenderer>
mx:DataGridColumn>

Felipe!

Está procurando alguns tutoriais de Adobe Flex? O blog Design Your Way separou 45 tutoriais muito bacanas para Adobe Flex, eu separei os que eu achei mais interessantes e relevantes.

Aproveite e bons estudos!

01º Flex MP3 Player

02º XML Básico com Flex 3

03º Criando uma galeria 3D do Flickr com Flex e Awaya3D

04º Usando a classe TextRange

05º Construindo um ItemRenderer para TileList

06º Rotacionando a ViewStack em forma de Cubo

07º Drag Drop simples no Flex

08º Cursor customizado no Flex

09º Como fazer gráficos no Flex

10º Visualizador de imagens em miniaturas no Flex

11º Jogo da Velha em Flex com Degrafa

12º Formulários no Flex

13º Sistema de Login em Flex com PHP

14º Pegando informações de músicas do WebService da Amazon com o Adobe Flex

15º Instalando e usando o Google Maps no Flex

16º Galeria de imagens com o componente Accordion e XML no Flex

17º Interação entre Flex e Javascript

18º Múltiplos uploads com JQuery e Flex ou Flash

19º Desenvolvendo janelas em Flex ou Flash para o Adobe Photoshop

20º Criando um cliente Digg em Flex

21º Introdução ao Data Binding

22º Data Grid com XML

23º Usando Flex, PHP e Json para modificar dados no MySQL

24º Trabalhando com o Debugger no Adobe Flex Builder

25º Criando um relógio de contagem regressiva em Flex

26º Transmitindo dados entre Flex e PHP usando Json

27º Criando um leitor de Feeds (RSS) em Flex

28º Como criar um gráfico de Bolhas em Flex

29º Usando Item Renderes

30º Criando um formulário de email em Flex com PHP

31º Criando grandes listas dinâmicas em Flex

32º Encodificador assincrono de JPEG

33º Criando seu jogo de aventura no Adobe Flex

34º Mudando o identificador de seleção de uma Lista no Flex

35º Criando um player customizado do You Tube em Adobe Flex

36º Criando uma lista de contatos usando Flex e XML

37º Criando um album de fotos do Facebook em Flex

38º Modificando o estilo da linha selecionada na Data Grid