Skinning Flex
Degrafa & FXG


James Whittaker
Hello,
Front-end Architect
UX & UI focused
Adobe Community Expert (AIR)

blog: jameswhittaker.com
twitter: @jmwhittaker
@RefreshingApps
Challenges,
Halo - clunky
Non standard tricky CSS syntax
Heavy visuals
Scale 9 limitations
Dive into drawing API


       ...
Degrafa,
Declarative Graphics Framework
Community driven
Open Source (MIT License)
Approaching 1.0 release


http://degraf...
What is Degrafa?
Create graphics via MXML
Easier than using drawing API directly
Reduce / eliminate external assets
Very p...
How does it work?
You need something to draw onto
Surface - extends UIComponent
or MXML component like:




or advanced CS...
What can it do?
Draw shapes
 <degrafa:Circle radius="30" />



Fills - solid, gradient, bitmap, blends
 <degrafa:SolidFill...
Simple example,
Draw a red circle on screen:

    	   <degrafa:Surface>
    	   	 <degrafa:fills>
    	   	 	 <degrafa:Sol...
De ne,
In CSS we set the skin class:


    .preItem {
    	 borderSkin: ClassReference("skins.PreItemPanel");
    }
Draw skin,
 <?xml version="1.0" encoding="utf-8"?>
<GraphicBorderSkin xmlns:mx="http://www.adobe.com/2006/mxml" xmlns="htt...
Advanced CSS
Multiple backgrounds
More control like detailed gradients
   {
       backgroundColor:"#222222";
       backg...
Demos,
Going forward,
Axiis - Data visualisation
Birdeye - Visual analytics

Becoming a ‘super set’ to FXG
Union, punch & join
De...
http://www.axiis.org   http://code.google.com/p/birdeye
Spark & Flex 4




             photo: http://www.flickr.com/photos/martinofranchi/3132140647/sizes/l/
Spark & Flex 4,
New component architecture
Skin separate to behaviour
Extended States model
Metadata key to new architectu...
What is FXG?
Declarative graphical tag library
XML based
Primitives, text, transformation
Interchange format - Catalyst & ...
Simple example,
Draw a red circle on screen:
	   <s:Graphic>
	   	 <s:Group>
	   	 	 <s:Ellipse width="100" height="100">
...
What skin?
Associate component with skin (CSS):
Button {
	 skinClass: ClassReference('spark.skins.default.ButtonSkin")	
}
...
New CSS,
Multiple style classes
<s:Button styleName="styleOne styleTwo" label="Button"/>


Descendant selectors:
Panel But...
CSS Namespaces,
Watch your namespaces
@namespace s "library://ns.adobe.com/flex/spark";
@namespace mx "library://ns.adobe....
Skin parts,
Components identify the
Required or optional skin part elements
States,
Extended from MXML.
Better for skin development
 	   <s:states>
	    	   <s:State name="up"/>
	    	   <s:State na...
HostComponent,
Metadata link to component
<fx:Metadata>[HostComponent("spark.components.Button")]</fx:Metadata>




To get...
Draw skin,
<s:Rect id="mainFill"
	   	    	   top="1"
	   	    	   right="1"
	   	    	   left="1"
	   	    	   bottom="1"...
Demo,
Degrafa - Flex 3   FXG - Flex 4
Halo & Spark,
Can co-exist
Use CSS Namespace
Skin Halo by extending SparkSkin
Halo navigators must have Halo
container as ...
Round up,
Degrafa
easy to use, renders well,
data visualisation extensions
Not fully integrated, still beta
FXG
Catalyst &...
Homework,
Presentation material and code
http://jameswhittaker.com
Thank you,
Hopefully you’ve learnt a little!
Visit RefreshingApps.com for some AIR!
Come and grab a Moo card opps sorry!
Useful stuff,
Axiis
http://www.axiis.org
Birdeye
http://code.google.com/p/birdeye
Degrafa
http://www.degrafa.org

Flex 4 D...
This presentation is released under Creative Commons Attribution-
               Share Alike 2.0 UK: England & Wales
Flash Camp - Degrafa & FXG
Upcoming SlideShare
Loading in...5
×

Flash Camp - Degrafa & FXG

5,983

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
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
5,983
On Slideshare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
0
Comments
0
Likes
2
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

×