Flex Examples » Label http://blog.flexexamples.com Just a bunch of Adobe Flex Examples Wed, 26 Jan 2011 18:09:51 +0000 en hourly 1 Using a CFF embedded font with an MX Label control in Flex 4 http://blog.flexexamples.com/2009/06/14/using-a-cff-embedded-font-with-a-halo-label-control-in-flex-4/ http://blog.flexexamples.com/2009/06/14/using-a-cff-embedded-font-with-a-halo-label-control-in-flex-4/#comments Mon, 15 Jun 2009 02:42:35 +0000 Peter deHaan http://blog.flexexamples.com/2009/06/14/using-a-cff-embedded-font-with-a-halo-label-control-in-flex-4/ The following example shows how you can use a CFF embedded font with a Halo Label control and Spark Label control by setting the textFieldClass style on the MX Label control to the mx.core.UIFTETextField class.

<?xml version="1.0" encoding="utf-8"?> <!-- http://blog.flexexamples.com/2009/06/14/using-a-cff-embedded-font-with-a-halo-label-control-in-flex-4/ --> <s:Application name="MX_Label_textFieldClass_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 mx "library://ns.adobe.com/flex/mx"; @namespace s "library://ns.adobe.com/flex/spark"; [...]]]> The following example shows how you can use a CFF embedded font with a Halo Label control and Spark Label control by setting the textFieldClass style on the MX Label control to the mx.core.UIFTETextField class.

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/2009/06/14/using-a-cff-embedded-font-with-a-halo-label-control-in-flex-4/ -->
<s:Application name="MX_Label_textFieldClass_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 mx "library://ns.adobe.com/flex/mx";
        @namespace s "library://ns.adobe.com/flex/spark";
 
        @font-face {
            src: url("fonts/base02.ttf");
            fontFamily: Base02Embedded;
            embedAsCFF: true;
        }
 
        mx|Label,
        s|Label {
            fontFamily: Base02Embedded;
            fontSize: 16;
        }
    </fx:Style>
 
    <s:VGroup horizontalCenter="0" verticalCenter="0">
        <mx:Label id="hLbl"
                text="The quick brown fox jumps over the lazy dog. [mx|Label]"
                textFieldClass="mx.core.UIFTETextField"
                width="100%" />
        <s:Label id="sLbl"
                text="The quick brown fox jumps over the lazy dog. [s|Label]"
                width="100%" />
    </s:VGroup>
 
</s:Application>

View source is enabled in the following example.

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

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2009/06/14/using-a-cff-embedded-font-with-a-halo-label-control-in-flex-4/ -->
<s:Application name="MX_Label_textFieldClass_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 mx "library://ns.adobe.com/flex/mx";
        @namespace s "library://ns.adobe.com/flex/spark";
 
        @font-face {
            src: url("fonts/base02.ttf");
            fontFamily: Base02Embedded;
            embedAsCFF: true;
        }
 
        mx|Label {
            fontFamily: Base02Embedded;
            fontSize: 16;
            textFieldClass: ClassReference("mx.core.UIFTETextField");
        }
 
        s|Label {
            fontFamily: Base02Embedded;
            fontSize: 16;
        }
    </fx:Style>
 
    <s:VGroup horizontalCenter="0" verticalCenter="0">
        <mx:Label id="hLbl"
                text="The quick brown fox jumps over the lazy dog. [mx|Label]"
                width="100%" />
        <s:Label id="sLbl"
                text="The quick brown fox jumps over the lazy dog. [s|Label]"
                width="100%" />
    </s:VGroup>
 
</s:Application>

Base 02 font by www.stereo-type.net.

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/2009/06/14/using-a-cff-embedded-font-with-a-halo-label-control-in-flex-4/feed/ 11 Setting the font sharpness for a Label control in Flex http://blog.flexexamples.com/2008/08/21/setting-the-font-sharpness-for-a-label-control-in-flex/ http://blog.flexexamples.com/2008/08/21/setting-the-font-sharpness-for-a-label-control-in-flex/#comments Fri, 22 Aug 2008 06:05:01 +0000 Peter deHaan http://blog.flexexamples.com/2008/08/21/setting-the-font-sharpness-for-a-label-control-in-flex/ The following example shows how you can set the font sharpness on a Flex Label control by setting the fontSharpness and fontAntiAliasType styles.

<?xml version="1.0" encoding="utf-8"?> <!-- http://blog.flexexamples.com/2008/08/21/setting-the-font-sharpness-for-a-label-control-in-flex/ --> <mx:Application name="Label_fontSharpness_test" xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" verticalAlign="middle" backgroundColor="white"> <mx:Style> @font-face { src: local("Arial"); fontFamily: ArialEmbedded; } @font-face { src: local("Base 02"); fontFamily: Base02Embedded; } </mx:Style> <mx:ApplicationControlBar dock="true"> [...]]]> The following example shows how you can set the font sharpness on a Flex Label control by setting the fontSharpness and fontAntiAliasType styles.

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/08/21/setting-the-font-sharpness-for-a-label-control-in-flex/ -->
<mx:Application name="Label_fontSharpness_test"
        xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:Style>
        @font-face {
            src: local("Arial");
            fontFamily: ArialEmbedded;
        }

        @font-face {
            src: local("Base 02");
            fontFamily: Base02Embedded;
        }
    </mx:Style>

    <mx:ApplicationControlBar dock="true">
        <mx:Form styleName="plain">
            <mx:FormItem label="fontFamily:">
                <mx:ComboBox id="comboBox"
                        dataProvider="[ArialEmbedded,Base02Embedded]" />
            </mx:FormItem>
            <mx:FormItem label="fontSharpness:" direction="horizontal">
                <mx:HSlider id="slider"
                        minimum="-400"
                        maximum="400"
                        value="0"
                        snapInterval="10"
                        tickInterval="50"
                        liveDragging="true" />
                <mx:Label text="{slider.value}" />
            </mx:FormItem>
        </mx:Form>
    </mx:ApplicationControlBar>

    <mx:Label id="lbl"
            text="The quick brown fox jumped over the lazy dog."
            fontFamily="{comboBox.selectedItem}"
            fontSize="16"
            fontAntiAliasType="advanced"
            fontSharpness="{slider.value}" />

</mx:Application>

View source is enabled in the following example.

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

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/08/21/setting-the-font-sharpness-for-a-label-control-in-flex/ -->
<mx:Application name="Label_fontSharpness_test"
        xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:Style>
        @font-face {
            src: local("Base 02");
            fontFamily: Base02Embedded;
        }

        Label {
            fontAntiAliasType: advanced;
            fontFamily: Base02Embedded;
            fontSize: 16;
            fontSharpness: 400;
        }
    </mx:Style>

    <mx:Label id="lbl"
            text="The quick brown fox jumped over the lazy dog." />

</mx:Application>

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

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/08/21/setting-the-font-sharpness-for-a-label-control-in-flex/ -->
<mx:Application name="Label_fontSharpness_test"
        xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:Style>
        @font-face {
            src: local("Arial");
            fontFamily: ArialEmbedded;
        }

        @font-face {
            src: local("Base 02");
            fontFamily: Base02Embedded;
        }

        .myLabel {
            fontAntiAliasType: advanced;
            fontFamily: ArialEmbedded;
            fontSize: 16;
        }
    </mx:Style>

    <mx:Script>
        <![CDATA[
            import mx.events.ListEvent;
            import mx.events.SliderEvent;

            private function comboBox_change(evt:ListEvent):void {
                lbl.setStyle("fontFamily", comboBox.selectedItem);
            }

            private function slider_change(evt:SliderEvent):void {
                lbl.setStyle("fontSharpness", evt.value);
            }
        ]]>
    </mx:Script>

    <mx:ApplicationControlBar dock="true">
        <mx:Form styleName="plain">
            <mx:FormItem label="fontFamily:">
                <mx:ComboBox id="comboBox"
                        dataProvider="[ArialEmbedded,Base02Embedded]"
                        change="comboBox_change(event);" />
            </mx:FormItem>
            <mx:FormItem label="fontSharpness:" direction="horizontal">
                <mx:HSlider id="slider"
                        minimum="-400"
                        maximum="400"
                        value="0"
                        snapInterval="10"
                        tickInterval="50"
                        liveDragging="true"
                        change="slider_change(event);" />
                <mx:Label text="{slider.value}" />
            </mx:FormItem>
        </mx:Form>
    </mx:ApplicationControlBar>

    <mx:Label id="lbl"
            text="The quick brown fox jumped over the lazy dog."
            styleName="myLabel" />

</mx:Application>

Base 02 font by www.stereo-type.net.

 
]]> http://blog.flexexamples.com/2008/08/21/setting-the-font-sharpness-for-a-label-control-in-flex/feed/ 4 Setting the font thickness for a Label control in Flex http://blog.flexexamples.com/2008/08/21/setting-the-font-thickness-for-a-label-control-in-flex/ http://blog.flexexamples.com/2008/08/21/setting-the-font-thickness-for-a-label-control-in-flex/#comments Fri, 22 Aug 2008 05:18:13 +0000 Peter deHaan http://blog.flexexamples.com/2008/08/21/setting-the-font-thickness-for-a-label-control-in-flex/ The following example shows how you can set the font thickness on a Flex Label control by setting the fontThickness and fontAntiAliasType styles.

View MXML

<?xml version="1.0" encoding="utf-8"?> <!-- http://blog.flexexamples.com/2008/08/21/setting-the-font-thickness-for-a-label-control-in-flex/ --> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" verticalAlign="middle" backgroundColor="white"> <mx:Style> @font-face { src: local("Base 02"); fontFamily: Base02Embedded; } </mx:Style> <mx:ApplicationControlBar dock="true"> <mx:Form styleName="plain"> <mx:FormItem label="fontThickness:" [...]]]> The following example shows how you can set the font thickness on a Flex Label control by setting the fontThickness and fontAntiAliasType styles.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/08/21/setting-the-font-thickness-for-a-label-control-in-flex/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:Style>
        @font-face {
            src: local("Base 02");
            fontFamily: Base02Embedded;
        }
    </mx:Style>

    <mx:ApplicationControlBar dock="true">
        <mx:Form styleName="plain">
            <mx:FormItem label="fontThickness:" direction="horizontal">
                <mx:HSlider id="slider"
                        minimum="-200"
                        maximum="200"
                        value="0"
                        snapInterval="10"
                        tickInterval="20"
                        liveDragging="true" />
                <mx:Label text="{slider.value}" />
            </mx:FormItem>
        </mx:Form>
    </mx:ApplicationControlBar>

    <mx:Label id="lbl"
            text="The quick brown fox jumped over the lazy dog."
            fontFamily="Base02Embedded"
            fontSize="16"
            fontAntiAliasType="advanced"
            fontThickness="{slider.value}" />

</mx:Application>

View source is enabled in the following example.

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

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/08/21/setting-the-font-thickness-for-a-label-control-in-flex/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:Style>
        @font-face {
            src: local("Base 02");
            fontFamily: Base02Embedded;
        }

        Label {
            fontAntiAliasType: advanced;
            fontFamily: Base02Embedded;
            fontSize: 16;
            fontThickness: -200;
        }
    </mx:Style>

    <mx:Label id="lbl"
            text="The quick brown fox jumped over the lazy dog." />

</mx:Application>

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

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/08/21/setting-the-font-thickness-for-a-label-control-in-flex/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:Style>
        @font-face {
            src: local("Base 02");
            fontFamily: Base02Embedded;
        }
    </mx:Style>

    <mx:Script>
        <![CDATA[
            import mx.events.SliderEvent;

            private function slider_change(evt:SliderEvent):void {
                lbl.setStyle("fontThickness", evt.value);
            }
        ]]>
    </mx:Script>

    <mx:ApplicationControlBar dock="true">
        <mx:Form styleName="plain">
            <mx:FormItem label="fontThickness:" direction="horizontal">
                <mx:HSlider id="slider"
                        minimum="-200"
                        maximum="200"
                        value="0"
                        snapInterval="10"
                        tickInterval="20"
                        liveDragging="true"
                        change="slider_change(event);" />
                <mx:Label text="{slider.value}" />
            </mx:FormItem>
        </mx:Form>
    </mx:ApplicationControlBar>

    <mx:Label id="lbl"
            text="The quick brown fox jumped over the lazy dog."
            fontFamily="Base02Embedded"
            fontSize="16"
            fontAntiAliasType="advanced" />

</mx:Application>

Base 02 font by www.stereo-type.net.

 
]]> http://blog.flexexamples.com/2008/08/21/setting-the-font-thickness-for-a-label-control-in-flex/feed/ 0 Detecting when the label changes on a Button control in Flex http://blog.flexexamples.com/2008/06/25/detecting-when-the-label-changes-on-a-button-control-in-flex/ http://blog.flexexamples.com/2008/06/25/detecting-when-the-label-changes-on-a-button-control-in-flex/#comments Thu, 26 Jun 2008 06:39:58 +0000 Peter deHaan http://blog.flexexamples.com/2008/06/25/detecting-when-the-label-changes-on-a-button-control-in-flex/ The following example shows how you can detect when a Flex Button control’s label changes using the labelChanged event.

Full code after the jump.

The labelChanged event isn’t publicly documented and it isn’t likely that you’ll ever need to use it directly. Also note that the Button class has a private Boolean labelChanged [...]]]> The following example shows how you can detect when a Flex Button control’s label changes using the labelChanged event.

Full code after the jump.

The labelChanged event isn’t publicly documented and it isn’t likely that you’ll ever need to use it directly. Also note that the Button class has a private Boolean labelChanged property, so you need to create the labelChanged event handler in ActionScript instead of MXML.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/06/25/detecting-when-the-label-changes-on-a-button-control-in-flex/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white"
        initialize="init();">

    <mx:Script>
        <![CDATA[
            import mx.controls.Alert;

            private function init():void {
                button.addEventListener("labelChanged", button_labelChanged);
            }

            private function button_labelChanged(evt:Event):void {
                Alert.show(evt.toString());
            }
        ]]>
    </mx:Script>

    <mx:ApplicationControlBar dock="true">
        <mx:Button label="One" click="button.label = 'One';" />
        <mx:Button label="Two" click="button.label = 'Two';" />
    </mx:ApplicationControlBar>

    <mx:Button id="button" label="Button" />

</mx:Application>

View source is enabled in the following example.

Due to popular demand, here is the “same” example in a more ActionScript friendly format:

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/06/25/detecting-when-the-label-changes-on-a-button-control-in-flex/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white"
        initialize="init();">

    <mx:Script>
        <![CDATA[
            import mx.containers.ApplicationControlBar;
            import mx.controls.Alert;
            import mx.controls.Button;

            private var button:Button;

            private function init():void {
                var btnOne:Button = new Button();
                btnOne.label = "One";
                btnOne.addEventListener(MouseEvent.CLICK, setBtnLabel);

                var btnTwo:Button = new Button();
                btnTwo.label = "Two";
                btnTwo.addEventListener(MouseEvent.CLICK, setBtnLabel);

                var appControlBar:ApplicationControlBar = new ApplicationControlBar();
                appControlBar.dock = true;
                appControlBar.addChild(btnOne);
                appControlBar.addChild(btnTwo);
                Application.application.addChildAt(appControlBar, 0);

                button = new Button();
                button.label = "Button";
                button.addEventListener("labelChanged", button_labelChanged);
                addChild(button);
            }

            private function setBtnLabel(evt:MouseEvent):void {
                button.label = Button(evt.currentTarget).label;
            }

            private function button_labelChanged(evt:Event):void {
                Alert.show(evt.toString());
            }
        ]]>
    </mx:Script>

</mx:Application>
 
]]> http://blog.flexexamples.com/2008/06/25/detecting-when-the-label-changes-on-a-button-control-in-flex/feed/ 0 Customizing a FormItem container’s label in Flex 3 http://blog.flexexamples.com/2008/03/21/customizing-a-formitem-containers-label-in-flex-3/ http://blog.flexexamples.com/2008/03/21/customizing-a-formitem-containers-label-in-flex-3/#comments Fri, 21 Mar 2008 14:36:27 +0000 Peter deHaan http://blog.flexexamples.com/2008/03/21/customizing-a-formitem-containers-label-in-flex-3/ The following example shows how you can access the Label subcomponent in a Flex FormItem container and do fancy stuff like have form labels with hyperlinks or selectable text by using the itemLabel property.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?> <!-- http://blog.flexexamples.com/2008/03/21/customizing-a-formitem-containers-label-in-flex-3/ --> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" verticalAlign="middle" backgroundColor="white"> [...]]]> The following example shows how you can access the Label subcomponent in a Flex FormItem container and do fancy stuff like have form labels with hyperlinks or selectable text by using the itemLabel property.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/03/21/customizing-a-formitem-containers-label-in-flex-3/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:Script>
        <![CDATA[
            import mx.events.FlexEvent;
            import mx.controls.Label;
            import mx.controls.Alert;
            import mx.containers.FormItem;

            private function init2(evt:FlexEvent):void {
                var lbl:Label = FormItem(evt.currentTarget).itemLabel as Label;
                lbl.selectable = true;
            }

            private function init3(evt:FlexEvent):void {
                var lbl:Label = FormItem(evt.currentTarget).itemLabel as Label;
                lbl.htmlText = txt;
                lbl.selectable = true;
                lbl.addEventListener(TextEvent.LINK, label_link);
            }

            private function label_link(evt:TextEvent):void {
                Alert.show("You clicked a link. Have some cake.");
            }
        ]]>
    </mx:Script>

    <mx:String id="txt">
        <![CDATA[<a href="event:att"><u>Hyperlink</u></a> label]]>
    </mx:String>

    <mx:Form maxWidth="500">
        <mx:FormItem id="formItem1"
                label="Default label">
            <mx:Label id="label1"
                    text="The quick brown fox jumped over the..." />
        </mx:FormItem>
        <mx:FormItem id="formItem2"
                label="Selectable label"
                creationComplete="init2(event);">
            <mx:Label id="label2"
                    text="The quick brown fox jumped over the..." />
        </mx:FormItem>
        <mx:FormItem id="formItem3"
                label="Hyperlink label"
                creationComplete="init3(event);">
            <mx:Label id="label3"
                    text="The quick brown fox jumped over the..." />
        </mx:FormItem>
    </mx:Form>

</mx:Application>

View source is enabled in the following example.

 
]]> http://blog.flexexamples.com/2008/03/21/customizing-a-formitem-containers-label-in-flex-3/feed/ 3 Displaying tool tips in a Flex DataGrid control’s header http://blog.flexexamples.com/2008/02/08/displaying-tool-tips-in-a-flex-datagrid-controls-header/ http://blog.flexexamples.com/2008/02/08/displaying-tool-tips-in-a-flex-datagrid-controls-header/#comments Sat, 09 Feb 2008 06:13:27 +0000 Peter deHaan http://blog.flexexamples.com/2008/02/08/displaying-tool-tips-in-a-flex-datagrid-controls-header/ The following example shows you how you can truncate a DataGrid column’s text and display a tool tip by setting a custom header renderer.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?> <!-- http://blog.flexexamples.com/2008/02/08/displaying-tool-tips-in-a-flex-datagrid-controls-header/ --> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" verticalAlign="middle" backgroundColor="white"> <mx:XML id="xmlDP"> <nodes> <node col1="One.1" col2="One.2" /> <node col1="Two.1" col2="Two.2" [...]]]> The following example shows you how you can truncate a DataGrid column’s text and display a tool tip by setting a custom header renderer.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/02/08/displaying-tool-tips-in-a-flex-datagrid-controls-header/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:XML id="xmlDP">
        <nodes>
            <node col1="One.1" col2="One.2" />
            <node col1="Two.1" col2="Two.2" />
            <node col1="Three.1" col2="Three.2" />
            <node col1="Four.1" col2="Four.2" />
            <node col1="Five.1" col2="Five.2" />
            <node col1="Six.1" col2="Six.2" />
            <node col1="Seven.1" col2="Seven.2" />
            <node col1="Eight.1" col2="Eight.2" />
            <node col1="Nine.1" col2="Nine.2" />
        </nodes>
    </mx:XML>

    <mx:DataGrid id="dataGrid"
            dataProvider="{xmlDP.node}"
            width="300"
            height="200">
        <mx:columns>
            <mx:DataGridColumn dataField="@col1"
                    headerText="The quick brown fox jumped over the lazy dog"
                    headerRenderer="mx.controls.Label" />
            <mx:DataGridColumn dataField="@col2"
                    headerText="Lorem ipsum dolor sit amet, consectetuer adipiscing elit"
                    headerRenderer="mx.controls.Label" />
        </mx:columns>
    </mx:DataGrid>

</mx:Application>

View source is enabled in the following example.

Due to popular demand, here is the “same” example in a more ActionScript friendly format:

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/02/08/displaying-tool-tips-in-a-flex-datagrid-controls-header/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white"
        initialize="init();">

    <mx:Script>
        <![CDATA[
            import mx.controls.dataGridClasses.DataGridColumn;
            import mx.controls.DataGrid;
            import mx.controls.Label;

            private var xmlDP:XML = <nodes>
                        <node col1="One.1" col2="One.2" />
                        <node col1="Two.1" col2="Two.2" />
                        <node col1="Three.1" col2="Three.2" />
                        <node col1="Four.1" col2="Four.2" />
                        <node col1="Five.1" col2="Five.2" />
                        <node col1="Six.1" col2="Six.2" />
                        <node col1="Seven.1" col2="Seven.2" />
                        <node col1="Eight.1" col2="Eight.2" />
                        <node col1="Nine.1" col2="Nine.2" />
                    </nodes>;

            private var dataGrid:DataGrid;
            private var dataGridCol1:DataGridColumn;
            private var dataGridCol2:DataGridColumn;

            private function init():void {
                dataGridCol1 = new DataGridColumn();
                dataGridCol1.dataField = "@col1";
                dataGridCol1.headerText = "The quick brown fox jumped over the lazy dog";
                dataGridCol1.headerRenderer = new ClassFactory(Label);

                dataGridCol2 = new DataGridColumn();
                dataGridCol2.dataField = "@col2";
                dataGridCol2.headerText = "Lorem ipsum dolor sit amet, consectetuer adipiscing elit";
                dataGridCol2.headerRenderer = new ClassFactory(Label);

                dataGrid = new DataGrid();
                dataGrid.dataProvider = xmlDP.node;
                dataGrid.columns = [dataGridCol1, dataGridCol2];
                dataGrid.width = 300;
                dataGrid.height = 200;
                addChild(dataGrid);
            }
        ]]>
    </mx:Script>

</mx:Application>
 
]]> http://blog.flexexamples.com/2008/02/08/displaying-tool-tips-in-a-flex-datagrid-controls-header/feed/ 11 Truncating the label on a Flex CheckBox control http://blog.flexexamples.com/2008/02/06/truncating-the-label-on-a-flex-checkbox-control/ http://blog.flexexamples.com/2008/02/06/truncating-the-label-on-a-flex-checkbox-control/#comments Thu, 07 Feb 2008 03:07:00 +0000 Peter deHaan http://blog.flexexamples.com/2008/02/06/truncating-the-label-on-a-flex-checkbox-control/ The following example shows how you can truncate the label on a CheckBox control in Flex by setting the width property.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?> <!-- http://blog.flexexamples.com/2008/02/06/truncating-the-label-on-a-flex-checkbox-control/ --> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" verticalAlign="middle" backgroundColor="white"> <mx:String id="str">The quick brown fox jumped over the lazy dog.</mx:String> <mx:Form> <mx:FormItem label="default:"> [...]]]> The following example shows how you can truncate the label on a CheckBox control in Flex by setting the width property.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/02/06/truncating-the-label-on-a-flex-checkbox-control/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:String id="str">The quick brown fox jumped over the lazy dog.</mx:String>

    <mx:Form>
        <mx:FormItem label="default:">
            <mx:CheckBox id="checkBox1"
                    label="{str}" />
        </mx:FormItem>
        <mx:FormItem label="width = 200:">
            <mx:CheckBox id="checkBox2"
                    label="{str}"
                    width="200" />
        </mx:FormItem>
    </mx:Form>

</mx:Application>

View source is enabled in the following example.

 
]]> http://blog.flexexamples.com/2008/02/06/truncating-the-label-on-a-flex-checkbox-control/feed/ 0 Displaying a Label control’s text as a password http://blog.flexexamples.com/2008/01/27/displaying-a-label-controls-text-as-a-password/ http://blog.flexexamples.com/2008/01/27/displaying-a-label-controls-text-as-a-password/#comments Sun, 27 Jan 2008 17:09:39 +0000 Peter deHaan http://blog.flexexamples.com/2008/01/27/displaying-a-label-controls-text-as-a-password/ The following example shows you how you create a custom Label control in Flex that masks its text as a password by setting the Label control’s nested protected UITextField control’s displayAsPassword property.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?> <!-- http://blog.flexexamples.com/2008/01/27/displaying-a-label-controls-text-as-a-password/ --> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" xmlns:local="*" layout="vertical" verticalAlign="middle" backgroundColor="white"> <mx:HBox> [...]]]> The following example shows you how you create a custom Label control in Flex that masks its text as a password by setting the Label control’s nested protected UITextField control’s displayAsPassword property.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/01/27/displaying-a-label-controls-text-as-a-password/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        xmlns:local="*"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:HBox>
        <mx:Label text="Password:" />
        <local:MyLabel id="lbl"
                text="The quick brown fox jumped over the lazy dog."
                truncateToFit="true"
                width="100"
                creationComplete="lbl.tf.displayAsPassword = true;" />
    </mx:HBox>

</mx:Application>

View MyLabel.mxml

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/01/27/displaying-a-label-controls-text-as-a-password/ -->
<mx:Label xmlns:mx="http://www.adobe.com/2006/mxml">

    <mx:Script>
        <![CDATA[
            import mx.core.IUITextField;

            public function get tf():IUITextField {
                return textField;
            }
        ]]>
    </mx:Script>

</mx:Label>

View source is enabled in the following example.

As you can see, the Label control’s text is masked, but rolling over the label displays the masked text, because the truncateToFit property is set to true.

Note that the truncated Label text does not display the traditional ellipsis (“…”) indicating that the text has been truncated. That is because the ellipsis is also displayed as password text (masked as “*”).

 
]]> http://blog.flexexamples.com/2008/01/27/displaying-a-label-controls-text-as-a-password/feed/ 4 Truncating text in the Flex Label control using the truncateToFit property http://blog.flexexamples.com/2008/01/26/truncating-text-in-the-flex-label-control-using-the-truncatetofit-property/ http://blog.flexexamples.com/2008/01/26/truncating-text-in-the-flex-label-control-using-the-truncatetofit-property/#comments Sat, 26 Jan 2008 22:09:55 +0000 Peter deHaan http://blog.flexexamples.com/2008/01/26/truncating-text-in-the-flex-label-control-using-the-truncatetofit-property/ The following example shows how you can use the truncateToFit property in the Label control in Flex to truncate strings if they exceed a specified width. The label control will terminate the string with “…” and allow you to roll over the text and read the entire (non-truncated) text in a tool tip, as seen [...]]]> The following example shows how you can use the truncateToFit property in the Label control in Flex to truncate strings if they exceed a specified width. The label control will terminate the string with “…” and allow you to roll over the text and read the entire (non-truncated) text in a tool tip, as seen in the following snippet:

<mx:Label text="The quick brown fox jumped over the lazy dog."
        truncateToFit="true"
        maxWidth="200" />

Full code after the jump.

The following example displays three Label controls:
The first Label control (“default”), simply sets the text property and allows the Label control to size itself to match the length of the text.
The second Label control (“truncateToFit = false”) sets the truncateToFit property to false and sets the maxWidth property to 200 pixels. Because the specified text will not fit within the 200 pixel control, the extra text is not displayed and is cropped off. You can see a portion of a last character in the Label control and rolling over the text will not display a tool tip.
The third Label control (“truncateToFit = true”) sets the truncateToFit property to true and sets the maxWidth property to 200 pixels. Because the specified text will not fit within the 200 pixel control, the extra text is not displayed, but the text displays “…” at the end of the control. No partial characters are displayed and rolling over the text displays a tool tip showing the entire contents of the text string.

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/01/26/truncating-text-in-the-flex-label-control-using-the-truncatetofit-property/ -->
<mx:Application name="Label_truncateToFit_test"
        xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">
 
    <mx:String id="str">The quick brown fox jumped over the lazy dog.</mx:String>
 
    <mx:Form>
        <mx:FormItem label="default:">
            <mx:Label text="{str}" />
        </mx:FormItem>
        <mx:FormItem label="truncateToFit = false:">
            <mx:Label truncateToFit="false"
                    text="{str}"
                    maxWidth="200" />
        </mx:FormItem>
        <mx:FormItem label="truncateToFit = true:">
            <mx:Label truncateToFit="true"
                    text="{str}"
                    maxWidth="200" />
        </mx:FormItem>
    </mx:Form>
 
</mx:Application>

View source is enabled in the following example.

 
]]> http://blog.flexexamples.com/2008/01/26/truncating-text-in-the-flex-label-control-using-the-truncatetofit-property/feed/ 22 Listening for the link event in a Flex Label control http://blog.flexexamples.com/2008/01/26/listening-for-the-link-event-in-a-flex-label-control/ http://blog.flexexamples.com/2008/01/26/listening-for-the-link-event-in-a-flex-label-control/#comments Sat, 26 Jan 2008 08:49:21 +0000 Peter deHaan http://blog.flexexamples.com/2008/01/26/listening-for-the-link-event-in-a-flex-label-control/ The following example shows how you can use the link event with the Label control in Flex to handle hyperlinks embedded within a string of text. By using the “event:” prefix in the href property of an anchor (<a />) tag, you can handle links within your Flex application, use the ExternalInterface API to call [...]]]> The following example shows how you can use the link event with the Label control in Flex to handle hyperlinks embedded within a string of text. By using the “event:” prefix in the href property of an anchor (<a />) tag, you can handle links within your Flex application, use the ExternalInterface API to call JavaScript from Flex, or do pretty much whatever else you want.

Full code after the jump.

The Label control must have the selectable property set to true to generate the link event.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/01/26/listening-for-the-link-event-in-a-flex-label-control/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:Script>
        <![CDATA[
            import mx.controls.Alert;

            private function lbl_initialize():void {
                lbl.htmlText = "For more information on Flex, see <u><a href='event:flex.org'>http://www.flex.org/</a></u>.";            }

            private function lbl_link(evt:TextEvent):void {
                Alert.show(evt.toString(), evt.text);

                switch (evt.text) {
                    case "flex.org":
                        // You clicked the flex.org link.
                        break;
                }
            }
        ]]>
    </mx:Script>

    <mx:Label id="lbl"
            selectable="true"
            initialize="lbl_initialize();"
            link="lbl_link(event);" />

</mx:Application>

View source is enabled in the following example.

Another useful little tip when dealing with HTML text, is to put your HTML into an external file, and then embed it into your application using <mx:String />, as seen in the following snippet:

<mx:String id="str" source="text.html" />

<mx:Label id="lbl"
        htmlText="{str}"
        selectable="true"
        link="lbl_link(event);" />

And then your text.html file would look like the following:

<p>For more information on Flex, see <u><a href="event:flex.org">http://www.flex.org/</a></u>.</p>
 
]]> http://blog.flexexamples.com/2008/01/26/listening-for-the-link-event-in-a-flex-label-control/feed/ 6