Problem
How to create a visual components using Degrafa and SVG format and connect these objects with some of the Flex standard components
Solution
In this example you can see how to implement Degrafa elements, SVG data from some any Adobe design tool and integrate it with some of the basic Flex components such as checkbox or color picker.
Detailed explanation
Last spring I found out about Degrafa framework and I was really impressed with the features that Degrafa offers. Few weeks ago a friend of mine wanted to see how can he create something useful with Flex and Degrafa.
I made a simple example of a sport shirt in Illustrator (because my friend had it on his notebook). Then I saved graphics in SVG format and took the data from it to create a sport shirt with horizontal and vertical sleaves.
The right panel contains Degrafa surface with fills and line strokes which are connected with color pickers and check boxes. Below you can see Degrafa code with geometry groups and polygons.
<degrafa:Surface verticalCenter="-130" horizontalCenter="-130">
<!-- Creating fills. -->
<degrafa:fills>
<paint:SolidFill id="homeShirtFill" color="{cpHomeShirtColor.selectedColor}"/>
<paint:SolidFill id="homeShirtSleavesBorderFill" color="{cpHomeShirtSleavesColor.selectedColor}"/>
<paint:SolidFill id="homeShirtVerticalStripesFill" color="{cpHomeShirtVerticalStripesColor.selectedColor}" alpha="0"/>
<paint:SolidFill id="homeShirtHorizontalStripesFill" color="{cpHomeShirtHorizontalStripesColor.selectedColor}" alpha="0"/>
</degrafa:fills>
<!-- Creating Strokes. -->
<degrafa:strokes>
<paint:SolidStroke id="homeShirtStroke" color="#000000" alpha="1" weight="0"/>
</degrafa:strokes>
<!-- Home shirt -->
<degrafa:GeometryGroup>
<geometry:Polygon fill="{homeShirtFill}">
<geometry:data> 70.395,195.667 70.395,93.334 61.889,105.336 35.333,84.053 70.395,41.001 108.835,41.001
127,48.667 145.835,41.001 184.335,41.001 219.396,84.053 192.841,105.336 184,93.334
184.335,93.334 184.335,195.667
</geometry:data>
</geometry:Polygon>
<geometry:Polygon fill="{homeShirtSleavesBorderFill}" stroke="{homeShirtStroke}" id="homeShirtRightSleave">
<geometry:data>216.264,80.157 219.396,84.053 192.841,105.336 190.725,101.587</geometry:data>
</geometry:Polygon>
<geometry:Polygon fill="{homeShirtSleavesBorderFill}" stroke="{homeShirtStroke}" id="homeShirtLeftSleave">
<geometry:data>39.07,80.157 36.059,84.053 61.598,105.336 64.609,101.587</geometry:data>
</geometry:Polygon>
</degrafa:GeometryGroup>
<!-- home shirt vertical stripes -->
<degrafa:GeometryGroup>
<geometry:Polygon fill="{homeShirtVerticalStripesFill}" id="homeShirtVerticalStripe1">
<geometry:data>70.395,41.001 90.395,41.001 90.395,195.667 70.395,195.667</geometry:data>
</geometry:Polygon>
<geometry:Polygon fill="{homeShirtVerticalStripesFill}" id="homeShirtVerticalStripe2">
<geometry:data>108.835,41.001 127,48.667 145.835,41.001 145.835,195.667 108.835,195.667</geometry:data>
</geometry:Polygon>
<geometry:Polygon fill="{homeShirtVerticalStripesFill}" id="homeShirtVerticalStripe3">
<geometry:data>164.335,41.001 184.335,41.001 184.335,195.667 164.335,195.6677</geometry:data>
</geometry:Polygon>
</degrafa:GeometryGroup>
<!-- home shirt h stripes -->
<degrafa:GeometryGroup>
<geometry:Polygon fill="{homeShirtHorizontalStripesFill}" id="homeShirtHorizontalStripe1">
<geometry:data>70.395,175.667 184.335,175.667 184.335,195.667 70.395,195.667</geometry:data>
</geometry:Polygon>
<geometry:Polygon fill="{homeShirtHorizontalStripesFill}" id="homeShirtHorizontalStripe2">
<geometry:data>70.395,135.667 184.335,135.667 184.335,155.667 70.395,155.667</geometry:data>
</geometry:Polygon>
<geometry:Polygon fill="{homeShirtHorizontalStripesFill}" id="homeShirtHorizontalStripe3">
<geometry:data>70.395,95.667 184.335,95.667 184.335,115.667 70.395,115.667</geometry:data>
</geometry:Polygon>
</degrafa:GeometryGroup>
<!-- home shirt border - extracted to prevent loss of border parts while stripes are displayed -->
<degrafa:GeometryGroup>
<geometry:Polygon stroke="{homeShirtStroke}">
<geometry:data> 70.395,195.667 70.395,93.334 61.889,105.336 35.333,84.053 70.395,41.001 108.835,41.001
127,48.667 145.835,41.001 184.335,41.001 219.396,84.053 192.841,105.336 184,93.334
184.335,93.334 184.335,195.667
</geometry:data>
</geometry:Polygon>
</degrafa:GeometryGroup>
</degrafa:Surface>
