Determining if a Spark SimpleText control is truncated in Flex 4

The following example shows how you can determine if a Spark SimpleText control is truncated in Flex 4 by using the isTruncated() method.

Full code after the jump.

The following example(s) require Flash Player 10 and the Adobe Flex 4 SDK. To download the Adobe Flash Builder 4 trial, see www.adobe.com/products/flex/. To download the latest nightly build of the Flex 4 SDK, see 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/15/determining-if-a-spark-simpletext-control-is-truncated-in-flex-4/ -->
<s:Application name="Spark_SimpleText_isTruncated_test"
        xmlns:fx="http://ns.adobe.com/mxml/2009"
        xmlns:s="library://ns.adobe.com/flex/spark"
        xmlns:mx="library://ns.adobe.com/flex/halo">
    <s:layout>
        <s:VerticalLayout gap="8" />
    </s:layout>

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

            private function group1_updateComplete(evt:FlexEvent):void {
                checkBox.selected = simpleTxt.isTruncated();
            }
        ]]>
    </fx:Script>

    <mx:ApplicationControlBar width="100%" cornerRadius="0">
        <mx:Form styleName="plain">
            <mx:FormItem label="truncation:">
                <s:HSlider id="slider"
                        minimum="0"
                        maximum="3"
                        liveDragging="true" />
            </mx:FormItem>
            <mx:FormItem label="isTruncated():">
                <mx:CheckBox id="checkBox" enabled="false" />
            </mx:FormItem>
        </mx:Form>
    </mx:ApplicationControlBar>

    <s:Group updateComplete="group1_updateComplete(event);"
            width="100%"
            height="100%">
        <s:SimpleText id="simpleTxt"
                truncation="{slider.value}"
                textAlign="justify"
                fontSize="24"
                width="200"
                horizontalCenter="0"
                verticalCenter="0">
            <s:text>The quick brown fox jumps over the lazy dog</s:text>
        </s:SimpleText>
    </s:Group>

</s:Application>

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/2009/06/15/determining-if-a-spark-simpletext-control-is-truncated-in-flex-4/ -->
<s:Application name="Spark_SimpleText_isTruncated_test"
        xmlns:fx="http://ns.adobe.com/mxml/2009"
        xmlns:s="library://ns.adobe.com/flex/spark"
        xmlns:mx="library://ns.adobe.com/flex/halo"
        initialize="init();">
    <s:layout>
        <s:VerticalLayout gap="8" />
    </s:layout>

    <fx:Script>
        <![CDATA[
            import flashx.textLayout.formats.TextAlign;
            import mx.containers.ApplicationControlBar;
            import mx.containers.Form;
            import mx.containers.FormItem;
            import mx.events.FlexEvent;
            import spark.components.CheckBox;
            import spark.components.Group;
            import spark.components.HSlider;
            import spark.primitives.SimpleText;

            private var slider:HSlider;
            private var checkBox:CheckBox;
            private var simpleTxt:SimpleText;

            private function init():void {
                slider = new HSlider();
                slider.minimum = 0;
                slider.maximum = 3;
                slider.setStyle("liveDragging", true);
                slider.addEventListener(Event.CHANGE, slider_change);

                checkBox = new CheckBox();
                checkBox.enabled = false;

                var formItem1:FormItem = new FormItem();
                formItem1.label = "truncation:";
                formItem1.addElement(slider);

                var formItem2:FormItem = new FormItem();
                formItem2.label = "isTruncated():";
                formItem2.addElement(checkBox);

                var form:Form = new Form();
                form.styleName = "plain";
                form.addElement(formItem1);
                form.addElement(formItem2);

                var appControlBar:ApplicationControlBar = new ApplicationControlBar();
                appControlBar.percentWidth = 100;
                appControlBar.setStyle("cornerRadius", 0);
                appControlBar.addElement(form);
                addElementAt(appControlBar, 0);

                simpleTxt = new SimpleText();
                simpleTxt.truncation = slider.value;
                simpleTxt.setStyle("textAlign", TextAlign.JUSTIFY);
                simpleTxt.setStyle("fontSize", 24);
                simpleTxt.width = 200;
                simpleTxt.horizontalCenter = 0;
                simpleTxt.verticalCenter = 0;
                simpleTxt.text = "The quick brown fox jumps over the lazy dog";

                var group1:Group = new Group();
                group1.percentWidth = 100;
                group1.percentHeight = 100;
                group1.addEventListener(FlexEvent.UPDATE_COMPLETE, group1_updateComplete);
                group1.addElement(simpleTxt);
                addElement(group1);
            }

            private function slider_change(evt:Event):void {
                simpleTxt.truncation = slider.value;
            }

            private function group1_updateComplete(evt:FlexEvent):void {
                checkBox.selected = simpleTxt.isTruncated();
            }
        ]]>
    </fx:Script>

</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.