Flash Camp - Degrafa & FXG


Published on

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.

Published in: Technology, Sports
  • Be the first to comment

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

Flash Camp - Degrafa & FXG

  1. 1. Skinning Flex Degrafa & FXG James Whittaker
  2. 2. Hello, Front-end Architect UX & UI focused Adobe Community Expert (AIR) blog: jameswhittaker.com twitter: @jmwhittaker
  3. 3. @RefreshingApps
  4. 4. Challenges, Halo - clunky Non standard tricky CSS syntax Heavy visuals Scale 9 limitations Dive into drawing API “ time for a change captain..”
  5. 5. Degrafa, Declarative Graphics Framework Community driven Open Source (MIT License) Approaching 1.0 release http://degrafa.org
  6. 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! ”
  7. 7. How does it work? You need something to draw onto Surface - extends UIComponent or MXML component like: or advanced CSS using CSSSkin
  8. 8. 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" />
  9. 9. 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>
  10. 10. De ne, In CSS we set the skin class: .preItem { borderSkin: ClassReference("skins.PreItemPanel"); }
  11. 11. 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>
  12. 12. 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"; }
  13. 13. Demos,
  14. 14. 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
  15. 15. http://www.axiis.org http://code.google.com/p/birdeye
  16. 16. Spark & Flex 4 photo: http://www.flickr.com/photos/martinofranchi/3132140647/sizes/l/
  17. 17. Spark & Flex 4, New component architecture Skin separate to behaviour Extended States model Metadata key to new architecture Use of FXG for visual creation
  18. 18. What is FXG? Declarative graphical tag library XML based Primitives, text, transformation Interchange format - Catalyst & CS Mirrors FP10 rendering model
  19. 19. 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>
  20. 20. What skin? Associate component with skin (CSS): Button { skinClass: ClassReference('spark.skins.default.ButtonSkin") } or inline: <s:Button skinClass="skins.PreButton" label="Button"/>
  21. 21. 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; }
  22. 22. 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; }
  23. 23. Skin parts, Components identify the Required or optional skin part elements
  24. 24. 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"/>
  25. 25. 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}" />
  26. 26. 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>
  27. 27. Demo,
  28. 28. Degrafa - Flex 3 FXG - Flex 4
  29. 29. Halo & Spark, Can co-exist Use CSS Namespace Skin Halo by extending SparkSkin Halo navigators must have Halo container as child
  30. 30. 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
  31. 31. Homework, Presentation material and code http://jameswhittaker.com
  32. 32. Thank you, Hopefully you’ve learnt a little! Visit RefreshingApps.com for some AIR! Come and grab a Moo card opps sorry!
  33. 33. 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
  34. 34. This presentation is released under Creative Commons Attribution- Share Alike 2.0 UK: England & Wales