Flex/ Flex 3 para Flex 4/ Flex 3 SDK/ Flex 4

Flex 3 para Flex 4: Binding

Uma das grandes vantagens de usar o Flex é fazer uso do Databinding, coisa que ele faz muito bem para quem sabe usar. Databinding para quem não sabe é um língua solta. Tudo que acontece na variável que ele está de butuca, ele vai acabar contando para o patrão dele, ou seja o cara que está esperando a resposta da variável que ele está observando.

No Flex 3 você pode fazer binding da seguinte maneira:

1
2
3
4
 
<mx:Binding source="txtB.text" destination="txtA.text"/>
   <mx:TextInput x="154" y="68" id="txtA"/>
   <mx:TextInput x="154" y="122" id="txtB"/>

Ou você pode fazer assim:

1
2
3
4
5
6
7
8
9
10
11
	<mx:Script>
		<![CDATA[
			import mx.collections.ArrayCollection;
 
			[Bindable]public var dados:ArrayCollection;
 
 
		]]>
	</mx:Script>
 
	<mx:List dataProvider="{dados}"/>

E diretamente em Classes, você pode bindar uma classe inteira assim:

1
2
3
4
5
6
7
8
9
10
11
12
package com.igorcosta.migracao.Binding
{
	[Bindable]
	public class BlogPost
	{
		public function BlogPost()
		{
		}
		public var valor:Number;
		public var debito:Number;
	}
}

Até ai tudo bem, lembrando que é sempre bom você ter cuidado ao uso do Binding, vai que você usa em excesso e depois seu aplicativo fica que nem uma carroça. Só que no Flex 3, Binding é possível apenas de um recurso para outro recurso, e não vice-versa nativamente. Você pode até ter alguns truques na manga como esse aqui:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
 
 
<mx:Binding source="txtA.text" destination="txtB.text" />
<mx:Binding source="txtB.text" destination="txtA.text"/>
	<mx:TextInput x="154" y="68" id="txtA"/>
	<mx:TextInput x="154" y="122" id="txtB"/>
	<mx:Label x="87" y="70" text="Campo A"/>
	<mx:Label x="87" y="124" text="Campo B"/>
 
 
	<mx:Script>
</mx:Application>

Se você tiver feito isso, é mais um problema para você se preocupar no futuro. Então é ai que vem no Flex 4 uma maneira super simples de fazer isso, chamado de Two-way-databinding, que é mais ou menos assim a sintaxe comparada com o último exemplo do Flex 3 acima:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<?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">
	<fx:Declarations>
		<!-- Place non-visual elements (e.g., services, value objects) here -->
	</fx:Declarations>
	<s:layout>
		<s:VerticalLayout/>
	</s:layout>
 
	<s:TextInput id="campoA"/>
	<s:TextInput id="campoB" text="@{campoA.text}"/>
</s:Application>

Através do @ eu consigo amarrar o dedo-duro do Binding tanto indo como vindo, em ambos os campos, independente da ordem que eu os altero, se alterar em 1, irá alterar em outro a propriedade text em ambos os campos.

Então da próxima vez que você for fazer isso do Flex 3 para o Flex 4, lembre-se do Two-way.

Flash Builder/ Flash Catalyst/ Flex/ Flex 3 para Flex 4/ Flex 3 SDK/ Flex 4/ Flex Builder 3/ Flex Builder 4

Flex 3 para Flex 4 : Estilos

Criar estilos no Flex 4 é quase igual a criar no Flex 3, atento apenas em pequenas mudanças devido essa fase de transição e suporte ao Halo. veja as mudanças.

Flex 3 para aplicar estilo na sua aplicação você fez:

1
2
3
4
5
6
7
< ?xml version="1.0" encoding="utf-8"?>
<mx : Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
 
	<mx : Style source="Estilo.css"/>
 
 
</mx>

No Flex 4 você faz:

1
2
3
4
5
6
7
8
9
< ?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">
	<fx :Declarations>
		<!-- Place non-visual elements (e.g., services, value objects) here -->
	</fx>
	<fx :Style source="Estilo.css"/>
</s>

Absolutamente não existe diferença entre o uso de um para o outro. Esse exemplo é apenas para uso de CSS externo ao código mxml. Uma vez que você não é tão inocente em escrever o CSS da sua aplicação dentro do próprio arquivo mxml do application.

Mudanças no namespace

Nem tudo são flores, você achou que isso ia passar direto, você pode usar e continuar usando seus componentes do Flex 3 restrito apenas alguns, contanto que respeitem as novas regras de ciclo de vida, você não terá problemas aparente.
O que mudou é que se você continuar usando seus componentes do Flex 3 com o Flex 4 para funcionar os estilos você terá que adicionar um namespace ao arquivo de CSS e também um seletor na frente de cada tag padrão do componente. Por exemplo:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
/* CSS file */
/* CSS file */
@namespace s "library://ns.adobe.com/flex/spark";
@namespace mx "library://ns.adobe.com/flex/mx";
 
 
/*
 Para estilizar seu componente Button do Flex 3 você tem
que fazer isso
*/
mx|Button{
	  /* suas preferencias do CSS aqui */
}
 
/*
	Para usar o Button do pacote Spark você usa assim
*/
s|Button {
	/* suas preferencias do CSS aqui */
}

Veja que não só os css do Flex 3 ainda funcionam como também você poderá mesclar ambos os css, tanto do 4 quanto do 3.

Suporte da ferramenta Flash Builder para CSS:

Você estáva acostumado a ter o Flex Builder com sua facilidade absurda em criar CSS e customizar suas telas, deixando-as cute cute para seus usuários finais. Porém o time de desenvolvimento do Flash Builder (novo nome para o antigo Flex Builder), decidiu tirar o suporte ao CSS da ferramenta e obriga-lo a usar o Flash Catalyst e forcar você a ser um pouco mais ninja. Vai ver algum desenvolvedor com alma boa tenha portado o Flex 3 Style Explorer para o Flex 4 e assim facilitar novamente sua vida.

Flex/ Flex 3/ Flex 3 para Flex 4/ Flex 3 SDK/ Flex 4

Flex 3 para Flex 4: Namespaces

Houve uma grande polêmica quando estavam fazendo o novo Flex 4 à mais ou menos 1 ano atrás. Quando estavam falando dos novos namespaces e prefixos. Melhorou um pouco do que eles haviam criado devido a comunidade de desenvolvedores reclamarem por causa do problema, eles voltaram atrás e fizeram direito.

No Flex 3 você tem apenas 1 namespace original para criar aplicações Flex, que é:

1
xmlns:mx="http://www.adobe.com/2006/mxml"

Ele define tudo que seu aplicativo precisa para acessar componentes e classes originais do Framework em seu todo.
Só que agora é que vem um grande diferencial do que você estava acostumado a fazer no Flex 3 para o Flex 4. No Flex 4 tudo mudou, temos agora um namespace para cada parte do SDK, isso se da ao fato que temos agora uma nova forma de criar interfaces no Flex 4, através de Skins e o Flash Catalyst é um grande influenciador nesse sentido, além dos seus próprios namespaces o SDK do Flex 4 em sí, vem com vários namespaces pré-definidos, então para não prolongar mais e mais, focarei apenas no SDK.

No Flex 4 temos os seguintes namespaces:

1
2
3
xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx"

Tais namespaces representam cada parte do SDK por completo, os novos componentes do Flex 4 ficam no namespace com prefixo S, e os elementos core do SDK ficam no prefixo FX. Já os conhecidos componentes do Flex 3 continuaram no pacote de prefixo mx.

Cada namespace tem suas próprias propriedades, estilos, efeitos e vez ou outra você pode ficar empacado em achar que funciona no Flex 4, muito cuidado nesse aspecto por que mudou muita coisa mesmo para componentes do Flex 3 funcionarem perfeitamente no Flex 4.

Então uma aplicação típica no Flex 3 ficaria assim:

1
2
3
4
5
6
7
8
9
10
< ?xml version="1.0" encoding="utf-8"?>
<mx :Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" >
 
 
	</mx><mx :Script>
		< ![CDATA[
 
 
		]]>
	</mx>

No Flex 4 uma típica aplicação ficaria assim:

1
2
3
4
5
6
7
8
9
10
11
12
13
< ?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">
	<fx :Declarations>
	</fx>
 
	<fx :Script>
		< ![CDATA[
 
		]]>
	</fx>
</s>
Flex/ Flex 3 Charts/ Flex 3 Open-Source/ Flex 3 SDK/ Flex Componentes/ frameworks/ Open-source

DVM ou Pacote de gráficos agora é open-source

Parte da estratégia da Adobe em colocar o DVM em categoria open-source é justamente tentar envolver mais ainda a comunidade em ajuda-la a corrigir bugs e manter o SDK ativo para a próxima geração de aplicativos desenvolvidos com o SDK do Flex.

A parte boa dessa história é que antes você teria que desembolsar cerca de $249 para ter acesso ao código fonte do mesmo.

Ano passado ela já havia liberado o acesso ao código fonte do produto, porém não permitia o uso comercial do mesmo, já que você não tinha a licença. Essa sem dúvida em minha opinião foi o melhor movimento do tão requisitado e usado framework de gráficos da plataforma Flex.

Você pode baixar o SDK de gráficos + Olap Datagrid + Advanced Datagrid diretamente do site Open-source da Adobe. Visite

Actionscript Frameworks/ AS 3.0/ Eventos/ Flex/ Flex 3/ Flex 3 SDK/ RIA/ Sexta-Flex Talkshow

Gravação da palestra – "Advanced data visualization" disponível

Quem compareceu ao último sextaflex não pode reclamar, foi excelente o evento e o Michel Vandaniker mandou ver no Axiis para todos os 18 participantes ao total presente no evento on-line.
Caso você por algum motivo que seja perdeu e quer acessar, você pode acessar o link da gavação abaixo.

http://experts.na3.acrobat.com/p38851909/

Obrigado a todos que compareceram.

Nesta semana dia 16/10 não haverá sextaflex por motivo de força maior. Não somos muito de reclamar das coisas, mais tem sido bem corrido, em resumo todo mundo decidiu usar Flex de uma única vez e nesse final de ano.

Na próxima semana já temos engatado mais 1 palestrante nacional e vai falar de seus cases e você vai conhecer novas empresas que produzem RIA com qualidade. Queremos mostrar e dar vitrine para todas as minúsculas até as golias das empresas Brasileiras o espaço para ir falando de suas dificuldades e sucessos com a escolha do Flex. Afinal Flex não é só flores.

AS 3.0/ Flex/ Flex 3/ Flex 3 Open-Source/ Flex 3 SDK/ Flex Componentes/ Flex Hacks

Como posicionar o Alert nos valores x e y que eu queira?

Com as mesmas palavras recebidas no título do e-mail enviado pelo Carlos Brandão sobre suas dificuldades em posicionar o componente Alert, escrevemos o título deste post.
Sem dúvidas é um problema simples, antigo e de fácil resolução. Porém muitos desenvolvedores acabam no final achando mais cômodo colocar o Alert em sua posição original, no centro da tela.

Em via das dúvidas, o mais correto seria imitar o Delphi, C#, Swing. Em deixar o desenvolvedor alertar alguma mensagem na posição que ele queira; Já que nativamente se você colocar o parent ele posiciona no container desejado o alerta na posição central referente ao tamanho e posição daquele container. No ambito de melhor experiência é bem mais agradável mostrar a mensagem de alerta onde o usuário esta usando naquele momento.

O Alert é um componente baseado em Panel, uma vez que ele possui apenas 1 método estático chamado show, ele cria 1 popUp por vez usando o PopUpManager direto no global do Application , comportamento esse que é padrão. Se você já é um usuário avançado do Flex com toda certeza você já deve ter implementado isso, analisando o código fonte do SDK.
Como ele é baseado em um Panel e por sua vez é herdado do UIComponent, ele possui tamanho, posição, cor, propriedades do Panel como a propriedade status, em fim uma gama de novas propriedades que podem ser usadas.

Para ajudar o Carlos, segue uma classe simples que faz todo esse trabalho, é definida por uma propriedade booleanada chamada posicionar que por padrão é false para deixar o mesmo comportamento original do Alert, e caso ela venha a ser alterada para true e suas posições x e y forem alteradas, ela fará um novo posicionamento do Alert para o local que você precisa. Veja como isso pode ser feito.

Classe utilitária para criação do Alerta costumizado.

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
package org.igorcosta.alert
{
	import flash.display.Sprite;
 
	import mx.controls.Alert;
	import mx.managers.PopUpManager;
 
	public class Alerta
	{
		/**
		 * @Author www.igorcosta.org
		 * */
		public function Alerta()
		{
			super();
		}
		/**
		 * @public
		 *
		 * Método estático que cria um Alert na posição desejada pelo usuário.
		 *
		 * Por padrão é desabilitado o posicionamento, caso você queira usar o posicionamento você
		 * deve passar o parametro posicionar como true e definir os pontos x e y para se Alert.
		 * vale resaltar que os valores para o posicionamento de x e y são por padrão iguais a 0.
		 * Caso você defina apenas os valores de x e y e deixar o valor original de posicionar como false
		 * não ocorrerá as mudanças.
		 * @return Alert
		 * */
		public static function show(mensagem:String,titulo:String,posicionar:Boolean=false,xPos:Number=0,yPos:Number=0,flags:uint=4,parent:Sprite=null,closehandler:Function =null,icon:Class = null,defaultbuttonFlag:uint =4):Alert{
			var alerta:Alert = Alert.show(mensagem,titulo,flags,parent,closehandler,icon,defaultbuttonFlag);
			Alert.yesLabel = 'Sim';
			Alert.noLabel = 'Não';
			Alert.cancelLabel = 'Cancelar';
			Alert.okLabel = 'OK';
			if(posicionar ==true){
			PopUpManager.centerPopUp (alerta);
			var internalX:Number = xPos;
			var internalY:Number = yPos;
			alerta.move(internalX,internalY);
			}else{
				PopUpManager.centerPopUp (alerta);
			}
 
		return alerta;
		}
	}
}

Aplicação da classe:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
< ?xml version="1.0" encoding="utf-8"?>
<mx :Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
 
	</mx><mx :Script>
		< ![CDATA[
			import org.igorcosta.alert.Alerta;
 
			public function alertar(e:MouseEvent):void{
				Alerta.show('mensagem de boas vindas','teste',true,e.currentTarget.x,e.currentTarget.y);
			}
		]]>
	</mx>
	<mx :Button id="btn" click="alertar(event)" x="31" y="23" width="61" height="32" label="Click"/>
	<mx :Button id="btn0" click="alertar(event)" x="538" y="23" width="61" height="32" label="Click"/>
	<mx :Button id="btn1" click="alertar(event)" x="538" y="338" width="61" height="32" label="Click"/>
	<mx :Button id="btn2" click="alertar(event)" x="31" y="338" width="61" height="32" label="Click"/>
Actionscript/ AS 3.0/ Flash/ Flex/ Flex 3 how to/ Flex 3 SDK/ Flex Builder 3/ frameworks/ Labs

3D na sua aplicação Flex usando apenas os novos recursos do Flash Player 10

O título é enorme, mais o conteúdo é de se animar. Eu já havia postado aqui sobre a novidade, só não tinha dito como fazer.Trabalhar com efeitos 3D no Flex é fácil, divertido e te tira uma boa parte do seu tempo pela manhã.

Existem algumas(1) bibliotecas(2) gratuitas(3) que faz esse serviço para a versão do Flash Player 9, embora ainda funcionando no Flash Player 10. Mais esse conteúdo é direcionado apenas para quem já tem o Flash Player instalado e quer começar a brincar ou quem sabe aplicar os efeitos de 3D em sua aplicação Flex existente já usando os novos recursos de 3D do Flash Player 10.

Requesitos:

– Ter o Flash Player 10 instalado
– Ter o Adobe Flex Builder 3.0.2+
– Ter tempo disponível de 30 minutos.

Antes de mais nada, para começar você vai precisar alterar algumas coisas do seu Flex Builder 3.0.2, embora ele já venha atualizado, existe uma pequena configuração necessária para rodar. Notadamente essa configuração não terá mais valor para o Flex Builder 4, ou melhor “gumbo”,já que por padrão ela vem feita.

Passos para configurar:

1. Vá até o Flex Builder e crie um novo projeto.
2. Depois do projeto criado, clique com o botão direito do mouse sobre o projeto e escolha a opção do menu “Properties”.
3. Vai abrir a tela de propriedades do projeto. Nela você deve escolher a opção “Flex Build Path”.
3d

4. Clique em Flex 3.2 para expandir e delete a biblioteca playerglobal.swc, essa biblioteca é para o Flash Player 9.
5.Clique no botão Add SWC e procure dentro dos arquevos de instalação de sua máquena onde está o seguinte caminho.

C:Program FilesAdobeFlex Builder 3 Plug-insdks3.2.0frameworkslibsplayer10playerglobal.swc

Esse novo playerglobal.swc vai garantir que as classes do Player padrão que no caso será o 10, terá todas as classes requesitadas.

Após isso, volte no menu lateral e escolha a opção Flex Compiler, e adicione ao compilador o seguinte parâmetro “-target-player=10”. Com isso garantimos que o compilador vai adicionar as classes dependentes para isso.

Feito isso, caso você queira assegurar que o swf gerado seja enxergado e possa refletir as mudanças para o instalador automático, mude a versão do Flash Player que está ai de 9.0.24 para 10.0.0.

Passo final. Clique OK e está salvo as alterações, agora é só contigo.

Entendendo um pouco do 3D do Flash Player 10.

Toda classe do DisplayObject, MovieClip e Sprite, tem novas propriedades cada uma dessas novas propriedades faz a rotação do objeto em um eixo X,Y e Z. As propriedades são: rotationX,rotationY, rotationZ,transformX,transformY,transformZ,scaleX,scaleY,scaleZ, dentre outras classes. Quem trabalha com Flash CS4 pode ver em detalhe como funciona o 3D do Flash Player (em português).

Para quem trabalha com Flash tem-se uma vantagem que é definir o ponto de registro x,y de um objeto quando se está criando, o que você pode fazer com que seu objeto seja rotacionado no eixo existente e assim fazer um efeito conciso.

Já no Flex não temos essa vantagem o que podemos fazer é imitar o Flash IDE nessa parte, colocando qualquer um de nossos componentes como container do componente afetado, complicado né?! Não, por exemplo veja abaixo que apliquei diretamente o efeito de 3D à um painel, observe que ele vai rotacionar no eixo Y de onde os pontos x,y foram registrados.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
< ?xml version="1.0" encoding="utf-8"?>
<mx :Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
 
	</mx><mx :Script>
		< ![CDATA[
			import caurina.transitions.Tweener;
 
 
			public function rotate():void{
 
				Tweener.addTween(pa,{rotationY:pa.rotationY+180,time:1});
			}
		]]>
	</mx>
 
 
	<mx :Panel  id="pa" x="451" y="141" width="208" height="196" title="Painel Rotativo">
 
	</mx>
	<mx :Button x="20" y="55" label="Rotacionar" click="rotate()"/>

Agora comportando-se como no Flash IDE, adiciono o painel à um container.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
< ?xml version="1.0" encoding="utf-8"?>
<mx :Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
 
	</mx><mx :Script>
		< ![CDATA[
			import caurina.transitions.Tweener;
 
 
			public function rotate():void{
 
				Tweener.addTween(pa,{rotationY:pa.rotationY+180,time:1});
			}
		]]>
	</mx>
 
	<mx :Container clipContent="false" id="pa" width="300" height="300" x="513.5" y="223">
	</mx><mx :Panel horizontalCenter="0" x="-150" y="-150" width="300" height="300" title="Painel Rotativo">
 
	</mx>
 
	<mx :Button x="20" y="55" label="Rotacionar" click="rotate()"/>

Onde depois você pode ir manipulando de uma só vez as três propriedades definidas. Exemplo abaixo:

3d2

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 :Application horizontalScrollPolicy="off" verticalScrollPolicy="off" xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" width="675" height="509">
 
	</mx><mx :Script>
		< ![CDATA[
			import caurina.transitions.Tweener;
 
 
			public function rotate():void{
 
				Tweener.addTween(pa,{rotationX:transformaX.value,rotationY:transformaY.value,rotationZ:transformaZ.value,time:1});
			}
		]]>
	</mx>
 
	<mx :Container clipContent="false" id="pa" width="150" height="150" x="486" y="212">
	</mx><mx :Panel horizontalCenter="0" x="-75" y="-75" width="150" height="150" title="Painel Rotativo">
 
	</mx>
 
	<mx :Button x="29" y="257" label="Rotacionar" click="rotate()"/>
	<mx :Form x="20" y="85">
		</mx><mx :FormItem label="rotationX">
			<mx :HSlider minimum="0" labels="[0,90,180,270,360]" maximum="360" allowTrackClick="true" snapInterval="15" id="transformaX" />
		</mx>
		<mx :FormItem label="rotationY">
			<mx :HSlider minimum="0" labels="[0,90,180,270,360]" maximum="360" allowTrackClick="true" snapInterval="15" id="transformaY"/>
		</mx>
		<mx :FormItem label="rotationZ">
			<mx :HSlider minimum="0" labels="[0,90,180,270,360]" maximum="360" allowTrackClick="true" snapInterval="15" id="transformaZ"/>
		</mx>
Flex/ Flex 3 how to/ Flex 3 SDK

#5 Flex How to: Como popular um menu e aplicar icones e eventos

Tem muita gente com essa dúvida, andamos pesquesando os arquevos da lista da Flex-Brasil, e percebemos que teve um número considerável sobre esse tópico.
Criar menus dinâmicos ou não em Flex é fácil, a definição de estrutura de seus itens é feita por um XML, sela ele interno ou externo.

O formato do arquevo xml que o MenuBar ou Menu lê, é pré-definido com alguns atributos que ambos os componentes já interpretam. São elas:

  • enabled – Habilita ou desabilita um item do menu.
  • groupName – Quando um item haje como radio Button, ou check Button de um grupo de itens.
  • icon – Coloca um item como imagem, herdando de um asset do tipo Class.
  • label – Nome que aparece no item do menu.
  • toggled – Seleciona ou escolhe o tipo do item marcando na seleção do item.
  • type – Especifica o tipo do item do menu com seus valores (check, radio e separator)

Exemplo do meumenu.xml :



		
                
                
                	
                
                

            
            		
            		
            
            
                
                
                
            
            

Em alguns tags do exemplo acima usei as propriedades definidas do xml que é automaticamente interpretada pelo menu. Lembrando que se meu XML tem formato E4X , precisa-se setar o labelField do Menubar, que para acessar um atributo no XML só basta ler com @ e o nome da propriedade.

O resultado do XML acima pode ser aplicado dentro do Flex, como mostra o exemplo abaixo.

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
< ?xml version="1.0" encoding="utf-8"?>
<mx :Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
</mx><mx :XML id="meumenu" xmlns="" format="e4x">
<root>
		<menuitem label="Arquevo">
                <menuitem label="Novo Painel"/>
                </menuitem><menuitem label="Abrir">
                	<menuitem label="Ultimos..."/>
                </menuitem>
                <menuitem label="Fechar" enabled="false"/>
 
            <menuitem label="Editar">
            		<menuitem label="Titulo"/>
            		<menuitem label="Tamanho"/>
            </menuitem>
            <menuitem label="Visualizar">
                <menuitem label="50%"
                    type="radio" groupName="grupo"/>
                <menuitem label="100%"
                    type="radio" groupName="grupo"
                    selected="true"/>
                <menuitem label="150%"
                    type="radio" groupName="grupo"/>
            </menuitem>
            </root>
</mx>
<mx :MenuBar dataProvider="{meumenu.menuitem}" labelField="@label" width="100%"/>

Para se usar com ícone, você deve setar a propriedade iconField no MenuBar, para que o próprio possa setar o valor da imagem. Lembrando que sempre com o tipo Class.
Auxiliando nesse ponto, você pode definir uma classe ou arquevo especificadamente para setar os icones de seu menu. Criei um arquevo simples que faz todo esse processo de Embed e converte para Class.

Como ficou o arquevo:

1
2
3
4
5
6
7
8
9
10
11
12
13
// ActionScript file
 
[Embed(source="./assets/dev.png")]
[Bindable]
public var iconeDev:Class;
 
[Embed(source="./assets/book.png")]
[Bindable]
public var iconeBook:Class;
 
[Embed(source="./assets/info.png")]
[Bindable]
public var iconeInfo:Class;

Depois que definir isso, só trato de verificar se o iconField, foi definido no MenuBar e também o atributo tem o nome específico setado pela variável criada no arquevo “includeIcones.as”.

Como fica o exemplo com ícones.

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
< ?xml version="1.0" encoding="utf-8"?>
<mx :Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
 
</mx><mx :Script>
	< ![CDATA[
		include "includeIcones.as";
 
 
	]]>
</mx>
<mx :XML id="meumenu" xmlns="" format="e4x">
<root>
		<menuitem label="Arquevo" icon="iconeDev">
                <menuitem label="Novo Painel"/>
                </menuitem><menuitem label="Abrir">
                	<menuitem label="Ultimos..."/>
                </menuitem>
                <menuitem label="Fechar" enabled="false"/>
 
            <menuitem label="Editar">
            		<menuitem label="Titulo" icon="iconeBook"/>
            		<menuitem label="Tamanho"/>
            </menuitem>
            <menuitem label="Visualizar" icon="iconeInfo">
                <menuitem label="50%"
                    type="radio" groupName="grupo"/>
                <menuitem label="100%"
                    type="radio" groupName="grupo"
                    selected="true"/>
                <menuitem label="150%"
                    type="radio" groupName="grupo"/>
            </menuitem>
            </root>
</mx>
<mx :MenuBar iconField="@icon" dataProvider="{meumenu.menuitem}" labelField="@label" width="100%"/>

Como fazer para selecionar Itens do Menu e atribuir Eventos a cada item?

Atribuir ao MenuBar o evento de click e saber qual ícone foi selecionado, fica a cargo da propriedade itemClick do MenuBar,Menu.

Veja exemplo:

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
< ?xml version="1.0" encoding="utf-8"?>
<mx :Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
 
</mx><mx :Script>
	< ![CDATA[
		import mx.controls.Alert;
        import mx.events.MenuEvent;
 
		include "includeIcones.as";
 
            private function handleItemClick(event:MenuEvent):void {
 
                Alert.show('Menu escolhido foi: '+ event.item.@label);
            }
 
 
	]]>
</mx>
<mx :XML id="meumenu" xmlns="" format="e4x">
<root>
		<menuitem label="Arquevo" icon="iconeDev">
                <menuitem label="Novo Painel"/>
                </menuitem><menuitem label="Abrir">
                	<menuitem label="Ultimos..."/>
                </menuitem>
                <menuitem label="Fechar" enabled="false"/>
 
            <menuitem label="Editar">
            		<menuitem label="Titulo" icon="iconeBook"/>
            		<menuitem label="Tamanho"/>
            </menuitem>
            <menuitem label="Visualizar" icon="iconeInfo">
                <menuitem label="50%"
                    type="radio" groupName="grupo"/>
                <menuitem label="100%"
                    type="radio" groupName="grupo"
                    selected="true"/>
                <menuitem label="150%"
                    type="radio" groupName="grupo"/>
            </menuitem>
            </root>
</mx>
<mx :MenuBar itemClick="handleItemClick(event)" iconField="@icon" dataProvider="{meumenu.menuitem}" labelField="@label" width="100%"/>
Flex/ Flex 3/ Flex 3 SDK/ Flex 4/ Open-source

follow-up sobre o futuro do Flex SDK

A reunião foi bem produtiva e teve uma dúzia de perguntas descente para quem realmente leva desenvolvimento de software a sério. Tirando algumas perguntas do público em geral que era o suporte do Flex para celulares e iphone, que dentre 10 perguntas essa foi feita umas 9 vezes.

Fora isso, o evento trouxe uma boa perspectiva para o time do Flex e assim ainda em processo de decição vai alavancar mais novidades daqui em diante.

Apenas uma coisa foi confirmada que o time do Flex vai dedicar pelo menos uma vez ao mês esse tipo de encontro e saber o que a comunidade de desenvolvedores acha das idéias e decisões que o Flex SDK pode sofrer. Eu acho isso bem interessante e afugenta o desequelíbrio de fracasso.

Outro ponto bastante importante é que o pessoal do SDK tem colaborado constantemente com o time de documentação, tanto que agora você pode no livedocs colocar posts de blogs sobre a documentação oficial da Adobe e assim facilitar a difusão de conteúdo.

Sobre o SDK

A grande reclamação é que desenvolvedores estavam um pouco preocupados com o sistema atual de contribuição de patchs para corrigir bugs, já que na versão atual 3.3 do Flex SDK, liberada quinta-feira passada, sofreu poucas mudanças, isso gerou uma certa receio do público em geral.

Foi decidido então que o time do SDK fará alguns vídeos para o Adobe TV e artigos para o devnet, mostrando como contribuir para o SDK e corrigir suas falhas.

Eu conversei depois com Matt Chotin e Deepa sobre a possibilidade de facilitar esse processo de contribuição, não só apenas corrigir falhas mais também deixar que empresas e membros da comunidade que seguem o padrão do código do Flex, possam contribuir para novos componentes de UI e Remoting. A idéia foi bem aceita e está na pauta, Matt prometeu me enviar uma resposta sobre isso mês que vem.

Outra sugestão como foi dada aqui, é a criação de uma fundação sem fins lucrativos para manter o SDK do Flex, já que tem empresas como a Borland, Microsoft, PeopleSoft(Oracle),BrightCove, Cynergy,EffectiveUI,Universal Mind, possam contribuir com seus respectivos componentes e melhorias no SDK, sem ter que está amarrado a uma empresa.

O mundo corporativo é meio controverso em achar que seus códigos e idéias não podem ficar em uma empresa com fins lucrativos e o processo de convergência entre elas podem haver conflitos de interesse já que é um software competitivo. A idéia foi recebida com um pouco de espanto, mais no fundo no fundo se eles pararem e pensarem direito pode até colar, devido ao sucesso que é hoje a Mozilla Fundation. Onde existem mais de 30 colaboradores Enterprise e uma cadeia de desenvolvedores independentes que colaboram para melhoria do navegor Firefox, ThunderBird.

Em fim, as mudanças futuras vão acontecer e como sempre ela a nave mãe(Adobe) herdou isso da antiga macromedia, em ouvir a comunidade e esperar que ela ajude a decidir sobre seus softwares opensource.

Qualquer futura mudança vocês podem aguardar que publicaremos aqui.

Para quem perdeu a oportunidade de participar da palestra como eu, pode assistir o vídeo gravado aqui.
https://admin.adobe.acrobat.com/_a300965365/p37175125

Flex/ Flex 3/ Flex 3 SDK/ Flex Builder 3/ Notícias/ Open-source

Atualização do Flex 3.1 SDK/Builder

Não teve muito buzz sobre a atualização, então como não perdemos o costume de mostrar as últimas novidades.
Liberaram uma atualização do Flex Builder e Flex SDK, aqui você pode ver as informações necessárias para atualizar, valendo somente para produtos registrados e para licenças de estudantes.

Ao total no SDK foram vários bugs corrigidos, adicação de suporte ao Flash Player 10 mesmo estando em beta.

Você pode ver o pronunciamento aqui do Matt Chotin.
Link para download do SDK
Link para bugs corrigidos.(você precisa logar para acessar a lista)

Release Notes