Membuat Button skin sederhana dengan menggunakan Flex 4

Pada tutorial flex kali ini, kita akan mencoba membuat sebuah button yang sederhana dengan tampilan yang tidak biasa pada Flex 4. Pertama – tama kita buat file dengan nama CustomButtonSkin.mxml, kemudian ketik source yang ada di bawah ini.

<?xml version="1.0" encoding="utf-8"?>
<!-- CustomButtonSkin.mxml -->
<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" backgroundColor="#4E4E4E">

	<fx:Style>
		@namespace s "library://ns.adobe.com/flex/spark";
		@namespace mx "library://ns.adobe.com/flex/halo";

		s|Button
		{
			skinClass: ClassReference("skins.ButtonSkin");
		}

	</fx:Style>

	<s:Button label="Custom Button"  horizontalCenter="0" verticalCenter="15"/>

</s:Application>

Kemudian, buatlah folder skins dan juga buatlah file ButtonSkin.mxml di dalam folder skins yang tadi dibuat. Selanjutnya ketikan source yang ada di bawah ini pada file ButtonSkin.mxml.

<?xml version="1.0" encoding="utf-8"?>
<!-- skins/ButtonSkin.mxml -->
<s:SparkSkin xmlns:fx="http://ns.adobe.com/mxml/2009"
			 xmlns:s="library://ns.adobe.com/flex/spark"
			 minHeight="40" minWidth="40"
			 alpha.disabled="0.5">

	<!-- states -->
	<s:states>
		<s:State name="up" />
		<s:State name="over" />
		<s:State name="down" />
		<s:State name="disabled" />
	</s:states>

	<!-- host component -->
	<fx:Metadata>
		[HostComponent("spark.components.Button")]
	</fx:Metadata>

	<fx:Script>
		<![CDATA[
			static private const exclusions:Array = ["labelDisplay"];

			override public function get colorizeExclusions():Array {
				return exclusions;
			}
		]]>
	</fx:Script>

	<s:Group left="0" right="0" top="0" bottom="0">

		<!-- fill -->
		<s:Rect left="1" right="1" top="1" bottom="1"
				radiusX="4" radiusY="4">
			<s:fill>
				<s:LinearGradient rotation="90">
					<s:GradientEntry id="g1"
									 color="0x47f2e8"
									 color.over="0x007bc2"
									 color.down="0x656565"
									 alpha="0.85" />
					<s:GradientEntry id="g2"
									 color="0x007bc2"
									 color.over="0x47f2e8"
									 color.down="0x000000"
									 alpha="0.85" />
				</s:LinearGradient>
			</s:fill>
		</s:Rect>

		<!-- highlight -->
		<s:Rect left="2" right="2" top="2" radiusX="4" radiusY="4" height="10">
			<s:fill>
				<s:LinearGradient rotation="90">
					<s:GradientEntry color="#ffffff" alpha="0.6" />
					<s:GradientEntry color="#ffffff" alpha="0.1" />
				</s:LinearGradient>
			</s:fill>
		</s:Rect>

		<!-- text -->
		<s:RichText id="labelDisplay"
					verticalAlign="middle"
					verticalCenter="0"
					left="20" right="20" top="10" bottom="10"
					color="0xffffff">
			<s:filters>
				<s:DropShadowFilter color="#000000" blurX="0" blurY="0" distance="1" alpha="0.5"/>
			</s:filters>
		</s:RichText>

	</s:Group>
</s:SparkSkin>

Berikut tampilan programnya: