Introducing Flex 4

Flex 4 has been released. This is a major release of Flex that introduces some new features that allow you an amazing amount of flexibility and power in building killer internet applications.

There are many new features in Flex 4 including:

  • new spark component architecture
  • new states syntax
  • faster compiler
  • new text capabilities
  • improved effects
  • advanced CSS support
  • pixel bender support
  • two way data binding

This post will focus on two main areas that we think are really cool and will allow people to build truly amazing Flex applications.

States + Transitions

 

A lot of work went into “making states not suck anymore” (Chet Haase) and the new enhanced states syntax is really intuitive and powerful. Many people stayed away from using states in Flex 3 because it was so clunky and cumbersome. The new syntax is much more concise and with the new transition effects states are now one of the most powerful tools in a Flex developer’s toolkit.

Here is a small sample application that has two states and transitions between those states:

View Source

Complete control over the visual look of your application

 

Another major pain point of Flex 3 was it was really hard to customize the look of something. This is definitely no longer a problem with the new spark architecture. It is really easy to create a custom skin for a component and make it look as simple or as crazy as you would like.

Take for example building a simple “TODO List” with the spark List component. First the default spark List works well at conveying the information, but it isn’t all that pretty:

View Source

The next step was to give it a custom List skin with a custom item renderer to make it look a little prettier:

View Source

Which looks nice, but it still feels a little like Flex, if we wanted to we could go to the extreme and make it look nothing like a List at all by writing another skin and a custom layout:

View Source

Notice that clicking on an item will zoom in on it and a subtle effect will make the tack disappear. You can deselect items by control clicking on them, but if you want to not require the control key for deselecting items in a List then read this post.

Getting Started

 

There are some great resources online for getting started with Flex 4:

You might also find it useful to browse through Flexponential’s Flex 4 posts. We tend to post about layout, skinning, and List tips and tricks that we think others will find useful. If you are having problems or questions then head over to ask on the Adobe forums.

While spark is a little different than the old mx model, once you get into it and learn how to take advantage of it things start to become very fun. We hope that you have as much fun building Flex 4 applications as we do and as our boss says, “we can’t wait to see what you create.”

8 thoughts on “Introducing Flex 4”

  1. What do you think about the memory usage in a project Flex4+AIR?

    I’m now testing AIR 2 BETA 2, and is really very effective. In some projects made in Flex 3, there is a savings of up to 10 MB.

    But using Flex4, memory usage is double…

  2. Is there any good tutorials on heavily skinning components like the list one you are showing? Seeing the source is good but am curious about the process to get there. Thanks!

  3. Hello Steven,

    The Flex documentation states that “for components the layout constraint property (say, ‘bottom’) is a facade on top of the similarly-named style”.
    In that context could you clarify the essential difference between the component property and component style (as the word ‘facade’) does not tell me too much about the essence of the difference.

    Thanks,
    Igor Borodin

  4. @Igor Borodin – If you look at the source code for the top/left/bottom/right constraint properties on UIComponent you will see that setting those property values essentially just calls setStyle() to set the equivalent style values.

    Is that what you are looking for?

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>