juan sanchez - degrafa declarative graphics framework
DESCRIPTION
Degrafa is a declarative graphics framework for Flex that exposes the power of the Drawing API through MXML markup. Come learn about the latest features for creating graphics in Flex for any occasion, including data visualization, rich user interfaces, mapping, graphics editing and more. An overview of usage, latest features, benefits, use cases and samples will be discussed.TRANSCRIPT
![Page 1: Juan Sanchez - Degrafa Declarative Graphics Framework](https://reader030.vdocuments.us/reader030/viewer/2022020217/54b48b334a7959bb688b4643/html5/thumbnails/1.jpg)
DegrafaDeclarative Graphics Framework
360|Flex IndianapolisMay 18, 2009
Monday, May 18, 2009
![Page 2: Juan Sanchez - Degrafa Declarative Graphics Framework](https://reader030.vdocuments.us/reader030/viewer/2022020217/54b48b334a7959bb688b4643/html5/thumbnails/2.jpg)
Degrafa 360|Flex Indianapolis
Who am I?
Who am I?
Monday, May 18, 2009
![Page 3: Juan Sanchez - Degrafa Declarative Graphics Framework](https://reader030.vdocuments.us/reader030/viewer/2022020217/54b48b334a7959bb688b4643/html5/thumbnails/3.jpg)
Degrafa 360|Flex Indianapolis
Juan SanchezEffectiveUI
Who am I?
Monday, May 18, 2009
![Page 4: Juan Sanchez - Degrafa Declarative Graphics Framework](https://reader030.vdocuments.us/reader030/viewer/2022020217/54b48b334a7959bb688b4643/html5/thumbnails/4.jpg)
Degrafa 360|Flex Indianapolis
DegrafaDeclarative Graphics Framework
Degrafa: Declarative Graphics Framework
Monday, May 18, 2009
![Page 5: Juan Sanchez - Degrafa Declarative Graphics Framework](https://reader030.vdocuments.us/reader030/viewer/2022020217/54b48b334a7959bb688b4643/html5/thumbnails/5.jpg)
Degrafa 360|Flex Indianapolis
What is Degrafa?
What is Degrafa?
Monday, May 18, 2009
![Page 6: Juan Sanchez - Degrafa Declarative Graphics Framework](https://reader030.vdocuments.us/reader030/viewer/2022020217/54b48b334a7959bb688b4643/html5/thumbnails/6.jpg)
Degrafa 360|Flex Indianapolis
Degrafa is an open source project for Flex 2 & 3 that allows for the creation of graphics via markup.
What is Degrafa?
Monday, May 18, 2009
![Page 7: Juan Sanchez - Degrafa Declarative Graphics Framework](https://reader030.vdocuments.us/reader030/viewer/2022020217/54b48b334a7959bb688b4643/html5/thumbnails/7.jpg)
Degrafa 360|Flex Indianapolis
ActionScriptgraphics.beginFill(#666666,.5);graphics.drawCircle(0,0,100);graphics.endFill();
Degrafa MXML
<Circle radius="100"> <fill> <SolidFill color="#666" alpha=".5"/> </fill></Circle>
What is Degrafa?
Monday, May 18, 2009
![Page 8: Juan Sanchez - Degrafa Declarative Graphics Framework](https://reader030.vdocuments.us/reader030/viewer/2022020217/54b48b334a7959bb688b4643/html5/thumbnails/8.jpg)
Degrafa 360|Flex Indianapolis
Licensed under MIT and currently at version 3.1.
What is Degrafa?
Monday, May 18, 2009
![Page 9: Juan Sanchez - Degrafa Declarative Graphics Framework](https://reader030.vdocuments.us/reader030/viewer/2022020217/54b48b334a7959bb688b4643/html5/thumbnails/9.jpg)
Degrafa 360|Flex Indianapolis
Degrafa is powered by the Flex community.
What is Degrafa?
Monday, May 18, 2009
![Page 10: Juan Sanchez - Degrafa Declarative Graphics Framework](https://reader030.vdocuments.us/reader030/viewer/2022020217/54b48b334a7959bb688b4643/html5/thumbnails/10.jpg)
Degrafa 360|Flex Indianapolis
You’re not limited to just simple shapes and "lls.
What is Degrafa?
Monday, May 18, 2009
![Page 11: Juan Sanchez - Degrafa Declarative Graphics Framework](https://reader030.vdocuments.us/reader030/viewer/2022020217/54b48b334a7959bb688b4643/html5/thumbnails/11.jpg)
Degrafa 360|Flex Indianapolis
Features
What is Degrafa?
Monday, May 18, 2009
![Page 12: Juan Sanchez - Degrafa Declarative Graphics Framework](https://reader030.vdocuments.us/reader030/viewer/2022020217/54b48b334a7959bb688b4643/html5/thumbnails/12.jpg)
Degrafa 360|Flex Indianapolis
Just because Degrafa makes drawing graphics easier doesn’t mean you lose the precision and !exibility of doing things programmatically.
What is Degrafa?
Monday, May 18, 2009
![Page 13: Juan Sanchez - Degrafa Declarative Graphics Framework](https://reader030.vdocuments.us/reader030/viewer/2022020217/54b48b334a7959bb688b4643/html5/thumbnails/13.jpg)
Degrafa 360|Flex Indianapolis
It’s a powerful framework
It’s a powerful framework
Monday, May 18, 2009
![Page 14: Juan Sanchez - Degrafa Declarative Graphics Framework](https://reader030.vdocuments.us/reader030/viewer/2022020217/54b48b334a7959bb688b4643/html5/thumbnails/14.jpg)
Degrafa 360|Flex Indianapolis
Many companies have already adopted Degrafa to build some really robust Flex applications.
It’s a powerful framework
Monday, May 18, 2009
![Page 15: Juan Sanchez - Degrafa Declarative Graphics Framework](https://reader030.vdocuments.us/reader030/viewer/2022020217/54b48b334a7959bb688b4643/html5/thumbnails/15.jpg)
Degrafa 360|Flex Indianapolis
Real World Examples
Real World Examples
Monday, May 18, 2009
![Page 16: Juan Sanchez - Degrafa Declarative Graphics Framework](https://reader030.vdocuments.us/reader030/viewer/2022020217/54b48b334a7959bb688b4643/html5/thumbnails/16.jpg)
Degrafa 360|Flex Indianapolis
Rich User Interfaces
Real World Examples
Monday, May 18, 2009
![Page 17: Juan Sanchez - Degrafa Declarative Graphics Framework](https://reader030.vdocuments.us/reader030/viewer/2022020217/54b48b334a7959bb688b4643/html5/thumbnails/17.jpg)
Degrafa 360|Flex Indianapolis
People are using Degrafa to skin everything from components to entire applications.
Rich User Interfaces
Monday, May 18, 2009
![Page 18: Juan Sanchez - Degrafa Declarative Graphics Framework](https://reader030.vdocuments.us/reader030/viewer/2022020217/54b48b334a7959bb688b4643/html5/thumbnails/18.jpg)
Degrafa 360|Flex Indianapolis
Degrafa is about more than user interfaces. It can be used for almost anything graphical.
Rich User Interfaces
Monday, May 18, 2009
![Page 19: Juan Sanchez - Degrafa Declarative Graphics Framework](https://reader030.vdocuments.us/reader030/viewer/2022020217/54b48b334a7959bb688b4643/html5/thumbnails/19.jpg)
Degrafa 360|Flex Indianapolis
Data Visualization
Real World Examples
Monday, May 18, 2009
![Page 20: Juan Sanchez - Degrafa Declarative Graphics Framework](https://reader030.vdocuments.us/reader030/viewer/2022020217/54b48b334a7959bb688b4643/html5/thumbnails/20.jpg)
Degrafa 360|Flex Indianapolis
Used in frameworks like Axiis and BirdEye or just to beatify Flex Charting Components.
Data Visualization
Monday, May 18, 2009
![Page 21: Juan Sanchez - Degrafa Declarative Graphics Framework](https://reader030.vdocuments.us/reader030/viewer/2022020217/54b48b334a7959bb688b4643/html5/thumbnails/21.jpg)
Degrafa 360|Flex Indianapolis
Image via merhl.com
Axiis, BirdEye & Flex Charts
Image via birdeye.googlecode.com
Image via Tom Gonzalez
Monday, May 18, 2009
![Page 22: Juan Sanchez - Degrafa Declarative Graphics Framework](https://reader030.vdocuments.us/reader030/viewer/2022020217/54b48b334a7959bb688b4643/html5/thumbnails/22.jpg)
Degrafa 360|Flex Indianapolis
Dynamic Graphics
Real World Examples
Monday, May 18, 2009
![Page 23: Juan Sanchez - Degrafa Declarative Graphics Framework](https://reader030.vdocuments.us/reader030/viewer/2022020217/54b48b334a7959bb688b4643/html5/thumbnails/23.jpg)
Degrafa 360|Flex Indianapolis
Herff-Jones eDesign and Autodesk Project Dragon!y both use the Degrafa engine to supportuser-generated graphical content.
Dynamic Graphics
Monday, May 18, 2009
![Page 24: Juan Sanchez - Degrafa Declarative Graphics Framework](https://reader030.vdocuments.us/reader030/viewer/2022020217/54b48b334a7959bb688b4643/html5/thumbnails/24.jpg)
Degrafa 360|Flex Indianapolis
Herff-Jones eDesign
Image via Herff-Jones eDesign website
Image via Autodesk Project Dragon#y website
Monday, May 18, 2009
![Page 25: Juan Sanchez - Degrafa Declarative Graphics Framework](https://reader030.vdocuments.us/reader030/viewer/2022020217/54b48b334a7959bb688b4643/html5/thumbnails/25.jpg)
Degrafa 360|Flex Indianapolis
Games
Real World Examples
Monday, May 18, 2009
![Page 26: Juan Sanchez - Degrafa Declarative Graphics Framework](https://reader030.vdocuments.us/reader030/viewer/2022020217/54b48b334a7959bb688b4643/html5/thumbnails/26.jpg)
Degrafa 360|Flex Indianapolis
How about Tetris, Tic-Tac-Toe and Pong ?
Games
Monday, May 18, 2009
![Page 27: Juan Sanchez - Degrafa Declarative Graphics Framework](https://reader030.vdocuments.us/reader030/viewer/2022020217/54b48b334a7959bb688b4643/html5/thumbnails/27.jpg)
Degrafa 360|Flex Indianapolis
Tetris, Tic-Tac-Toe & Pong
Image via website of Taras Novak
Image via SwitchOnTheCode.com
Image via FlexStuff.co.uk
Monday, May 18, 2009
![Page 28: Juan Sanchez - Degrafa Declarative Graphics Framework](https://reader030.vdocuments.us/reader030/viewer/2022020217/54b48b334a7959bb688b4643/html5/thumbnails/28.jpg)
Degrafa 360|Flex Indianapolis
Mapping
Real World Examples
Monday, May 18, 2009
![Page 29: Juan Sanchez - Degrafa Declarative Graphics Framework](https://reader030.vdocuments.us/reader030/viewer/2022020217/54b48b334a7959bb688b4643/html5/thumbnails/29.jpg)
Degrafa 360|Flex Indianapolis
Using Degrafa for textures, creating mapsand things like map markers.
Mapping
Monday, May 18, 2009
![Page 30: Juan Sanchez - Degrafa Declarative Graphics Framework](https://reader030.vdocuments.us/reader030/viewer/2022020217/54b48b334a7959bb688b4643/html5/thumbnails/30.jpg)
Degrafa 360|Flex Indianapolis
Image via website of Taras Novak
Map Creation, Textures & Markers
Image via website of Mike Huntington
Image via blog.sunild.com
Monday, May 18, 2009
![Page 31: Juan Sanchez - Degrafa Declarative Graphics Framework](https://reader030.vdocuments.us/reader030/viewer/2022020217/54b48b334a7959bb688b4643/html5/thumbnails/31.jpg)
Degrafa 360|Flex Indianapolis
And A Lot More...
Real World Examples
Monday, May 18, 2009
![Page 32: Juan Sanchez - Degrafa Declarative Graphics Framework](https://reader030.vdocuments.us/reader030/viewer/2022020217/54b48b334a7959bb688b4643/html5/thumbnails/32.jpg)
Degrafa 360|Flex Indianapolis
What’s Next?
What’s Next?
Monday, May 18, 2009
![Page 33: Juan Sanchez - Degrafa Declarative Graphics Framework](https://reader030.vdocuments.us/reader030/viewer/2022020217/54b48b334a7959bb688b4643/html5/thumbnails/33.jpg)
Degrafa 360|Flex Indianapolis
Working towards Degrafa 1.0 and Flex 4
What’s Next?
Monday, May 18, 2009
![Page 34: Juan Sanchez - Degrafa Declarative Graphics Framework](https://reader030.vdocuments.us/reader030/viewer/2022020217/54b48b334a7959bb688b4643/html5/thumbnails/34.jpg)
Degrafa 360|Flex Indianapolis
Integration with FXG and other use cases.
What’s Next?
Monday, May 18, 2009
![Page 35: Juan Sanchez - Degrafa Declarative Graphics Framework](https://reader030.vdocuments.us/reader030/viewer/2022020217/54b48b334a7959bb688b4643/html5/thumbnails/35.jpg)
Degrafa 360|Flex Indianapolis
Optimization is a major theme of Degrafa 1.0.
Degrafa 1.0 Preview
Monday, May 18, 2009
![Page 36: Juan Sanchez - Degrafa Declarative Graphics Framework](https://reader030.vdocuments.us/reader030/viewer/2022020217/54b48b334a7959bb688b4643/html5/thumbnails/36.jpg)
Degrafa 360|Flex Indianapolis
Degrafa 1.0 Preview
Degrafa 1.0 Preview
Monday, May 18, 2009
![Page 37: Juan Sanchez - Degrafa Declarative Graphics Framework](https://reader030.vdocuments.us/reader030/viewer/2022020217/54b48b334a7959bb688b4643/html5/thumbnails/37.jpg)
Degrafa 360|Flex Indianapolis
Jason Hawryluk and Greg Dove are awesome!
Degrafa 1.0 Preview
Monday, May 18, 2009
![Page 38: Juan Sanchez - Degrafa Declarative Graphics Framework](https://reader030.vdocuments.us/reader030/viewer/2022020217/54b48b334a7959bb688b4643/html5/thumbnails/38.jpg)
Degrafa 360|Flex Indianapolis
Decorators wrap geometry and allow for things like dashed lines, end caps, extrude, etc.
Degrafa 1.0 Preview
Monday, May 18, 2009
![Page 39: Juan Sanchez - Degrafa Declarative Graphics Framework](https://reader030.vdocuments.us/reader030/viewer/2022020217/54b48b334a7959bb688b4643/html5/thumbnails/39.jpg)
Degrafa 360|Flex Indianapolis
Video Fill allows the use of a video as a "ll.
Degrafa 1.0 Preview
Monday, May 18, 2009
![Page 40: Juan Sanchez - Degrafa Declarative Graphics Framework](https://reader030.vdocuments.us/reader030/viewer/2022020217/54b48b334a7959bb688b4643/html5/thumbnails/40.jpg)
Degrafa 360|Flex Indianapolis
Raster Image Sequence allows the use of a sequence of images as an animated "ll.
Degrafa 1.0 Preview
Monday, May 18, 2009
![Page 41: Juan Sanchez - Degrafa Declarative Graphics Framework](https://reader030.vdocuments.us/reader030/viewer/2022020217/54b48b334a7959bb688b4643/html5/thumbnails/41.jpg)
Degrafa 360|Flex Indianapolis
Elliptical Arc Advanced extends Elliptical Arc to add additional properties that allow for things like emulating a Conical Fill.
Degrafa 1.0 Preview
Monday, May 18, 2009
![Page 42: Juan Sanchez - Degrafa Declarative Graphics Framework](https://reader030.vdocuments.us/reader030/viewer/2022020217/54b48b334a7959bb688b4643/html5/thumbnails/42.jpg)
Degrafa 360|Flex Indianapolis
Super Shape 2D is an advanced geometry thatallows for thousands of shape variations by specifying a few properties.
Degrafa 1.0 Preview
Monday, May 18, 2009
![Page 43: Juan Sanchez - Degrafa Declarative Graphics Framework](https://reader030.vdocuments.us/reader030/viewer/2022020217/54b48b334a7959bb688b4643/html5/thumbnails/43.jpg)
Degrafa 360|Flex Indianapolis
Advanced Curves includes work done by Jim Armstrong, etc.
Degrafa 1.0 Preview
Monday, May 18, 2009
![Page 44: Juan Sanchez - Degrafa Declarative Graphics Framework](https://reader030.vdocuments.us/reader030/viewer/2022020217/54b48b334a7959bb688b4643/html5/thumbnails/44.jpg)
Degrafa 360|Flex Indianapolis
New transforms like Perspective Transform for manipulating geometry in “perspective”.
Degrafa 1.0 Preview
Monday, May 18, 2009
![Page 45: Juan Sanchez - Degrafa Declarative Graphics Framework](https://reader030.vdocuments.us/reader030/viewer/2022020217/54b48b334a7959bb688b4643/html5/thumbnails/45.jpg)
Degrafa 360|Flex Indianapolis
And a lot more...
Degrafa 1.0 Preview
Monday, May 18, 2009
![Page 46: Juan Sanchez - Degrafa Declarative Graphics Framework](https://reader030.vdocuments.us/reader030/viewer/2022020217/54b48b334a7959bb688b4643/html5/thumbnails/46.jpg)
Degrafa 360|Flex Indianapolis
Degrafa 1.0 Samples
Degrafa 1.0 Preview
Monday, May 18, 2009
![Page 47: Juan Sanchez - Degrafa Declarative Graphics Framework](https://reader030.vdocuments.us/reader030/viewer/2022020217/54b48b334a7959bb688b4643/html5/thumbnails/47.jpg)
Degrafa 360|Flex Indianapolis
Going beyond...
Going beyond...
Monday, May 18, 2009
![Page 48: Juan Sanchez - Degrafa Declarative Graphics Framework](https://reader030.vdocuments.us/reader030/viewer/2022020217/54b48b334a7959bb688b4643/html5/thumbnails/48.jpg)
Degrafa 360|Flex Indianapolis
Degrafa currently works with Flex 2, 3 andeventually Flex 4.
Going beyond...
Monday, May 18, 2009
![Page 49: Juan Sanchez - Degrafa Declarative Graphics Framework](https://reader030.vdocuments.us/reader030/viewer/2022020217/54b48b334a7959bb688b4643/html5/thumbnails/49.jpg)
Degrafa 360|Flex Indianapolis
Why should the power of Degrafa be limited to Flex?
Going beyond...
Monday, May 18, 2009
![Page 50: Juan Sanchez - Degrafa Declarative Graphics Framework](https://reader030.vdocuments.us/reader030/viewer/2022020217/54b48b334a7959bb688b4643/html5/thumbnails/50.jpg)
Degrafa 360|Flex Indianapolis
How about Degrafa for Flash?
Going beyond...
Monday, May 18, 2009
![Page 51: Juan Sanchez - Degrafa Declarative Graphics Framework](https://reader030.vdocuments.us/reader030/viewer/2022020217/54b48b334a7959bb688b4643/html5/thumbnails/51.jpg)
Degrafa 360|Flex Indianapolis
Using markup for drawing graphics makes sense.
Going beyond...
Monday, May 18, 2009
![Page 52: Juan Sanchez - Degrafa Declarative Graphics Framework](https://reader030.vdocuments.us/reader030/viewer/2022020217/54b48b334a7959bb688b4643/html5/thumbnails/52.jpg)
Degrafa 360|Flex Indianapolis
More interestingly, why just the Flash Player?
Going beyond...
Monday, May 18, 2009
![Page 53: Juan Sanchez - Degrafa Declarative Graphics Framework](https://reader030.vdocuments.us/reader030/viewer/2022020217/54b48b334a7959bb688b4643/html5/thumbnails/53.jpg)
Degrafa 360|Flex Indianapolis
Thanks!
degrafa.org@degrafa
Monday, May 18, 2009