Robot+Widgets

I. Introduction
Dr. Horrible, not content with just a run of the mill evil robot has developed the Evil Robot Mark II! Which means you'll need to implement the Evil Robot Training Simulator (TM) Mark II. media type="custom" key="7793733"

 III. Learning Objectives

 * Knowledge**
 * **Widget / Interactor / Interface component** - User interface components are sometimes referred to as widgets. Besides the button, The common widgets include: combo boxes, radio buttons, check boxes, lists, sliders and steppers.
 * **Language reference / API docs** -- The Actionscript language reference, a.k.a. the API documentation tells you how to use pre-written component.
 * Skills**. //By the end of the lesson, you will be able to...//
 * //use check boxes//
 * //use sliders//
 * //use a numeric stepper//
 * //use a color picker//
 * //use radio buttons//
 * //use a combo box//
 * //use lists//

API documentation
Many of the user interface components that you use are written for you. How do you find out how to use them? By consulting the [|documentation]. Whenever a programmer writes code intended to be used by others, the programmer creates and makes available the documentation for that component.

You should also become friends with the [|Developer's Guide] which provides tutorials and explanations of core concepts.

If you do any programming in the future, you will use both of these resources extensively.

User interface components (a.k.a. Widgets, Interactors, etc.) allow you to provide defined input options to the user and allow the user to provide input back to your program. So in that sense, each of these components is like it's own mini user-interface. Your user interface is often just a complex collection of these mini-interfaces.
 * Widgets**

The Button, which you've already seen, is the simplest interface component. It provides a single option (to click or not to click) and the only input/feedback returned is //when// the button was clicked. Let's take a look at how to use the other standard interface components in order of the complexity of options and feedback they provide.

[|Check boxes] are like buttons in that they indicate when they are clicked. However they also indicated one additional piece of information: whether the checkbox is selected or not. Here's what the checkbox looks like in MXML and how to use it's input: code format="mxml" // The checkbox in mxml 
 * Check boxes**

//The event handler private function myCheckbox_changeHandler(event:Event):void{ // you can determine whether the checkbox was selected like this: var isSelected:Boolean = _myCheckbox.selected; } code

[|Sliders] indicate when they are clicked along with numeric value. Here's what the slider looks like in MXML, and how to use it's input: code format="actionscript3"
 * Sliders**



// Here's how to get the value of the slider in actionscript private function myslider_changeHandler(event:SliderEvent):void { // If you know the id of the slider, you can get the value like this: var sliderValue:Number = _mySlider.value;

// If you don't know the id, or have multiple sliders using this function, you can do this: var currentSlider:Slider = Slider(event.currentTarget); sliderValue = String(currentSlider.value); } code

[|Steppers] are just like sliders except that the user clicks the increase and decrease buttons on the stepper rather than dragging a slider thumb.
 * Numeric Steppers**

[|Color pickers] are also like sliders except that the user selects a value from a palette, and the value returned represents a color.
 * Color Pickers**

[|Radio buttons] are kind of funny -- they are halfway between a checkbox and a combo box. Radio buttons are essentially a set of checkboxes with an additional constraint that only one radio button is allowed to be checked at a time. To use radio buttons, you have to create multiple radio buttons and then specify that the radio buttons are all in the same group. This is so when one radio button is selected, it can tell other radio buttons to deselect themselves.
 * Radio Buttons**

code

  

  

private function handleCard(event:ItemClickEvent):void { // This gets the value of the selected radio button, e.g., "MC" var selectedValue:String = event.currentTarget.selectedValue;

// If you know the id, you can do something like: selectedValue = _cardType.selectedValue; } code

A combo box in MXML might look like like this: code
 * Combo Boxes**

       </s:ComboBox>

// To get the selected value you can use an event handler like this: private function action_changeHandler(event:Event){ //If you know the id, you can do something like: var selectedValue:String = _actionCombo.selectedItem.data;

//If you don't kno the id, you can do something like: var currentCombo:ComboBox = ComboBox(event.currentTarget); selectedValue = currentCombo.selectedItem.data; } code Notice first that the combo box has an <ArrayCollection> inside it that has four Objects. Each object has a label which appears as one of the options in the combo box. So for this combobox, the options will be: //Stand, Clap, Jump,// and //Stomp.//

When the user changes the combo box by selecting an option, the combo box will dispatch a "change" event (not a click event like the button).

SelectedItem gets whatever object is currently selected in the combo box. Because we added a "data" field to the objects in the combo box, we can then call .data on the selected item.

** Lists **
A [|List] work just like combo box. The only difference is that a list displays multiple options even before the user clicks on it. Lists also allow you to select multiple values simultaneously.

<span style="font-size: 1.3em; margin: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 5px;">**IV. Scenario**
**Evil Robot Training Simulator Mark II**

**Use Case** 1. Henchman clicks on action 2. Robot does action 3. Henchman changes number of eyes 4. Robot's eyes change 5. Henchman changes robot color 6. Robot's color change 7. Henchman changes legs to wheels 8. Robot's legs change to wheels 9. Henchman adds heart of goal (for deception of course!) 10. Heart of gold added to robot 11. Henchman adds antenna and makes it bigger 12. Robot's antenna is added and lengthened 13. Henchman sets name to MCP 14. Robot's name appears on belt buckle 15. Henchman changes mind and resets the robot to default 16. Robot returns to original state

Here are a few things you should know about Robot. Let's say you have an instance of Robot called _robot, you can use the following functions:
 * _robot.setAction(anAction:String) to animate the robot. You should use RobotAction.STAND, RobotAction.CLAP, RobotAction.STOMP, and RobotAction.JUMP for the values
 * _robot.numEyes is a setter function that takes a number from 0 to 3
 * _robot.bodyColor is a setter that takes a value from a colorpicker to set the robot's color
 * _robot. hasWheel is a setter that can be set to true or false
 * _robot.hasHeart is a setter that can be set to true or false
 * _robot.showAntenna(isVisible:Boolean) sets the antenna to be visible or hidden
 * _robot.antennaScale is a setter than takes a number from 1 to 2 to set the antenna length
 * _robot.nametag is a setter that takes a string to set the robot's name.

<span style="font-size: 1.3em; margin: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 5px;">**V. Program**
Here's the program you'll write: code format="mxml" <?xml version="1.0" encoding="utf-8"?> <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" xmlns:mx="library://ns.adobe.com/flex/mx" xmlns:robot="edu.nu.easterday.robot.*" width="491" height="370" >

 <s:RadioButtonGroup id="radiogroup1" itemClick="locomotion_changeHandler(event.type)"/> </fx:Declarations>

<fx:Script> <![CDATA[ import edu.nu.easterday.robot.RobotAction;

private function action_changeHandler(event:Event):void {               var action:String = _actionCombo.selectedItem.data; _robot.setAction(action); }

private function eyes_changeHandler(event:Event):void {               _robot.numEyes = _eyesSpinner.value }

private function body_changeHandler(event:Event):void {               _robot.bodyColor = _bodyColorPicker.selectedColor; }

private function locomotion_changeHandler(type:String):void{ if(type == "legs"){ _robot.hasWheel = false; }else if(type == "wheel"){ _robot.hasWheel = true; }           }

protected function heartChangeHandler(event:Event):void {               _robot.hasHeart = _heartCheckBox.selected; }

protected function antennaVisibleChangeHandler(event:Event):void{ _robot.showAntenna(_antennaVisible.selected); }

protected function antennaSlider_changeHandler(event:Event):void {               _robot.antennaScale = _antennaSlider.value; }

protected function nameList_changeHandler(event:Event):void {               var n:String = _nameList.selectedItem.label; _robot.nametag = n;           }

private function resetClicked(event:Event):void{ _robot.stand; _robot.numEyes = 2; _robot.bodyColor = 0xFFFFFF; _robot.hasWheel = false; _robot.hasHeart = false; _robot.showAntenna(false); _robot.antennaScale = 1; _robot.nametag = "";

_actionCombo.selectedIndex = 0; _eyesSpinner.value = 2; _bodyColorPicker.selectedColor = 0x000000; radiogroup1.selection = null; _heartCheckBox.selected = false; _antennaVisible.selected = false; _antennaSlider.value = 1; _nameList.selectedIndex = -1; }

]]>   </fx:Script>

<robot:Robot id="_robot" x="50" y="42" width="169" height="291.55"/> <s:Button x="321" y="334" label="Reset" click="resetClicked(event)"/> <s:VGroup x="326" y="38" width="144" height="293" gap="10"> <s:ComboBox width="106"  height="24" id="_actionCombo" change="action_changeHandler(event)" selectedIndex="0" >            <fx:Object label="Stand" data="{RobotAction.STAND}"/> <fx:Object label="Clap" data="{RobotAction.CLAP}"/> <fx:Object label="Jump" data="{RobotAction.JUMP}"/> <fx:Object label="Stomp" data="{RobotAction.STOMP}"/> </s:ArrayCollection> </s:ComboBox> <s:HGroup width="142" height="24"> <s:Label text="{_eyesSpinner.value}" width="36" height="24" verticalAlign="middle" textAlign="center"/> <s:Spinner width="26" id="_eyesSpinner" minimum="1" maximum="3" change="eyes_changeHandler(event)" value="2"/> </s:HGroup> <mx:ColorPicker id="_bodyColorPicker" change="body_changeHandler(event)" width="24" height="24"/> <s:HGroup width="114" height="24" verticalAlign="middle"> <s:RadioButton label="legs" groupName="radiogroup1" width="50" selected="true" /> <s:RadioButton label="wheel" groupName="radiogroup1" /> </s:HGroup> <s:HGroup width="200" height="24"> <s:CheckBox id="_heartCheckBox" label="CheckBox" height="24" change="heartChangeHandler(event)"/> </s:HGroup> <s:HGroup width="142" height="24" verticalAlign="middle"> <s:CheckBox id="_antennaVisible" change="antennaVisibleChangeHandler(event)"/> <s:HSlider height="10" width="105" id="_antennaSlider" minimum="1" maximum="2" stepSize="0.1" change="antennaSlider_changeHandler(event)" />       </s:HGroup> <s:List width="127" height="87" id="_nameList" change="nameList_changeHandler(event)" >            <fx:Object label="Gort" /> <fx:Object label="MCP"   /> <fx:Object label="Marvin" /> </s:ArrayCollection> </s:List> </s:VGroup> <s:VGroup x="228" y="39" width="92" height="292" horizontalAlign="right" gap="10"> <s:Label text="Action" width="113" textAlign="right" verticalAlign="middle" height="24"/> <s:Label text="Eyes" textAlign="right" verticalAlign="middle" height="24"/> <s:Label text="Body" textAlign="right" verticalAlign="middle" height="24"/> <s:Label text="Locomotion" textAlign="right" verticalAlign="middle" height="24"/> <s:Label text="Heart of gold" textAlign="right" verticalAlign="middle" height="24"/> <s:Label text="Antenna length" textAlign="right" verticalAlign="middle" height="24"/> <s:Label text="Name" textAlign="right" verticalAlign="middle" height="24"/> </s:VGroup> </s:Application> code

<span style="font-size: 1.3em; margin: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 5px;">**VI. Self-explain (Try it!)**
Go over each line of the program and explain out loud to yourself what it does. If you don't know exactly what the it does, just try to guess for now.

<span style="font-size: 1.3em; margin: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 5px;">**VII. Program Walkthrough (Try it!)**

 * Create a Flex project
 * Download the Robot.swc library
 * Create the user interface
 * Remember that the radio buttons need to be part of a radio button group
 * Create listeners for each widget. For some widgets, the relevant event is "click", for other widgets it's "change"
 * Inside each event listener, call the appropriate Robot function

<span style="font-size: 1.3em; margin: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 5px;">**VIII. On your own (Try it!)**
You know how to use all the basic user interface components now. Try making your own user interface.

<span style="font-size: 1.3em; margin: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 5px;"> IX. Check yourself

 * What are the common user interface components?
 * For each user interface component, what kind of event does it dispatch?
 * For each user interface component, what kind of data does it provide?