One of the key areas of change in Flex 3 is the designer/developer workflow. Des/Dev enhancements to Flex 3 include support for much deeper skinning of Flex 3, Skin Importer, Design View Zoom/Pan, ItemRenderers in Design View, Advanced constraints, CS3 integration, CSS Outline, and many Flex 3 SDK style/skinning enhancements. These enhancements allow a much improved workflow between designers and developers and allow for much improved skinning of all aspects of a Flex application.



Let's take a look at the Des/Dev features in Beta 1 (more coming in Beta 2):

Skin Importer:
Select a folder of images, SWF/SWC file and import them into a Flex Project mapping the assets to skinnable elements in the Flex 3 SDK components. The import wizard presents all assets and mappings to the component skinning elements.






Design View Zoom/Pan:
This enhancement allows you to gain pixel perfect layout in design view.


Design Mode support for ItemRenderers:
For List, HorizontalList, TileList, Tree, DataGrid populated with static data, custom itemRenderers will preview in Design View. This feature allows you to see what custom itemRenderers look like at design-time and greatly simplify the design process for data driven elements.





Advanced Constraints:
There are 2 new components for constraint based layout, mx:ConstraintRow and mx:ConstraintColumn. These new components allow you to subdivide containers supporting absolute positioning. Where Flex 2 provided parent-child constraints, Advanced constraints allow definition of sibling relative constraints.

CS3 Suite integration:
Flash CS3 Skinning
Illustrator CS3 Skinning
PhotoShop CS3 Skinning
Fireworks CS3 Skinning
FireWorks CS3 - Flex components & Save as MXML/CSS
Flash CS3 - Flex Component Kit (Container support coming)
Skin Importer - See Above

CSS Outline
CSS editing has been enhanced with full language intelligence support for CSS. This feature is surfaced in Beta 1 in support for "Outline" and CSS navigation.


CSS Design View
CSS editing has been enhanced with a design view. CSS files now support design view and property editing.




Flex 3 SDK Skinning/Style Enhancements:
- Graphical border skins now use "scale9Grid" property for borderMetrics
- DataGrid Subcomponent skins - Skin the elements within DataGrid
- Panel PanelSkin programatic skin class
- ProgressBar skinning via maskSkin
- more coming...

The enhancements for Designer/Developer workflow in Flex 3 are much improved from Flex 2 and remove many barriers to achieving better design with Flex. The ability to quickly skin components and layout your application with pixel accuracy are important changes. With Flex Builder 3 Design View enhancements, I am finding myself editing design and layout in more complex applications where prior I would choose to use MXML hand editing. Integration with CS3 also makes for much easier workflow with the industry standard in design tools yet providing open support for all modern graphics formats.

Well there is the first installation, I will be covering code enhancements tomorrow.

Cheers,

Ted :)