FLEX APPEAL Break Away from the Soviet Interface Chris Black 4/2/2009 www.blackcj.com

WHO AM I? Chris Black Senior Developer at Sierra Bravo Graduated from the University of Wisconsin, Eau Claire Enjoy Backpacking and Photography www.blackcj.com 4/2/2009

OUTLINE What is Skinning? Why skin components? Techniques CSS / 9-slice scaling Overriding drawing methods Degrafa Programmatic skinning Conclusion / Questions / Resources 4/2/2009

What is Skinning?

Why skin components?

Techniques

CSS / 9-slice scaling

Overriding drawing methods

Degrafa

Programmatic skinning

Conclusion / Questions / Resources

WHAT IS SKINNING? “ Skinning is the process of changing the appearance of a component by modifying or replacing its visual elements.” - Adobe 4/2/2009

WHY? Client requirements Higher usage / more downloads Make Flex not look like Flex Cause it looks cool Skimmer 4/2/2009 Rock Out

Client requirements

Higher usage / more downloads

Make Flex not look like Flex

Cause it looks cool

Skimmer

CHALLENGES Not enough flex designers Additional cost Limited CSS Time constraints Unfamiliarity 4/2/2009

Not enough flex designers

Additional cost

Limited CSS

Time constraints

Unfamiliarity

COMPARISON 4/2/2009

CSS Complexity: Low Control: Low “ Cascading Style Sheets (CSS) is a style sheet language used to describe the presentation (that is, the look and formatting) of a document written in a markup language.” - Wikipedia 4/2/2009

Complexity: Low

Control: Low

“ Cascading Style Sheets (CSS) is a style sheet language used to describe the presentation (that is, the look and formatting) of a document written in a markup language.” - Wikipedia

SKINNING EXTENSIONS Import Flex skins from Fireworks, Photoshop, Illustrator and Flash Plug-ins available for Creative Suite 3 Integrated into Creative Suite 4 4/2/2009

Import Flex skins from Fireworks, Photoshop, Illustrator and Flash

Plug-ins available for Creative Suite 3

Integrated into Creative Suite 4

9-SLICE SCALING “ The 9-slice scaling feature lets you define nine sections of a skin that scale independently.” - Live Docs 4/2/2009 Adobe Resource Center

CSS SAMPLE Code Sample 4/2/2009

DEGRAFA Complexity: Low-Med Control: Med-High “ Degrafa is a declarative graphics framework open source licensed under MIT.” - Degrafa 4/2/2009

Complexity: Low-Med

Control: Med-High

“ Degrafa is a declarative graphics framework open source licensed under MIT.” - Degrafa

DEGRAFA SAMPLE 4/2/2009 Code Sample

OVERRIDE DISPLAY Complexity: Med-High Control: Med-High “ By combining these very simple drawing methods, you can create complex shapes that make up your component skins.” - Adobe 4/2/2009

Complexity: Med-High

Control: Med-High

“ By combining these very simple drawing methods, you can create complex shapes that make up your component skins.” - Adobe

OVERRIDE SAMPLE 4/2/2009 Code Sample

CUSTOM COMPONENTS Complexity: High Control: High Create custom flex components by extending UIComponent. 4/2/2009

Complexity: High

Control: High

Create custom flex components by extending UIComponent.

CUSTOM COMPONENT SAMPLE 4/2/2009 Code Sample

WHICH IS BEST? Depends on the application. Evaluate and use a combination. Understand limitations. 4/2/2009

Depends on the application.

Evaluate and use a combination.

Understand limitations.

CHALLENGES REVISITED Not enough Flex designers Use Adobe provided tools to allow CS3 designers to skin Flex components Additional Cost Use free skins from Scalenine Limited CSS Use coding techniques to overcome limitations of CSS in Flex 4/2/2009

Not enough Flex designers

Use Adobe provided tools to allow CS3 designers to skin Flex components

Additional Cost

Use free skins from Scalenine

Limited CSS

Use coding techniques to overcome limitations of CSS in Flex

CHALLENGES REVISITED Time Constraints Use tools like Degrafa to accomplish tasks more quickly Unfamiliarity Lots of additional resources available. Sample code. 4/2/2009

Time Constraints

Use tools like Degrafa to accomplish tasks more quickly

Unfamiliarity

Lots of additional resources available. Sample code.

QUESTIONS?

QUESTIONS? How to get custom skins into design view? What to do next? Will Flex 4 make skinning easier? 4/2/2009

How to get custom skins into design view?

What to do next?

Will Flex 4 make skinning easier?

RESOURCES http://livedocs.adobe.com/flex/3/skinning_extensions_flex3.pdf http://livedocs.adobe.com/flex/3/html/skinning_1.html http://livedocs.adobe.com/flex/3/html/embed_4.html#186094 http://www.degrafa.org/learning/ 4/2/2009

LINKS http://scalenine.com/blog/2008/03/16/tips-for-using-the-flex-skin-design-extensions/ http://www.blackcj.com/blog/tag/skinning/ http://blogs.adobe.com/kiwi/2006/07/loading_flex_skins_at_runtime.html http://www.adobe.com/devnet/flex/articles/skins_styles.html 4/2/2009 www.blackcj.com