Using “defaultButton” property of containers

At any point of time, you might have come across login type of pages. There, after entering your name & password, you simply hit the Enter button instead of clicking on Submit/Login button. Right? So what if you are creating a similar page in Flex & when the user press the Enter key, you need to do some action? Hey, just before you scratch your brains, take this! There is one property named defaultButton for containers, which will take a huge amount of brain work, otherwise. See below for the action.

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
	<mx:Form x="10" y="10" defaultButton="{submitButton}">
		<mx:FormHeading label="Default button in Form"/>
		<mx:FormItem label="Your name">
			<mx:TextInput id="userName"/>
		</mx:FormItem>
		<mx:FormItem label="Password:">
			<mx:TextInput id="userPass" displayAsPassword="true"/>
		</mx:FormItem>
		<mx:Button id="submitButton" label="Submit" click="submitClickForm();"/>
		<mx:Label id="values"/>
	</mx:Form>
	<mx:Panel x="10" y="178" width="250" height="161" layout="absolute" defaultButton="{subPanButton}" title="Default button in Panel">
		<mx:Label x="10" y="10" text="Your name"/>
		<mx:Label x="10" y="36" text="Password:"/>
		<mx:TextInput x="84" y="8" id="userPanName" width="136"/>
		<mx:TextInput x="84" y="34" id="userPanPass" width="136"/>
		<mx:Button x="10" y="62" id="subPanButton" label="Submit" click="submitClickPan();"/>
		<mx:Label x="10" y="92" id="valuesPan"/>
	</mx:Panel>

	<mx:Script>
		<![CDATA[
			private function submitClickForm():void{
				values.text = "Name: "+userName.text+" & Passoword: "+userPass.text;
			}
			private function submitClickPan():void{
				valuesPan.text = "Name: "+userPanName.text+" & Passoword: "+userPanPass.text;
			}
		]]>
	</mx:Script>

</mx:Application>

Here, there are two containers, one, Form container & two, Panel container. When ever user set the focus to the textfields, the corresponding parent is having focus & hence that container’s defaultButton is having focus. Play around to understand more.

Note:- The Enter key has a special purpose in the ComboBox control. When the drop-down list of a ComboBox control is open, pressing Enter selects the currently highlighted item in the ComboBox control; it does not activate the default button. Also, when the cursor is in a TextArea control, pressing Enter adds a newline; it does not activate the default button.  You will need to rewrite your code to adjust to these types of behaviours.