Creating a User Interface (UI)

1. Identify and describe the basic UI controls used in a Flex application.

   (UI controls include:NumericStepper, TextInput, CheckBox, RadioButton)

• TextInput
• NumericStepper
• CheckBox
• RadioButton

TextInput: 
The TextInput control accepts a single line of data entry. This instance of the TextInput control is displayed with all default properties and styles:<mx:TextInput id=”myInput”/>
NumericStepper:
The NumericStepper is a compound control that’s designed for numeric data entry. It includes a TextInput control for direct entry and a set of buttons that increment and decrement the control’s current value.The NumericStepper doesn’t have its own label property, so it’s typically paired with a Label or wrapped in a FormItem container, which has its own label property. This code declares a simple
NumericStepper wrapped in an HBox with a Label:
<mx:HBox>
<mx:Label text=”Enter value:”/>
<mx:NumericStepper id=”myStepper”/>
</mx:HBox>
A NumericStepper control
The NumericStepper supports these properties that determine its behavior:
minimum: The minimum permitted value; defaults to 0
maximum: The maximum permitted value; defaults to 10

This NumericStepper has a minimum value of 5, a maximum value of 25, and a stepSize of 5: 

CheckBox:
The CheckBox control allows the user to toggle its state to true or false. Selected property causes an icon shaped as a check mark inside a box to be displayed.When selected is false, the icon appears as an empty box.Just as with the Button control that it extends, CheckBox supports the label property. The label appears by default to the right of the icon and is a clickable object; that is, clicking the icon and the label both have the same effect of toggling selected to true or false.

This CheckBox control displays a label of “Option selected”:
<mx:CheckBox id=”myCheckBox” label=”Option selected”/>
At runtime, you determine or set whether the control is checked through its selected property:
private function checkSelected():void
{
if (myCheckBox.selected)
{
Alert.show(“You selected the CheckBox”);
}

else
{
Alert.show(“You didn’t select the CheckBox”);
}
}

RadioButton:
RadioButton controls are designed to be used in groups of controls representing mutually exclusive options. For example, this control represents the value “Small” and has its label set to the same value:
<mx:RadioButton value=”Small” label=”Small”/>
To group multiple radio buttons, use a control named RadioButtonGroup. This control is a non-visual object and provides a way to group RadioButton controls together so that only one of them can be selected at any given time.

 

2. Identify the purpose of UI containers and when to use them. (UI containers  

    include:Group,SkinnableContainer, Application)

• Application
• Group
• Skinnable Container

 Application:
 It’s a type of container with some special mojo that makes it work well as the base

 for everything else. By default, it lets you place components anywhere

 you like, but you can also make it line your components up vertically or

 horizontally.
Group:


SkinnableContainer:

3. Change the look and feel of a design by using API styles, style sheets, Spark skins,  

    filters and blends, and visual customizations by using Halo.

 

 

4. Dynamically change the look of an application by using Spark view states,  
    transitions and effects.

 

5. Position UI elements by using constraint-based layout.

 

 

6. Implement application navigation by using navigator containers.

 

 

7. Customize list-based controls. (Customizing includes: using editors, renderers, label

     functions)

 

 

8. Given a layout type, explain the differences and when to use that layout type.  
    (Layout  types include: percentage based, constraints based, and custom)

 

 

9. Create a custom layout. (Including understanding the differences between  
    container and layout)