[flexcoders] Styling Custom Components

[Varun Shetty]

Hi,

how do i style custom components? Well i do realize that I cna have a style
on the main application and apply it to the custom component, but what if i
want to specify the style within the component itself.

e.g. I am making a input field which has 3 visual states. active, active and
selected, selected visual state.

and of course would love ur comments on the other coding aspect too for the
flex mxml below.

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"; layout="vertical"
themeColor="haloGreen">
<mx:Style>
    .basicTxt {
       borderColor: #71a100;
       color: #055598;
       fontSize: 10;
       fontWeight: bold;
       paddingLeft: 2;
       padding-Top: -5;
    }
    .txtOnSet {
       borderStyle: solid;
       borderColor: #8dc900;
       backgroundColor: #e8f4cc;
       color: #055598;
       paddingLeft: 2;
       fontSize: 10;
       fontWeight: bold;
    }
    .txtInSelection {
        borderColor: #71a100;
        color: #055598;
        fontSize: 10;
        paddingLeft: 2;
        fontWeight: bold;

    }
</mx:Style>
<mx:Script>
    <![CDATA[
        import mx.controls.TextInput;
        private function editInTxt(event:FocusEvent):void {
            event.currentTarget.setStyle("styleName" ,"txtInSelection");
            event.currentTarget.text = "";
        }
        private function editOutTxt(event:FocusEvent):void {
            event.currentTarget.setStyle("styleName" ,"txtOnSet");

        }
    ]]>
</mx:Script>
<mx:Panel paddingBottom="10" paddingLeft="10" paddingRight="10"
paddingTop="10" backgroundColor="#e8f4cc" height="400">
    <mx:VBox verticalGap="3">

        <mx:HBox horizontalGap="3">
            <mx:TextInput id="titleTxt" styleName="basicTxt" text="Title"
focusIn="editInTxt(event);" focusOut="editOutTxt(event);" height="19"
width="65"/>
            <mx:TextInput id="frtName" styleName="basicTxt" text="First
Name" focusIn="editInTxt(event);" focusOut="editOutTxt(event);" height="19"
width="100"/>
            <mx:TextInput id="surName" styleName="basicTxt" text="Surname"
focusIn="editInTxt(event);" focusOut="editOutTxt(event);" height="19"
width="100"/>
            <mx:TextInput id="bday" styleName="basicTxt" text="Birthday"
focusIn="editInTxt(event);" focusOut="editOutTxt(event);" height="19"
width="62"/>
        </mx:HBox>
        <mx:HBox  horizontalGap="3">
            <mx:TextInput id="telTxt" styleName="basicTxt" text="Telephone"
focusIn="editInTxt(event);" focusOut="editOutTxt(event);" height="19"
width="110"/>
            <mx:TextInput id="MobTxt" styleName="basicTxt" text="Mobile
(optional)" focusIn="editInTxt(event);" focusOut="editOutTxt(event);"
height="19" width="110"/>
            <mx:TextInput id="emailTxt" styleName="basicTxt" text="E-Mail"
focusIn="editInTxt(event);" focusOut="editOutTxt(event);" height="19"
width="110"/>
        </mx:HBox>
        <mx:HBox  horizontalGap="3">
            <mx:TextInput id="houTxt" styleName="basicTxt" text="House
Name/Number" focusIn="editInTxt(event);" focusOut="editOutTxt(event);"
height="19" width="160"/>
            <mx:TextInput id="posTxt" styleName="basicTxt" text="Postal
Code" focusIn="editInTxt(event);" focusOut="editOutTxt(event);" height="19"
width="80"/>
            <mx:Button label="Get Address" width="90" height="19"/>
        </mx:HBox>
        <mx:HBox  horizontalGap="3">
            <mx:TextInput id="addTxt" styleName="basicTxt" text="Address"
focusIn="editInTxt(event);" focusOut="editOutTxt(event);" height="19"
width="243"/>
            <mx:HBox horizontalAlign="center" width="90">
                <mx:Button id="nxt" label="Next" height="19"/>
            </mx:HBox>
        </mx:HBox>

    </mx:VBox>

</mx:Panel>

</mx:Application>



--------------------------------------------
what i am trying is to see if i can create an custom text input box, which
would have the style built within the custom component itself.

regards,
Varun shetty