Flex Examples » displayAsPassword http://blog.flexexamples.com Just a bunch of Adobe Flex Examples Wed, 26 Jan 2011 18:09:51 +0000 en hourly 1 Displaying a Spark TextInput control’s text as a password in Flex Gumbo http://blog.flexexamples.com/2009/01/18/displaying-a-fxtextinput-controls-text-as-a-password-in-flex-gumbo/ http://blog.flexexamples.com/2009/01/18/displaying-a-fxtextinput-controls-text-as-a-password-in-flex-gumbo/#comments Mon, 19 Jan 2009 06:48:02 +0000 Peter deHaan http://blog.flexexamples.com/2009/01/18/displaying-a-fxtextinput-controls-text-as-a-password-in-flex-gumbo/ The following example shows you how you can toggle between plain text and text masked as a password by setting the displayAsPassword property on a Flex Gumbo Spark TextInput control.

Full code after the jump.

To use the following code, you must have Flash Player 10 and a Flex Gumbo SDK installed in [...]]]> The following example shows you how you can toggle between plain text and text masked as a password by setting the displayAsPassword property on a Flex Gumbo Spark TextInput control.

Full code after the jump.

To use the following code, you must have Flash Player 10 and a Flex Gumbo SDK installed in your Flex Builder 3. For more information on downloading and installing the Gumbo SDK into Flex Builder 3, see “Using the beta Gumbo SDK in Flex Builder 3″.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2009/01/18/displaying-a-fxtextinput-controls-text-as-a-password-in-flex-gumbo/ -->
<s:Application name="Spark_TextInput_displayAsPassword_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">

    <mx:ApplicationControlBar width="100%" cornerRadius="0">
        <mx:Form styleName="plain">
            <mx:FormItem label="displayAsPassword:">
                <s:CheckBox id="checkBox" />
            </mx:FormItem>
        </mx:Form>
    </mx:ApplicationControlBar>

    <s:TextInput id="textInput"
            text="The quick brown fox jumps over the lazy dog."
            displayAsPassword="{checkBox.selected}"
            horizontalCenter="0"
            verticalCenter="0" />

</s:Application>

You can also set the displayAsPassword property using ActionScript, as seen in the following example:

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2009/01/18/displaying-a-fxtextinput-controls-text-as-a-password-in-flex-gumbo/ -->
<s:Application name="Spark_TextInput_displayAsPassword_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">

    <fx:Script>
        <![CDATA[
            private function checkBox_change(evt:Event):void {
                textInput.displayAsPassword = checkBox.selected;
            }
        ]]>
    </fx:Script>

    <mx:ApplicationControlBar width="100%" cornerRadius="0">
        <mx:Form styleName="plain">
            <mx:FormItem label="displayAsPassword:">
                <s:CheckBox id="checkBox"
                        change="checkBox_change(event);" />
            </mx:FormItem>
        </mx:Form>
    </mx:ApplicationControlBar>

    <s:TextInput id="textInput"
            text="The quick brown fox jumps over the lazy dog."
            horizontalCenter="0"
            verticalCenter="0" />

</s:Application>

This entry is based on a beta version of the Flex Gumbo 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 Gumbo SDK.

 
]]> http://blog.flexexamples.com/2009/01/18/displaying-a-fxtextinput-controls-text-as-a-password-in-flex-gumbo/feed/ 1 Creating a tool tip on a Flex TextInput control with password masked text http://blog.flexexamples.com/2008/01/28/creating-a-tool-tip-on-a-flex-textinput-control-with-password-masked-text/ http://blog.flexexamples.com/2008/01/28/creating-a-tool-tip-on-a-flex-textinput-control-with-password-masked-text/#comments Mon, 28 Jan 2008 14:38:23 +0000 Peter deHaan http://blog.flexexamples.com/2008/01/28/creating-a-tool-tip-on-a-flex-textinput-control-with-password-masked-text/ The following example shows you how you can use a tool tip on a Flex TextInput control with its displayAsPassword property set to true. By mousing over the credit card number field in the form below, you can see your credit card number in a readable tool tip.

Want the short version? Use a simple [...]]]> The following example shows you how you can use a tool tip on a Flex TextInput control with its displayAsPassword property set to true. By mousing over the credit card number field in the form below, you can see your credit card number in a readable tool tip.

Want the short version? Use a simple binding to bind the tool tip text to the TextInput control’s text, as seen in the following snippet:

<mx:TextInput id="ccNumber"
        text="4111111111111111"
        displayAsPassword="true"
        toolTip="{ccNumber.text}" />

Looking for a longer version? Read on!

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/01/28/creating-a-tool-tip-on-a-flex-textinput-control-with-password-masked-text/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:Script>
        <![CDATA[
            import mx.formatters.DateBase;
        ]]>
    </mx:Script>

    <mx:Form>
        <mx:FormItem label="Name:">
            <mx:TextInput id="ccName"
                    text="JOHN DOE" />
        </mx:FormItem>
        <mx:FormItem label="Number:">
            <mx:TextInput id="ccNumber"
                    text="4111111111111111"
                    displayAsPassword="true"
                    toolTip="{ccNumber.text}" />
        </mx:FormItem>
        <mx:FormItem label="Type:">
            <mx:ComboBox id="ccType"
                    dataProvider="[American Express,MasterCard,Visa]" />
        </mx:FormItem>
        <mx:FormItem label="Expiration:" direction="horizontal">
            <mx:ComboBox id="ccExpMM"
                    initialize="ccExpMM.dataProvider = DateBase.monthNamesShort;" />
            <mx:ComboBox id="ccExpYYYY"
                    dataProvider="[2008,2009,2010]" />
        </mx:FormItem>
    </mx:Form>

</mx:Application>

View source is enabled in the following example.

 
]]> http://blog.flexexamples.com/2008/01/28/creating-a-tool-tip-on-a-flex-textinput-control-with-password-masked-text/feed/ 2 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 Displaying a TextInput control’s text as a password in Flex (redux) http://blog.flexexamples.com/2008/01/27/displaying-a-textinput-controls-text-as-a-password-in-flex-redux/ http://blog.flexexamples.com/2008/01/27/displaying-a-textinput-controls-text-as-a-password-in-flex-redux/#comments Sun, 27 Jan 2008 16:42:45 +0000 Peter deHaan http://blog.flexexamples.com/2008/01/27/displaying-a-textinput-controls-text-as-a-password-in-flex-redux/ We’ve already seen how to get a TextInput control to display its text as a masked password field before in an earlier example, “Displaying a TextInput control’s text as a password in Flex” by setting the displayAsPassword property to true.
The following example will show you how you can listen for the focusIn [...]]]> We’ve already seen how to get a TextInput control to display its text as a masked password field before in an earlier example, “Displaying a TextInput control’s text as a password in Flex” by setting the displayAsPassword property to true.
The following example will show you how you can listen for the focusIn and focusOut events to toggle the displayAsPassword property so that when the password field has focus the text is displayed as plain text, and when the password field does not have focus the text is displayed as masked text.

Full code after the jump.

View MXML

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

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

            private var alert:Alert;

            private function submit_click():void {
                alert = Alert.show("Closing in 3 seconds.",
                                    "Submitting...");
                setTimeout(closeAlert, 3000);
            }

            private function reset_click():void {
                alert = Alert.show("Closing in 1 second.",
                                    "Resetting...");
                username.text = "";
                password.text = "";
                setTimeout(closeAlert, 1000);
            }

            private function closeAlert():void {
                PopUpManager.removePopUp(alert);
            }
        ]]>
    </mx:Script>

    <mx:Panel title="Login">
        <mx:Form>
            <mx:FormItem label="Username:" required="true">
                <mx:TextInput id="username"
                        text="JohnDoe"
                        maxChars="16" />
            </mx:FormItem>
            <mx:FormItem label="Password:" required="true">
                <mx:TextInput id="password"
                        text="p455w0rd"
                        maxChars="16"
                        displayAsPassword="true"
                        focusIn="password.displayAsPassword = false;"
                        focusOut="password.displayAsPassword = true;" />
            </mx:FormItem>
        </mx:Form>
        <mx:ControlBar horizontalAlign="right">
            <mx:Button id="submit"
                    label="Submit"
                    click="submit_click();" />
            <mx:Button id="reset"
                    label="Reset"
                    click="reset_click();" />
        </mx:ControlBar>
    </mx:Panel>

</mx:Application>

View source is enabled in the following example.

 
]]> http://blog.flexexamples.com/2008/01/27/displaying-a-textinput-controls-text-as-a-password-in-flex-redux/feed/ 5 Displaying a TextInput control’s text as a password in Flex http://blog.flexexamples.com/2008/01/05/displaying-a-textinput-controls-text-as-a-password-in-flex/ http://blog.flexexamples.com/2008/01/05/displaying-a-textinput-controls-text-as-a-password-in-flex/#comments Sun, 06 Jan 2008 07:07:19 +0000 Peter deHaan http://blog.flexexamples.com/2008/01/05/displaying-a-textinput-controls-text-as-a-password-in-flex/ The following example shows you how you can toggle between plain text and text masked as a password by setting the displayAsPassword property on a TextInput control in Flex.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?> <!-- http://blog.flexexamples.com/2008/01/05/displaying-a-textinput-controls-text-as-a-password-in-flex/ --> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" verticalAlign="middle" backgroundColor="white"> <mx:ApplicationControlBar dock="true"> <mx:CheckBox id="checkBox" label="displayAsPassword:" [...]]]> The following example shows you how you can toggle between plain text and text masked as a password by setting the displayAsPassword property on a TextInput control in Flex.

Full code after the jump.

View MXML

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

    <mx:ApplicationControlBar dock="true">
        <mx:CheckBox id="checkBox"
                label="displayAsPassword:"
                labelPlacement="left"
                selected="true"
                change="textInput.displayAsPassword = checkBox.selected;" />
    </mx:ApplicationControlBar>

    <mx:TextInput id="textInput"
            text="password"
            displayAsPassword="true" />

</mx:Application>

View source is enabled in the following example.

 
]]> http://blog.flexexamples.com/2008/01/05/displaying-a-textinput-controls-text-as-a-password-in-flex/feed/ 0 Using the TitleWindow container to display status messages http://blog.flexexamples.com/2007/08/22/using-the-titlewindow-container-to-display-status-messages/ http://blog.flexexamples.com/2007/08/22/using-the-titlewindow-container-to-display-status-messages/#comments Thu, 23 Aug 2007 06:10:49 +0000 Peter deHaan http://blog.flexexamples.com/2007/08/22/using-the-titlewindow-container-to-display-status-messages/ Another example of something I’ve seen lately on the Internet, so I thought I’d build it in Flex. This time I usea TitleWindow to display the status message of a login form. You can close the message by clicking the X button in the upper-right corner of the title window.

Note that there is no [...]]]> Another example of something I’ve seen lately on the Internet, so I thought I’d build it in Flex. This time I usea TitleWindow to display the status message of a login form. You can close the message by clicking the X button in the upper-right corner of the title window.

Note that there is no correct login. It will display the error message every time. In a future example I’ll try and add some fancy fade in/out effects or resize effects on the error message to give it that proper “Web 2.0 feel”.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2007/08/22/using-the-titlewindow-container-to-display-status-messages/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:Style>
        TitleWindow {
            cornerRadius: 0;
            backgroundColor: red;
            borderColor: red;
            borderAlpha: 1.0;
        }
    </mx:Style>

    <mx:Script>
        <![CDATA[
            private function showTitleWindow():void {
                titleWindow.height = 28;
            }

            private function hideTitleWindow():void {
                titleWindow.height = 0;
            }
        ]]>
    </mx:Script>

    <mx:VBox>
        <mx:TitleWindow id="titleWindow"
                title="Invalid username and/or password."
                showCloseButton="true"
                width="100%"
                height="0"
                close="hideTitleWindow()" />

        <mx:Form>
            <mx:FormItem label="Username:">
                <mx:TextInput id="username"
                        maxChars="24" />
            </mx:FormItem>
            <mx:FormItem label="Password:">
                <mx:TextInput id="password"
                        maxChars="24"
                        displayAsPassword="true" />
            </mx:FormItem>
            <mx:FormItem>
                <mx:Button label="Login"
                        click="showTitleWindow()" />
            </mx:FormItem>
        </mx:Form>
    </mx:VBox>

</mx:Application>

View source is enabled in the following example.

 
]]> http://blog.flexexamples.com/2007/08/22/using-the-titlewindow-container-to-display-status-messages/feed/ 0