Flash Builder Örnekleri

Flash Builder ( Flex 4 ) Makaleleri

  • Ana SayfaAna Sayfa

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

Posted Under <mx:Accordion>

No Comments Yet

You can be the first to comment!

Leave a comment

* = Required

    • Posts
    • Twitter
    • Flickr
     

    Flex’te...

    Hatalar - Errors

     

    As3 Email...

    Action Script Hints

     

    ColorPicker an...

    <mx:ColorPicker>

    Seonokta.com kurumsal sitelere seo hizmeti sunmaktadır. Sitenizin Google aramalarında daha üstte olmasını... http://ff.im/oMiZE

    follow me on
    twitter

    K20D4165IMG_0566IMG_5299.jpgE3052698
  • Categories

    • Action Script Hints
    • Charts – <mx:Chart>
    • Components – <fx:Component>
      • <mx:Accordion>
      • <mx:ColorPicker>
      • <mx:PopUpMenuButton>
      • <s:Spinner>
    • Genel – <s:Application>
    • Hatalar – Errors
  • Archives

    • 2010
      • Ocak
      • Şubat
      • Nisan
      • Mayıs
      • Haziran
      • Temmuz
    • 2009
      • Aralık
  • Bağlantılar

    • kiralık uçak

This site is using the Handgloves WordPress Theme
Designed & Developed by George Wiscombe

Subscribe via RSS