When you program features for (web) application, it’s often useful & good practice to allow users shortcuts for common actions.

This easy snippets shows how to capture ‘new’ or Control+N or Command+N on the Mac.

stage.addEventListener(KeyboardEvent.KEY_DOWN, keyDown);

private function keyDown(e:KeyboardEvent) :void
{
        if(e.commandKey || e.ctrlKey)
        {
                switch(e.keyCode)
                {
                        case Keyboard.N:
                                // do stuff
                        break;
                }
        }

}

The submit button is enabled/disabled automatically based on the form elements’ validations.

The form

<mx:Form x="0" y="90" width="100%" height="100%" id="form1" creationComplete="resetForm()">
	<mx:FormItem label="Email" width="100%">
		<mx:TextInput width="100%" id="txtEmail" change="validateUs()" />
	</mx:FormItem>
	<mx:FormItem label="Password" width="100%">
		<mx:TextInput width="100%" id="txtPassword" displayAsPassword="true" change="validateUs()"/>
	</mx:FormItem>
	<mx:FormItem width="100%">
		<mx:Button id="btnLogin" label="Login" width="85" height="25" click="loginUser()" />
	</mx:FormItem>
</mx:Form>

The validators

<mx:EmailValidator id="val1" source="{txtEmail}" property="text" required="true" />
<mx:StringValidator id="val2" source="{txtPassword}" property="text" required="true" minLength="2" />

The script

private function resetForm() :void
{
	btnLogin.enabled = false;
}
private function validateUs() :void
{
	btnLogin.enabled = (Validator.validateAll([val1,val2]).length == 0);
}

UPDATE: turns out that doesn’t always work. the autoSize property is not reliable at all…

This, should do!

var ta_height:uint = 25;

field.validateNow();

for(var i:int=0; i < field .mx_internal::getTextField().numLines; i++) {
	ta_height += field.mx_internal::getTextField().getLineMetrics(i).height;
}

derivedHeight = ta_height;

Thanks Vaan.

Original post:

Adobe’s dodgy textHeight sure doesn’t do the trick. I end up getting a textfield of 2000px height while it clearly looks like 300 tops.

This, however, works.

the code

private function resizeMe(field:TextArea) :void
{
	field.validateNow();
	field.mx_internal::getTextField().autoSize = TextFieldAutoSize.LEFT;
	field.height = field.mx_internal::getTextField().height;
}

Just use that on your TextArea or Text component:

creationComplete="resizeMe(this.myTextAreaInstance)"

Thanks to Vaan for some insight about the mx_internal::getTextField().

This works:

@font-face
{
	src: url("assets/FontReg.ttf");
	fontFamily: FontReg;
	fontWeight: normal;
	fontStyle: normal;
}

@font-face
{
	src: url("assets/FontMed.ttf");
	fontFamily: FontMed;
	fontWeight: normal;
	fontStyle: normal;
}

This won’t work properly (all ends BOLD):

@font-face {
	src: url("assets/FontReg.ttf");
	fontFamily: FontReg;
	fontWeight: normal;
	fontStyle: normal;
}

@font-face {
	src: url("assets/FontMed.ttf");
	fontFamily: FontMed;
	fontWeight: normal;
	fontStyle: normal;
}

Yeah. Not much to add. I believe it has to do with the way the flex compiler parses the style code.