Sebenarnya FXG dibuat agar para designer bisa bekerja terpisah dengan developer. Maksudnya ?, ya maksud saya adalah dengan menggunakan tools seperti Adobe Photoshop CS4, Illustrator CS4 and Fireworks CS4, kita akan bisa merubahnya kedalah format FXG dan bisa dipakai dalam aplikasi Flex kita. Namun sayangnya format FXG bisa digunakan menggunakan Flex 4 SDK dan termasuk dalam bagian spark .  Maaf ya

Anda bisa menggunakan FXG element langsung didalam sintax MXML ataupun berdiri sendiri sebagai Custom Component.

Contoh :

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" xmlns:mx="library://ns.adobe.com/flex/halo" minWidth="1024" minHeight="768">
	<mx:Panel title="Ellipse" height="247" width="279" layout="horizontal" paddingTop="10" paddingBottom="10" paddingLeft="10" paddingRight="10" x="259" y="154">
		<s:Graphic x="0" y="0">
			<s:Ellipse height="100" width="250">
				<s:stroke>
					<s:SolidColorStroke color="0x000000" weight="2"/>
				</s:stroke>
				<s:fill>
					<s:RadialGradient>
						<s:entries>
							<s:GradientEntry color="0x1c64a7"/>
							<s:GradientEntry color="0x114371"/>
						</s:entries>
					</s:RadialGradient>
				</s:fill>
				<s:filters>
					<mx:DropShadowFilter/>
				</s:filters>
			</s:Ellipse>
		</s:Graphic>
	</mx:Panel>
</s:Application>

Ellipse FXG

FXG bisa berada dalam file *.mxml dan *.fxg dengan syarat berada didalam tag <Graphic>

Tidak hanya itu, kita juga bisa menggunakan tag <Library> dan <Definition>, yang berfungsi semacam deklarasi FXG yang nantinya bisa kita pakai dengan memanggil namanya.

Contoh :

<?xml version="1.0" encoding="utf-8"?>
<!-- Ahmad Fathi Hadi/FXGLibraryExample.mxml -->
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:mx="library://ns.adobe.com/flex/halo" xmlns:s="library://ns.adobe.com/flex/spark" >
	<fx:Library>
		<fx:Definition name="EllipseFathi">
			<s:Graphic x="0" y="0">
				<s:Ellipse height="100" width="250">
					<s:stroke>
						<s:SolidColorStroke color="0x000000" weight="2"/>
					</s:stroke>
					<s:fill>
						<s:RadialGradient>
							<s:entries>
								<s:GradientEntry color="0x1c64a7"/>
								<s:GradientEntry color="0x114371"/>
							</s:entries>
						</s:RadialGradient>
					</s:fill>
					<s:filters>
						<mx:DropShadowFilter/>
					</s:filters>
				</s:Ellipse>
			</s:Graphic>
		</fx:Definition>
	</fx:Library>
	<mx:Panel title="Library Example" height="314" width="528" layout="absolute" paddingTop="10" paddingBottom="10" paddingLeft="10" paddingRight="10" x="93" y="31">
		<fx:EllipseFathi x="0" y="0"/>
		<fx:EllipseFathi x="255" y="105"/>
		<fx:EllipseFathi x="0" y="105"/>
		<fx:EllipseFathi x="255" y="0"/>
	</mx:Panel>
</s:Application>

FXG Library Example

Mungkin dengan anda melihat contoh kode yang saya berikan, anda bisa mengerti maksud saya. (^_^)

Well, mungkin sekian dari saya untuk penjelasan singkat mengenai FXG.