360 Flex Atlanta 02 27 2008

Degrafa™

Declarative Graphics Framework for Flex™

360 Flex Atlanta 02 27 2008

Juan Sanchez Experience Architect

www.scalenine.com

skins and themes for Flex and AIR™ ™

www.degrafa.com

declarative graphics framework

www.effectiveui.com

experience innovation

What is Degrafa?

declarative graphics framework for Flex™provides access to the power of the Drawing API (and more) via MXML markupcreative freedom foregoing the complexities of ActionScriptcreated by developers in the Flex community‣ Jason Hawryluk‣ Ben Stucki‣ Pavan Podila‣ Andy McIntosh‣ Jim Cheng‣ (Me)

open-source and licensed under MIT

Why was Degrafa created?

To make it easier to create advanced visuals that can be manipulated. Which would you rather do?

Degrafa MXML

<Circle radius="100"> <fill> <SolidFill color="#666" alpha=".5"/> </fill></Circle>

ActionScript

graphics.beginFill(#666666,.5);graphics.drawCircle(0,0,100);graphics.endFill();

Less Static Assets

No more going back and forth between Flash, Illustrator, Fireworks, or Photoshop. What’s more useful to you?

Static* External Assets

Button {upSkin: Embed(source='upSkin.png');}

Dynamic Degrafa MXML

<RoundedRectanglefill="{blueGradient}" stroke="{greyStroke}" cornerRadius="14"width="260"height="60"/>

<RoundedRectanglex="2"y="2"stroke="{whiteStroke}" cornerRadius="12"width="256"height="56"/>

Basic Usage

In its basic form, Degrafa allows you to draw graphics. You need to draw to something.

Surface : <Surface>‣ Something to draw to provided by Degrafa

Graphics Context : graphicsTarget=”{[ ... ]}” New‣ Draw to a Canvas, Button, etc.‣ Draw operations are only done once (unless the object changes)

There’s a number of base shapes to work with.

Geometric objects : basic shapes like Circle, Polygon, etc.‣ <Circle radius=”60”/>

Pre-composed library objects : create your own New‣ Variety of similar shapes in an ActionScript class‣ Reference the shape you want to use‣ For example : <MyArrowLibrary type=”bevelArrow” width=”100”/>

Structural Objects

Fills & Strokes

For drawn objects to display, they must be “painted”.

Fills : solid, gradients, bitmaps, blends‣ <SolidFill color=”#62ABCD” alpha=”.5”/>

Strokes : solid, gradients‣ <SolidStroke color=”#444” alpha=”.8”/>

Composing

Working with single shapes is great, but you can also compose more advanced graphics. Each object can be “acted” upon and manipulated.

Groups : <GeometryGroup>‣ layer and group geometry‣ apply bitmap filters

Geometry Composition : <GeometryComposition> New‣ compose outside of <Surface>‣ apply using graphicsTarget=”{[ ... ]}”‣ compose and reuse objects as new MXML shapes

Compose geometry within geometry New <Circle> <Polygon/> </Circle>

Make or use custom shapes.

Segments‣ LineTo, MoveTo, etc. allow for drawing of any shape or line series‣ Use SVG path data : <Path/>‣ simple to very complex

Graphic Image‣ Different than mx:Image, can be

added to a Sprite

Graphic Text

Custom Objects

Tools

Other resources provide shortcuts and visual manipulation.

Illustrator‣ Export artwork as SVG and use path data in Degrafa

Is there an easier way to convert to Degrafa? Yes!‣ SVG to Degrafa Converter‣ Converts SVG data to Degrafa markup‣ AIR Application

Work in Progress

<?xml version="1.0" encoding="utf-8"?><GeometryComposition xmlns:mx="http://www.adobe.com/2006/mxml" xmlns="http://www.degrafa.com/2007 <fills> <SolidFill id="blackFill" color="#231F20" alpha="1"/> </fills> <Path fill="{blackFill}" data="M0.833,83.954c5.875,0.337,11.498,0.503,16.869,0.503c5.372,0,11.081-0.42,17.126-1.261 c1.509,0,2.266-0.754,2.266-2.266c0.84-0.337,1.216-0.671,1.133-1.008c-0.083-0.

Do more with less

One of the focuses of the framework is the ability to do more with less.

Repeaters: Repeat objects and apply property changes

Derivatives: Derive properties from other objects New‣ only works during construction, initial draw

Cloning: Create new shapes based on original shapes New

Do more with less

One of the focuses of the framework is the ability to do more with less.

Geometry Composition & Reuse‣ Compose and reuse objects as new MXML shapes

Libraries‣ Create shape libraries and reuse them by specifying a type‣ Helps cut down on code and easy to do

<!--MyCircle.mxml-->

<Circle radius="100"> <fill> <SolidFill color="#FFF"/> </fill></Circle>

<!--Application.mxml-->

<local:MyCircle/>

<ShapeLib:ArrowsLibrary type="ARROW_CHEVRON"/>

Utilities

Degrafa also has a number of built-in productivity features to speed up development.

Color Utilities‣ short-hand notation, like #C50 versus #CC5500‣ specify color keys, like “white”, “fuschia”, etc.‣ RGB & CMYK‣ apply using the color property New‣ colorFunction New

More to come.

0,255,0#0F0 lime 63,0,100,0

Advanced CSS Support

Create unique fills, strokes, and borders for advanced visuals using CSS.

Advanced border controlMultiple background imagesGradientsBlend modesShorthand declarationsBridges a gap between styling and skinningDo with CSS what you might normally do with graphics

A Sample Composition

Creating compositions is easy.

Use shape object or <GeometryComposition> to forego <Surface>.

<Surface>

<GeometryGroup>

<Circle radius="100"> <fill> <SolidFill alpha=".5" color="#62ABCD"/> </fill> </Circle>

</GeometryGroup>

</Surface>

Do More Than “Draw” Things

Go beyond just drawing things.

Drawn graphics are not static or “dead”‣ Bind properties to data sets‣ Use events‣ Customizable graphics based on user input

Create highly interactive, programmatic skinsDraw more complex objectsMore...

Skinning

Create dynamic skins for Flex components.

Use an MXML file for each skin state‣ Use ClassReference for each skin state

Use one MXML file for all skin states New‣ Define ClassReference for skin property‣ Create transitions and animations for each state‣ More interactions between skin states

This will keep progressing to be easier and more powerful.

Degrafa Derby

So many great entries, but only one winner.

Over 1,800 downloads of the SWC‣ who knows how many plugging into the source SVN

6 entriesThe winner: Process Map by Erno Aapa‣ An application for creating visual process maps.

Degrafa was used and extended for thevisual geometry.

Style Piece: by Sean Chatman‣ An advanced explorer for Degrafa

View more entries‣ showcase.degrafa.com

Getting Started

Give Degrafa a shot. You can get started by referring to these resources.

But, before you go...

code.degrafa.com docs.degrafa.com

samples.degrafa.com group.degrafa.com

360 Flex Atlanta 02 27 2008

Degrafa Beta 2 Available Now!Download at code.degrafa.com

degrafa origin

360 Flex Atlanta 02 27 2008

The End(Thank you.)