Ted Patrick - Demos & MAX @ Adobe Systems
Note: This is the personal blog of Ted Patrick. The opinions and statements voiced here are my own.
Flex 3 - Monday: Designer/Developer Workflow
DIGG IT!
16
Comments
Published
Monday, June 04, 2007
at
6:05 AM
.
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 :)
16 Responses to “Flex 3 - Monday: Designer/Developer Workflow”
Post a CommentWhere to find me:
Ted on Twitter - @AdobeTed
Ted on Adobe Groups
Ted on LinkedIn
Ted on Facebook
Ted at Adobe
Latest
- Flex 3 Details Next Week
- FX Ninja #1 : MXML via the "new" constructor
- Zach Graves: AS3 YMaps Engine in 24 hours
- Mapquest deploys ActionScript 3 Maps API
- Google Maps Street View - Flash Player for 360 vie...
- OOO Diving in Utilla, Honduras
- Flex Directory v1.0.2 - Live Filters
- Google made me think!
- Flex over XML/XSL
- 50 Companies added to Flex Directory
Lists
Links
Jobs
Flex JobsArchives
- May 2003
- June 2003
- July 2003
- August 2003
- September 2003
- October 2003
- November 2003
- December 2003
- January 2004
- February 2004
- March 2004
- April 2004
- May 2004
- June 2004
- July 2004
- August 2004
- September 2004
- October 2004
- November 2004
- December 2004
- January 2005
- February 2005
- March 2005
- April 2005
- May 2005
- June 2005
- July 2005
- August 2005
- September 2005
- October 2005
- November 2005
- December 2005
- January 2006
- February 2006
- March 2006
- April 2006
- May 2006
- June 2006
- July 2006
- August 2006
- September 2006
- October 2006
- November 2006
- December 2006
- January 2007
- February 2007
- March 2007
- April 2007
- May 2007
- June 2007
- July 2007
- August 2007
- September 2007
- October 2007
- November 2007
- December 2007
- January 2008
- February 2008
- March 2008
- April 2008
- May 2008
- June 2008
- July 2008
- August 2008
- September 2008
- October 2008
- November 2008
- December 2008
- January 2009
- February 2009
- March 2009
- April 2009
- May 2009
- June 2009
- July 2009
- August 2009
- September 2009
- October 2009
- November 2009
As a graphic designer, I say many thanks! One of my biggest gripes about moving from Flash to FLEX was the headache I got from doing 2x the work. This will make it a whole lot easier.
Does "full language intelligence support for CSS" mean we get code hinting for all available styles as we type CSS tags?
This post has been removed by the author.
Thanks Ted, Looks great! Can't wait to play with the integration points.
Doug,
Beta 1 doesn't have code hinting for CSS and I am personally not sure of the details here. Language intelligence was added to FB3 to support refactoring, code search, and much improved code hinting. Let me check and get back to you.
Regards,
Ted :)
i would like to know when Flex 3 will be released... do you have any release date in mind?
All new features will work with the current version of flashplayer or it will require an update?
YESSSS!!!!!!! This is what I'm talking about. I love it when Adobe lays the smack down like this!!! This feature alone wipes the floor with any of the so called "designer-developer" tool M$ has to offer. Great Work guys!!!!
Cheers,
Sam
Flex 3 works seamlessly with Flash Player 9 release version 100%.
There are optional optimizations within a new Flash Player codenamed "FrogStar". I will be spending a whole post on "FrogStar" this week and highlighting how it will impact Flex.
More to come!
Ted :)
Flex 3 Public Beta 1 is very soon. We are killing final bugs in B1 now.
ted :)
Oh my god, oh my ... REFACTORING, i have to sit down ...
Thanks for posting this Ted. Look forward to hearing about all of the newbies in FB3!!.
very exciting new features :)
any chance of runtime, dynamic css or will will those files need to be converted to a swf or swc first...
Posted on the Design View for CSS that I missed in this post. I added it in for posterity!
Runtime CSS is possible via the setStyle method but runtime CSS via SWf is far faster. I would recommend compiling to SWF as these assets are small and fast vs interpreting CSS files at runtime.
Cheers,
Ted :)
What can I say? Just wonderful!
Todays post alone has enough new features to keep me happy.
Flex in general has given me back the excitment that years of HTML had almost knocked out of me.
The wonderful thing for me is the fact that Flash player is on just about every computer system in the world, over 90% take up I think, and now having real programming acess to its feature set means we'll be able to code true cross platform applications without all the hassle of fighting all those damn browsers with their different take on standards. I'm a really happy man.
Since jumping on board with Flex, I've started working through lunch again and doing ten hour coding sessions just like in my exciting machine code days. I've started to find it all intresting again.
Thank you.
Glenn
Will Flex builder 3 be opensource also? Free software? If not, what will be the upgrade cost from version 2?