Join David Gassner for an in-depth discussion in this video Using button controls, part of Flash Builder 4 and Flex 4 Essential Training.
The Flex 4 SDK includes a number button controls, controls that the user interacts with to take some action. I'm going to show you each of these controls in turn and talk about when you use them, and how you use them. For this demonstration, I'll work with this application, ButtonControls.mxml. It's a starter application that just has a BorderContainer with a vertical layout. As I add ButtonControls inside the BorderContainer, they'll stack from top to bottom. I'll double-click the tab at the top of the Editor to look at the code in fullscreen.
First, I'll show you the Spark version of the button control. You start with an s: Button tag, and then you apply a Label. The Label attribute is a string of any length. I'll type in a string of Click me. When the user clicks the button, it dispatches a click event, and you can react to that click event by executing some code. I'll press the Spacebar and then choose the click event from the list and then press Enter or Return to generate a clickHandler.
Before I fill in the generated function's code, I'll complete the Button tag, moving the cursor to the end of the line and typing in a slash and a greater than character. Now I'll go to the clickHandler method. I'll select and delete the comment, and then I'm going to use a very popular class in the Flex SDK called the Alert class. The Alert class presents a message as a pop-up window to the user. Here's how you use it. I'll type in the word 'Alert,' and then I'm going to cause Flash Builder to automatically add an import statement for the Alert class.
I'll press Ctrl+Space, and then Enter, or Return, and choose the Alert class. Flash Builder adds an import statement above the function, and I can now call the Alert class's methods as much as I want. I'll type in a dot, and I'll call a method called show, and I'll pass a simple string in of You clicked the button. Now, I'll talk more about the nature of these events and how you handle them in another video, but for now, all you need to know is that when the user clicks the button, a pop-up window will appear with the message that I typed in.
I'll save the change and run the application. And when it appears in the browser, I'll click the button labeled Click me, and I'll see a pop-up window with the message You clicked the button. So, that's the simplest sort of button that's supported in the Flex SDK. Now, I'll show you another control that has a slightly different behavior. The Flex 4 SDK includes the ToggleButton. This is a new component that didn't exist in Flex 3. In Flex 3, you could do ToggleButtons, but they were handled in a different way. In Flex 4, it's a completely new class.
I'll declare ToggleButton, and I'll give it an ID of myToggle. I'll give it a label of Toggle Me, and just as with the standard button control, it supports the click event. I'll create a click attribute and then generate the clickHandler, and just as before with the Button control, I'll complete the tag by moving the cursor to the end of the line and typing in a slash and a greater than character. The ToggleButton control supports a property called selected, which returns either true or false.
By default, its value is false, but each time the user clicks the button, the value of the selected property toggles between true and false. I'm going to use that Alert class to display the current state of that property. I'll delete the generated comment and type in the beginning code, Alert.show, and then I'll type in the following literal string, The value of myToggle.selected is. And then I'll close the string with the double quote, put in a + operator as a concatenation operator, and then I'll output the value of that expression, myToggle.selected.
Now I'll demonstrate the use of the property, running the application. Each time I click that button, it's going to change the value of the selected property. The first time I click it, it changes to true, the second time, it's false. Also, notice a difference in the appearance of the button. By default, a Toggle button looks just like a standard button, but when you change its value to true, it shows a dark shaded area instead of the original light-colored area. That's the visual indicator to the user that the state of the button has changed. And when you click it again, it returns to its original appearance.
You can modify that appearance by skinning the component, creating a custom skin. That's a skill that I'll show you in another chapter of the video series. Finally, I'm going to show you one other button that's a part of the Flex 4 SDK. This is a control that was part of Flex 3 and has not been replaced in Flex 4. So, if you want to use it, you can still use the original version. It's called a LinkButton. I'll type in a less than character and then 'l-i-n-k,' and I'll choose the LinkButton control. Notice that the LinkButton control is a part of a package called mx.controls, and it uses the MX prefix.
So, this tells you that this control is a member of the MX component group. As with the standard button control, you apply a label. I'll use a label of Click me, just like before, and also just like the button, it dispatches a click event. I'll generate a clickHandler for the Link button. I'll make sure I finish the tag with the slash and a greater than character at the end. And then, once again, I'll use the Alert class to show the user what they clicked. I'll type in Alert.show and then display a literal string of You clicked the link button.
I'll save and run the application. And when it appears, I'll show the appearance of the link button. It appears initially as a simple label, but when the cursor moves over it, it changes color, and then when you release the mouse button, it dispatches the click event, and you can react to that event by executing some ActionScript code. So these are three buttons that you can use in your application: the standard button, the toggle button and the link button.
- Understanding the history of Adobe Flex
- Installing the Flash Builder components
- Using Eclipse views and editors
- Programming with MXML and integrating MXML and ActionScript
- Debugging Flex applications
- Adding visual controls to a Flex application interface
- Displaying images and dynamic data
- Formatting with CSS
- Skinning Spark components with MXML graphics
- Creating data entry form components
- Integrating with Apache, PHP and MySQL
Skill Level Beginner
Q: After importing the Debugging.fxp file following the steps outlined in the “Importing and exporting projects as FXP files” video, several of the applications will not run.
When I attempt to debug or run the Variables.mxml or Watchpoints.mxml applications, I am unsuccessful. Pressing F11 to debug causes Flex to look for an application it CAN run, and runs that one. If I Right-Click one of the aforementioned applications and then click Run Application, an error appears that says “This file cannot be launched.”
What is causing this problem?
A: This is a common issue with Flash Builder. Before pressing F11 (or right-clicking and choosing Run Application), set the current MXML application file as the "default" by right-clicking it and choosing "Set as default application".
This should ensure that the application you want to preview opens in the browser when you press F11.
Q: When trying to specify the fontStyle as italic in both ways described in the first and second videos of the “Using Cascading Style Sheets (CSS)” chapter, only the literal string "italic" seems to work. If I use the constant for the same value like this:
I get a warning that reads:
"Design mode: Error during component layout. Choose Design > Refresh to refresh design mode."
Even if I try to refresh, design mode will not work until I change it back to the literal string. I made sure the import for this namespace was there by pressing Ctrl+spacebar, refreshed design mode several times, and even restarted Flash Builder. However, the only solution seems to be to use the literal. Is there a fix for this?
A: The use of constants and bindings in MXML style attributes results in unpredictable results in Design View, as evidenced by this error. Unfortunately, the best you can expect is that design view will render the presentation, but won't show the results of the style setting, because Design View isn't capable of evaluating MXML bindings without the benefit of Flash Player's runtime capabilities.
Q: Is Flash Builder compatible with Mac OS X 10.7 (Lion)?