Flex Examples » .errorTip http://blog.flexexamples.com Just a bunch of Adobe Flex Examples Wed, 26 Jan 2011 18:09:51 +0000 en hourly 1 Dynamically styling error tips in Flex http://blog.flexexamples.com/2008/09/26/dynamically-styling-error-tips-in-flex/ http://blog.flexexamples.com/2008/09/26/dynamically-styling-error-tips-in-flex/#comments Sat, 27 Sep 2008 06:34:15 +0000 Peter deHaan http://blog.flexexamples.com/2008/09/26/dynamically-styling-error-tips-in-flex/ In a previous example, “Changing the background color of an error tip in Flex”, we saw how you could change the background color of a Flex error tip by setting the borderColor style on the .errorTip CSS selector.

The following example shows how you can style the Flex .errorTip style dynamically using ActionScript using [...]]]> In a previous example, “Changing the background color of an error tip in Flex”, we saw how you could change the background color of a Flex error tip by setting the borderColor style on the .errorTip CSS selector.

The following example shows how you can style the Flex .errorTip style dynamically using ActionScript using the static StyleManager.getStyleDeclaration() and setStyle() methods.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/09/26/dynamically-styling-error-tips-in-flex/ -->
<mx:Application name="errorTip_borderColor_test_2"
        xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

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

            private function comboBox_valueCommit(evt:FlexEvent):void {
                if (comboBox.selectedIndex > -1) {
                    var value:String = comboBox.selectedItem.data;
                    var cssObj:CSSStyleDeclaration;
                    cssObj = StyleManager.getStyleDeclaration(".errorTip");
                    cssObj.setStyle("borderColor", value);
                    textInput.setStyle("errorColor", value);
                    textInput.errorString = errStr;
                } else {
                    textInput.errorString = "";
                }
            }

            private function button_click(evt:MouseEvent):void {
                comboBox.selectedIndex = -1;
            }
        ]]>
    </mx:Script>

    <mx:Array id="arr">
        <mx:Object label="Red"    data="red" />
        <mx:Object label="Orange" data="haloOrange" />
        <mx:Object label="Yellow" data="yellow" />
        <mx:Object label="Green"  data="haloGreen" />
        <mx:Object label="Blue"   data="haloBlue" />
    </mx:Array>

    <mx:String id="errStr">Oh noes, an errata!</mx:String>

    <mx:ApplicationControlBar dock="true">
        <mx:Form styleName="plain">
            <mx:FormItem label="errorColor:">
                <mx:ComboBox id="comboBox"
                        dataProvider="{arr}"
                        prompt="Please select a color:"
                        valueCommit="comboBox_valueCommit(event);" />
            </mx:FormItem>
        </mx:Form>
        <mx:Spacer width="100%" />
        <mx:Button label="Deselect ComboBox"
                click="button_click(event);" />
    </mx:ApplicationControlBar>

    <mx:TextInput id="textInput" />

</mx:Application>

View source is enabled in the following example.

 
]]> http://blog.flexexamples.com/2008/09/26/dynamically-styling-error-tips-in-flex/feed/ 2 Changing the background color of an error tip in Flex http://blog.flexexamples.com/2008/05/22/changing-the-background-color-of-an-error-tip-in-flex/ http://blog.flexexamples.com/2008/05/22/changing-the-background-color-of-an-error-tip-in-flex/#comments Thu, 22 May 2008 19:27:07 +0000 Peter deHaan http://blog.flexexamples.com/2008/05/22/changing-the-background-color-of-an-error-tip-in-flex/ The following example shows how you can change the background color of a Flex error tip by setting the borderColor style on the .errorTip CSS selector.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?> <!-- http://blog.flexexamples.com/2008/05/22/changing-the-background-color-of-an-error-tip-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; [...]]]> The following example shows how you can change the background color of a Flex error tip by setting the borderColor style on the .errorTip CSS selector.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/05/22/changing-the-background-color-of-an-error-tip-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;
        }

        .errorTip {
            borderColor: haloOrange;
            color: black;
            fontFamily: Base02Embedded;
            fontSize: 16;
            fontWeight: normal;
        }

        TextInput {
            errorColor: haloOrange;
        }
    </mx:Style>

    <mx:TextInput id="textInput"
            errorString="Hey, you missed a spot!" />

</mx:Application>

View source is enabled in the following example.

For an example of setting the .errorTip selector’s borderColor style dynamically using ActionScript, see “Dynamically styling error tips in Flex”.

 
]]> http://blog.flexexamples.com/2008/05/22/changing-the-background-color-of-an-error-tip-in-flex/feed/ 15 Using embedded fonts with tool tips in Flex http://blog.flexexamples.com/2008/03/26/using-embedded-fonts-with-tool-tips-in-flex/ http://blog.flexexamples.com/2008/03/26/using-embedded-fonts-with-tool-tips-in-flex/#comments Thu, 27 Mar 2008 04:33:46 +0000 Peter deHaan http://blog.flexexamples.com/2008/03/26/using-embedded-fonts-with-tool-tips-in-flex/ The following example shows how you can use an embedded font with an error tool tip in Flex.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?> <!-- http://blog.flexexamples.com/2008/03/26/using-embedded-fonts-with-tool-tips-in-flex/ --> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" verticalAlign="middle" backgroundColor="white" creationComplete="init();"> <mx:Style> @font-face { src: local("Comic Sans MS"); fontWeight: normal; fontFamily: ComicSansMSEmbedded; } .errorTip { borderStyle: [...]]]> The following example shows how you can use an embedded font with an error tool tip in Flex.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/03/26/using-embedded-fonts-with-tool-tips-in-flex/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white"
        creationComplete="init();">

    <mx:Style>
        @font-face {
            src: local("Comic Sans MS");
            fontWeight: normal;
            fontFamily: ComicSansMSEmbedded;
        }

        .errorTip {
            borderStyle: "errorTipAbove";
            fontFamily: "ComicSansMSEmbedded";
            fontSize: 12;
            fontWeight: normal;
        }
    </mx:Style>

    <mx:Script>
        <![CDATA[
            import mx.events.ToolTipEvent;
            import mx.controls.ToolTip;

            private function init():void {
                ToolTip.maxWidth = textInput.width;
            }

            private function textInput_toolTipShown(evt:ToolTipEvent):void {
                var tt:ToolTip = evt.toolTip as ToolTip;
                tt.x = textInput.x;
                tt.y = (textInput.y - tt.height);
                tt.rotation = 5;
            }
        ]]>
    </mx:Script>

    <mx:TextInput id="textInput" text="{new Date().toDateString()}"
            errorString="The quick brown fox jumped over the lazy dog"
            toolTipShown="textInput_toolTipShown(event);" />

</mx:Application>

View source is enabled in the following example.

 
]]> http://blog.flexexamples.com/2008/03/26/using-embedded-fonts-with-tool-tips-in-flex/feed/ 5 Trimming strings using the Flex StringUtil class’s trim() method http://blog.flexexamples.com/2007/09/07/trimming-strings-using-the-flex-stringutil-classs-trim-method/ http://blog.flexexamples.com/2007/09/07/trimming-strings-using-the-flex-stringutil-classs-trim-method/#comments Fri, 07 Sep 2007 07:22:58 +0000 Peter deHaan http://blog.flexexamples.com/2007/09/07/trimming-strings-using-the-flex-stringutil-classs-trim-method/ The following example shows you how to use the StringUtil.trim() method in Flex to remove leading and trailing whitespace from form fields before validating user input. This allows you to make sure that user’s don’t try anything sneaky like enter spaces instead of characters to bypass any minimum length validation you may have in place [...]]]> The following example shows you how to use the StringUtil.trim() method in Flex to remove leading and trailing whitespace from form fields before validating user input. This allows you to make sure that user’s don’t try anything sneaky like enter spaces instead of characters to bypass any minimum length validation you may have in place when validating data.

Full code after the jump.

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2007/09/07/trimming-strings-using-the-flex-stringutil-classs-trim-method/ -->
<mx:Application name="StringUtil_trim_test"
        xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">
 
    <mx:Style>
        .errorTip {
            borderColor: haloBlue;
        }
    </mx:Style>
 
    <mx:Script>
        <![CDATA[
            import mx.controls.Alert;
            import mx.controls.TextInput;
            import mx.utils.StringUtil;
            import mx.validators.Validator;
 
            private function trimStr(evt:FocusEvent):void {
                var ti:TextInput = TextInput(evt.currentTarget);
                ti.text = StringUtil.trim(ti.text);
            }
 
            private function validateForm():void {
                var errors:Array = Validator.validateAll(validatorArray);
                if (errors.length) {
                    Alert.show("Form is somehow invalid.", "INVALID");
                } else {
                    Alert.show("Form is valid.", "VALID");
                }
            }
        ]]>
    </mx:Script>
 
    <mx:Array id="validatorArray">
        <mx:StringValidator id="firstNameValidator"
                source="{firstName}"
                property="text"
                required="true" />
        <mx:StringValidator id="lastNameValidator"
                source="{lastName}"
                property="text"
                required="true" />
        <mx:EmailValidator id="emailValidator"
                source="{email}"
                property="text"
                required="true" />
    </mx:Array>
 
    <mx:Form>
        <mx:FormItem label="First name:" required="true">
            <mx:TextInput id="firstName" focusOut="trimStr(event);" />
        </mx:FormItem>
        <mx:FormItem label="Last name:" required="true">
            <mx:TextInput id="lastName" focusOut="trimStr(event);" />
        </mx:FormItem>
        <mx:FormItem label="Email:" required="true">
            <mx:TextInput id="email" focusOut="trimStr(event);" />
        </mx:FormItem>
        <mx:FormItem>
            <mx:Button label="Submit" click="validateForm();" />
        </mx:FormItem>
    </mx:Form>
 
</mx:Application>

View source is enabled in the following example.

 
]]> http://blog.flexexamples.com/2007/09/07/trimming-strings-using-the-flex-stringutil-classs-trim-method/feed/ 7