Flash Camp - Degrafa & FXG
- 4. Challenges,
Halo - clunky
Non standard tricky CSS syntax
Heavy visuals
Scale 9 limitations
Dive into drawing API
“ time for a change captain..”
- 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";
}
- 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
- 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; }
- 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>
- 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
- 35. This presentation is released under Creative Commons Attribution-
Share Alike 2.0 UK: England & Wales