Session 4 – What is new in Flex 4?

Sorry for a jump in session numbers, but I was called to look at a bug and ended up missing my third session!!!

As for THIS session, we get a nice organized view of the new features of the Flex 4 SDK. While it is all very exciting, they seemed to have taken an approach to not overwhelm developers moving into this new construct.

So, what really IS new?

Designer/Developer workflow

  • Spark components & architecture
  • Groups, container, and layout
  • Graphic Primitives, Text and FXG
  • Revamped States and Transitions

Framework Evolution

  • FTE/TLF based text
  • 2-way binding
  • Advanced CSS

Developer Productivity

  • Compiler Performance
  • Data Centric Tooling
  • Client side data management

Catalyst

Meant to be a designer’s tool, but sit on top of core Flex technology. A designer can treat their design as “art” and then turn things into actual functioning Flex components.
Obviously as a developer, you can do more, but it can assist quite a bit.

Spark Model

Took a step back, and found a way to make all the customizability in MXML easy yet very powerful.
Helps decide what is essential behavior, vs what is decoration. We strip decoration, and it becomes it’s own classes that are implemented by the component.
The code becomes the component, which is left for the developer to implement data and behavior, disregarding any assumptions about appearance. The designer can now utilize markup to build a skin that affects the appearance, states, animations, etc.
From this, we get two new base classes: Skinnable Component, and Skin.

From what I’m seeing in a quick yet nice component heirarchy is that UIComponent is the base, but there’s GroupBase, TextBase, and SkinnableComponent that extends this class.
MX components are still in existence, and are built on the same core, and can be intermixed with Spark components with no issue.

Sneak Peek at some Code

Small Changes

  • 3 main namespaces: fs, s, and mx.
  • Declarations – non-visual components (e.g., HTTPService, class references, etc)
  • 2 Way binding – i.e., text=”@{newAttendee.name}”

Medium Changes

  • States are WAY better organized, much easier to read and view. Able to tag attributes specific to states: i.e., label.hover=”Hovering!”
  • CSS – Requires namespaces for mx and s independently, and access spark namespace i.e., s|TextInput { // }
    Descendent selectors
    Pseudo/State selectors
  • Themes and Styles – Spark theme. Covers Spark AND MX components!!!!
  • MXML Graphics library for primitive support – anything from Rectangles to Paths, video, etc.
  • GraphicElement class, focused on performance and fast rendering

Larger Changes

  • Fonts now have INTEGRATED RENDERING!!! This means no more having to embed system fonts for basic things like fading, etc.
  • Containers are now Groups, which is more optimized and lightweight than your typical Container object. We get two major classes: Group and DataGroup
  • All components extend SkinnableContainer and SkinnableDataGroup
  • No more VBox/HBox/etc. Layouts are part of every Spark component
  • Effects engine are completely redone to work more as you expected.

FXG looks to be an odd but interesting concept that all Adobe apps can export and import this file format. It also allows for tight optimized (vector) graphics.

I’m currently watching an awesome demo about Layouts… This is awesomely amazing. I can’t wait to play with it!

Great wrap up for the day! I’m going to go eat and then meet the teams for the day

Advertisements

About killerspaz

I'm a developer that loves to tinker with cutting edge technology. I have recently been playing with the Flash Platform (AS3/Flex), Android (custom roms, replacement apps, scripting), and looking at opportunities in the mobile markets.

Posted on 10.06.2009, in Adobe MAX and tagged , , . Bookmark the permalink. Leave a comment.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: