Flash Camp - Degrafa & FXG

  • 5,916 views
Uploaded on

My session notes from Flash Midlands in Birmingham (UK) 16th June 2009. …

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.

More in: Technology , Sports
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
5,916
On Slideshare
0
From Embeds
0
Number of Embeds
3

Actions

Shares
Downloads
0
Comments
0
Likes
3

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 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! ”
  • 7. How does it work? You need something to draw onto Surface - extends UIComponent or MXML component like: or advanced CSS using CSSSkin
  • 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. 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. De ne, In CSS we set the skin class: .preItem { borderSkin: ClassReference("skins.PreItemPanel"); }
  • 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. 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. Demos,
  • 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. http://www.axiis.org http://code.google.com/p/birdeye
  • 16. Spark & Flex 4 photo: http://www.flickr.com/photos/martinofranchi/3132140647/sizes/l/
  • 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. What is FXG? Declarative graphical tag library XML based Primitives, text, transformation Interchange format - Catalyst & CS Mirrors FP10 rendering model
  • 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. What skin? Associate component with skin (CSS): Button { skinClass: ClassReference('spark.skins.default.ButtonSkin") } or inline: <s:Button skinClass="skins.PreButton" label="Button"/>
  • 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. 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. Skin parts, Components identify the Required or optional skin part elements
  • 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. 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. 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. Demo,
  • 28. Degrafa - Flex 3 FXG - Flex 4
  • 29. Halo & Spark, Can co-exist Use CSS Namespace Skin Halo by extending SparkSkin Halo navigators must have Halo container as child
  • 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. Homework, Presentation material and code http://jameswhittaker.com
  • 32. Thank you, Hopefully you’ve learnt a little! Visit RefreshingApps.com for some AIR! Come and grab a Moo card opps sorry!
  • 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. This presentation is released under Creative Commons Attribution- Share Alike 2.0 UK: England & Wales