My session notes from Flash Midlands in Birmingham (UK) 16th June 2009. An introduction to declarative graphics and skinning for Flex applications using Degrafa and the new FXG format.

1. Skinning Flex
Degrafa & FXG
James Whittaker

2. Hello,
Front-end Architect
UX & UI focused
Adobe Community Expert (AIR)
blog: jameswhittaker.com
twitter: @jmwhittaker

3. @RefreshingApps

4. Challenges,
Halo - clunky
Non standard tricky CSS syntax
Heavy visuals
Scale 9 limitations
Dive into drawing API
“ time for a change captain..”

5. Degrafa,
Declarative Graphics Framework
Community driven
Open Source (MIT License)
Approaching 1.0 release
http://degrafa.org

6. What is Degrafa?
Create graphics via MXML
Easier than using drawing API directly
Reduce / eliminate external assets
Very powerful
Retain control & precision
Bindable properties
“not just lls and strokes! ”

8. How does it work?
You need something to draw onto
Surface - extends UIComponent
or MXML component like:
or advanced CSS using CSSSkin

9. What can it do?
Draw shapes
<degrafa:Circle radius="30" />
Fills - solid, gradient, bitmap, blends
<degrafa:SolidFill color="#FF0000" />
Transformations
<degrafa:RotateTransform registrationPoint="center" angle="45" />

10. Simple example,
Draw a red circle on screen:
<degrafa:Surface>
<degrafa:fills>
<degrafa:SolidFill id="redFill" color="#FF0000"/>
</degrafa:fills>
<degrafa:GeometryGroup>
<degrafa:Circle radius="50" fill="{redFill}"/>
</degrafa:GeometryGroup>
</degrafa:Surface>

11. De ne,
In CSS we set the skin class:
.preItem {
borderSkin: ClassReference("skins.PreItemPanel");
}

12. Draw skin,
<?xml version="1.0" encoding="utf-8"?>
<GraphicBorderSkin xmlns:mx="http://www.adobe.com/2006/mxml" xmlns="http://www.degrafa.com/2007">
<fills>
<LinearGradientFill id="prePanelGrey" angle="90">
<GradientStop color="#C4C4C4" ratio="0" alpha="1"/>
<GradientStop color="#EEEEEC" ratio="0.4" alpha="1"/>
<GradientStop color="#E7E7E5" ratio="1" alpha="1"/>
</LinearGradientFill>
</fills>
<strokes>
<LinearGradientStroke id="highlightStroke" angle="90">
<GradientStop color="#FDFDFD" ratio="0" alpha="0.6"/>
<GradientStop color="#FDFDFD" ratio="0.3" alpha="0"/>
</LinearGradientStroke>
</strokes>
<geometry>
<RoundedRectangle fill="{prePanelGrey}" width="{skinWidth}" height="{skinHeight}" cornerRadius="15"/>
<RoundedRectangle width="{skinWidth-1}"
x="1"
y="1"
height="{skinHeight}"
cornerRadius="15"
stroke="{highlightStroke}"/>
</geometry>

13. Advanced CSS
Multiple backgrounds
More control like detailed gradients
{
backgroundColor:"#222222";
backgroundImage:WALLOFTWEET,FCLOGO, BG;
backgroundRepeat:no-repeat, no-repeat, repeat;
backgroundPosition:"100% 100%", "100% 5", "top left";
borderSkin:ClassReference("com.degrafa.skins.CSSSkin");
asset-class:ClassReference("assets.EmbeddedAssets");
}
{
backgroundColor:"90deg #F0D834 #EBCA27 #F6EF6B";
}

14. Demos,

15. Going forward,
Axiis - Data visualisation
Birdeye - Visual analytics
Becoming a ‘super set’ to FXG
Union, punch & join
Decouple from Flex - AS version
Fix bugs & optimisation

16. http://www.axiis.org http://code.google.com/p/birdeye

17. Spark & Flex 4
photo: http://www.flickr.com/photos/martinofranchi/3132140647/sizes/l/

18. Spark & Flex 4,
New component architecture
Skin separate to behaviour
Extended States model
Metadata key to new architecture
Use of FXG for visual creation

19. What is FXG?
Declarative graphical tag library
XML based
Primitives, text, transformation
Interchange format - Catalyst & CS
Mirrors FP10 rendering model

20. Simple example,
Draw a red circle on screen:
<s:Graphic>
<s:Group>
<s:Ellipse width="100" height="100">
<s:fill>
<mx:SolidColor color="#FF0000" />
</s:fill>
</s:Ellipse>
</s:Group>
</s:Graphic>

21. What skin?
Associate component with skin (CSS):
Button {
skinClass: ClassReference('spark.skins.default.ButtonSkin")
}
or inline:
<s:Button skinClass="skins.PreButton" label="Button"/>

22. New CSS,
Multiple style classes
<s:Button styleName="styleOne styleTwo" label="Button"/>
Descendant selectors:
Panel Button { color:#FF0000; }
Pseudo (states) selectors :
Button:up { color:#FF0000; }

23. CSS Namespaces,
Watch your namespaces
@namespace s "library://ns.adobe.com/flex/spark";
@namespace mx "library://ns.adobe.com/flex/halo";
/* Use S namespace for Spark component */
s|Button { skinClass: ClassReference('skins.PreSkin') }
/* Use MX namespace for Halo component */
mx|Label { color:#FF0000; }

24. Skin parts,
Components identify the
Required or optional skin part elements

25. States,
Extended from MXML.
Better for skin development
<s:states>
<s:State name="up"/>
<s:State name="over"/>
<s:State name="down"/>
</s:states>
<s:GradientEntry color="#858585" color.over="#F7F7F7" ratio="0" alpha="0"/>

26. HostComponent,
Metadata link to component
<fx:Metadata>[HostComponent("spark.components.Button")]</fx:Metadata>
To get properties of skin’s host
No code hinting in IDE yet
<SolidColor color="{hostComponent.backgroundColor as uint}" />

27. Draw skin,
<s:Rect id="mainFill"
top="1"
right="1"
left="1"
bottom="1"
radiusX="15"
radiusY="15">
<s:fill>
<s:LinearGradient rotation="90">
<s:GradientEntry color="#858585" ratio="0" alpha="0.5" alpha.selectedOver="0.9"/>
<s:GradientEntry color="#858585" ratio="0.4" alpha="0.15" alpha.selectedOver="0.45"/>
<s:GradientEntry color="#858585" ratio="0.8" alpha="0" alpha.selectedOver="0.1"/>
</s:LinearGradient>
</s:fill>
<s:stroke>
<s:LinearGradientStroke rotation="90">
<s:GradientEntry color="#676767" ratio="0" alpha="1"/>
<s:GradientEntry color="#676767" ratio="0.5" alpha="0"/>
</s:LinearGradientStroke>
</s:stroke>
</s:Rect>

28. Demo,

29. Degrafa - Flex 3 FXG - Flex 4

30. Halo & Spark,
Can co-exist
Use CSS Namespace
Skin Halo by extending SparkSkin
Halo navigators must have Halo
container as child

31. Round up,
Degrafa
easy to use, renders well,
data visualisation extensions
Not fully integrated, still beta
FXG
Catalyst & CS Suite will aide creation
integrated with FP10
lacking some extra of Degrafa

32. Homework,
Presentation material and code
http://jameswhittaker.com

33. Thank you,
Hopefully you’ve learnt a little!
Visit RefreshingApps.com for some AIR!
Come and grab a Moo card opps sorry!

34. Useful stuff,
Axiis
http://www.axiis.org
Birdeye
http://code.google.com/p/birdeye
Degrafa
http://www.degrafa.org
Flex 4 Developer docs
http://opensource.adobe.com/wiki/display/ exsdk/Developer+Documentation

35. This presentation is released under Creative Commons Attribution-
Share Alike 2.0 UK: England & Wales