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 Builder 3

10 plug-ins para deixar seu Flex Builder turbinado

O Flex Builder é sem dúvida a primeira IDE que um desenvolvedor terá contato quando iniciar no mundo Flex. Porém quem já trabalha com outras IDEs, vai sentir falta de alguns recursos existentes. Veja abaixo uma lista completa de plug-ins para melhorar seu Flex Builder e conseqüentemente aumentar sua produtividade com a ferramenta.

  1. RegExp Painel: O RegExp é para quem trabalha gosta de usar expressões regulares em Actionscript e quer testar na própria ferramenta, sem ter que usar outras ferramentas para tal. Baixe aqui.
  2. Enterprise IDE:Um baita plug-in, pena que ainda não há definições sobre comercialização, suporte, preços. Porém traz uma gama de recursos interessantes, desde leitor de RSS à geradores de classes. Baixe aqui
  3. Cairngorm Plugin: Desenvolvido pelo próprio pessoal da Adobe, esse plug-in fornece de forma fácil a geração de novas classes para quem usa o Cairngorm Framework. Baixe aqui.
  4. Blueprint: Pintou aquela dúvida no meio do desenvolvimento e quer ver como um método, classe, componente funciona? Não precisa mais ficar esperando o Google responder para você, com o BluePrint você faz tudo isso sem sai da IDE. O Blueprint foi desenvolvido por uma empresa na Romênia que fora comprada pela Adobe. Baixe aqui.
  5. Flex Formatter: Se seu código está meio bagunçado no aspecto de identação. O Flex Formatter é feito para você, como o próprio nome diz, ele ajeita o código para você e lhe ajuda a manter um código legível e organizado. Baixe aqui.
  6. Eclipse Monkey: Sabe o famoso Grease monkey do Firefox?Pois é alguém teve a idéia de usar a mesma idéia do grease monkey dentro do Eclipse, com ele é possível fazer de tudo, prota tanto que você pode por exemplo gerar automaticamente getter e setters. Baixe aqui.
  7. Aptana: Quer que seu Flex Builder tenha um editor de XHTML, CSS, Javascript excelente sem ter que usar outra IDE? O Aptana é feito para isso, além disso com ele você pode gerar novos projetos AIR usando apenas Javascript, coisa que no Flex Builder só é possível usando Flex. Baixe Aqui.
  8. PDT Plug-in:Se você é desenvolvedor PHP e quer incorporar em seu Flex Builder a edição de código PHP sem usar a IDE da Zend. Você pode usar o PDT dentro do seu Flex Builder e ter suporte a edição de código PHP. Baixe aqui.
  9. CFEclipse:Você desenvolvedor ColdFusion, já conhece o CFEclipse, o bom é que você pode instalar o plug-in do CFEclipse direto no seu Flex Builder e assim editar cfcs, cfml sem precisar de outra IDE. Baixe aqui.
  10. Flex Builder em Full Screen: O Plug-in Eclipse Fullscreen, ajuda você que está de saco cheio dos paineis Flex Navigator, Flex Components e Outline, que ficam ali ao lado ocupando espaço. Você só quer um desejo ter o editor 100% livre de qualquer coisa que lhe chame a atenção. Baixe aqui.

Outros técnicas que você pode usar para pimpar seu Flex Builder, você acha aqui(1), aqui(2)e aqui(3).

Ficou algum plug-in de fora? Comente aqui.

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>
Flash CS4/ Flex Builder 3

Como usar componentes padrão do Flash CS4 no Flex Builder 3

Últimamente eu venho fazendo alguns experimentos para aperfeiçoar as habilidades perdidas no Flash, já fazia tempo desde 2004 que não abria o Flash nem para fazer banner. Então esse ano voltei para ver como andava o Flash IDE suas novidades, tem muitos recursos que vai ser dificil acompanhar todos em pouco tempo.
Embora o Flash tenha ganhado tantos recursos em sua ferramenta de edição, o editor de actionscript 3.0 peca, é fraco, obsoleto e não tem todas as funções que um bom e básico editor de programação tem.
Isso deixa alguns que trabalham ainda com Flash tristes e com poucas opções. Felizmente em minhas andanças eu vi que muitos optavam por usar o Flex Builder como seu predileto editor de Actionscript.

O editor de actionscript é muito bom para quem trabalhava com Actionscript dentro do Flash IDE, é algo como de água para o vinho. Existe outro editor que também tem que é o FDT que é o campeão em edição de actionscript 3.0. Sem dúvidas é o melhor. Em fim, voltando ao nosso Flex Builder.
A única tarefa para fazer com que o Flex Builer edite seu actionscript não tem mistério, já que cada projeto feito no Flex Builder não passa de pastas administradas virtualmente, o Flex Builder só organiza.

Configurando o Flex Builder

1. Faça o download do Flex Builder stand alone ou plug-in para sua máquena.
2. Instale-o.
3. Crie um novo Actionscript 3.0 Project.
4. Crie um novo diretório chamado libs na raiz do projeto e não na pasta ‘src’, vamos fazer similar o que o Flex Builder faz para projetos Flex.
5. Após criado, clique com o botão direito do mouse sobre o projeto e vá até a opção ‘properties’.
6. Ao lado esquerdo do menu em lista, escolha a opção ‘Actionscript Build Path’.
7. Clique na aba com o nome ‘Library Path’ e clique no botão add SWC Folder.
8. Digite o nome da pasta, libs. Já que vai conter o diretório do mesmo projeto.

Pronto, com isso concluído, o seu projeto vai aceitar arquevos .SWC diretamente na pasta libs e irá refletir para todo seu projeto. Pulamos agora para o Flash CS4, vamos criar um swc por lá.

Configurando o Flash CS4
1. Faça o download do Flash CS4 Professional
2. Instale-o.
3. Crie um novo arquevo Flash para Actionscript 3.0
4. Após criá-lo, abra o painel de componentes. Para abrir vá em Window > Components.
5. Arraste quais componentes você quer para o palco de seu arquevo, e depois delete.
6. Automaticamente as classes, assets do componente arrastado é salvo na biblioteca do filme Flash, para verificar se eles estão por lá, combine CTRL+L, e você vai ver.
7.Depois disso, você vai precisar da seguinte opção, vá em File > Publish Settings > Desmarque a opção HTML.
8. Selecione a Aba Flash, na categoria ‘SWF Settings, marque a opção Export SWC.
9. Clique OK e pronto, seu SWC está pronto, basta agora arrastar para dentro da pasta libs que você criou lá no Flex Builder que será refletida as mudanças, caso não seja, no projeto lá do Flex Builder, pressione F5 depois que você adicionar o swc.

As vantagens de usar isso é que você pode usar o autocomplete com todas as propriedades dos componentes usados e a facilidade de montar uma interface em um projeto simples de Actionscript.

Flex/ Flex Builder 3/ Flex Hacks

Hackeando o Flex em 2009

Em meu blog em inglês temos uma categoria chamada Flex Hacking, mais ou menos Hackeando o Flex e suas tecnologias para o bem.

A série de hacks vão ser extendidas ano que vem aqui neste blog em português para que vocês também leitores e falantes da língua portuguesa possam ficar à par dos Hackings feitos por nós.

Porém enquanto os Hacking em português não estão vindo. Fiquem com o que já tem em inglês. É uma ótima leitura e de grande valor os hacks.

Espero que vocês gostem, dêem opinião.

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

Dicas/ Flex 3/ Flex Builder 3/ Flex e Faculdades

Flex Builder 3 Professional gratuito para estudantes universitários

A partir desta quinta-feira. A faculdade ou o aluno que for ao site vai receber a licença gratuita do Flex Builder 3 Professional ao invés da atual Flex 2.

Eu havia comentando na lista Flex-Brasil que provavelmente só sairia no segundo quarto de 2009. Mais falando com o pessoal interno responsável, eles estarão liberando isso nesta próxima quinta-feira.

Quem ja tinha pedido a versão do Flex 2 podem refazer o pedido seguindo os passos anteriores e será enviado para você um novo serial de upgrade.

Não tem desculpas para faculdades não incluirem Flex em sua carga horária de cursos.

Flex continua chocando a todos!! WOW! Mais novidades ainda mais quentes no próximo post.

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

Flex Builder 3 beta 3 disponível no Labs

Para quem ainda não viu, já está disponível o novo Beta 3 do Flex Builder 3 codename Moxie. Esta será a última versão pública e beta do Flex Builder 3. Ano que vem sairá a versão final.

Antes que você saia instalando já o Flex Builder 3 Beta 3, por favor leia o Release Notes.

Dica: Atualize sua última versão do Flash Player para a 9.0.115 caso você tenha a 9.0.60, Aplicações Flex que usem RSL vão precisar desta última versão.

Link para visitar o Release Notes.

Veja os kwon Issues que a Adobe já está providenciando para consertar.

Dicas/ Flex 3/ Flex Builder 3

Crônicas parte 9: Flex Builder 3 – Export Release

O Novo Flex Builder 3, tem várias atalhos que foram implementados e estavam precisando aparecer, e uma dessas novidades é o Export Release, anteriormente na versão 2.0 você tinha apenas uma pasta BIN como é comum no Visual Studio, onde você tinha 2 versões do .swf uma com a versão final do aplicativo e a outra com uma versão para -debug.swf.

Atualmente no Flex Builder 3, você agora vai ter apenas uma pasta, chamada bin-debug, onde nesta pasta você terá um .swf mais gordo, pesado contendo todas as diretivas de suporte para debugar a aplicação, no qual a versão do debugger do Flex surgiu novíssimas e ótimas implementações.

Então pergunta-se, como funciona este tal de export release?

Fácil, o Flex Builder 3, tem um atalho no menu principal, veja figura abaixo:

Toda vez que você altera no Flex Builder qualquer arquevo, por padrão ele já vem com um Local History, tipo um mini SVN onde você vai poder controlar versões daquile arquevo. Aproveitando-se disso, cada vez que você exportar uma versão do .swf (aplicativo), você vai gerar vários releases como é mostrado na imagem abaixo:

Então da próxima vez que for fazer o upload de sua aplicação para a internet, não esqueça de colocar a versão release, que é mais leve.