Major Tour de Flex Updates for Flex 4!
If you didn’t know it already, Adobe Flex 4 and Flash Builder 4 became officially available today! As part of the launch we made some significant changes to Tour de Flex so be sure to make it a point to check it out. We released a whole new structure of samples and reworked the Flex 4 node of the tree to include all components recommended for use between the Spark and Halo namespaces to aid developers not only new to Flex 4 but in making the transition between Flex 3 and Flex 4. We’ve also included a new ‘Introduction’ tab that has some great pages from the newly updated flex.org containing some really useful information and resources. A bunch of the new samples are outlined below. Following the sample outline I have listed some other new links to check out for more great Flex resources. As always, if you have any samples you’ve built using Flex 4, please consider submitting them to either Greg Wilson or myself for Tour de Flex!
New Flex 4 Control Samples:
TextInput – Spark control that replaces the Halo TextInput and allows for a single line of rich text to be entered.
TextArea – Spark control that replaces the Halo TextArea and allows rich text to be entered, edited, selected and scrolled.
RichText – RichText is a step up from the Spark Label component in that you can display rich text with layout, but is non-interactive (not selectable or scrollable). Label is the most lightweight of the Spark text components, followed by RichText, followed by RichEditableText.
ComboBox – check out the differences between the ComboBox and the DropDownList, the ComboBox contains a TextInput so you can start typing into it to match an item whereas the DropDownList is just a Label.
RichEditableText – RichEditableText is built on the TextLayoutFramework and supports rich text and interactivity.
New Layout Samples:
TileGroup – shows the use of the Spark TileGroup which is the same as a Group with a TileLayout.
DataGroup – the DataGroup allows you to manage mixed content in a group.
HGroup/VGroup – these containers replace the HBox and VBox halo components from Flex 3 and allow you to arrange items in a group either horizontally or vertically.
SkinnableDataContainer – this sample shows how to use the skinnable version of the DataGroup.
New FXG Graphics Samples:
FXG is the Flex Graphics framework providing a declarative graphics syntax to draw in Flex and allows for interchangeability between other Adobe products such as Adobe Illustrator.
Rect – FXG primitive to draw a rectangle graphic.
Line – FXG primitive to draw a line graphic.
Ellipse – FXG primitive to draw an ellipse shape.
BitmapImage – fills a rectangular region with bitmap data drawn from a source.
New Effect Samples:
Animate Properties – shows how you can animate arbitrary properties to create some really cool animation effects using the SimpleMotionPath class. Built by my good friend and Attest cohort Dave Flatley.
AnimateShaderTransition – fun sample that shows how you can create a swap shader effect between two images.
Move3D – shows how the Move3D effect can be used to create a 3D movement of an object.
Wipe – replaces the Flex 3 Wipe effect.
New Style Samples:
DescendantSelector – shows how to use this advanced CSS to specify styles for a child in a container.
TypeClass Selector – advanced CSS to specify a type plus a class for selecting the item to style.
New Coding Techniques Samples
Using Text Layout Framework – TLF Text Editor Sample – allows you to play around with the various Text Layout Framework properties and see what capabilities are offered and programmable. My favorite thing about this editor is how you can click the ‘Export’ button and it will generate the MXML code you can use in your code, just be sure to add the namespace as needed (for instance prefix TextFlow with the s: for Spark). Oh and even better, the source code to this entire editor is included in the second tab!!
Custom Layout Samples:
- FlowLayout – written by Evtim Georgiev from the Adobe Flex Engineering team.
- WheelLayout (carousel effect) – another one supplied from Adobe and one to definitely check out for advanced custom layout building in Flex.
- Animated Layout – written by Adobe’s own Christophe Coenraets showing how to create a custom layout that includes some animation.
Custom Item Renderer with Animation – a couple of fun samples written by Christophe that shows the use of custom item renderers that include animation. Perhaps we all know what Christophe’s favorite show on TV is now :). Note there are 2 samples here in tabs so don’t miss the second one!
That about sums it up. There are a few I did not list so be sure to go take a peek! Also note that some of the tree items show multiple ways to use that particular component and may contain multiple samples in tabs when you click on the item. There is a number in parentheses next to the sample in the tree as well to indicate that more than one is available.
As promised above, here are some new links to check out!
- Flex 4 Features and Migration PDF – a MUST-READ, particularly for Flex 3 Developers migrating over
- Take the Flex Test Drive: Build an application in an hour – a new guided, video tutorial
- AdobeTV: Learn what developers like about Flash Builder – a video from Flash Camp Boston from March 19th
- The official Flex Team Blog
- Flex-in-a-week free video training
- Lynda.com – Flex 4 Online Training
- Large collection of Flex 4 resource links on flex.org!
- Also see the previous post I did about the Flex 4 samples in Tour de Flex, the post contains a large set of Flex 4 links as well to check out!