Making Things Happen

Returning to the HelloWorld application, you’ll now make some things happen.

First, you’ll add a few more sources of user input. You have a name field already, so now you’ll add an age field. Place another Label with the text “My age is:” below the name text input, place a NumericStepper control below that, and give them the id attributes ageLabel and ageNS. The NumericStepper control is like a TextInput control that accepts only numbers and has special keyboard and mouse interactions to make increasing or decreasing the numbers easy. You’ll want to set a couple of properties on the NumericStepper to customize it. The property maximum will set the top value allowed, and the minimum property will set the minimum. Set these to a maximum of 120 and a minimum of 18. This additional code should look like the following:

                    
<mx:Label id="ageLabel" text="My age is:"/>

<mx:NumericStepper id="ageNS" maximum="120" minimum="18" />

Using Pop-up Alerts to Display Information

Now that you have a basic form, you’ll display the data in a pop-up. To do that, you’ll create a function that uses the class called Alert, which is used to display pop-up alerts:

                    
                    import mx.controls.Alert;

public function showInfo():void

{
 
 Alert.show("Your name is " + fullNameTextInput.text + 
 
 " and your age is " + ageNS.value);
 
}

Notice the import statement that imports the Alert class necessary for this function. Remember that when you use code completion, most imports will be written for you automatically.

This function has a few features you haven’t learned about yet. One is the show() method on the Alert class. This is a static method, one that exists on the Alert class itself, that displays a window centered above everything else.

Also note the value property of the NumericStepper control. Because the value property behaves similarly to a TextInput control, you might expect the property you’re looking for is text. However, the NumericStepper actually holds numeric data, so its property is called value instead. Because it is a Number, you can do math calculations with its value property, like
ageNS.value + 10 to add 10 years to your age. (On second thought, maybe taking away 10 years from the age would be better.)

This addition calculation brings up another point. Plus signs (+) are used in ActionScript to both add numbers and piece together text. The use of the plus signs in the case of adding years to your age would be addition, but in the case of the " and your age is " + ageNS.value, the plus sign is used for concatenation, or the linking together of data. What you’re doing in your application is creating a phrase that has dynamic information gathered from your form fields. Although the value property, as you just learned, is numeric, Flex is smart enough to realize that it can’t add a number to a string of text such as " and your age is " so it changes the numeric value into a text value for you. This might not even be something you would’ve noticed, but it’s good to recognize, because this functionality may not work as expected in all situations. See the box “Conversion, Coercion, and Casting” for more information.

One last thing to notice in the example is the way the code breaks across two lines, even though it’s considered one entity. Usually you’ll need to put everything that is a complete statement on one line, such as passing a long parameter into the show() method. But, when you have plus signs or commas, you’re allowed to bend the rules and break the line. For readability, you place an indentation in front of the following line to show that it is a continuation of the previous line. Of course, you could still place all this code on one line, but that may make it difficult to read for some users with smaller screens, causing them to have to scroll horizontally to read all the code.

Note: A good rule of thumb is to set a maximum line length of 80 characters of text in your source code. That way it will be readable to most people.

Figure 6-4. An Alert displaying some information

The next step is to remove the previous setForm() function you created and to register the button’s click event with your new showInfo() function so that when a user clicks the button, a pop-up alert displays. Do that, and then go ahead and run it to see your work. You should see an alert similar to the one in Figure 6-4. The full code for your application so far may look like this:

                    
<?xml version="1.0" encoding="utf-8"?>

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" 

applicationComplete="fullNameTextInput.setFocus()">

<mx:Script>



import mx.controls.Alert;

public function showInfo():void

{
 
 Alert.show("Your name is " + fullNameTextInput.text + 
 
 " and your age is " + ageNS.value);
 
}



</mx:Script>

<mx:Panel id="panel" x="10" y="10" width="250" height="200" 

layout="vertical" title="Howdy Ya'll" paddingLeft="5">

<mx:Label text="My name is:" fontWeight="bold"/>

<mx:TextInput id="fullNameTextInput"/>

<mx:Label id="ageLabel" text="My age is:" fontWeight="bold"/>

<mx:NumericStepper id="ageNS" maximum="120" minimum="18" />

<mx:CheckBox id="expertCheckBox" label="I'm a Flex Expert!"/>

<mx:Button label="Click me" click="showInfo()"/>

</mx:Panel>

</mx:Application>

Using Change Events

So far you’ve worked only with click events, which occur when a Button or other control is clicked. Now you’ll learn how to deal with another type of event, a change event. These often occur when a selection changes or a text or value changes on a control. When a NumericStepper or TextInput changes, the controls fire change events. So, add a listener for the change event on your NumericStepper control that runs the showInfo() function:

                    
<mx:NumericStepper id="ageNS" maximum="120" minimum="18" change="showInfo()" />

Now, when the value of the NumericStepper changes, this event fires, and you’ll see the pop-up alert. The change will occur when either using the mouse to change the value via the arrow buttons, using up and down arrows on the keyboard, or typing in the NumericStepper and then confirming the change (by pressing the Tab key or using the mouse to select another component). Notice that both a Button’s click event and this NumericStepper’s change event are registered with the same showInfo() function. It’s totally fine to do that. Registering multiple functions to listen to one event is part of the power of programming.

Read more from Alaric Cole.