Adding Radio Buttons and Date Fields to the Dashboard

Radio buttons in Flex work differently than in HTML. When you have more than one radio button and you want the user to be able to select only one, you must define a RadioButton-Group. Only one radio button in a RadioButtonGroup can be selected at a time. You will define a RadioButtonGroup in the Dashboard application, enabling the user to view data for either gross sales or net sales, but not both.

1.	Open Dashboard.mxml and locate the <mx:ApplicationControlBar> tag. Immediately after the comparison <mx:LinkButton> tag (the last one), add an <mx:Spacer> tag and set the width to 100%. <mx:Spacer width="100%"/> This tag will simply add space between the current LinkBar control and the RadioButton controls that you will add.
2.	Immediately after the <mx:Spacer> tag, add an <mx:Label> control, set the text property to Start Date, and add an <mx:DateField> tag with an id of startDate. <mx:Label text="Start Date"/> <mx:DateField /> This will create a new date field that the end user can click in, and a calendar date chooser will appear.
3.	Add another <mx:Label> control and set the text property to End Date. Add an <mx:DateField> tag with an id of endDate. <mx:Label text="End Date"/> <mx:DateField /> This will create another new date field that the end user can click in, and a calendar date chooser will appear.
4.	Add a new <mx:RadioButtonGroup> tag and assign it an id of grossOrNetGroup. <mx:RadioButtonGroup /> This will define a new RadioButtonGroup. You will add two new radio buttons to this group in the next step. Because they both belong to this group, the user can choose only one radio button.
5.	Immediately after the <mx:RadioButtonGroup> tag, add a new <mx:RadioButton> tag and assign it an id of gross. Assign the groupName property to the id of the RadioButtonGroup you created, defined previously as grossOrNetGroup. Assign it a label of Gross Sales, a data property of GROSS, and set the selected property as true. <mx:RadioButton groupName="grossOrNetGroup" label="Gross Sales" data="GROSS" selected="true"/> This creates a new radio button on the screen that belongs to the grossOrNetGroup. You have assigned a label of Gross Sales. You can tell which radio button the user has selected through the data property. Because you have set the selected property to true, this radio button will be selected by default.
6.	Immediately after the <mx:RadioButton> tag, add a new <mx:RadioButton> tag and assign it an id of net. Assign the groupName property to the id of the RadioButtonGroup you created, defined previously as grossOrNetGroup, and assign it a label of Net Sales. Also, assign the data property as NET. <mx:RadioButton groupName="grossOrNetGroup" label="Net Sales" data="NET"/>
7.	Save and run the application.