Novo Flex 4 (Gumbo)
Tudo o que você precisa saber sobre Flex 4 está descrito sumariamente neste artigo. O Flex 4 é uma evolução muito significativa no desenvolvimento da tecnologia Adobe Flex. Não se trata apenas da correção de bugs e criação de novas funcionalidades, mas da evolução de conceitos que tornarão o Flex uma ferramenta mais dinâmica e poderosa.
Atualmente a versão do Flex 4 está em beta, sendo que a versão oficial sairá no início de 2010.
A nova versão do Flex 4 possui objetivos claros, descritos pelo próprio Matt Chotin. Destes objetivos, temos:
- Design: o Flex 4 será amplamente acoplado ao Design. Novas ferramentas e nova arquitetura foram criadas para que o Design de uma aplicação seja otimizada. Destaca-se principalmente a integração com o Adobe Catalyst, onde será possível desenhar interfaces neste software e fazer a importação para o Adobe Flex. Novos tipos de componentes também fazem parte desta evolução, sendo que estes possuem uma estrutura melhorada de forma a atender melhor a criação de estilos e a sua manipulação de design.
- Produtividade: melhorias na performance do novo Flex Builder 4, que agora passa a se chamar Flash Builder 4. Destas melhorias podemos citar a criação automática de eventos, novas janelas de visualização de dados, e novas formas de realizar DataBind dos componentes, principalmente se você estiver utilizando ColdFusion.
- Evolução: com o novo Flash Player 10, o framework Flex 4 apresenta novos recursos para trabalhar principalmente com o suporte das novas funcionalidades do Player.
Separando as mudanças de uma forma mais significativa, temos:
Novos NameSpaces
Assim que criamos um projeto no Flash Builder notamos a criação do seguinte mxml:
<?xml version="1.0" encoding="utf-8"?><br /><s:Application <br /> xmlns:fx="http://ns.adobe.com/mxml/2009" <br /> xmlns:s="library://ns.adobe.com/flex/spark" <br /> xmlns:mx="library://ns.adobe.com/flex/halo"<br /> minWidth="1024" minHeight="768"><br /> <br /></s:Application>Vemos agora a criação de 3 namespaces. O “mx” é o mesmo do Flex 3 (sendo que muitos foram substituídos). O “s” é relativo aos componentes Spark, e o fx, aos componentes fx. Todos são descritos a seguir.
Novos componentes SPARK
Estes novos componentes substituem a maioria dos componentes do Flex 3 (mx). Os componentes Spark possuem um melhor tratamento quanto a skins, além de integrarem melhor a iteração entre a equipe de design e programação. Os motivos técnicos de como foram feitas estas melhorias podem ser discutidos em um novo artigo…
A diferença de design pode ser compara nesta imagem:
A criação do Panel também obedece ao novo namespace Spark, realizado da seguinte forma:
<s:Panel x="57" y="21" width="250" height="200" title="Eu sou um Panel"><br /> <s:Button x="85" y="75" label="Button"/><br /></s:Panel>O novo Flash Builder 4
A instalação do Flash Builder 4 pode ser adquirida em http://labs.adobe.com/technologies/flashbuilder4/
Você poderá testar o Flash Builder 4 (Beta) por 30 dias. Após esse período, caso tenha a licença do Adobe Flex Builder 3, poderá solicitar uma outra licença para continuar acessando o Flash Builder 4.
Novo Package Explorer
Agora o Flash Builder possui uma nova janela para navegação dos arquivos do Projeto. O que no Flex 3 era chamado de Flex Navigator, agora no Flash Builder 4 é chamado de Package Explorer, que é muito mais completo que o antecessor.
Suporte a FXG
O Flash Player 10 possui um suporte incrível a gráficos 3D e outros recursos incríveis de renderização. O Suporte FXG do Flex 4 irá dar o suporte necessário para que os programadores Flex possam utilizar os recursos do Flash Player 10. Dentre estes recursos pode-se citar a criação de elementos gráficos, como por exemplo uma linha:
<s:Panel id="pnl" x="57" y="21" width="250" height="200" title="Eu sou um Panel"><br /> <s:Graphic x="0" y="0"> <br /> <s:Line xTo="248" yTo="165"> <br /> <s:stroke> <br /> <s:Stroke color="0x000000" weight="1"/> <br /> </s:stroke> <br /> </s:Line><br /> <s:Line yTo="165" xFrom="246" x="1" y="2"> <br /> <s:stroke> <br /> <s:Stroke color="0x000000" weight="1"/> <br /> </s:stroke> <br /> </s:Line> <br /> </s:Graphic> <br /> </s:Panel>Que produz o seguinte resultado:
Este é apenas um exemplo simples de como podemos integrar mais os recursos do Flash Player 10 ao Flex 4.
A nova Tag <declarations>
Esta Tag permite que possamos criar novas propriedades dentro de um componente. Por exemplo, suponha um botão, e queremos que ele tenha uma propriedade chamada “LabelDefault”. Então criamos o seguinte componente:
<?xml version="1.0" encoding="utf-8"?> <br /><!-- language/MyButton.mxml --> <br /><s:Button <br /> xmlns:fx="http://ns.adobe.com/mxml/2009" <br /> xmlns:mx="library://ns.adobe.com/flex/halo" <br /> xmlns:s="library://ns.adobe.com/flex/spark" <br />> <br /><!Propriedades comuns são declaradas como Tags normais, dentro do Button --><br /> <s:color>Red</s:color> <br /> <s:fontSize>16</s:fontSize> <br /> <br /> <!Propriedades customizadas usam a tag Declarations <br />--> <br /> <fx:Declarations> <br /> <fx:String id="LabelDefault">Clique aqui</fx:String> <br /> </fx:Declarations> Desta forma, quando utilizamos este botão, podemos fazer assim:
<?xml version="1.0" encoding="utf-8"?> <br /><!-- language/MainApp.mxml --> <br /><s:Application <br /> xmlns:fx="http://ns.adobe.com/mxml/2009" <br /> xmlns:mx="library://ns.adobe.com/flex/halo" <br /> xmlns:s="library://ns.adobe.com/flex/spark" <br /> xmlns:myComps="*" <br />> <br /> <myComps:MyButton id="b1" label="{b1.LabelDefault}"/> <br /></s:Application> Fim do mx:VBox, mx:Canvas, MS:Tile, entre outros
Os novos componentes Spark substituiriam alguns componentes mx, dentre eles o vbox, hbox e canvas, que agora pertencem a um novo componente chamado group. A definição sobre a posição dos elementos, se eles vão ficar na vertical ou na horizontal, depende exclusivamente da propriedade layout, veja
VBOX:
<s:Group x="98" y="96" width="245" height="195"><br /> <s:layout><br /> <s:VerticalLayout/><br /> </s:layout><br /> <br /> <s:Button label="Button"/><br /> <s:Button label="Button"/><br /><br /></s:Group>TILE:
<s:Group x="98" y="96" width="245" height="195"><br /> <s:layout><br /> <s:TileLayout/><br /> </s:layout><br /> <s:Button label="Button"/><br /> <s:Button label="Button"/><br /> <s:Button label="Button"/><br /> <s:Button label="Button"/><br /> <s:Button label="Button"/><br /> <s:Button label="Button"/><br /> <br /> </s:Group>Suporte à criação de retângulos, quadrados, elipses…
Uma das maiores atualizações do Flex 4 é a inclusão de diversos “artefatos” para o desenho de formas geométricas. Por exemplo:
<?xml version="1.0" encoding="utf-8"?> <br /><!-- EllipseExample.mxml --> <br /><s:Application <br />xmlns:fx="http://ns.adobe.com/mxml/2009" <br />xmlns:mx="library://ns.adobe.com/flex/halo" <br />xmlns:s="library://ns.adobe.com/flex/spark" <br />> <br /> <mx:Panel title="Ellipse Graphic Example" <br /> height="75%" width="75%" layout="horizontal" <br /> paddingTop="10" paddingBottom="10" paddingLeft="10" paddingRight="10"> <br /> <mx:Canvas top="0" bottom="0" left="0" right="0"> <br /> <s:Graphic x="0" y="0"> <br /> <s:Ellipse height="100" width="250"> <br /> <s:stroke> <br /> <s:Stroke color="0x000000" weight="2"/> <br /> </s:stroke> <br /> <s:fill> <br /> <s:RadialGradient> <br /> <s:entries> <br /> <s:GradientEntry color="0x0056FF" ratio="0" alpha=".5"/> <br /> <s:GradientEntry color="0x00CC99" ratio=".33" alpha=".5"/> <br /> <s:GradientEntry color="0xECEC21" ratio=".66" alpha=".5"/> <br /> </s:entries> <br /> </s:RadialGradient> <br /> </s:fill> <br /> </s:Ellipse> <br /> </s:Graphic> <br /> </mx:Canvas> <br /> </mx:Panel> <br /></s:Application>Produz o seguinte resultado:
Suporte a preenchimento de cores (gradientes)
Com este suporte é possível realizar diversas formas de preenchimento de gradientes, melhorando consideravelmente o design de uma aplicação. O exemplo a seguir ilustra um gradiente:
<?xml version="1.0" encoding="utf-8"?> <br /><!-- LinearGradientExample.mxml --> <br /><s:Application <br />xmlns:fx="http://ns.adobe.com/mxml/2009" <br />xmlns:mx="library://ns.adobe.com/flex/halo" <br />xmlns:s="library://ns.adobe.com/flex/spark" <br />> <br /> <mx:Panel title="Linear Gradient Example" <br /> height="75%" width="75%" layout="horizontal" <br /> paddingTop="10" paddingBottom="10" paddingLeft="10" paddingRight="10"> <br /> <mx:Canvas top="0" bottom="0" left="0" right="0"> <br /> <s:Graphic x="0" y="0"> <br /> <!-- Draw rectangle that is filled with a LinearGradient. --> <br /> <s:Rect height="100" width="200"> <br /> <s:stroke> <br /> <s:Stroke color="0x000000" weight="2"/> <br /> </s:stroke> <br /> <s:fill> <br /> <s:LinearGradient> <br /> <s:entries> <br /> <s:GradientEntry color="0x0056FF" ratio="0" alpha=".5"/> <br /> <s:GradientEntry color="0x00CC99" ratio=".33" alpha=".5"/> <br /> <s:GradientEntry color="0xECEC21" ratio=".66" alpha=".5"/> <br /> </s:entries> <br /> </s:LinearGradient> <br /> </s:fill> <br /> </s:Rect> <br /> </s:Graphic> <br /> </mx:Canvas> <br /> </mx:Panel> <br /></s:Application>Resultado:
States
Houve uma mudança significativa na criação de “States” do Flex. Essa mudança é tão grande que merece um novo artigo no futuro!!
E muito mais!
Existem diversas mudanças a mais, que alteram a atual arquitetura do Flex. A impressão deixada pela Adobe é que houve uma aproximação muito maior do Flex ao Flash, de forma a deixar o framework mais compatível com o Catalyst.
Houve mudanças também na forma como o Flex se comporta em relação a dados, que serão discutidas em um próximo artigo.
trabalha com desenvolvimento web desde 1998 e atualmente dedica-se a escrever livros sobre programação e desenvolvimento de sistemas, disponíveis no seu site.
