• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Flash Camp - Degrafa & FXG
 

Flash Camp - Degrafa & FXG

on

  • 9,180 views

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.

Statistics

Views

Total Views
9,180
Views on SlideShare
4,477
Embed Views
4,703

Actions

Likes
3
Downloads
0
Comments
0

11 Embeds 4,703

http://jameswhittaker.com 4596
http://www.josuepalma.com 54
http://www.hiddenplace.org 17
http://www.slideshare.net 15
http://translate.googleusercontent.com 9
http://webcache.googleusercontent.com 5
https://web.archive.org 3
http://74.125.77.132 1
http://jameswhittaker.com:80 1
http://localhost 1
http://209.85.135.132 1
More...

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Flash Camp - Degrafa & FXG Flash Camp - Degrafa & FXG Presentation Transcript

    • 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 “ time for a change captain..”
    • Degrafa, Declarative Graphics Framework Community driven Open Source (MIT License) Approaching 1.0 release http://degrafa.org
    • 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! ”
    • How does it work? You need something to draw onto Surface - extends UIComponent or MXML component like: or advanced CSS using CSSSkin
    • 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" />
    • 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>
    • 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="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>
    • 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"; }
    • Demos,
    • 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
    • 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 architecture Use of FXG for visual creation
    • What is FXG? Declarative graphical tag library XML based Primitives, text, transformation Interchange format - Catalyst & CS Mirrors FP10 rendering model
    • 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>
    • What skin? Associate component with skin (CSS): Button { skinClass: ClassReference('spark.skins.default.ButtonSkin") } or inline: <s:Button skinClass="skins.PreButton" label="Button"/>
    • 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; }
    • 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; }
    • 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 name="over"/> <s:State name="down"/> </s:states> <s:GradientEntry color="#858585" color.over="#F7F7F7" ratio="0" alpha="0"/>
    • 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}" />
    • 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>
    • 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 child
    • 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
    • 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 Developer docs http://opensource.adobe.com/wiki/display/ exsdk/Developer+Documentation
    • This presentation is released under Creative Commons Attribution- Share Alike 2.0 UK: England & Wales