11 Nisan 2010
Posted by admin
Accordion Skin Style
a new thing in Flash Builder 4. You can change skin of any components. This examples how can you change skin of accordion
Turkish
Flash Builder ile gelen bir yenilikte nesnlerin görüntülerini dileğimizce değiştirebiliriz. Skin kullanımını aşağıdaki örnekte görebilirsiniz.
Main.mxml
<?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/mx" minWidth="955" minHeight="600" width="455" height="242"> <fx:Declarations> <!-- Place non-visual elements (e.g., services, value objects) here --> </fx:Declarations> <fx:Style> @namespace s "library://ns.adobe.com/flex/spark"; @namespace mx "library://ns.adobe.com/flex/halo"; .accordionHeader { skin: ClassReference("HeaderSkin"); } </fx:Style> <mx:Accordion x="10" y="10" width="435" height="222" styleName="asd" headerStyleName="accordionHeader" > <s:NavigatorContent label="Accordion Pane 1" width="100%" height="100%"> </s:NavigatorContent> <s:NavigatorContent label="Menu 2" width="100%" height="100%"> </s:NavigatorContent> <s:NavigatorContent label="Menu 3" width="100%" height="100%"> </s:NavigatorContent> </mx:Accordion> </s:Application>
HeaderSkin.mxml
<?xml version="1.0" encoding="utf-8"?> <s:SparkSkin xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" minWidth="21" minHeight="21" alpha.disabled="0.5" width.selectedDisabled="121" height.selectedDisabled="39"> <fx:Script> /** * @private */ override protected function initializationComplete():void { useChromeColor = true; super.initializationComplete(); } </fx:Script> <!-- states --> <s:states> <s:State name="up" /> <s:State name="over" /> <s:State name="down" /> <s:State name="disabled" /> <s:State name="selectedUp" /> <s:State name="selectedOver" /> <s:State name="selectedDown" /> <s:State name="selectedDisabled" /> </s:states> <s:Rect left="1" right="1" top="1" bottom="1" alpha="1"> <s:fill> <s:BitmapFill source="@Embed('air.png')" /> </s:fill> </s:Rect> <!-- layer 3: fill --> <s:Rect left="1" right="1" top="1" bottom="1"> <s:fill> <s:LinearGradient rotation="90"> <s:GradientEntry color="0xFFFF00" color.over="0xBBBDBD" color.down="0xAAAAAA" alpha="0.85" /> <s:GradientEntry color="0xD8D800" color.over="0x9FA0A1" color.down="0x929496" alpha="0.85" /> </s:LinearGradient> </s:fill> </s:Rect> <!-- layer 4: fill lowlight --> <s:Rect left="1" right="1" top="1" bottom="1"> <s:fill> <s:LinearGradient rotation="270"> <s:GradientEntry color="0x000000" ratio="0.0" alpha="0.0627" /> <s:GradientEntry color="0x000000" ratio="0.48" alpha="0.0099" /> <s:GradientEntry color="0x000000" ratio="0.48001" alpha="0" /> </s:LinearGradient> </s:fill> </s:Rect> <!-- layer 5: fill highlight --> <s:Rect left="1" right="1" top="1" bottom="1"> <s:fill> <s:LinearGradient rotation="90"> <s:GradientEntry color="0xFFFFFF" ratio="0.0" alpha="0.33" alpha.over="0.22" alpha.down="0.12"/> <s:GradientEntry color="0xFFFFFF" ratio="0.48" alpha="0.33" alpha.over="0.22" alpha.down="0.12" /> <s:GradientEntry color="0xFFFFFF" ratio="0.48001" alpha="0" /> </s:LinearGradient> </s:fill> </s:Rect> <!-- layer 6: highlight stroke (all states except down) --> <s:Rect left="1" right="1" top="1" bottom="1" excludeFrom="down"> <s:stroke> <s:LinearGradientStroke rotation="90"> <s:GradientEntry color="0xFFFFFF" alpha.over="0.22" /> <s:GradientEntry color="0xD8D8D8" alpha.over="0.22" /> </s:LinearGradientStroke> </s:stroke> </s:Rect> <!-- layer 6: highlight stroke (down state only) --> <s:Rect left="1" top="1" bottom="1" width="1" includeIn="down"> <s:fill> <s:SolidColor color="0x000000" alpha="0.07" /> </s:fill> </s:Rect> <s:Rect right="1" top="1" bottom="1" width="1" includeIn="down"> <s:fill> <s:SolidColor color="0x000000" alpha="0.07" /> </s:fill> </s:Rect> <s:Rect left="1" top="1" right="1" height="1" includeIn="down"> <s:fill> <s:SolidColor color="0x000000" alpha="0.25" /> </s:fill> </s:Rect> <s:Rect left="1" top="2" right="1" height="1" includeIn="down"> <s:fill> <s:SolidColor color="0x000000" alpha="0.09" /> </s:fill> </s:Rect> <!-- layer 2: border --> <s:Rect left="0" right="0" top="0" bottom="0" width="69" height="20"> <s:stroke> <s:SolidColorStroke color="0x696969" alpha="1" alpha.over="1" alpha.down="1" /> </s:stroke> </s:Rect> </s:SparkSkin>
Demo :




No Comments Yet
You can be the first to comment!
Leave a comment