Flex Examples » focusThickness http://blog.flexexamples.com Just a bunch of Adobe Flex Examples Wed, 26 Jan 2011 18:09:51 +0000 en hourly 1 Setting the focus blend mode on a TextArea control in Flex http://blog.flexexamples.com/2009/01/11/setting-the-focus-blend-mode-on-a-textarea-control-in-flex/ http://blog.flexexamples.com/2009/01/11/setting-the-focus-blend-mode-on-a-textarea-control-in-flex/#comments Mon, 12 Jan 2009 07:18:21 +0000 Peter deHaan http://blog.flexexamples.com/2009/01/11/setting-the-focus-blend-mode-on-a-textarea-control-in-flex/ The following example shows how you can set the focus blend mode of the focus rectangle on a Flex TextArea control by setting the focusBlendMode style.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?> <!-- http://blog.flexexamples.com/2009/01/11/setting-the-focus-blend-mode-on-a-textarea-control-in-flex/ --> <mx:Application name="TextArea_focusBlendMode_test" xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" verticalAlign="middle"> <mx:ApplicationControlBar dock="true" styleName="plain"> <mx:Form styleName="plain"> <mx:FormItem label="focusThickness:"> <mx:HSlider [...]]]> The following example shows how you can set the focus blend mode of the focus rectangle on a Flex TextArea control by setting the focusBlendMode style.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2009/01/11/setting-the-focus-blend-mode-on-a-textarea-control-in-flex/ -->
<mx:Application name="TextArea_focusBlendMode_test"
        xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle">

    <mx:ApplicationControlBar dock="true" styleName="plain">
        <mx:Form styleName="plain">
            <mx:FormItem label="focusThickness:">
                <mx:HSlider id="slider"
                        minimum="0"
                        maximum="24"
                        value="10"
                        snapInterval="1"
                        tickInterval="1"
                        change="textArea.setFocus();" />
            </mx:FormItem>
            <mx:FormItem label="focusBlendMode:">
                <mx:ComboBox id="comboBox"
                        selectedIndex="10"
                        change="textArea.setFocus();">
                    <mx:dataProvider>
                        <mx:Array>
                            <mx:String>{BlendMode.ADD}</mx:String>
                            <mx:String>{BlendMode.ALPHA}</mx:String>
                            <mx:String>{BlendMode.DARKEN}</mx:String>
                            <mx:String>{BlendMode.DIFFERENCE}</mx:String>
                            <mx:String>{BlendMode.ERASE}</mx:String>
                            <mx:String>{BlendMode.HARDLIGHT}</mx:String>
                            <mx:String>{BlendMode.INVERT}</mx:String>
                            <mx:String>{BlendMode.LAYER}</mx:String>
                            <mx:String>{BlendMode.LIGHTEN}</mx:String>
                            <mx:String>{BlendMode.MULTIPLY}</mx:String>
                            <mx:String>{BlendMode.NORMAL}</mx:String>
                            <mx:String>{BlendMode.OVERLAY}</mx:String>
                            <mx:String>{BlendMode.SCREEN}</mx:String>
                            <!--
                            <mx:String>{BlendMode.SHADER}</mx:String>
                            -->
                            <mx:String>{BlendMode.SUBTRACT}</mx:String>
                        </mx:Array>
                    </mx:dataProvider>
                </mx:ComboBox>
            </mx:FormItem>
        </mx:Form>
    </mx:ApplicationControlBar>

    <mx:TextArea id="textArea"
            text="The quick brown fox jumps over the lazy dog."
            focusThickness="{slider.value}"
            focusBlendMode="{comboBox.selectedItem}" />

</mx:Application>

View source is enabled in the following example.

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

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2009/01/11/setting-the-focus-blend-mode-on-a-textarea-control-in-flex/ -->
<mx:Application name="TextArea_focusBlendMode_test"
        xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle">

    <mx:Style>
        TextArea {
            focusThickness: 20;
            focusBlendMode: difference;
        }
    </mx:Style>

    <mx:TextArea id="textArea"
            text="The quick brown fox jumps over the lazy dog."  />

</mx:Application>

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

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2009/01/11/setting-the-focus-blend-mode-on-a-textarea-control-in-flex/ -->
<mx:Application name="TextArea_focusBlendMode_test"
        xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle">

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

            private function slider_change(evt:SliderEvent):void {
                textArea.setStyle("focusThickness", evt.value);
                textArea.setFocus();
            }

            private function comboBox_change(evt:ListEvent):void {
                textArea.setStyle("focusBlendMode", comboBox.selectedItem);
                textArea.setFocus();
            }
        ]]>
    </mx:Script>

    <mx:ApplicationControlBar dock="true" styleName="plain">
        <mx:Form styleName="plain">
            <mx:FormItem label="focusThickness:">
                <mx:HSlider id="slider"
                        minimum="0"
                        maximum="24"
                        value="10"
                        snapInterval="1"
                        tickInterval="1"
                        change="slider_change(event);" />
            </mx:FormItem>
            <mx:FormItem label="focusBlendMode:">
                <mx:ComboBox id="comboBox"
                        selectedIndex="10"
                        change="comboBox_change(event);">
                    <mx:dataProvider>
                        <mx:Array>
                            <mx:String>{BlendMode.ADD}</mx:String>
                            <mx:String>{BlendMode.ALPHA}</mx:String>
                            <mx:String>{BlendMode.DARKEN}</mx:String>
                            <mx:String>{BlendMode.DIFFERENCE}</mx:String>
                            <mx:String>{BlendMode.ERASE}</mx:String>
                            <mx:String>{BlendMode.HARDLIGHT}</mx:String>
                            <mx:String>{BlendMode.INVERT}</mx:String>
                            <mx:String>{BlendMode.LAYER}</mx:String>
                            <mx:String>{BlendMode.LIGHTEN}</mx:String>
                            <mx:String>{BlendMode.MULTIPLY}</mx:String>
                            <mx:String>{BlendMode.NORMAL}</mx:String>
                            <mx:String>{BlendMode.OVERLAY}</mx:String>
                            <mx:String>{BlendMode.SCREEN}</mx:String>
                            <!--
                            <mx:String>{BlendMode.SHADER}</mx:String>
                            -->
                            <mx:String>{BlendMode.SUBTRACT}</mx:String>
                        </mx:Array>
                    </mx:dataProvider>
                </mx:ComboBox>
            </mx:FormItem>
        </mx:Form>
    </mx:ApplicationControlBar>

    <mx:TextArea id="textArea"
            text="The quick brown fox jumps over the lazy dog." />

</mx:Application>
 
]]> http://blog.flexexamples.com/2009/01/11/setting-the-focus-blend-mode-on-a-textarea-control-in-flex/feed/ 4 Rounding specific corners on a focus rectangle in the TextInput control in Flex http://blog.flexexamples.com/2008/06/12/rounding-specific-corners-on-a-focus-rectangle-in-the-textinput-control-in-flex/ http://blog.flexexamples.com/2008/06/12/rounding-specific-corners-on-a-focus-rectangle-in-the-textinput-control-in-flex/#comments Fri, 13 Jun 2008 05:52:52 +0000 Peter deHaan http://blog.flexexamples.com/2008/06/12/rounding-specific-corners-on-a-focus-rectangle-in-the-textinput-control-in-flex/ The following example shows how you can apply a corner radius to specific corners of a Flex TextInput control’s focus rectangle by setting the focusRoundedCorners style.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?> <!-- http://blog.flexexamples.com/2008/06/12/rounding-specific-corners-on-a-focus-rectangle-in-the-textinput-control-in-flex/ --> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" verticalAlign="middle" backgroundColor="white"> <mx:Script> <![CDATA[ private function checkBox_change(evt:Event):void { var corners:Array [...]]]> The following example shows how you can apply a corner radius to specific corners of a Flex TextInput control’s focus rectangle by setting the focusRoundedCorners style.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/06/12/rounding-specific-corners-on-a-focus-rectangle-in-the-textinput-control-in-flex/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:Script>
        <![CDATA[
            private function checkBox_change(evt:Event):void {
                var corners:Array = [];
                if (tLeft.selected) {
                    corners.push("tl");
                }
                if (tRight.selected) {
                    corners.push("tr");
                }
                if (bLeft.selected) {
                    corners.push("bl");
                }
                if (bRight.selected) {
                    corners.push("br");
                }
                var str:String = corners.join(" ");
                textInput.setStyle("focusRoundedCorners", str);
                focusManager.setFocus(textInput);
            }
        ]]>
    </mx:Script>

    <mx:ApplicationControlBar dock="true">
        <mx:Form styleName="plain">
            <mx:FormItem label="top left (tl):">
                <mx:CheckBox id="tLeft"
                        selected="true"
                        change="checkBox_change(event);" />
            </mx:FormItem>
            <mx:FormItem label="top right (tr):">
                <mx:CheckBox id="tRight"
                        selected="true"
                        change="checkBox_change(event);" />
            </mx:FormItem>
            <mx:FormItem label="bottom left (bl):">
                <mx:CheckBox id="bLeft"
                        selected="true"
                        change="checkBox_change(event);" />
            </mx:FormItem>
            <mx:FormItem label="top right (br):">
                <mx:CheckBox id="bRight"
                        selected="true"
                        change="checkBox_change(event);" />
            </mx:FormItem>
        </mx:Form>
    </mx:ApplicationControlBar>

    <mx:TextInput id="textInput"
            focusThickness="10"
            cornerRadius="10" />

</mx:Application>

View source is enabled in the following example.

You can also set the focusRoundedCorners style in MXML, as seen in the following example:

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/06/12/rounding-specific-corners-on-a-focus-rectangle-in-the-textinput-control-in-flex/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:TextInput id="textInput"
            focusThickness="10"
            cornerRadius="10"
            focusRoundedCorners="tl br" />

</mx:Application>

Or, you can set the focusRoundedCorners 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/06/12/rounding-specific-corners-on-a-focus-rectangle-in-the-textinput-control-in-flex/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:Style>
        TextInput {
            focusRoundedCorners: "tl br";
        }
    </mx:Style>

    <mx:TextInput id="textInput"
            focusThickness="10"
            cornerRadius="10" />

</mx:Application>
 
]]> http://blog.flexexamples.com/2008/06/12/rounding-specific-corners-on-a-focus-rectangle-in-the-textinput-control-in-flex/feed/ 4 Setting the focus thickness on a NumericStepper control in Flex http://blog.flexexamples.com/2008/05/24/setting-the-focus-thickness-on-a-numericstepper-control-in-flex/ http://blog.flexexamples.com/2008/05/24/setting-the-focus-thickness-on-a-numericstepper-control-in-flex/#comments Sun, 25 May 2008 02:29:18 +0000 Peter deHaan http://blog.flexexamples.com/2008/05/24/setting-the-focus-thickness-on-a-numericstepper-control-in-flex/ In a previous example, “Setting the focus alpha on a NumericStepper control in Flex”, we saw how you could set the alpha of the focus rectangle for a Flex NumericStepper control by setting the focusAlpha style.

The following example shows how you can set the focus thickness of the focus rectangle by setting the [...]]]> In a previous example, “Setting the focus alpha on a NumericStepper control in Flex”, we saw how you could set the alpha of the focus rectangle for a Flex NumericStepper control by setting the focusAlpha style.

The following example shows how you can set the focus thickness of the focus rectangle by setting the focusThickness style on the Flex NumericStepper control.

Full code after the jump.

View MXML

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

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

            private function numericStepper_change(evt:NumericStepperEvent):void {
                // reset focus rect
                focusManager.setFocus(btn);
                focusManager.setFocus(numericStepper);
            }
        ]]>
    </mx:Script>

    <mx:ApplicationControlBar dock="true">
        <mx:Button id="btn"
                label="click here to remove focus" />
    </mx:ApplicationControlBar>

    <mx:Form>
        <mx:FormItem label="focusThickness:">
            <mx:NumericStepper id="numericStepper"
                    minimum="0"
                    maximum="10"
                    focusThickness="{numericStepper.value}"
                    change="numericStepper_change(event);" />
        </mx:FormItem>
    </mx:Form>

</mx:Application>

View source is enabled in the following example.

You can also set the focusThickness 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/05/24/setting-the-focus-thickness-on-a-numericstepper-control-in-flex/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:Style>
        NumericStepper {
            focusThickness: 10;
        }
    </mx:Style>

    <mx:ApplicationControlBar dock="true">
        <mx:Button id="btn"
                label="click here to remove focus" />
    </mx:ApplicationControlBar>

    <mx:Form>
        <mx:FormItem label="focusThickness:">
            <mx:NumericStepper id="numericStepper"
                    minimum="0"
                    maximum="10" />
        </mx:FormItem>
    </mx:Form>

</mx:Application>

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

View MXML

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

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

            private function numericStepper_change(evt:NumericStepperEvent):void {
                numericStepper.setStyle("focusThickness", evt.value);
                // reset focus rect
                focusManager.setFocus(btn);
                focusManager.setFocus(numericStepper);
            }
        ]]>
    </mx:Script>

    <mx:ApplicationControlBar dock="true">
        <mx:Button id="btn"
                label="click here to remove focus" />
    </mx:ApplicationControlBar>

    <mx:Form>
        <mx:FormItem label="focusThickness:">
            <mx:NumericStepper id="numericStepper"
                    minimum="0"
                    maximum="10"
                    change="numericStepper_change(event);" />
        </mx:FormItem>
    </mx:Form>

</mx:Application>
 
]]> http://blog.flexexamples.com/2008/05/24/setting-the-focus-thickness-on-a-numericstepper-control-in-flex/feed/ 1