Date Format in flex4 (DD/MM/YYYY)

public var today:Date = new Date();
public var todayString:String = DateField.dateToString(today, "DD/MM/YYYY");


Output should be :  10/05/2011

How to Change Date Format in flex4 (DD/MM/YYYY)

Read More

Custom Skin For Progress Bar in Flex4

<?xml version="1.0" encoding="utf-8"?>

<!--

    ADOBE SYSTEMS INCORPORATED
    Copyright 2008 Adobe Systems Incorporated
    All Rights Reserved.

    NOTICE: Adobe permits you to use, modify, and distribute this file
    in accordance with the terms of the license agreement accompanying it.

-->

<!--- The Spark skin class for the MX ProgressBar component.

      @see mx.controls.ProgressBar
      
      @langversion 3.0
      @playerversion Flash 10
      @playerversion AIR 1.5
      @productversion Flex 4
-->
<s:SparkSkin xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" >

    <fx:Script>
        /**
         * @private
         */
        override protected function initializationComplete():void
        {
            useChromeColor = true;
            super.initializationComplete();
        }
    </fx:Script>
  
    <!-- layer 1: fill -->
    <s:Rect left="2" right="2" top="2" bottom="2" >
        <s:fill>
            <s:LinearGradient rotation="90">
                <s:GradientEntry color="red"/>
                <s:GradientEntry color="red"/>
            </s:LinearGradient>
        </s:fill>
    </s:Rect>
  
    <!-- layer 2: border -->
    <s:Rect left="2" right="2" top="2" bottom="2" >
        <s:stroke>
            <s:LinearGradientStroke rotation="90">
                <s:GradientEntry color="0xFFFFFF"
                               alpha=".9" />
                <s:GradientEntry color="0xFFFFFF"
                               alpha="0.5" />
            </s:LinearGradientStroke>
        </s:stroke>
    </s:Rect>
  
    <!-- layer 3: right edge -->
    <s:Rect right="1" top="2" bottom="2" width="1" >
        <s:fill>
            <s:SolidColor color="0x000000" alpha="0.55" />
        </s:fill>
    </s:Rect>
  
</s:SparkSkin>

Read More

Online Tour De Flex

http://www.adobe.com/devnet-apps/flex/tourdeflex/web/

Read More

Accordion Header Color and selected color in Flex4

MXML File

<?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" width="100%" height="100%">
<fx:Style source="/CssStyle/AccoridianLayout.css"/>
<fx:Script>
<![CDATA[

import boxie_skins.panel_acc;

import mx.collections.ArrayCollection;
[Bindable] public var ddltxt:ArrayCollection = new ArrayCollection([
{Label:"Delhi", data:'1'},
{Label:"Mumbai", data:2},
{Label:"Tamilnadu", data:3},
{Label:"Karantaka", data:4},
{Label:"AndhraPardesh", data:5},
{Label:"Utter Pradesh", data:6}
]);
[Bindable] public var cardtype:ArrayCollection = new ArrayCollection([
{Label:"", data:06},
{Label:"Visa", data:7},
{Label:"Master Card", data:8},
{Label:"American Express", data:9},
{Label:"Discover", data:10},
{Label:"Dinner Club", data:11}
]);
]]>
</fx:Script>
<fx:Declarations>
<!-- Place non-visual elements (e.g., services, value objects) here -->
</fx:Declarations>

<s:BorderContainer width="100%" height="100%" borderVisible="false" borderColor="#ffffff" backgroundColor="#838C8C">

<s:layout>
<s:HorizontalLayout horizontalAlign="center" />
</s:layout>

<s:Panel  cornerRadius="5" borderColor="#ffffff" width="45%" borderVisible="false" title="Product Catalog" styleName="paneltitle">
<s:VGroup width="100%" height="100%">
<mx:Accordion id="accordion" width="99%" height="98%" left="5" top="5" bottom="20" borderColor="#AAB3B3" headerStyleName="header">
<s:NavigatorContent label="General Information" styleName="paneltitle" >
<s:Group width="100%" height="100%">
<s:VGroup width="100%" height="100%" paddingTop="20" paddingLeft="25" bottom="50">
<s:HGroup width="100%">
<s:Label text="Name" paddingTop="6" styleName="txt" width="80"/>
<s:Label text="*" color="red"  paddingTop="7.5" fontSize="18"/>
<s:TextInput width="180"/>
</s:HGroup>
<s:HGroup width="100%">
<s:Label text="Address" paddingTop="6" styleName="txt" width="80"/>
<s:Label text="*" color="red"  paddingTop="7.5" fontSize="18"/>
<s:TextInput width="180"/>
</s:HGroup>
<s:HGroup width="100%">
<s:Label text="City" paddingTop="6" styleName="txt" width="80"/>
<s:Label text="*" color="red"  paddingTop="7.5" fontSize="18"/>
<s:TextInput width="180"/>
</s:HGroup>
<s:HGroup width="100%">
<s:Label text="State" paddingTop="6" styleName="txt" width="80"/>
<s:Label text="*" color="red"  paddingTop="7.5" fontSize="18"/>
<s:DropDownList dataProvider="{ddltxt}" labelField="Label" prompt="Choose a state..." width="180">

</s:DropDownList>
</s:HGroup>
<s:HGroup width="100%">
<s:Label text="Zip" paddingTop="6" styleName="txt" width="80"/>
<s:Label text="*" color="red"  paddingTop="7.5" fontSize="18"/>
<s:TextInput width="180"/>
</s:HGroup>
<s:HGroup width="100%">
<s:Label text="Email" paddingTop="6" styleName="txt" width="80"/>
<s:Label text="*" color="red"  paddingTop="7.5" fontSize="18"/>
<s:TextInput width="180"/>
</s:HGroup>
<s:HGroup width="100%" paddingTop="80" paddingLeft="445">
<s:Button label="Continue" click="accordion.selectedIndex=1;"/>
</s:HGroup>
</s:VGroup>
</s:Group>
</s:NavigatorContent>
<s:NavigatorContent label="Shipping Information" styleName="paneltitle" >
<s:Group>
<s:VGroup width="100%" height="100%"  paddingTop="20" paddingLeft="25">
<s:RadioButton label="US Mail (3-7 business days)"/>
<s:RadioButton label="UPS (2 bussiness days)"/>
<s:RadioButton label="FedEx (Overnight Priority)" selected="true"/>
<s:HGroup width="100%" paddingTop="200" paddingLeft="445">
<s:Button label="Continue" click="accordion.selectedIndex=2;"/>
</s:HGroup>
</s:VGroup>
</s:Group>
</s:NavigatorContent>
<s:NavigatorContent label="Payment Information" styleName="paneltitle" >
<s:Group width="100%" height="100%">
<s:VGroup width="100%" height="100%" paddingTop="20" paddingLeft="25" bottom="50">
<s:HGroup width="100%">
<s:Label text="Card Type" paddingTop="6" styleName="txt" width="100"/>
<s:Label text="*" color="red"  paddingTop="7.5" fontSize="18"/>
<s:DropDownList dataProvider="{cardtype}" width="130" labelField="Label"/>
</s:HGroup>
<s:HGroup width="100%">
<s:Label text="credit Card" paddingTop="6" styleName="txt" width="100"/>
<s:Label text="*" color="red"  paddingTop="7.5" fontSize="18"/>
<s:TextInput width="180"/>
</s:HGroup>
<s:HGroup width="100%">
<s:Label text="Holder Name" paddingTop="6" styleName="txt" width="100"/>
<s:Label text="*" color="red"  paddingTop="7.5" fontSize="18"/>
<s:TextInput width="180"/>
</s:HGroup>
<s:HGroup width="100%">
<s:Label text="Expiration Month" paddingTop="6" styleName="txt" width="100"/>
<s:Label text="*" color="red"  paddingTop="7.5" fontSize="18"/>
<s:DropDownList width="50" selectedIndex="0">
<s:dataProvider>
<s:ArrayList source="[1,2,3,4,5,6,7,8,9,10,11,12]" />
</s:dataProvider>
</s:DropDownList>
</s:HGroup>
<s:HGroup width="100%">
<s:Label text="Expiration Year" paddingTop="6" styleName="txt" width="100"/>
<s:Label text="*" color="red"  paddingTop="7.5" fontSize="18"/>
<s:DropDownList width="70" selectedIndex="0">
<s:dataProvider>
<s:ArrayList source="[2004,2005,2006,2007,2008,2009,2010]" />
</s:dataProvider>
</s:DropDownList>
</s:HGroup>
</s:VGroup>
</s:Group>
</s:NavigatorContent>
</mx:Accordion>
<s:Label text="Order Summary" styleName="order"/>
<s:Label text="Order Total:                           $129.99" styleName="txtsmall"/>
<s:Label text="Shipping and Handling:           $5.99" styleName="txtsmall"/>
<s:Label text="Grand Total:         $135.98" styleName="grand"/>
</s:VGroup>
</s:Panel>
</s:BorderContainer>
</s:Application>

CSS File

/* CSS file */

@namespace s "library://ns.adobe.com/flex/spark";

@namespace mx "library://ns.adobe.com/flex/mx";

@namespace spark "mx.skins.spark.*";

.paneltitle

{

}

.txt

{

text-align:right;

font-size:12px;

font-family:arial;

font-weight:normal;

}

s|Panel

{

font-size:11px;

font-family:arial;

color:#2B333C;

font-weight:bold;

}

.header {

skin: ClassReference("boxie_skins.AccordianTabskin");

}

.order

{

padding-left:5px;

padding-top:10px;

font-size:16;

font-weight:bold;

font-family:arial;

color:#333333;

}

.grand

{

color:#FF6600;

font-size:16;

padding-left:5px;

padding-top:10px;

}

.txtsmall

{

color:#0B333C;

padding-left:5px;

}

Skin File

<?xml version="1.0" encoding="utf-8"?>

<!-- http://blog.flexexamples.com/2009/06/21/creating-a-custom-halo-accordion-header-skin-in-flex-4/ -->

<s:SparkSkin name="CustomAccordionHeaderSkin"

xmlns:fx="http://ns.adobe.com/mxml/2009"

xmlns:s="library://ns.adobe.com/flex/spark"

minWidth="21" minHeight="21"

alpha.disabled="0.5">

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

<!-- layer 3: fill -->

<s:Rect left="1" right="1" top="1" bottom="1" rotation="360">

<s:fill>

<s:SolidColor color="white"  

 color.selectedUp="#E6FFDC"

 color.selectedOver="#E6FFDC"

 color.selectedDown="#E6FFDC" />

</s:fill>

</s:Rect>

<!-- layer 4: fill lowlight -->

<s:Rect left="1" right="1" bottom="1" height="9">

<s:fill>

<s:LinearGradient rotation="90">

<s:GradientEntry color="0x000000" alpha="0.0099" />

<s:GradientEntry color="0x000000" alpha="0.0627" />

</s:LinearGradient>

</s:fill>

</s:Rect>

<!-- layer 5: fill highlight -->

<s:Rect left="1" right="1" top="1" height="9">

<s:fill>

<s:SolidColor color="0xFFFFFF"

 alpha="0.33"

 alpha.over="0.22"

 alpha.down="0.12" />

</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="#AAB3B3" color.over="#67E634"

/>

</s:stroke>

</s:Rect>

</s:SparkSkin>

Read More

how to give line break in text in flex

<mx:Text text="This is a &#13; new line" />

Read More

Use the backgroundImage style to specify an image as the background of the container in Flex4

<?xml version="1.0" encoding="utf-8"?>
<!-- containers\spark\SparkBorderImage.mxml -->
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
    xmlns:mx="library://ns.adobe.com/flex/mx" 
    xmlns:s="library://ns.adobe.com/flex/spark"> 
    
    <fx:Script> 
        <![CDATA[
            [Embed(source="/assets/logo.jpg")]
            [Bindable]
            public var imgCls:Class;
        ]]>
    </fx:Script> 
     
    <s:BorderContainer 
        backgroundImage="{imgCls}" 
        borderStyle="inset" borderWeight="2" 
        width="150" height="180">
    </s:BorderContainer> 
</s:Application>

Read More

Flex 4 Downloads

Click Here To Download The Flex 4 SDK

Read More

how to give new line in text area in flex4

<mx:TextArea text="This is a &#13; new line" />

Read More