Flex 4

Gregg Suzukawa

Flex 4 Overview

• Codename Gumbo• Flex 4 development focused on three main

themes– Design in Mind– Developer Productivity– Framework Evolution

1

Flash Builder 4 Beta

• Previously Flex Builder• Improved debugger• New features such as profiling• Supports ASDoc tooltips

2

Flash Builder Profile

3

Flash Catalyst Beta

• Interaction design tool for rapidly creating user interfaces without coding.

• Transform artwork from Photoshop, Illustrator or Fireworks into user interfaces

• Compatible with Flash Builder 4

4

Spark

• New component architecture• Built on top of existing Halo architecture• Includes approximately 30 new components• Easily integrates with Flash Catalyst

5

Improved Layout Model

• Goal was to decouple the layout scheme from the rules of individual components

• New runtime-assignable layouts include full support for 2D rotations and scalibility

• New 3D capabilities

6

Improved Animation Engine

• Improved effects and transitions• Supports auto-reversing of transitions• Transformations on all three planes• Complex keyframe-base animations

7

3D Animation Example

14

FXG (Flash XML Graphics)

• New XML-based vector graphics for Flash and Flex applications

• Similar to SVG (Scalable Vector Graphics) • Easy to include in source control• Maps directly to MXML

8

FXG Example

9

MXML 2009

• New namespaces– fx for MXML 2009– s for Spark

• mx namespace is preserved• Example – MXML using both Halo and Spark

components

10

MXML Example

11

States

• Improved layout over Flex 3• Flex 4 promotes states functionality to a full

MXML language feature• Much simpler to code in Flex 4

12

States Example

13

ASDoc support

• Improved ASDoc tool for ActionScript and MXML

• Inline code hints• New ASDoc view

15

ASDoc Example

16

Upgraded Binding

• Updates to the binding destination will be copied back to the source.

• Improved two-way data binding

17

Text Primitives

• Uses the new text engine in Flash Player 10• Text object model is defined by the Flash Text

Engine (FTE) and Text Layout Framework (TLF)• Supports controlling text metrics, vertical text

and bidirectional text• Uses DefineFont4 embedded font format

18

Catalyst Example

19

Flash Builder Example

20

The End

5 minutes of question time

starts now!

Questions

4 minutes left!

Questions

3 minutes left!

Questions

2 minutes left!

Questions

1 minute left!

Questions

30 seconds left!

Questions

TIME IS UP!