Povezivanje Flex komponenata s vizualnim komponentama pomoću Degrafe

Objavljeno: 23.05.2009. 17:42 admin Nema komentara

Flex Builder nam služi kako bismo napravili RIA aplikacije bez mučenja sa HTML kodom i prilagodbom za sve browsere. Ipak, da bismo napravili nekakav dizajnerski dodatak, trebamo ili Photoshop ili Flash. Prošlo proljeće sam otkrio Degrafu i oduševio sam se njenim mogućnostima. Degrafa je Flex framework za stvaranje grafičkih elemenata pomoću tagova ili SVG krivulja, koje možemo napraviti u bilo kojem kvalitetnijem grafičkom alatu.

Za demonstraciju Degrafe napravio sam jedan mali demo. Kolegi sam prije nekoliko tjedana demonstrirao Degrafu. Prvo sam u Illustratoru (alatu koji sam našao kod kolege na laptopu) nacrtao nogometni dres, dodao rubove rukava i horizontalne i vertikalne pruge. Tada sam tu grafiku spasio u SVG formatu i dobio sam sve potrebno za slaganje. U Flex Builderu sam složio sučelje s color pickerima i check boxovima kojima se definira da li će dres imati horizontalne ili vertikalne pruge.

Nakon toga sam na panel dodao Degrafa surface i na nju dodao objekte za definiranje fillova i ruba dresa. Fill objekti su povezani s color pickerima. Da bi se nacrtao dres, iskoristio sam pojedine krivulje iz SVG-a, za rub dresa, rubove rukava i crte na dresu. Malo po malo i složio sam zgodni primjer.

	<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>

Primjer funkcionalnosti možete vidjeti na ovom linku: Degrafa dres
Kod primjera: Degrafa dres

Više o Degrafi možete saznati na http://www.degrafa.org