BT

As 10 Maiores Mudanças no Flex 4

Postado por Jon Rose , traduzido por Tércio de Andrade em 17 Jun 2009 |

Na última semana de maio, a Adobe lançou sua primeira versão beta do Flex 4, codinome Gumbo. Esse release inclui um grande número de mudanças. A lista a seguir proporciona uma visão geral de alto nível dos itens que foram modificados na última versão do popular framework de RIA.

1. Integração com o Adobe Catalyst

O foco primário do esforço do desenvolvimento do Flex 4 é fornecer suporte de integração com o Adobe Catalyst 4 - a nova ferramenta de design da Adobe para aplicações RIA sem escrita de código. O Catalyst promete mudar a forma de como os desenvolvedores e designers colaboram, pois as aplicações para designers e desenvolvedores trabalham de forma diferente. Por isso, ele permite que cada um se concentre no que faz de melhor, permitindo que cada um trabalhe da forma tradicional em que está acostumado. A maioria das mudanças listadas aqui foram feitas a fim de facilitar a integração entre Adobe Catalyst e Flex.

Aprenda mais sobre Adobe Catalyst aqui.

2. Arquitetura de componentes Spark

Cada versão do Flex contém uma biblioteca completa com todos os componentes comuns para implementação de uma aplicação, incluindo grids, buttons, containers, etc. No Flex 4, a arquitetura de baixa camada dos componentes é conhecida como Spark, conhecida como Halo no Flex 3. A maior parte do esforço do suporte ao Catalyst é renovar o modelo de componentes para aderir ao alto nível de separação de preocupações.

No novo modelo de componentes Spark, a lógica do núcleo, skinning, e o layout foram divididos, então eles são manipulados independentes dos outros. O modelo de componentes Spark foi construído em cima do modelo Halo. Basicamente isso significa que o Spark herda do Halo a classe núcelo UIComponente, permitindo ao Flex 2 ser adotado gradativamente, e os componentes Flex 3 podem ser usados nas aplicações Flex 4.

Além de outras modificações, os efeitos foram atualizados no Flex 4. Os efeitos podem agora animar aleatoriamente objetos e tipos, permitindo maior flexibilidade no seu uso. Os efeitos do Flex 4 foram implementados no novo pacote "sparck.effects". Assim como a nova biblioteca de componentes, os efeitos do Flex 4 foram re-implementados, deixando a compatibilidade com os efeitos do Flex 3 para trás.  Para mais informações sobre Gumbo Effects, veja os artigos sobre Efeitos Flex 4 de Chet Haase ou seu blog.

Leia o seguinte white paper para aprender mais sobre a arquitetura Spark.

3. MXML 2009

MXML é uma abstração do XML implementada sobre o ActionScript 3 - a linguagem de programação do Flash. MXML é usada para desenhar partes da interface do usuário, possuindo paleta de ferramentas, tal como nas IDEs e agora no Catalyst. MXML 2009 inclui atualizações para suporte a diferentes comportamentos (núcleo, skinning, e layout) e uma nova biblioteca de componentes.  Os componentes Flex 4 foram implementados no seu próprio pacote (spark.components) deixando os componentes Flex 3 de lado. MXML inclui uma nova namespace para os componentes.

O seguinte exemplo de uma aplicação mostra o uso do namespace e definição de ambos os componentes namespace tanto Spark como Halo:

<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/halo">

Assim, você pode usar um Flex 4 Button da seguinte forma:

<s:Button label="My Flex 4 Button" />

E o seguinte para um Flex 3 Button:

<mx:Button label="My Flex 3 Button" />

Cheque a especificação MXML 2009 para mais detalhes sobre as mudanças.

4. Melhorias nas ViewStates

O Flex 2 introduziu a noção de estado no framework Flex, onde as mudanças para um componente view pode ser gerenciada através de uma mudança de estado. No Flex 4, as view states foram melhoradas para simplificar a sintaxe e facilitar o uso.  Um exemplo de simplificação da sintaxe são os novos atributos de linguagem includeIn e excludeForm que podem ser definidos em um componente para direcioná-los como deve se comportar à mudança de estados (Veja abaixo).

<!-- Given the states A,B,C -->
<m:states>
  <m:State name="A"/>
  <m:State name="B"/>
  <m:State name="C"/>
</m:states>

<!-- This button will appear in only states A and B -->
<Button label="Click Me" includeIn="A, B"/>

<!-- This button will appear in states A and B -->
<Button label="Button C" excludeFrom="C"/>

Veja aqui mais informações sobre mundanças de estado nas View States.

5. FXG Support

No seu núcleo, o Flash Player é um motor para desenhos. A Adobe o tem alavancado com a introduçao do FXG no Flash Player 10, e agora ele foi introduzido no Flex. FXG é um formato declarativo de gráficos, que permite a portabilidade entre ferramentas ativas. Isto significa que os designers podem criar elementos no Catalyst ou CS4 Ilustrator, e o desenvolvedor da aplicação Flex poderá importá-lo e usá-lo sem modificá-lo.

Verifique a especificação FXG para mais detalhes.

6. Skinng Acessórios

A maior mudança no modelo de componentes Spark foi a revisão de skins que agora pode controlar todos os aspectos visuais dos componentes e encapsular a sua lógica fora do núcleo dos componentes. O que permite que a lógica seja modificada independentemente da camada lógica do núcleo.

Vamos olhar o arquivo skin no PanelSkin.mxml, o skin default para o Panel container, por exemplo:

<?xml version="1.0" encoding="utf-8"?>
<s:SparkSkin xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" alpha.disabled="0.5">

   <fx:Metadata>
   <![CDATA[
    /**
     * @copy spark.skins.default.ApplicationSkin#hostComponent
     */
    [HostComponent("spark.components.Panel")]
    ]]>
   </fx:Metadata>

   <fx:Script>
     /* Define the skin elements that should not be colorized.
      For panel, border and title backround are skinned, but the content area and title text are not. */
      static private const exclusions:Array = ["background", "titleField", "contentGroup"];

     /**
      * @copy spark.skins.SparkSkin#colorizeExclusions
      */
     override public function get colorizeExclusions():Array {return exclusions;}

     /* Define the content fill items that should be colored by the "contentBackgroundColor" style. */
     static private const contentFill:Array = ["bgFill"];

     /**
      * @inheritDoc
      */
     override public function get contentItems():Array {return contentFill};
   </fx:Script>

   <s:states>
     <s:State name="normal" />
     <s:State name="disabled" />
   </s:states>

    . . . . .

   <s:Rect left="1" right="1" top="31" height="1">
    <s:fill>
     <s:SolidColor color="0xC0C0C0" />
    </s:fill>
   </s:Rect>

   <!-- layer 5: text -->
   <!-- Defines the appearance of the PanelSkin class's title bar. -->
   <s:SimpleText id="titleField" lineBreak="explicit"
      left="10" right="4" top="2" height="30"
      verticalAlign="middle" fontWeight="bold">
   </s:SimpleText>

   <s:Group id="contentGroup" left="1" right="1" top="32" bottom="1">
   </s:Group>

</s:SparkSkin>

Desde que o único trabalho desse arquivo skin seja controlar a aparência visual do Panel container, é possível que o designer modifique apenas como o componente aparecerá sem editar o código fonte do componente ou entender seu comportamento interno. Mais importante, é que ele permite aos designers usarem o Catalyst da forma mais natural possível.

Olhe aqui para mais informações sobre skinning Gumbo components.

7. Modelo de layout atualizado

Os familiarizados com o desenvolvimento em Flex notarão que a maioria dos containers usados no Flex 3 não são parte da biblioteca Gumbo. Isso acontece porque o layout foi separado e agora é manipulado por meio de delegates. Desde que a maioria dos containers exista simplesmente para prover diferentes formatos de layout (ex. HBox para layouts horizontais e VBox para layouts verticais) eles não são mais necessários.

O seguinte exemplo mostra uma forma que os desenvolvedores Flex podem agora definir layout. Este exemplo usa a classe Group para gerenciar ks buttons, que é a nova classe Spark para gerenciamento de itens de conteúdo. O resultado são dois buttons mostrados lado a lado, como seria com um HBox no Flex 3.

<s:Group width="400" height="400">
  <s:layout>
   <s:HorizontalLayout paddingLeft="5" paddingTop="5" />
  </s:layout>

  <s:Button label="Button 1" />
  <s:Button label="Button 2" />
</s:Group>

Ryan Stewart da Adobe, convida os interessados para conversar sobre os novos mecanimos de layout: http://blog.digitalbackcountry.com/2009/05/flex-4-layouts-on-tech-talk-with-ryan-stewart/

8. Flash Builder 4

O Flash Builder 4, formalmente conhecido como Flex Builder, é a última versão da IDE baseada no Eclipse para desenvolvedores de aplicações. A nova versão vem com várias atualizações incluindo: debug de break points, mais ferramentas de refactoring e suporte ao FlexUnit4. Como sempre, inclui suporte ao MXML, Action Script 3, editores CSS, visual designer, a performance Flex e um perfil de memória (presente apenas na versão Professional).

Além disso, a nova versão inclui um gerenciamento avançado de dados para simplificar o desenvolvimento de aplicações centradas em dados. Isso inclui a característica de gerenciar dados do cliente que utiliza operações CRUD e mais uma grande collections em seus services.

Obtenha mais informações sobre a IDE aqui.

9. Performance do compilador

A maior dificuldade da maioria que desenvolve aplicações em Flex 3 é a baixa performance do compilador. Por isso, um dos objetivos publicados pelo Gumbo foi melhorar a performance do compilador Flex 4. Neste ponto, não há nenhum desempenho oficial publicado sobre esse trabalho. Entretanto, Peter Donovan da Adobe publicou algumas notas para facilitar o esforço deles, declarando que 25% das melhorias foram alcançadas sem reestruturações significativas. Ele também disse que para atingir 3-4 melhorias, um redesign seria necessário. Certamente, todos os desenvolvedores Flex 3 esperam que o tempo conduza bem os barcos do Flex 4 até o fim de 2009.

Veja as notas de Peter Donovan para mais informações.

10. Novas capacidades textuais.

O maior choque das aplicações baseadas em Flash (em Flex ou não) foi a capacidade de lidar efetivamente com o texto. No Flash Player 10 a Adobe introduziu um novo motor de texto para lidar com as exigências das aplicações de Internet Rica (multi-idiomas, impressão, atalhos de teclado, etc). Gumbo inclui novas classes de texto (RichText, SimpleText, etc) para dar mais robustez no suporte ao texto no framework Flex. Em adição, a Adobe está trabalhando no seu novo Text Layout Framework para dar a todos os desenvolvedores Action Script 3 a habilidade de incrementar o motor de texto do Flash Player 3. Aprenda mais sobre o Text Layout Framework no: http://labs.adobe.com/technologies/textlayout/

Como você pode ver, com a ampla gama de modifiações, Flex 4 representa um passo a mais nas populares plataformas RIA. Para mais informações sobre as mudanças no Flash 4 SDK, veja o artigo de Matt Chotin, What's new in Flex 4 SDK beta.

Biografia do Autor

localizado no Boulder, Colorado. Aqui ele é um editor e contribuinte da InfoQ.com, uma comunidade de software empresarial. Ele é co-anfitrião do DrunkOnSoftware.com, um videocast para aqueles que gostam de cervejas e bits. Trabalhou com clientes grandes e pequenos nos setores privado e público. Sua paixão por solução de problemas o levou à construção de softwares de qualidade. Você pode ler o seu blog em http://ectropic.com.

Olá visitante

Você precisa cadastrar-se no InfoQ Brasil ou para enviar comentários. Há muitas vantagens em se cadastrar.

Obtenha o máximo da experiência do InfoQ Brasil.

Dê sua opinião

HTML é permitido: a,b,br,blockquote,i,li,pre,u,ul,p

Receber menssagens dessa discussão
Comentários da comunidade

Gostei by Daniel Schmitz

Eu gostei bastante deste artigo. Parabéns!

HTML é permitido: a,b,br,blockquote,i,li,pre,u,ul,p

Receber menssagens dessa discussão

HTML é permitido: a,b,br,blockquote,i,li,pre,u,ul,p

Receber menssagens dessa discussão

1 Dê sua opinião

Conteúdo educacional

Feedback geral
Bugs
Publicidade
Editorial
InfoQ Brasil e todo o seu conteúdo: todos os direitos reservados. © 2006-2013 C4Media Inc.
Política de privacidade
BT