5. FLEX 4 REQUIREMENTS
Worldwide Ubiquity of Adobe Flash Player
by Version - March 2010
FP 8 &
FP 9 FP 10
Below
Mature
Markets 99.3% 99.1% 97.0%
US /
Canada 99.3% 99.2% 97.2%
• Flash Player 10
Europe 98.6% 98.3% 96.1%
Japan 99.3% 99.0% 97.3%
Australia /
New Zealand 98.0% 97.9% 94.6%
6. Pixel Bender Spark &
Integration Skinning
Enhanced:
Halo Services Effects Fx3
States RSLs Charting Text (TLF)
States FXG
Styles SWCs OSMF
Effects Modules Compiler
RSLs Virtualization
Validators AIR Scrollbars
Utilities Charting AsDocs
Item Renderers Fx4
2-way Data Advanced
Binding CSS
FX4 EXTENDS FX3
11. SPARK VS HALO
MXML Spark Spark
Component Component Skin
Graphics
Layout Graphics
Animation Layout
Parts
States Animation
Behavior Parts
Logic
Data
States
CSS Properties
12. SPARK VS HALO
MXML Spark Spark
Component Component Skin
Graphics
Layout Graphics
Behavior Animation Layout
Parts
Logic States Animation
Data Behavior Parts
Logic
Data
States
CSS Properties
16. EFFECTS
• Fx3 Effects still work off anything build from UIComponent
• Fx4 Effects rebuilt to work off of Spark Primatives
• Fx4 Effects are based off the Animate Class
• Reworked Classes:
• Move, Rotate, Resize, Fade
• Brand New Classes:
• Scale, AnimateColor
18. STATES (IN FLEX 4)
<s:states>
<s:State name="submitState" />
<s:State name="clearState" />
</s:states>
<s:Button label.submitState="submit"
textDecoration.submitState="underline"
click.submitState="trace('done')" click.clearState="emptyDocument()"
label.clearState="clear" textDecoration.clearState="none"/>
19. CHARTING
• FilterFunctions for chart types
• Can specify custom filter functions against the data set
• Inverted axis support
• Axes can be drawn right-to-left and top-to-bottom (in addition to left-to-right,
bottom-to-top)
• RendererDirection in PieSeries
• PieSeries can be renderer in clockwise direction (in addition to default, counter-
clockwise direction)
• Performance related bug fixes
20. COMPILER
• Incremental Compilation
• Large apps are 50-80% better then in Flex 3
• Small apps are similar to Flex 3
• Full Compilation
• Large apps are 30-40% better then Flex 3
• Small apps are 10% better then Flex 3
• Compiler Memory Usage
• Large apps are 30% better then Flex 3
• Large multi-project apps are 70% better then
Flex 3
• Small apps are similar to Flex 3
21. RSLS
• RSLs are linked by default in Flex 4
• Default linkage changed from static (Flex 3) to RSL (Flex 4)
• Default-linked HelloWorld is 78% smaller
22. ASDOCS
• Flex 4 Improvements
• ASDoc now supports
comments in MXML
• ASDoc supports DITA creation
• Allows FlashBuilder to show
ASDoc inline in tooltips
• Works on all platforms (Mac,
Win, Linux)
24. SPARK COMPONENTS
Spark Spark
Component Skin
Graphics
Layout Graphics
Animation Layout
Parts
States Animation
Behavior Parts
Logic
Data
States
CSS Properties
25. SPARK COMPONENTS
Spark Spark
Component Skin
Graphics
Layout Graphics
Animation Layout
Parts
States Animation
Behavior Parts
Logic
Data
States
CSS Properties
27. SPARK SKINNING
• DeclarativeMXML
based visual styling.
For More Information: http://unitedmindset.com/
jonbcampos/2009/07/02/flex-4-spark-skinning/
28. SPARK LAYOUTS
• Previously baked in the updateDisplayList() code
• Now virtualized in it's own class!
• Examples stem from <s:List />
• default layout is a vertical layout
• Bonus!
• Bidirectional layouts and reflection based on Flash Player
33. TEXT (TLF & FTE)
• FTE: Flash Text Engine in Flash Player 10
• TLF: Text Layout Framework, set of ActionScript classes built
atop FTE
• TLF is XML-based markup
34. TEXT (TLF & FTE)
• TLF 1.0 major goals & features
• Bi-directional text & vertical text
• Selection, editing and flowing text across multiple columns and containers
• Rich typographical controls (kerning, ligatures, typographic cases, etc)
• Cut, copy, paste, undo and standard keyboard and mouse gestures for editing
• Rich developer APIs to manipulate text content, layout, markup and create
custom text components
• ActionScript-based object-oriented model for rich text layout
35. TEXT (TLF & FTE)
• TLF text exposed by default into Spark components
• Label: Simple, single-line text
• RichText: Rich, non-editable, non-scrollable text
• RichEditableText: Rich, editable, scrollable text
36. 2-WAY DATA BINDING
• What is bi-directional data-binding?
• Two components acting as the source object for the destination properties of each
other
• Wasn’t this possible in Flex 3?
• Yes, thru a combination of {}, <mx:Binding> statements, and calls to
mx.binding.utils.BindingUtils.bindProperty()
• Flex Implementation Details
• Inline declaration using the syntax, @{bindable_property}
@{bindable_property}
• With MXML
<mx:Binding source=”a.property” destination=”b.property” twoWay=”true”/>
37. FXG & MXML GRAPHICS
• Graphic Primitives
• Rectangles, Ellipses, Paths
• Defined By FXG
• FXG is an interchange format used by Adobe Creative Suite
Tools including:
• Flash Catalyst, Illustrator, and Photoshop.
38. OSMF
• Generic framework for managing media in Flash applications
• Offers
playback functionality, plugin-ability and extensibility for
custom media types
• Playback functionality exposed in the Spark video component
• Replaces FLVPlayback
39. MX ITEM RENDERERS
• Spark ItemRenderers for use with MX List-based components
• Renderer baseclasses for MX DataGrid, AdvancedDataGrid, Tree
• MXItemRenderer extends Spark ItemRenderer and handles the contractual
differences
• Intercepts lifecycle events to work in the MX model
• Overrides setting of Spark ItemRenderer properties (currentState, etc)
• Tells Spark to not draw the item renderer backgrounds
• Handles editability, column sorting, dragging, etc.
41. COMPONENT POLARITY
MX Components FX Components
Button Button
CheckBox CheckBox
Canvas Group (with Basic Layout)
HBox Group (with Horizontal Layout)
VBox Group (with VerticalLayout)
Tile Group (with TileLayout)
List List (with VerticalLayout)
TileList List (with TileLayout)
42. ACCESSING THE APPLICATION
• In Fx3:
• var application:Object = mx.core.Application.application;
var application:Object = mx.core.Application.application;
• In Fx4:
• var application:Object = FlexGlobals.topLevelApplication;
var application:Object = FlexGlobals.topLevelApplication;
43. MIXING SPARK AND HALO
CONTAINERS
• NavigatorContent
• toinclude Spark components in Halo Container based
components - like the ViewStack component, wrap the
Spark components in Navigator Content.
• Thereis a second Creation Complete to listen to, the
“Content Creation Complete”.
44. DECLARATIONS TAG
• Tag to insert non-visual components, such as:
• validators
• services
• mediators / presenter models / controllers
<fx:Declarations>
<!-- place non-visual components here -->
</fx:Declarations>
46. EMBEDDING FONTS: CFF?
• Important when importing fonts
• Setting to “true” defines font that supports the advanced text
layout features used by Flash Text Engine
• May cause your MX component’s text to disappear
@font-face {
src:url("../assets/MyriadWebPro.ttf");
fontFamily: myCFFFont;
embedAsCFF: true;
}
47. WHERE DID MY
SCROLLERS GO?
• Wrap your Groups in a
Scroller!
<s:Scroller hasFocusableChildren="true"
tabEnabled="false">
<s:VGroup paddingLeft="2"
paddingRight="2" paddingTop="2" paddingBottom="2"
width="100" height="100"
horizontalScrollPosition="20"
verticalScrollPosition="30">
<s:BitmapImage
source="@Embed(source='backpack.jpg')"/>
</s:VGroup>
</s:Scroller>
Today we&#x2019;re talking about migrating from Flex 3 to Flex 4.
While there are MANY details that we could focus on, I&#x2019;ve picked specific points that I feel most Flex developers would hit right from the get-go.
As you can see from my subtitle, the main point I&#x2019;m going to keep reiterating is how easy it is to make the change from Flex 3 to Flex 4. You&#x2019;re not going to lose lots of development time making the switch, instead you&#x2019;ll just add the your own list of capabilities.
Let me start by introducing myself.
I know this is a really long list and all, but this is all it takes to ensure your application will run on your client&#x2019;s machine.
I know this is a really long list and all, but this is all it takes to ensure your application will run on your client&#x2019;s machine.
The big thing to remember is that Flex 4 EXTENDS Flex 3.
Lots of care was taken on the part of the Flex Development team to make sure that the movement from Flex 3 to Flex 4 would be as seamless as possible.
As you can see from the graphic Flex 4 contains everything that ever was or is Flex 3 and adds to it. What does this mean? You can start making &#x201C;Flex 4&#x201D; apps while still just using everything you&#x2019;ve known and built with Flex 3. And there are some Flex 4 benefits you will still be receiving by making this shift, but ultimately it isn&#x2019;t a &#x201C;true&#x201D; Flex 4 app, so let&#x2019;s continue by looking at how exactly Flex 4 extends Flex 3.
1. Core Concepts
2. Enhancements
3. New Concepts
4. Common Migration Pitfalls
5. Bonus, Flex 4 Component Lifecycle
1. Core Concepts
2. Enhancements
3. New Concepts
4. Common Migration Pitfalls
5. Bonus, Flex 4 Component Lifecycle
1. Core Concepts
2. Enhancements
3. New Concepts
4. Common Migration Pitfalls
5. Bonus, Flex 4 Component Lifecycle
Because of FTE you can fade on text without having to embed
Most requested feature
Bonus: each primitive isn&#x2019;t it&#x2019;s own display object, so if you have lots of primitives you don&#x2019;t have a huge set of display objects on screen. Instead primitives are collapsed into one display object, exceptions: primitives that are rotated or filter (I believe).
Implements the IListItemRenderer, IDropInListItemRenderer, IDataRenderer, based off of Group
attachSkin: creates the skin, typically you DON&#x2019;T override this function. Called via the createChildren and/or commitProperties
findSkinPart: used in attach skin, don&#x2019;t use directly
clearSkinParts: used in detachSkin
detachSkin: destroys and removes a skin part
partAdded: called when a skin part is being attached. Don&#x2019;t call this directly. Do override it.
partRemoved: called when a skin part is being removed. Don&#x2019;t call this directly. Do override it.
1.&#xA0;&#xA0;Where layouts are meant to be used
- everywhere?
2.&#xA0;Is Flex 4 compiler faster for apps written in Flex 3&#xA0;&#xA0;&#xA0;&#xA0;&#xA0;&#xA0;&#xA0;&#xA0;
- yes, as discussed earlier. Many compiler improvements are provided for you when using the Flex 4 SDK. You don&#x2019;t need to do anything to receive these benefits
&#xA0;&#xA0;&#xA0;&#xA0;&#xA0;
3.&#xA0;Why is Flash Builder not available on Linux? It's the most voted-for feature request in the Adobe JIRA.
The issue is with the design view working with Linux.
4.&#xA0;What are some use cases for Flex that might be good for instructional design projects, project management teams, community building, etc.?
At Dedo:
Scrum management software
project management software
Hudson reporting
5.&#xA0;&#xA0;If you could summarize in 3 steps the process of becoming as cool as Jonathan Campos, what would they be?
Um... what?
6. What happened to the Import Web Service code generator in Flex 4? The new code it generates is not as strongly typed as the code from Flex 3. It went from ArrayOfDataType to just a plain Array..
File a feature request.
7. Do I have to learn Eclipse to some degree before I tackle Flex?
Yes and no. Understanding the basic layout can take about 5 minutes and that would be all you need. To get into adding plug-ins etc, that would require more understanding of the eclipse IDE, though not extremely difficult.
8. Where is the best place to go for training on Flex 4?
New to Flex? Flex in a Week http://www.adobe.com/devnet/flex/videotraining/
Not new to Flex? Pick a topic and go to the web.
9. What are the issues with mixed IDE environments? e.g. some developers on Flex Builder 3 and others on Flash Builder. Just want to verify&#xA0;&#xA0;&#xA0;&#xA0;&#xA0;&#xA0;&#xA0;&#xA0;&#xA0;
There is a compiler change, so you would want you compiling standardized. Also Flex 4 specifically targets FP10. Yes you can set this up in Fx3, but if you haven&#x2019;t you may get errors without expecting it. Also, Fx3 and Flash Builder can&#x2019;t live in the same install of Eclipse, I&#x2019;ve had issues with that.
10.&#xA0;&#xA0;&#xA0;&#xA0;&#xA0;&#xA0;&#xA0;&#xA0;&#xA0; Status of completing the migration of the remaining MX components to Spark. This really needs to be a priority. Also, an update on the issues in JIRA related to enabling additional compiler hooks to allow for compiler extensions to support custom metadata would be extremely useful.&#xA0;
I &#x201C;believe&#x201D; they are shooting for full polarity in 2011, don&#x2019;t quote me on that, I don&#x2019;t think it&#x2019;s official. I think it is meant for the Flex 4.5 release is what was said in the past.
Update on JIRA, additional compiler hooks, conditional compiling, etc. They know of these issues, and no official plan has been laid out but it has been remarked as very important.