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:
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:
The next step was to give it a custom List skin with a custom item renderer to make it look a little prettier:
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:
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.
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.”