Flex Examples » beta2 http://blog.flexexamples.com Just a bunch of Adobe Flex Examples Wed, 26 Jan 2011 18:09:51 +0000 en hourly 1 Setting the border color on a Spark DropDownList control in Flex 4 http://blog.flexexamples.com/2010/03/20/setting-the-border-color-on-a-spark-dropdownlist-control-in-flex-4/ http://blog.flexexamples.com/2010/03/20/setting-the-border-color-on-a-spark-dropdownlist-control-in-flex-4/#comments Sat, 20 Mar 2010 17:09:04 +0000 Peter deHaan http://blog.flexexamples.com/?p=2624 In a previous example, “Setting the border alpha on a Spark DropDownList control in Flex 4″, we saw how you could set the border alpha on a Spark DropDownList control’s popup menu in Flex 4 by setting the borderAlpha style.

The following example shows how you can set the border color on a Spark [...]]]> In a previous example, “Setting the border alpha on a Spark DropDownList control in Flex 4″, we saw how you could set the border alpha on a Spark DropDownList control’s popup menu in Flex 4 by setting the borderAlpha style.

The following example shows how you can set the border color on a Spark DropDownList control’s popup menu in Flex 4 by setting the borderColor style.

The following example(s) require Flash Player 10 and the Adobe Flex 4 SDK. To download the Adobe Flash Builder 4 trial, see http://www.adobe.com/products/flex/. To download the latest nightly build of the Flex 4 SDK, see http://opensource.adobe.com/wiki/display/flexsdk/Download+Flex+4.
For more information on getting started with Flex 4 and Flash Builder 4, see the official Adobe Flex Team blog.

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2010/03/20/setting-the-border-color-on-a-spark-dropdownlist-control-in-flex-4/ -->
<s:Application name="Spark_DropDownList_borderColor_test"
        xmlns:fx="http://ns.adobe.com/mxml/2009" 
        xmlns:s="library://ns.adobe.com/flex/spark" 
        xmlns:mx="library://ns.adobe.com/flex/mx">
    <s:controlBarContent>
        <mx:Form>
            <mx:FormItem label="borderColor:">
                <mx:ColorPicker id="clrPckr" change="ddl.openDropDown();" />
            </mx:FormItem>
        </mx:Form>
    </s:controlBarContent>
 
    <s:DropDownList id="ddl"
            borderColor="{clrPckr.selectedColor}"
            requireSelection="true"
            dropShadowVisible="false"
            horizontalCenter="0" top="20">
        <s:dataProvider>
            <s:ArrayList source="[One,Two,Three,Four,Five,Six,Seven]" />
        </s:dataProvider>
    </s:DropDownList>
 
</s:Application>

View source is enabled in the following example.

You can also set the borderColor style in an external .CSS file or a <Style> block, as seen in the following example:

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2010/03/20/setting-the-border-color-on-a-spark-dropdownlist-control-in-flex-4/ -->
<s:Application name="Spark_DropDownList_borderColor_test"
        xmlns:fx="http://ns.adobe.com/mxml/2009" 
        xmlns:s="library://ns.adobe.com/flex/spark" 
        xmlns:mx="library://ns.adobe.com/flex/mx">
 
    <fx:Style>
        @namespace s "library://ns.adobe.com/flex/spark";
        @namespace mx "library://ns.adobe.com/flex/mx";
 
        s|DropDownList {
            borderColor: haloOrange;
        }
    </fx:Style>
 
    <s:DropDownList id="ddl"
            requireSelection="true"
            dropShadowVisible="false"
            horizontalCenter="0" top="20"
            creationComplete="ddl.openDropDown();">
        <s:dataProvider>
            <s:ArrayList source="[One,Two,Three,Four,Five,Six,Seven]" />
        </s:dataProvider>
    </s:DropDownList>
 
</s:Application>

Or you can set the borderColor style using ActionScript, as seen in the following example:

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2010/03/20/setting-the-border-color-on-a-spark-dropdownlist-control-in-flex-4/ -->
<s:Application name="Spark_DropDownList_borderColor_test"
        xmlns:fx="http://ns.adobe.com/mxml/2009" 
        xmlns:s="library://ns.adobe.com/flex/spark" 
        xmlns:mx="library://ns.adobe.com/flex/mx">
    <s:controlBarContent>
        <mx:Form>
            <mx:FormItem label="borderColor:">
                <mx:ColorPicker id="clrPckr"
                        change="clrPckr_changeHandler(event);"/>
            </mx:FormItem>
        </mx:Form>
    </s:controlBarContent>
 
    <fx:Script>
        <![CDATA[
            import mx.events.ColorPickerEvent;
 
            protected function clrPckr_changeHandler(evt:ColorPickerEvent):void {
                ddl.setStyle("borderColor", evt.color);
                ddl.openDropDown();
            }
        ]]>
    </fx:Script>
 
    <s:DropDownList id="ddl"
            requireSelection="true"
            dropShadowVisible="false"
            horizontalCenter="0" top="20">
        <s:dataProvider>
            <s:ArrayList source="[One,Two,Three,Four,Five,Six,Seven]" />
        </s:dataProvider>
    </s:DropDownList>
 
</s:Application>

This entry is based on a beta version of the Flex 4 SDK and therefore is very likely to change as development of the Flex SDK continues. The API can (and will) change causing examples to possibly not compile in newer versions of the Flex 4 SDK.

 
]]> http://blog.flexexamples.com/2010/03/20/setting-the-border-color-on-a-spark-dropdownlist-control-in-flex-4/feed/ 1 Setting the border alpha on a Spark DropDownList control in Flex 4 http://blog.flexexamples.com/2010/03/20/setting-the-border-alpha-on-a-spark-dropdownlist-control-in-flex-4/ http://blog.flexexamples.com/2010/03/20/setting-the-border-alpha-on-a-spark-dropdownlist-control-in-flex-4/#comments Sat, 20 Mar 2010 07:26:09 +0000 Peter deHaan http://blog.flexexamples.com/?p=2621 The following example shows how you can set the border alpha on a Spark DropDownList control’s popup menu in Flex 4 by setting the borderAlpha style.

<?xml version="1.0" encoding="utf-8"?> <!-- http://blog.flexexamples.com/2010/03/20/setting-the-border-alpha-on-a-spark-dropdownlist-control-in-flex-4/ --> <s:Application name="Spark_DropDownList_borderAlpha_test" xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" xmlns:mx="library://ns.adobe.com/flex/mx"> <s:controlBarContent> <s:Label text="borderAlpha:" /> <s:HSlider id="sl" minimum="0.0" maximum="1.0" value="1.0" snapInterval="0.1" stepSize="0.1" change="ddl.openDropDown();" /> </s:controlBarContent>   <s:DropDownList id="ddl" [...]]]> The following example shows how you can set the border alpha on a Spark DropDownList control’s popup menu in Flex 4 by setting the borderAlpha style.

The following example(s) require Flash Player 10 and the Adobe Flex 4 SDK. To download the Adobe Flash Builder 4 trial, see http://www.adobe.com/products/flex/. To download the latest nightly build of the Flex 4 SDK, see http://opensource.adobe.com/wiki/display/flexsdk/Download+Flex+4.
For more information on getting started with Flex 4 and Flash Builder 4, see the official Adobe Flex Team blog.

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2010/03/20/setting-the-border-alpha-on-a-spark-dropdownlist-control-in-flex-4/ -->
<s:Application name="Spark_DropDownList_borderAlpha_test"
        xmlns:fx="http://ns.adobe.com/mxml/2009" 
        xmlns:s="library://ns.adobe.com/flex/spark" 
        xmlns:mx="library://ns.adobe.com/flex/mx">
    <s:controlBarContent>
        <s:Label text="borderAlpha:" />
        <s:HSlider id="sl"
                minimum="0.0" maximum="1.0"
                value="1.0"
                snapInterval="0.1" stepSize="0.1"
                change="ddl.openDropDown();" />
    </s:controlBarContent>
 
    <s:DropDownList id="ddl"
            borderAlpha="{sl.value}"
            requireSelection="true"
            dropShadowVisible="false"
            horizontalCenter="0" top="20">
        <s:dataProvider>
            <s:ArrayList source="[One,Two,Three,Four,Five,Six,Seven]" />
        </s:dataProvider>
    </s:DropDownList>
 
</s:Application>

This entry is based on a beta version of the Flex 4 SDK and therefore is very likely to change as development of the Flex SDK continues. The API can (and will) change causing examples to possibly not compile in newer versions of the Flex 4 SDK.

 
]]> http://blog.flexexamples.com/2010/03/20/setting-the-border-alpha-on-a-spark-dropdownlist-control-in-flex-4/feed/ 0 Skinning the track on a Spark HSlider control in Flex 4 http://blog.flexexamples.com/2010/03/19/skinning-the-track-on-a-spark-hslider-control-in-flex-4/ http://blog.flexexamples.com/2010/03/19/skinning-the-track-on-a-spark-hslider-control-in-flex-4/#comments Fri, 19 Mar 2010 15:39:15 +0000 Peter deHaan http://blog.flexexamples.com/?p=2612 The following example shows how you can reskin the track on a Spark HSlider control in Flex 4 by creating a custom HSlider skin and specifying the track skin part’s skinClass style.

<?xml version="1.0" encoding="utf-8"?> <!-- http://blog.flexexamples.com/2010/03/19/skinning-the-track-on-a-spark-hslider-control-in-flex-4/ --> <s:Application name="Spark_HSlider_track_skinClass_test" xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" xmlns:mx="library://ns.adobe.com/flex/mx">   <s:HSlider id="sldr" skinClass="YeHSliderSkin" horizontalCenter="0" verticalCenter="0" />   </s:Application>

And the [...]]]> The following example shows how you can reskin the track on a Spark HSlider control in Flex 4 by creating a custom HSlider skin and specifying the track skin part’s skinClass style.

The following example(s) require Flash Player 10 and the Adobe Flex 4 SDK. To download the Adobe Flash Builder 4 trial, see http://www.adobe.com/products/flex/. To download the latest nightly build of the Flex 4 SDK, see http://opensource.adobe.com/wiki/display/flexsdk/Download+Flex+4.
For more information on getting started with Flex 4 and Flash Builder 4, see the official Adobe Flex Team blog.

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2010/03/19/skinning-the-track-on-a-spark-hslider-control-in-flex-4/ -->
<s:Application name="Spark_HSlider_track_skinClass_test"
        xmlns:fx="http://ns.adobe.com/mxml/2009"
        xmlns:s="library://ns.adobe.com/flex/spark"
        xmlns:mx="library://ns.adobe.com/flex/mx">
 
    <s:HSlider id="sldr"
            skinClass="YeHSliderSkin"
            horizontalCenter="0" verticalCenter="0" />
 
</s:Application>

And the custom Spark HSlider skin class, YeHSliderSkin.mxml, is as follows:

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2010/03/19/skinning-the-track-on-a-spark-hslider-control-in-flex-4/ -->
<s:SparkSkin name="YeHSliderSkin"
        xmlns:fx="http://ns.adobe.com/mxml/2009"
        xmlns:s="library://ns.adobe.com/flex/spark"
        xmlns:fb="http://ns.adobe.com/flashbuilder/2009"
        minHeight="11"
        alpha.disabled="0.5">
    <s:states>
        <s:State name="normal" />
        <s:State name="disabled" />
    </s:states>
 
    <fx:Metadata>
        [HostComponent("spark.components.HSlider")]
    </fx:Metadata>
 
    <fx:Script fb:purpose="styling">
        <![CDATA[
            /* Define the skin elements that should not be colorized.
            For slider, the skin itself is colorized but the individual parts are not. */
            static private const exclusions:Array = ["track", "thumb"];
 
            override public function get colorizeExclusions():Array {
                return exclusions;
            }
 
            override protected function initializationComplete():void {
                useChromeColor = true;
                super.initializationComplete();
            }
        ]]>
    </fx:Script>
 
    <fx:Script>
        <![CDATA[
            override protected function measure():void {
                var thumbPos:Number = thumb.getLayoutBoundsX();
                thumb.setLayoutBoundsPosition(0, thumb.getLayoutBoundsY());
                super.measure();
                thumb.setLayoutBoundsPosition(thumbPos, thumb.getLayoutBoundsY());
            }
        ]]>
    </fx:Script>
 
    <fx:Declarations>
        <fx:Component id="dataTip">
            <s:DataRenderer minHeight="24" minWidth="40" y="-34">
                <s:Rect top="0" left="0" right="0" bottom="0">
                    <s:fill>
                        <s:SolidColor color="0x000000" alpha=".9"/>
                    </s:fill>
                    <s:filters>
                        <s:DropShadowFilter angle="90" color="0x999999" distance="3"/>
                    </s:filters>
                </s:Rect>
                <s:Label id="labelDisplay" text="{data}"
                         horizontalCenter="0" verticalCenter="1"
                         left="5" right="5" top="5" bottom="5"
                         textAlign="center" verticalAlign="middle"
                         fontWeight="normal" color="white" fontSize="11">
                </s:Label>
            </s:DataRenderer>
        </fx:Component>
    </fx:Declarations>
 
    <s:Button id="track"
              left="0" right="0" top="0" bottom="0"
              minWidth="33" width="100"
              skinClass="YeHSliderTrackSkin" />
 
    <s:Button id="thumb"
              top="0" bottom="0"
              width="11" height="11"
              skinClass="spark.skins.spark.HSliderThumbSkin" />
 
</s:SparkSkin>

And the custom Spark HSlider track skin class, YeHSliderTrackSkin.mxml, is as follows:

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2010/03/19/skinning-the-track-on-a-spark-hslider-control-in-flex-4/ -->
<s:SparkSkin name="YeHSliderTrackSkin"
        xmlns:fx="http://ns.adobe.com/mxml/2009"
        xmlns:s="library://ns.adobe.com/flex/spark"
        xmlns:fb="http://ns.adobe.com/flashbuilder/2009">
    <s:states>
        <s:State name="up" />
        <s:State name="down" />
        <s:State name="over" />
        <s:State name="disabled" />
    </s:states>
 
    <fx:Metadata>
        [HostComponent("spark.components.Button")]
    </fx:Metadata> 
 
    <fx:Script fb:purpose="styling">
        <![CDATA[
            override protected function initializationComplete():void {
                useChromeColor = true;
                super.initializationComplete();
            }
        ]]>
    </fx:Script>
 
    <!-- border -->
    <s:Rect left="0" right="0" top="0" bottom="0" radiusX="{hostComponent.height/2}">
        <s:fill>
            <s:LinearGradient rotation="90">
                <s:GradientEntry color="0x000000" alpha="0.55" />
                <s:GradientEntry color="0xFFFFFF" alpha="0.55" ratio="0.8" />
            </s:LinearGradient>
        </s:fill>
    </s:Rect>
 
    <!-- fill -->
    <s:Rect left="1" right="1" top="1" bottom="1" radiusX="{hostComponent.height/2}">
        <s:fill>
            <s:SolidColor color="0xCACACA" />
        </s:fill>
    </s:Rect>
 
    <!-- hit area -->
    <s:Rect left="0" right="0" top="0" bottom="0">
        <s:fill>
            <s:SolidColor alpha="0"/>
        </s:fill>
    </s:Rect>
 
</s:SparkSkin>

This entry is based on a beta version of the Flex 4 SDK and therefore is very likely to change as development of the Flex SDK continues. The API can (and will) change causing examples to possibly not compile in newer versions of the Flex 4 SDK.

 
]]> http://blog.flexexamples.com/2010/03/19/skinning-the-track-on-a-spark-hslider-control-in-flex-4/feed/ 1 Setting the line height on a Spark RichText control in Flex 4 http://blog.flexexamples.com/2010/03/18/setting-the-line-height-on-a-spark-richtext-control-in-flex-4/ http://blog.flexexamples.com/2010/03/18/setting-the-line-height-on-a-spark-richtext-control-in-flex-4/#comments Thu, 18 Mar 2010 23:47:18 +0000 Peter deHaan http://blog.flexexamples.com/?p=2605 The following example shows how you can set the line height on a Spark RichText control in Flex 4 by setting the lineHeight style.

<?xml version="1.0" encoding="utf-8"?> <!-- http://blog.flexexamples.com/2010/03/18/setting-the-line-height-on-a-spark-richtext-control-in-flex-4/ --> <s:Application name="Spark_RichText_lineHeight_test" xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" xmlns:mx="library://ns.adobe.com/flex/mx"> <s:controlBarContent> <mx:Form> <mx:FormItem label="lineHeight:"> <s:HSlider id="sl" minimum="10" maximum="24" value="14" /> </mx:FormItem> </mx:Form> </s:controlBarContent>   <s:RichText id="richTxt" lineHeight="{sl.value}" textAlign="justify" left="20" [...]]]> The following example shows how you can set the line height on a Spark RichText control in Flex 4 by setting the lineHeight style.

The following example(s) require Flash Player 10 and the Adobe Flex 4 SDK. To download the Adobe Flash Builder 4 trial, see http://www.adobe.com/products/flex/. To download the latest nightly build of the Flex 4 SDK, see http://opensource.adobe.com/wiki/display/flexsdk/Download+Flex+4.
For more information on getting started with Flex 4 and Flash Builder 4, see the official Adobe Flex Team blog.

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2010/03/18/setting-the-line-height-on-a-spark-richtext-control-in-flex-4/ -->
<s:Application name="Spark_RichText_lineHeight_test"
        xmlns:fx="http://ns.adobe.com/mxml/2009"
        xmlns:s="library://ns.adobe.com/flex/spark"
        xmlns:mx="library://ns.adobe.com/flex/mx">
    <s:controlBarContent>
        <mx:Form>
            <mx:FormItem label="lineHeight:">
                <s:HSlider id="sl" minimum="10" maximum="24" value="14" />
            </mx:FormItem>
        </mx:Form>
    </s:controlBarContent>
 
    <s:RichText id="richTxt"
            lineHeight="{sl.value}"
            textAlign="justify"
            left="20" right="20"
            top="20">
        <s:text><fx:String source="lorem.txt" /></s:text>
    </s:RichText>
 
</s:Application>

You can also set the lineHeight style in an external .CSS file or <Style> block, as seen in the following example:

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2010/03/18/setting-the-line-height-on-a-spark-richtext-control-in-flex-4/ -->
<s:Application name="Spark_RichText_lineHeight_test"
        xmlns:fx="http://ns.adobe.com/mxml/2009"
        xmlns:s="library://ns.adobe.com/flex/spark"
        xmlns:mx="library://ns.adobe.com/flex/mx">
 
    <fx:Style>
        @namespace s "library://ns.adobe.com/flex/spark";
        @namespace mx "library://ns.adobe.com/flex/mx";
 
        s|RichText {
            lineHeight: 24;
        }
    </fx:Style>
 
    <s:RichText id="richTxt"
            textAlign="justify"
            left="20" right="20"
            top="20">
        <s:text><fx:String source="lorem.txt" /></s:text>
    </s:RichText>
 
</s:Application>

Or you can set the lineHeight style using ActionScript, as seen in the following example:

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2010/03/18/setting-the-line-height-on-a-spark-richtext-control-in-flex-4/ -->
<s:Application name="Spark_RichText_lineHeight_test"
        xmlns:fx="http://ns.adobe.com/mxml/2009"
        xmlns:s="library://ns.adobe.com/flex/spark"
        xmlns:mx="library://ns.adobe.com/flex/mx">
    <s:controlBarContent>
        <mx:Form>
            <mx:FormItem label="lineHeight:">
                <s:HSlider id="sl"
                        minimum="10" maximum="24"
                        value="14"
                        change="sl_changeHandler(event);" />
            </mx:FormItem>
        </mx:Form>
    </s:controlBarContent>
 
    <fx:Script>
        <![CDATA[
            protected function sl_changeHandler(evt:Event):void {
                richTxt.setStyle("lineHeight", sl.value);
            }
        ]]>
    </fx:Script>
 
    <s:RichText id="richTxt"
            textAlign="justify"
            left="20" right="20"
            top="20">
        <s:text><fx:String source="lorem.txt" /></s:text>
    </s:RichText>
 
</s:Application>

You can also set the lineHeight style to a percentage value, as seen in the following snippets.
MXML:

<s:RichText id="richTxt"
        lineHeight="200%">
    <s:text><fx:String source="lorem.txt" /></s:text>
</s:RichText>

CSS:

<fx:Style>
    @namespace s "library://ns.adobe.com/flex/spark";
 
    s|RichText {
        lineHeight: "200%";
    }
</fx:Style>

ActionScript:

<fx:Script>
    <![CDATA[
        protected function hslider1_changeHandler(evt:Event):void {
            richTxt.setStyle("lineHeight", "200%");
        }
    ]]>
</fx:Script>

This entry is based on a beta version of the Flex 4 SDK and therefore is very likely to change as development of the Flex SDK continues. The API can (and will) change causing examples to possibly not compile in newer versions of the Flex 4 SDK.

 
]]> http://blog.flexexamples.com/2010/03/18/setting-the-line-height-on-a-spark-richtext-control-in-flex-4/feed/ 0 Creating a justified multiline Spark Button control in Flex 4 http://blog.flexexamples.com/2010/03/09/creating-a-justified-multiline-spark-button-control-in-flex-4/ http://blog.flexexamples.com/2010/03/09/creating-a-justified-multiline-spark-button-control-in-flex-4/#comments Wed, 10 Mar 2010 01:07:48 +0000 Peter deHaan http://blog.flexexamples.com/?p=2586 The following example shows how you can create a multiline, justified label on Spark Button control in Flex 4 by creating a custom skin and setting the textAlign style and removing the maxDisplayedLines property.

<?xml version="1.0" encoding="utf-8"?> <!-- http://blog.flexexamples.com/2010/03/09/creating-a-justified-multiline-spark-button-control-in-flex-4/ --> <s:Application name="Spark_Button_skinClass_textAlign_test" xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" xmlns:mx="library://ns.adobe.com/flex/mx">   <s:Button id="btn" label="Lorem ipsum dolor sit amet, consectetur [...]]]> The following example shows how you can create a multiline, justified label on Spark Button control in Flex 4 by creating a custom skin and setting the textAlign style and removing the maxDisplayedLines property.

The following example(s) require Flash Player 10 and the Adobe Flex 4 SDK. To download the Adobe Flash Builder 4 trial, see http://www.adobe.com/products/flex/. To download the latest nightly build of the Flex 4 SDK, see http://opensource.adobe.com/wiki/display/flexsdk/Download+Flex+4.
For more information on getting started with Flex 4 and Flash Builder 4, see the official Adobe Flex Team blog.

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2010/03/09/creating-a-justified-multiline-spark-button-control-in-flex-4/ -->
<s:Application name="Spark_Button_skinClass_textAlign_test"
        xmlns:fx="http://ns.adobe.com/mxml/2009"
        xmlns:s="library://ns.adobe.com/flex/spark"
        xmlns:mx="library://ns.adobe.com/flex/mx">
 
    <s:Button id="btn"
            label="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent sed nisi libero, id semper leo. Vivamus tempus massa nec sapien vehicula pharetra. Nullam ipsum tellus, tempus placerat euismod ut, pharetra eu velit. Suspendisse iaculis placerat metus, a facilisis libero ultricies id. Pellentesque eget lorem a diam tempus fringilla vitae fermentum purus.{'\n'}Vivamus condimentum euismod est, sit amet fermentum justo pretium quis. Donec pretium commodo augue varius imperdiet. Morbi facilisis mollis est, id cursus turpis sagittis a. Fusce nec dolor quis mi interdum congue a sit amet elit. Quisque auctor ornare imperdiet. Suspendisse velit purus, tincidunt at pellentesque vitae, malesuada sit amet ligula. Integer varius justo sit amet augue accumsan non tempor purus gravida."
            skinClass="skins.WrapButtonSkin"
            width="400"
            horizontalCenter="0" verticalCenter="0" />
 
</s:Application>

View source is enabled in the following example.

And the custom Spark Button skin, skins/WrapButtonSkin.mxml, is as follows:

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2010/03/09/creating-a-justified-multiline-spark-button-control-in-flex-4/ -->
<s:SparkSkin name="WrapButtonSkin"
        xmlns:fx="http://ns.adobe.com/mxml/2009"
        xmlns:s="library://ns.adobe.com/flex/spark"
        xmlns:fb="http://ns.adobe.com/flashbuilder/2009"
        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:states>
 
    <!-- host component -->
    <fx:Metadata>
        [HostComponent("spark.components.Button")]
    </fx:Metadata>
 
    <fx:Script fb:purpose="styling">
        <![CDATA[
            /* Define the skin elements that should not be colorized.
            For button, the graphics are colorized but the label is not. */
            static private const exclusions:Array = ["labelDisplay"];
 
            override public function get colorizeExclusions():Array {
                return exclusions;
            }
 
 
            override protected function initializationComplete():void {
                useChromeColor = true;
                super.initializationComplete();
            }
 
            override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number) : void {
                var cr:Number = getStyle("cornerRadius");
 
                if (cornerRadius != cr) {
                    cornerRadius = cr;
                    shadow.radiusX = cornerRadius;
                    fill.radiusX = cornerRadius;
                    lowlight.radiusX = cornerRadius;
                    highlight.radiusX = cornerRadius;
                    border.radiusX = cornerRadius;
                }
 
                if (highlightStroke) {
                    highlightStroke.radiusX = cornerRadius;
                }
                if (hldownstroke1) {
                    hldownstroke1.radiusX = cornerRadius;
                }
                if (hldownstroke2) {
                    hldownstroke2.radiusX = cornerRadius;
                }
 
                super.updateDisplayList(unscaledWidth, unscaledHeight);
            }
 
            private var cornerRadius:Number = 2;
        ]]>
    </fx:Script>
 
    <!-- layer 1: shadow -->
    <s:Rect id="shadow" left="-1" right="-1" top="-1" bottom="-1" radiusX="2">
        <s:fill>
            <s:LinearGradient rotation="90">
                <s:GradientEntry color="0x000000" color.down="0xFFFFFF" alpha="0.01" alpha.down="0" />
                <s:GradientEntry color="0x000000" color.down="0xFFFFFF" alpha="0.07" alpha.down="0.5" />
            </s:LinearGradient>
        </s:fill>
    </s:Rect>
 
    <!-- layer 2: fill -->
    <s:Rect id="fill" left="1" right="1" top="1" bottom="1" radiusX="2">
        <s:fill>
            <s:LinearGradient rotation="90">
                <s:GradientEntry color="0xFFFFFF" color.over="0xBBBDBD" color.down="0xAAAAAA" alpha="0.85" />
                <s:GradientEntry color="0xD8D8D8" color.over="0x9FA0A1" color.down="0x929496" alpha="0.85" />
            </s:LinearGradient>
        </s:fill>
    </s:Rect>
 
    <!-- layer 3: fill lowlight -->
    <s:Rect id="lowlight" left="1" right="1" top="1" bottom="1" radiusX="2">
        <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 4: fill highlight -->
    <s:Rect id="highlight" left="1" right="1" top="1" bottom="1" radiusX="2">
        <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 5: highlight stroke (all states except down) -->
    <s:Rect id="highlightStroke" left="1" right="1" top="1" bottom="1" radiusX="2" excludeFrom="down">
        <s:stroke>
            <s:LinearGradientStroke rotation="90" weight="1">
                <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 id="hldownstroke1" left="1" right="1" top="1" bottom="1" radiusX="2" includeIn="down">
        <s:stroke>
            <s:LinearGradientStroke rotation="90" weight="1">
                <s:GradientEntry color="0x000000" alpha="0.25" ratio="0.0" />
                <s:GradientEntry color="0x000000" alpha="0.25" ratio="0.001" />
                <s:GradientEntry color="0x000000" alpha="0.07" ratio="0.0011" />
                <s:GradientEntry color="0x000000" alpha="0.07" ratio="0.965" />
                <s:GradientEntry color="0x000000" alpha="0.00" ratio="0.9651" />
            </s:LinearGradientStroke>
        </s:stroke>
    </s:Rect>
 
    <s:Rect id="hldownstroke2" left="2" right="2" top="2" bottom="2" radiusX="2" includeIn="down">
        <s:stroke>
            <s:LinearGradientStroke rotation="90" weight="1">
                <s:GradientEntry color="0x000000" alpha="0.09" ratio="0.0" />
                <s:GradientEntry color="0x000000" alpha="0.00" ratio="0.0001" />
            </s:LinearGradientStroke>
        </s:stroke>
    </s:Rect>
 
    <!-- layer 7: border - put on top of the fill so it doesn't disappear when scale is less than 1 -->
    <s:Rect id="border" left="0" right="0" top="0" bottom="0" width="69" height="20" radiusX="2">
        <s:stroke>
            <s:LinearGradientStroke rotation="90" weight="1">
                <s:GradientEntry color="0x000000" alpha="0.5625" alpha.down="0.6375" />
                <s:GradientEntry color="0x000000" alpha="0.75" alpha.down="0.85" />
            </s:LinearGradientStroke>
        </s:stroke>
    </s:Rect>
 
    <!-- layer 8: text -->
    <s:Label id="labelDisplay"
            textAlign="justify"
            verticalAlign="middle"
            horizontalCenter="0" verticalCenter="1"
            left="10" right="10" top="10" bottom="10" />
 
</s:SparkSkin>

This entry is based on a beta version of the Flex 4 SDK and therefore is very likely to change as development of the Flex SDK continues. The API can (and will) change causing examples to possibly not compile in newer versions of the Flex 4 SDK.

 
]]> http://blog.flexexamples.com/2010/03/09/creating-a-justified-multiline-spark-button-control-in-flex-4/feed/ 4 Creating a drop down DataGrid control in Flex 4 http://blog.flexexamples.com/2010/03/09/creating-a-drop-down-datagrid-control-in-flex-4/ http://blog.flexexamples.com/2010/03/09/creating-a-drop-down-datagrid-control-in-flex-4/#comments Tue, 09 Mar 2010 18:36:43 +0000 Peter deHaan http://blog.flexexamples.com/?p=2582 The following example shows how you can create a drop down MX DataGrid control in Flex 4 using the Spark PopUpAnchor control in Flex 4.

<?xml version="1.0" encoding="utf-8"?> <!-- http://blog.flexexamples.com/2010/03/09/creating-a-drop-down-datagrid-control-in-flex-4/ --> <s:Application name="Spark_PopUpAnchor_DataGrid_test" xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" xmlns:mx="library://ns.adobe.com/flex/mx"> <s:layout> <s:VerticalLayout horizontalAlign="center" paddingTop="20" /> </s:layout>   <s:Group> <s:Button label="Pop up DataGrid" click="popUpAnc.displayPopUp = !popUpAnc.displayPopUp;" /> <s:PopUpAnchor id="popUpAnc" [...]]]> The following example shows how you can create a drop down MX DataGrid control in Flex 4 using the Spark PopUpAnchor control in Flex 4.

The following example(s) require Flash Player 10 and the Adobe Flex 4 SDK. To download the Adobe Flash Builder 4 trial, see http://www.adobe.com/products/flex/. To download the latest nightly build of the Flex 4 SDK, see http://opensource.adobe.com/wiki/display/flexsdk/Download+Flex+4.
For more information on getting started with Flex 4 and Flash Builder 4, see the official Adobe Flex Team blog.

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2010/03/09/creating-a-drop-down-datagrid-control-in-flex-4/ -->
<s:Application name="Spark_PopUpAnchor_DataGrid_test"
        xmlns:fx="http://ns.adobe.com/mxml/2009"
        xmlns:s="library://ns.adobe.com/flex/spark"
        xmlns:mx="library://ns.adobe.com/flex/mx">
    <s:layout>
        <s:VerticalLayout horizontalAlign="center" paddingTop="20" />
    </s:layout>
 
    <s:Group>
        <s:Button label="Pop up DataGrid"
                click="popUpAnc.displayPopUp = !popUpAnc.displayPopUp;" />
        <s:PopUpAnchor id="popUpAnc"
                popUpPosition="below"
                width="100%" height="100%">
            <mx:DataGrid>
                <mx:dataProvider>
                    <s:ArrayList>
                        <fx:Object c1="Row 1, Column 1" c2="Row 1, Column 2" />
                        <fx:Object c1="Row 2, Column 1" c2="Row 2, Column 2" /> 
                        <fx:Object c1="Row 3, Column 1" c2="Row 3, Column 2" /> 
                        <fx:Object c1="Row 4, Column 1" c2="Row 4, Column 2" /> 
                        <fx:Object c1="Row 5, Column 1" c2="Row 5, Column 2" /> 
                        <fx:Object c1="Row 6, Column 1" c2="Row 6, Column 2" /> 
                        <fx:Object c1="Row 7, Column 1" c2="Row 7, Column 2" /> 
                        <fx:Object c1="Row 8, Column 1" c2="Row 8, Column 2" /> 
                        <fx:Object c1="Row 9, Column 1" c2="Row 9, Column 2" /> 
                    </s:ArrayList>
                </mx:dataProvider>
            </mx:DataGrid>
        </s:PopUpAnchor>
    </s:Group>
 
</s:Application>

View source is enabled in the following example.

This entry is based on a beta version of the Flex 4 SDK and therefore is very likely to change as development of the Flex SDK continues. The API can (and will) change causing examples to possibly not compile in newer versions of the Flex 4 SDK.

 
]]> http://blog.flexexamples.com/2010/03/09/creating-a-drop-down-datagrid-control-in-flex-4/feed/ 9 Setting the slide duration on a Spark HScrollBar control in Flex 4 http://blog.flexexamples.com/2010/02/28/setting-the-slide-duration-on-a-spark-hscrollbar-control-in-flex-4/ http://blog.flexexamples.com/2010/02/28/setting-the-slide-duration-on-a-spark-hscrollbar-control-in-flex-4/#comments Mon, 01 Mar 2010 06:33:37 +0000 Peter deHaan http://blog.flexexamples.com/?p=2545 In a previous example, “Setting the slide duration on a Spark HSlider control in Flex 4″, we saw how you could set the slide duration on a Spark HSlider control in Flex 4 by setting the slideDuration style.

The following example shows how you can set the slide duration on a Spark HScrollBar control [...]]]> In a previous example, “Setting the slide duration on a Spark HSlider control in Flex 4″, we saw how you could set the slide duration on a Spark HSlider control in Flex 4 by setting the slideDuration style.

The following example shows how you can set the slide duration on a Spark HScrollBar control in Flex 4 by setting the slideDuration style to control the animated thumb scroll when Ctrl+clicking on the scroll bar track.

The following example(s) require Flash Player 10 and the Adobe Flex 4 SDK. To download the Adobe Flash Builder 4 trial, see http://www.adobe.com/products/flex/. To download the latest nightly build of the Flex 4 SDK, see http://opensource.adobe.com/wiki/display/flexsdk/Download+Flex+4.
For more information on getting started with Flex 4 and Flash Builder 4, see the official Adobe Flex Team blog.

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2010/02/28/setting-the-slide-duration-on-a-spark-hscrollbar-control-in-flex-4/ -->
<s:Application name="Spark_HScrollBar_slideDuration_test"
        xmlns:fx="http://ns.adobe.com/mxml/2009"
        xmlns:s="library://ns.adobe.com/flex/spark"
        xmlns:mx="library://ns.adobe.com/flex/mx"
        initialize="init();">
 
    <fx:Style>
        @namespace s "library://ns.adobe.com/flex/spark";
        @namespace mx "library://ns.adobe.com/flex/mx";
 
        s|ScrollBarBase {
            slideDuration: 8000; /* ms */
        }
    </fx:Style>
 
    <fx:Script>
        <![CDATA[
            import mx.collections.ArrayList;
 
            [Bindable]
            private var dp:ArrayList;
 
            private function init():void {
                var arr:Array = new Array();
                var idx:uint = 0;
                const LEN:uint = 1000;
 
                for (idx = 0; idx < LEN; idx++) {
                    arr.push({label:"item " + idx.toString()});
                }
                dp = new ArrayList(arr);
            }
        ]]>
    </fx:Script>
 
    <s:List id="lst"
            dataProvider="{dp}"
            horizontalCenter="0" verticalCenter="0">
        <s:layout>
            <s:VerticalLayout requestedRowCount="10" horizontalAlign="contentJustify" gap="0" />
        </s:layout>
    </s:List>
 
</s:Application>

View source is enabled in the following example.

You can also set the slideDuration style on a VScrollBar instance (in this case via the List control’s slider skin part) using ActionScript, as seen in the following example:

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2010/02/28/setting-the-slide-duration-on-a-spark-hscrollbar-control-in-flex-4/ -->
<s:Application name="Spark_HScrollBar_slideDuration_test"
        xmlns:fx="http://ns.adobe.com/mxml/2009"
        xmlns:s="library://ns.adobe.com/flex/spark"
        xmlns:mx="library://ns.adobe.com/flex/mx"
        initialize="init();">
 
    <fx:Script>
        <![CDATA[
            import mx.collections.ArrayList;
            import mx.events.FlexEvent;
 
            [Bindable]
            private var dp:ArrayList;
 
            private function init():void {
                var arr:Array = new Array();
                var idx:uint = 0;
                const LEN:uint = 1000;
 
                for (idx = 0; idx < LEN; idx++) {
                    arr.push({label:"item " + idx.toString()});
                }
                dp = new ArrayList(arr);
            }
 
            protected function lst_creationCompleteHandler(evt:FlexEvent):void {
                lst.scroller.verticalScrollBar.setStyle("slideDuration", 8000 /* ms */);
            }
        ]]>
    </fx:Script>
 
    <s:List id="lst"
            dataProvider="{dp}"
            horizontalCenter="0" verticalCenter="0"
            creationComplete="lst_creationCompleteHandler(event);">
        <s:layout>
            <s:VerticalLayout requestedRowCount="10" horizontalAlign="contentJustify" gap="0" />
        </s:layout>
    </s:List>
 
</s:Application>

Or you can globally set the slideDuration style via the StyleManager in ActionScript, as seen in the following example:

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2010/02/28/setting-the-slide-duration-on-a-spark-hscrollbar-control-in-flex-4/ -->
<s:Application name="Spark_HScrollBar_slideDuration_test"
        xmlns:fx="http://ns.adobe.com/mxml/2009"
        xmlns:s="library://ns.adobe.com/flex/spark"
        xmlns:mx="library://ns.adobe.com/flex/mx"
        creationComplete="init();">
 
    <fx:Script>
        <![CDATA[
            import mx.collections.ArrayList;
            import mx.events.FlexEvent;
 
            [Bindable]
            private var dp:ArrayList;
 
            private function init():void {
                var arr:Array = new Array();
                var idx:uint = 0;
                const LEN:uint = 1000;
 
                for (idx = 0; idx < LEN; idx++) {
                    arr.push({label:"item " + idx.toString()});
                }
                dp = new ArrayList(arr);
 
                var sbbCSS:CSSStyleDeclaration = styleManager.getStyleDeclaration("spark.components.supportClasses.ScrollBarBase");
                if (!sbbCSS) {
                    sbbCSS = new CSSStyleDeclaration("spark.components.supportClasses.ScrollBarBase");
                }
                sbbCSS.setStyle("slideDuration", 8000 /* ms */);
            }
        ]]>
    </fx:Script>
 
    <s:List id="lst"
            dataProvider="{dp}"
            horizontalCenter="0" verticalCenter="0">
        <s:layout>
            <s:VerticalLayout requestedRowCount="10" horizontalAlign="contentJustify" gap="0" />
        </s:layout>
    </s:List>
 
</s:Application>

This entry is based on a beta version of the Flex 4 SDK and therefore is very likely to change as development of the Flex SDK continues. The API can (and will) change causing examples to possibly not compile in newer versions of the Flex 4 SDK.

 
]]> http://blog.flexexamples.com/2010/02/28/setting-the-slide-duration-on-a-spark-hscrollbar-control-in-flex-4/feed/ 6 Preventing the selected item highlighting in the Spark List control in Flex 4 http://blog.flexexamples.com/2010/02/25/preventing-the-selected-item-highlighting-in-the-spark-list-control-in-flex-4/ http://blog.flexexamples.com/2010/02/25/preventing-the-selected-item-highlighting-in-the-spark-list-control-in-flex-4/#comments Thu, 25 Feb 2010 19:50:03 +0000 Peter deHaan http://blog.flexexamples.com/?p=2526 In a previous example, “Preventing item selection in the Spark List control in Flex 4″, we saw how you can prevent item selection in the Spark List control in Flex 4 by listening for the changing event and calling the preventDefault() method on the IndexChangeEvent event object instance.

The following example shows how you [...]]]> In a previous example, “Preventing item selection in the Spark List control in Flex 4″, we saw how you can prevent item selection in the Spark List control in Flex 4 by listening for the changing event and calling the preventDefault() method on the IndexChangeEvent event object instance.

The following example shows how you can keep List item selection but prevent the selected item highlighting (while maintaining the hover highlight) in the Spark List control in Flex 4 by creating a custom item renderer, setting the autoDrawBackground property to false, and drawing your own highlight in the hover state only.

The following example(s) require Flash Player 10 and the Adobe Flex 4 SDK. To download the Adobe Flash Builder 4 trial, see http://www.adobe.com/products/flex/. To download the latest nightly build of the Flex 4 SDK, see http://opensource.adobe.com/wiki/display/flexsdk/Download+Flex+4.
For more information on getting started with Flex 4 and Flash Builder 4, see the official Adobe Flex Team blog.

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2010/02/25/preventing-the-selected-item-highlighting-in-the-spark-list-control-in-flex-4/ -->
<s:Application name="Spark_List_itemRenderer_nonSelectable_test"
        xmlns:fx="http://ns.adobe.com/mxml/2009" 
        xmlns:s="library://ns.adobe.com/flex/spark" 
        xmlns:mx="library://ns.adobe.com/flex/mx">
    <s:controlBarContent>
        <mx:Form>
            <mx:FormItem label="selectedIndex:">
                <s:Label text="{lst.selectedIndex}" />
            </mx:FormItem>
        </mx:Form>
    </s:controlBarContent>
 
    <s:List id="lst"
            itemRenderer="skins.NonSelectableItemRenderer"
            horizontalCenter="0" verticalCenter="0">
        <s:layout>
            <s:VerticalLayout horizontalAlign="justify"
                              gap="0"
                              requestedRowCount="5" />
        </s:layout>
        <s:dataProvider>
            <s:ArrayList source="[The,Quick,Brown,Fox,Jumps,Over,The,Lazy,Dog]" />
        </s:dataProvider>
    </s:List>
 
</s:Application>

And the custom Spark List item renderer, skins/NonSelectableItemRenderer.mxml, is as follows:

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2010/02/25/preventing-the-selected-item-highlighting-in-the-spark-list-control-in-flex-4/ -->
<s:ItemRenderer name="NonSelectableItemRenderer"
        xmlns:fx="http://ns.adobe.com/mxml/2009"
        xmlns:s="library://ns.adobe.com/flex/spark"
        xmlns:mx="library://ns.adobe.com/flex/mx"
        autoDrawBackground="false">
 
    <s:states>
        <s:State name="normal" />
        <s:State name="hovered" />
    </s:states>
 
    <s:Rect width="100%" height="100%" includeIn="hovered">
        <s:fill>
            <s:SolidColor color="haloBlue" />
        </s:fill>
    </s:Rect>
 
    <s:Label text="{data}" left="5" right="5" top="5" bottom="5" />
 
</s:ItemRenderer>

View source is enabled in the following example.

This entry is based on a beta version of the Flex 4 SDK and therefore is very likely to change as development of the Flex SDK continues. The API can (and will) change causing examples to possibly not compile in newer versions of the Flex 4 SDK.

 
]]> http://blog.flexexamples.com/2010/02/25/preventing-the-selected-item-highlighting-in-the-spark-list-control-in-flex-4/feed/ 10 Preventing item selection in the Spark List control in Flex 4 http://blog.flexexamples.com/2010/02/25/preventing-item-selection-in-the-spark-list-control-in-flex-4/ http://blog.flexexamples.com/2010/02/25/preventing-item-selection-in-the-spark-list-control-in-flex-4/#comments Thu, 25 Feb 2010 19:28:14 +0000 Peter deHaan http://blog.flexexamples.com/?p=2523 The following example shows how you can prevent item selection in the Spark List control in Flex 4 by listening for the changing event and calling the preventDefault() method on the IndexChangeEvent event object instance.

<?xml version="1.0" encoding="utf-8"?> <!-- http://blog.flexexamples.com/2010/02/25/preventing-item-selection-in-the-spark-list-control-in-flex-4/ --> <s:Application name="Spark_List_changing_test" xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" xmlns:mx="library://ns.adobe.com/flex/mx">   <fx:Script> <![CDATA[ import spark.events.IndexChangeEvent;   protected function [...]]]> The following example shows how you can prevent item selection in the Spark List control in Flex 4 by listening for the changing event and calling the preventDefault() method on the IndexChangeEvent event object instance.

The following example(s) require Flash Player 10 and the Adobe Flex 4 SDK. To download the Adobe Flash Builder 4 trial, see http://www.adobe.com/products/flex/. To download the latest nightly build of the Flex 4 SDK, see http://opensource.adobe.com/wiki/display/flexsdk/Download+Flex+4.
For more information on getting started with Flex 4 and Flash Builder 4, see the official Adobe Flex Team blog.

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2010/02/25/preventing-item-selection-in-the-spark-list-control-in-flex-4/ -->
<s:Application name="Spark_List_changing_test"
        xmlns:fx="http://ns.adobe.com/mxml/2009" 
        xmlns:s="library://ns.adobe.com/flex/spark" 
        xmlns:mx="library://ns.adobe.com/flex/mx">
 
    <fx:Script>
        <![CDATA[
            import spark.events.IndexChangeEvent;
 
            protected function lst_changingHandler(evt:IndexChangeEvent):void {
                evt.preventDefault();
            }
        ]]>
    </fx:Script>
 
    <s:controlBarContent>
        <mx:Form>
            <mx:FormItem label="selectedIndex:">
                <s:Label text="{lst.selectedIndex}" />
            </mx:FormItem>
        </mx:Form>
    </s:controlBarContent>
 
    <s:List id="lst"
            changing="lst_changingHandler(event);"
            horizontalCenter="0" verticalCenter="0">
        <s:layout>
            <s:VerticalLayout horizontalAlign="justify"
                              gap="0"
                              requestedRowCount="5" />
        </s:layout>
        <s:dataProvider>
            <s:ArrayList source="[The,Quick,Brown,Fox,Jumps,Over,The,Lazy,Dog]" />
        </s:dataProvider>
    </s:List>
 
</s:Application>

View source is enabled in the following example.

This entry is based on a beta version of the Flex 4 SDK and therefore is very likely to change as development of the Flex SDK continues. The API can (and will) change causing examples to possibly not compile in newer versions of the Flex 4 SDK.

 
]]> http://blog.flexexamples.com/2010/02/25/preventing-item-selection-in-the-spark-list-control-in-flex-4/feed/ 7 Using embedded fonts with the MX AdvancedDataGrid control in Flex 4 http://blog.flexexamples.com/2010/02/24/using-embedded-fonts-with-the-mx-advanceddatagrid-control-in-flex-4/ http://blog.flexexamples.com/2010/02/24/using-embedded-fonts-with-the-mx-advanceddatagrid-control-in-flex-4/#comments Wed, 24 Feb 2010 09:10:21 +0000 Peter deHaan http://blog.flexexamples.com/?p=2519 The following example shows how you can use an embedded font with the MX AdvancedDataGrid control in Flex 4 by setting the embedAsCFF and fontFamily styles.

<?xml version="1.0" encoding="utf-8"?> <!-- http://blog.flexexamples.com/2010/02/24/using-embedded-fonts-with-the-mx-advanceddatagrid-control-in-flex-4/ --> <s:Application name="MX_AdvancedDataGrid_fontFamily_test" xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" xmlns:mx="library://ns.adobe.com/flex/mx">   <fx:Style> @namespace s "library://ns.adobe.com/flex/spark"; @namespace mx "library://ns.adobe.com/flex/mx";   @font-face { src: url("C:/Windows/Fonts/comic.ttf"); fontFamily: myEmbeddedFont; fontWeight: normal; [...]]]> The following example shows how you can use an embedded font with the MX AdvancedDataGrid control in Flex 4 by setting the embedAsCFF and fontFamily styles.

The following example(s) require Flash Player 10 and the Adobe Flex 4 SDK. To download the Adobe Flash Builder 4 trial, see http://www.adobe.com/products/flex/. To download the latest nightly build of the Flex 4 SDK, see http://opensource.adobe.com/wiki/display/flexsdk/Download+Flex+4.
For more information on getting started with Flex 4 and Flash Builder 4, see the official Adobe Flex Team blog.

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2010/02/24/using-embedded-fonts-with-the-mx-advanceddatagrid-control-in-flex-4/ -->
<s:Application name="MX_AdvancedDataGrid_fontFamily_test"
        xmlns:fx="http://ns.adobe.com/mxml/2009"
        xmlns:s="library://ns.adobe.com/flex/spark"
        xmlns:mx="library://ns.adobe.com/flex/mx">
 
    <fx:Style>
        @namespace s "library://ns.adobe.com/flex/spark";
        @namespace mx "library://ns.adobe.com/flex/mx";
 
        @font-face {
            src: url("C:/Windows/Fonts/comic.ttf");
            fontFamily: myEmbeddedFont;
            fontWeight: normal;
            embedAsCFF: false;
        }
 
        mx|AdvancedDataGrid {
            fontFamily: myEmbeddedFont;
        }
    </fx:Style>
 
    <mx:AdvancedDataGrid id="adg"
            horizontalCenter="0" verticalCenter="0">
        <mx:columns>
            <mx:AdvancedDataGridColumn dataField="@label" />
            <mx:AdvancedDataGridColumn dataField="@data" />
        </mx:columns>
        <mx:dataProvider>
            <s:XMLListCollection id="dp">
                <s:source>
                    <fx:XMLList>
                        <product label="Product 1" data="3" />
                        <product label="Product 2" data="1" />
                        <product label="Product 3" data="4" />
                        <product label="Product 4" data="1" />
                        <product label="Product 5" data="5" />
                        <product label="Product 6" data="9" />
                    </fx:XMLList>
                </s:source>
            </s:XMLListCollection>
        </mx:dataProvider>
    </mx:AdvancedDataGrid>
 
</s:Application>

View source is enabled in the following example.

If you want to use a CFF/DefineFont4 font, you can set the embedAsCFF style to true and enable Flash Text Engine in MX components by selecting Project > Properties from the main menu and then selecting the “Use Flash Text Engine in MX components” option in the Flex Compiler category.

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2010/02/24/using-embedded-fonts-with-the-mx-advanceddatagrid-control-in-flex-4/ -->
<s:Application name="MX_AdvancedDataGrid_fontFamily_test"
        xmlns:fx="http://ns.adobe.com/mxml/2009"
        xmlns:s="library://ns.adobe.com/flex/spark"
        xmlns:mx="library://ns.adobe.com/flex/mx">
 
    <fx:Style>
        @namespace s "library://ns.adobe.com/flex/spark";
        @namespace mx "library://ns.adobe.com/flex/mx";
 
        @font-face {
            src: url("C:/Windows/Fonts/comic.ttf");
            fontFamily: myEmbeddedFont;
            fontWeight: normal;
            embedAsCFF: true;
        }
 
        mx|AdvancedDataGrid {
            fontFamily: myEmbeddedFont;
        }
    </fx:Style>
 
    <mx:AdvancedDataGrid id="adg"
            horizontalCenter="0" verticalCenter="0">
        <mx:columns>
            <mx:AdvancedDataGridColumn dataField="@label" />
            <mx:AdvancedDataGridColumn dataField="@data" />
        </mx:columns>
        <mx:dataProvider>
            <s:XMLListCollection id="dp">
                <s:source>
                    <fx:XMLList>
                        <product label="Product 1" data="3" />
                        <product label="Product 2" data="1" />
                        <product label="Product 3" data="4" />
                        <product label="Product 4" data="1" />
                        <product label="Product 5" data="5" />
                        <product label="Product 6" data="9" />
                    </fx:XMLList>
                </s:source>
            </s:XMLListCollection>
        </mx:dataProvider>
    </mx:AdvancedDataGrid>
 
</s:Application>

This entry is based on a beta version of the Flex 4 SDK and therefore is very likely to change as development of the Flex SDK continues. The API can (and will) change causing examples to possibly not compile in newer versions of the Flex 4 SDK.

 
]]> http://blog.flexexamples.com/2010/02/24/using-embedded-fonts-with-the-mx-advanceddatagrid-control-in-flex-4/feed/ 5