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.

 

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2007/09/17/building-a-simple-tip-calculator-in-flex/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:Script>
        <![CDATA[
            private function updateTotal():void {
                var amt:Number = parseFloat(amount.data.toString());
                if (isNaN(amt)) {
                    total.text = "Not a Number";
                    return;
                }
                var tipAmt:Number = amt * tip.value/100;
                total.text = currencyFormatter.format(tipAmt + amt);
            }

            private function dataTipFunc(item:Number):String {
                var amt:Number = parseFloat(amount.data.toString());
                var tipAmt:Number = amt * item/100;
                return item + "% (" + currencyFormatter.format(tipAmt) + ")";
            }

            private function amount_focusOut(evt:FocusEvent):void {
                amount.data = Number(amount.text).toFixed(2);
                amount.text = currencyFormatter.format(amount.data);
            }

            private function amount_focusIn(evt:FocusEvent):void {
                amount.text = amount.data.toString();
            }
        ]]>
    </mx:Script>

    <mx:CurrencyFormatter id="currencyFormatter" precision="2" />

    <mx:Form>
        <mx:FormHeading label="Tip Calculator" />
        <mx:FormItem label="Amount:">
            <mx:TextInput id="amount"
                    data="0"
                    restrict="0-9."
                    change="updateTotal();"
                    focusOut="amount_focusOut(event);"
                    focusIn="amount_focusIn(event);" />
        </mx:FormItem>
        <mx:FormItem label="Tip:">
            <mx:HSlider id="tip"
                    minimum="0"
                    maximum="30"
                    value="15"
                    labels="[0,5,10,15,20,25,30]"
                    snapInterval="1"
                    tickInterval="5"
                    liveDragging="true"
                    change="updateTotal();"
                    showTrackHighlight="true"
                    dataTipFormatFunction="dataTipFunc" />
        </mx:FormItem>
        <mx:FormItem label="Total:" fontWeight="bold">
            <mx:Label id="total" />
        </mx:FormItem>
    </mx:Form>

</mx:Application>

View source is enabled in the following example.

 

The following example shows how you can use the focusIn and focusOut events to highlight the currently focused form item.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2007/09/16/changing-a-form-items-background-color-when-a-child-control-has-focus/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:Style>
        FormItem {
            paddingLeft: 4;
            paddingRight: 4;
            paddingTop: 4;
            paddingBottom: 4;
        }
    </mx:Style>

    <mx:Script>
        <![CDATA[
            private const BACKGROUND_COLOR:Object = "haloBlue";

            private function formItem_focusIn(evt:FocusEvent):void {
                var item:FormItem = FormItem(evt.currentTarget.parent);
                item.setStyle("backgroundAlpha", 0.2);
                item.setStyle("backgroundColor", BACKGROUND_COLOR);
            }

            private function formItem_focusOut(evt:FocusEvent):void {
                var item:FormItem = FormItem(evt.currentTarget.parent);
                item.setStyle("backgroundColor", null);
            }
        ]]>
    </mx:Script>

    <mx:Form>
        <mx:FormItem label="First name:">
            <mx:TextInput id="firstName"
                    focusIn="formItem_focusIn(event);"
                    focusOut="formItem_focusOut(event);" />
        </mx:FormItem>
        <mx:FormItem label="Last name:">
            <mx:TextInput id="lastName"
                    focusIn="formItem_focusIn(event);"
                    focusOut="formItem_focusOut(event);" />
        </mx:FormItem>
    </mx:Form>

</mx:Application>

View source is enabled in the following example.