Flex Examples » setSelection() http://blog.flexexamples.com Just a bunch of Adobe Flex Examples Wed, 26 Jan 2011 18:09:51 +0000 en hourly 1 Programmatically selecting text in an FxTextArea control in Flex Gumbo http://blog.flexexamples.com/2008/11/16/programmatically-selecting-text-in-an-fxtextarea-control-in-flex-gumbo/ http://blog.flexexamples.com/2008/11/16/programmatically-selecting-text-in-an-fxtextarea-control-in-flex-gumbo/#comments Mon, 17 Nov 2008 07:57:29 +0000 Peter deHaan http://blog.flexexamples.com/2008/11/16/programmatically-selecting-text-in-an-fxtextarea-control-in-flex-gumbo/ The following example shows how you can use ActionScript to select text in a Flex Gumbo FxTextArea control by calling the setSelection() method. This example also shows how you can determine the current text selection’s anchor position and active position by using the selectionAnchorPosition and selectionActivePosition properties.

Full code after the jump.

The following example shows how you can use ActionScript to select text in a Flex Gumbo FxTextArea control by calling the setSelection() method. This example also shows how you can determine the current text selection’s anchor position and active position by using the selectionAnchorPosition and selectionActivePosition properties.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/11/16/programmatically-selecting-text-in-an-fxtextarea-control-in-flex-gumbo/ -->
<Application name="FxTextArea_setSelection_test"
        xmlns="http://ns.adobe.com/mxml/2009"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

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

            private function slider_change(evt:SliderEvent):void {
                var anchorIdx:uint = slider.values[0];
                var activeIdx:uint = slider.values[1];
                textArea.setSelection(anchorIdx, activeIdx);
            }

            private function textArea_selectionChange(evt:FlexEvent):void {
                var anchorIdx:uint = textArea.selectionAnchorPosition;
                var activeIdx:uint = textArea.selectionActivePosition;
                slider.values = [anchorIdx, activeIdx];
            }
        ]]>
    </Script>

    <ApplicationControlBar dock="true">
        <Form styleName="plain">
            <FormItem label="setSelection():">
                <HSlider id="slider"
                        minimum="0"
                        maximum="{textArea.text.length}"
                        thumbCount="2"
                        snapInterval="1"
                        liveDragging="true"
                        allowThumbOverlap="true"
                        showTrackHighlight="true"
                        change="slider_change(event);" />
            </FormItem>
            <FormItem label="selectionAnchorPosition:">
                <Label text="{textArea.selectionAnchorPosition}" />
            </FormItem>
            <FormItem label="selectionActivePosition:">
                <Label text="{textArea.selectionActivePosition}" />
            </FormItem>
        </Form>
    </ApplicationControlBar>

    <FxTextArea id="textArea"
            text="The quick brown fox jumps over the lazy dog"
            selectionVisibility="always"
            unfocusedSelectionColor="0xFF0000"
            selectionChange="textArea_selectionChange(event);" />

</Application>
 
]]> http://blog.flexexamples.com/2008/11/16/programmatically-selecting-text-in-an-fxtextarea-control-in-flex-gumbo/feed/ 1 Setting text selection on a TextArea control in Flex http://blog.flexexamples.com/2008/04/25/setting-text-selection-on-a-textarea-control-in-flex/ http://blog.flexexamples.com/2008/04/25/setting-text-selection-on-a-textarea-control-in-flex/#comments Sat, 26 Apr 2008 06:50:41 +0000 Peter deHaan http://blog.flexexamples.com/2008/04/25/setting-text-selection-on-a-textarea-control-in-flex/ The following example shows how you can set the selected text in a Flex TextArea control by using the setSelection() method.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?> <!-- http://blog.flexexamples.com/2008/04/25/setting-text-selection-on-a-textarea-control-in-flex/ --> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" verticalAlign="middle" backgroundColor="white"> <mx:Script> <![CDATA[ import mx.core.IUITextField; import mx.events.SliderEvent; import mx.controls.sliderClasses.Slider; private function slider_change(evt:SliderEvent):void { var [...]]]> The following example shows how you can set the selected text in a Flex TextArea control by using the setSelection() method.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/04/25/setting-text-selection-on-a-textarea-control-in-flex/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:Script>
        <![CDATA[
            import mx.core.IUITextField;
            import mx.events.SliderEvent;
            import mx.controls.sliderClasses.Slider;

            private function slider_change(evt:SliderEvent):void {
                var value1:int = Slider(evt.currentTarget).values[0];
                var value2:int = Slider(evt.currentTarget).values[1];
                var min:int = Math.min(value1, value2);
                var max:int = Math.max(value1, value2);
                textArea.setSelection(min, max);
            }

            private function init():void {
                var tf:IUITextField = textArea.mx_internal::getTextField();
                tf.alwaysShowSelection = true;
                textArea.verticalScrollPosition = 0;
            }
        ]]>
    </mx:Script>

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

    <mx:ApplicationControlBar dock="true">
        <mx:Form styleName="plain">
            <mx:FormItem label="setSelection():">
                <mx:HSlider id="slider"
                        minimum="0"
                        maximum="{textArea.htmlText.length}"
                        thumbCount="2"
                        liveDragging="true"
                        allowThumbOverlap="true"
                        snapInterval="1"
                        dataTipPrecision="0"
                        change="slider_change(event);" />
            </mx:FormItem>
        </mx:Form>
    </mx:ApplicationControlBar>

    <mx:TextArea id="textArea"
            htmlText="{lorem}"
            textAlign="justify"
            condenseWhite="true"
            width="100%"
            height="100%"
            creationComplete="init();" />

</mx:Application>

View source is enabled in the following example.

You can also set the selected text in a TextArea control by setting the selectionBeginIndex and selectionEndIndex properties, as seen in the following example:

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/04/25/setting-text-selection-on-a-textarea-control-in-flex/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:Script>
        <![CDATA[
            import mx.core.IUITextField;
            import mx.events.SliderEvent;
            import mx.controls.sliderClasses.Slider;

            private function slider_change(evt:SliderEvent):void {
                textArea.selectionBeginIndex = beginSlider.value;
                textArea.selectionEndIndex = endSlider.value;

                textArea.validateNow();
                beginLabel.text = textArea.selectionBeginIndex.toString();
                endLabel.text = textArea.selectionEndIndex.toString();
            }

            private function init():void {
                var tf:IUITextField = textArea.mx_internal::getTextField();
                tf.alwaysShowSelection = true;
                textArea.verticalScrollPosition = 0;
            }
        ]]>
    </mx:Script>

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

    <mx:ApplicationControlBar dock="true">
        <mx:Form styleName="plain">
            <mx:FormItem label="selectionBeginIndex:"
                    direction="horizontal">
                <mx:HSlider id="beginSlider"
                        minimum="0"
                        maximum="{textArea.htmlText.length}"
                        value="0"
                        liveDragging="true"
                        change="slider_change(event);" />
                <mx:Label id="beginLabel" />
            </mx:FormItem>
            <mx:FormItem label="selectionEndIndex:"
                    direction="horizontal">
                <mx:HSlider id="endSlider"
                        minimum="0"
                        maximum="{textArea.htmlText.length}"
                        value="0"
                        snapInterval="1"
                        liveDragging="true"
                        change="slider_change(event);" />
                <mx:Label id="endLabel" />
            </mx:FormItem>
        </mx:Form>
    </mx:ApplicationControlBar>

    <mx:TextArea id="textArea"
            htmlText="{lorem}"
            textAlign="justify"
            condenseWhite="true"
            width="100%"
            height="100%"
            creationComplete="init();" />

</mx:Application>

View source is enabled in the following example.

 
]]> http://blog.flexexamples.com/2008/04/25/setting-text-selection-on-a-textarea-control-in-flex/feed/ 5 Converting an ImageSnapshot object into a Base-64 encoded string in Flex 3 http://blog.flexexamples.com/2007/12/07/converting-an-imagesnapshot-object-into-a-base-64-encoded-string-in-flex-3/ http://blog.flexexamples.com/2007/12/07/converting-an-imagesnapshot-object-into-a-base-64-encoded-string-in-flex-3/#comments Sat, 08 Dec 2007 06:32:25 +0000 Peter deHaan http://blog.flexexamples.com/2007/12/07/converting-an-imagesnapshot-object-into-a-base-64-encoded-string-in-flex-3/ The following example shows how you can convert an ImageSnapshot object into a Base-64 encoded string using Flex 3′s cleverly named encodeImageAsBase64() method.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?> <!-- http://blog.flexexamples.com/2007/12/07/converting-an-imagesnapshot-object-into-a-base-64-encoded-string-in-flex-3/ --> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" verticalAlign="middle" backgroundColor="white"> <mx:Script> <![CDATA[ import flash.events.FocusEvent; import flash.system.System; import mx.graphics.ImageSnapshot; private function button_click(evt:MouseEvent):void [...]]]> The following example shows how you can convert an ImageSnapshot object into a Base-64 encoded string using Flex 3′s cleverly named encodeImageAsBase64() method.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2007/12/07/converting-an-imagesnapshot-object-into-a-base-64-encoded-string-in-flex-3/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:Script>
        <![CDATA[
            import flash.events.FocusEvent;
            import flash.system.System;
            import mx.graphics.ImageSnapshot;

            private function button_click(evt:MouseEvent):void {
                var ohSnap:ImageSnapshot = ImageSnapshot.captureImage(img);
                textArea.text = ImageSnapshot.encodeImageAsBase64(ohSnap);
            }

            private function textArea_focusIn(evt:FocusEvent):void {
                textArea.setSelection(0, textArea.text.length);
            }
        ]]>
    </mx:Script>

    <mx:ApplicationControlBar dock="true">
        <mx:Button label="Capture and encode"
                click="button_click(event);" />
    </mx:ApplicationControlBar>

    <mx:Form>
        <mx:FormItem label="source:">
            <mx:Image id="img"
                    source="@Embed('images/flex_logo.jpg')" />
        </mx:FormItem>
        <mx:FormItem label="Base64:">
            <mx:TextArea id="textArea"
                    editable="false"
                    showScrollTips="true"
                    width="320"
                    height="160"
                    focusIn="textArea_focusIn(event);" />
        </mx:FormItem>
        <mx:FormItem>
            <mx:Button label="Copy to clipboard"
                    enabled="{textArea.text.length > 0}"
                    click="System.setClipboard(textArea.text);" />
        </mx:FormItem>
    </mx:Form>

</mx:Application>

View source is enabled in the following example.

 
]]> http://blog.flexexamples.com/2007/12/07/converting-an-imagesnapshot-object-into-a-base-64-encoded-string-in-flex-3/feed/ 5